fix: number input skeleton state sizes (#17825)

* fix: number input skeleton state sizes * Update packages/styles/scss/components/number-input/_number-input.scss Co-authored-by: kennylam <[email protected]> --------- Co-authored-by: kennylam <[email protected]>
carbon-design-system · Oct 29, 2024 · c3b777a · c3b777a
1 parent 77c8980
commit c3b777a
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 2 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -5857,6 +5857,16 @@ Map {
       "hideLabel": Object {
         "type": "bool",
       },
+      "size": Object {
+        "args": Array [
+          Array [
+            "sm",
+            "md",
+            "lg",
+          ],
+        ],
+        "type": "oneOf",
+      },
     },
   },
   "OperationalTag" => Object {

diff --git a/packages/react/src/components/NumberInput/NumberInput.Skeleton.tsx b/packages/react/src/components/NumberInput/NumberInput.Skeleton.tsx
@@ -21,10 +21,16 @@ export interface NumberInputSkeletonProps
    * Specify whether the label should be hidden, or not
    */
   hideLabel?: boolean;
+
+  /**
+   * Specify the size of the Number Input.
+   */
+  size?: 'sm' | 'md' | 'lg';
 }
 function NumberInputSkeleton({
   hideLabel,
   className,
+  size = 'md',
   ...rest
 }: NumberInputSkeletonProps) {
   const prefix = usePrefix();
@@ -33,7 +39,9 @@ function NumberInputSkeleton({
       {!hideLabel && (
         <span className={`${prefix}--label ${prefix}--skeleton`} />
       )}
-      <div className={`${prefix}--number ${prefix}--skeleton`} />
+      <div
+        className={`${prefix}--number ${prefix}--skeleton ${prefix}--number--${size}`}
+      />
     </div>
   );
 }
@@ -48,6 +56,11 @@ NumberInputSkeleton.propTypes = {
    * Specify whether the label should be hidden, or not
    */
   hideLabel: PropTypes.bool,
+
+  /**
+   * Specify the size of the Number Input.
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
 };
 
 export default NumberInputSkeleton;
diff --git a/packages/styles/scss/components/number-input/_number-input.scss b/packages/styles/scss/components/number-input/_number-input.scss
@@ -445,10 +445,12 @@
     content: '';
     inline-size: convert.to-rem(1px);
   }
+
   .#{$prefix}--number__input-wrapper--slug .#{$prefix}--slug::before {
     display: none;
     inset-inline-start: convert.to-rem(-16px);
   }
+
   .#{$prefix}--number__control-btn::after {
     display: block;
     inset-inline-end: 0;
@@ -459,19 +461,23 @@
     display: block;
     inset-inline-end: $spacing-08;
   }
+
   .#{$prefix}--number__input-wrapper--slug
     .#{$prefix}--number__control-btn:focus::before {
     display: none;
   }
+
   .#{$prefix}--number__control-btn:hover::after,
   .#{$prefix}--number__control-btn:hover::before {
     display: none;
     inset-inline-end: 0;
   }
+
   .#{$prefix}--number__input-wrapper:has(.#{$prefix}--number__control-btn:hover)
     ~ .#{$prefix}--number__input-wrapper--slug::after {
     display: none;
   }
+
   .#{$prefix}--number__control-btn:has(.up-icon)::after,
   .#{$prefix}--number__control-btn:has(.up-icon)::before {
     display: none;
@@ -480,10 +486,12 @@
   .#{$prefix}--number__input-wrapper--slug .#{$prefix}--number__invalid {
     inset-inline-end: $spacing-13 - $spacing-05;
   }
+
   .#{$prefix}--number__input-wrapper--slug:has(.#{$prefix}--number__invalid)
     .#{$prefix}--slug::before {
     display: block;
   }
+
   .#{$prefix}--number
     .#{$prefix}--number__input-wrapper--slug
     input[data-invalid],
@@ -500,17 +508,31 @@
 
     padding-inline-end: convert.to-rem(145px);
   }
+
   // Skeleton State
+
   .#{$prefix}--number.#{$prefix}--skeleton {
     @include skeleton;
 
-    block-size: 2.5rem;
     inline-size: 100%;
 
     input[type='number'] {
       display: none;
     }
   }
+
+  .#{$prefix}--number.#{$prefix}--skeleton.#{$prefix}--number--sm {
+    block-size: $spacing-07;
+  }
+
+  .#{$prefix}--number.#{$prefix}--skeleton.#{$prefix}--number--md {
+    block-size: $spacing-08;
+  }
+
+  .#{$prefix}--number.#{$prefix}--skeleton.#{$prefix}--number--lg {
+    block-size: $spacing-09;
+  }
+
   // Windows HCM fix
 
   .#{$prefix}--number__control-btn:hover,
@@ -526,6 +548,7 @@
     @include high-contrast-mode('icon-fill');
   }
 }
+
 .#{$prefix}--number__controls:hover .#{$prefix}--number__control-btn::after {
   display: none;
 }
@@ -538,6 +561,7 @@
   .#{$prefix}--number__control-btn:hover {
   box-shadow: 0 -1px 0 $ai-border-strong inset;
 }
+
 //hide dividers on button focus
 .#{$prefix}--number__controls:focus-within
   .#{$prefix}--number__control-btn::after {