feat(number-input): update number input controls to new spec (#7687)

* fix(NumberInput): update button positions and icons * feat(NumberInput): reposition and restyle input controls and warnings * feat(NumberInput): add rule divider after warning and invalid icons * fix(number-input): adjust number controls for small field size * fix(number-input): adjust number controls for xl field size * fix(number-input): adjust spacing for xl and sm warning states * test(NumberInput): update icon assertions * fix(number-input): hide rule divider on warning state * fix(number-input): dimension changes during state change * fix(number-input): use light hover background token on number controls * fix(number-input): update invalid input control borders * fix(number-input): use decorative-01 for light dividers * fix(number-input): set disabled input divider color * fix(number-input): cover input control outlines on hover * fix(number-input): unhide dividers on input control hover * fix(number-input): modify display styles for rule dividers * fix(number-input): increase divider z-index for Firefox * fix(number-input): explicitly position left divider for Safari * fix(number-input): remove border on invalid controls * fix(number-input): extend divider rule styles to focus state * fix(number-input): update light invalid hover * fix(number-input): ignore pseudoelements on light variant control focus * fix(number-input): avoid percentage heights for Safari * fix(number-input): avoid conflicting outlines * docs(number-input): annotate Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Feb 24, 2021 · 0cfcf7c · 0cfcf7c
1 parent c2b4f1f
commit 0cfcf7c
Show file tree

Hide file tree

Showing 3 changed files with 260 additions and 57 deletions.
diff --git a/packages/components/src/components/number-input/_number-input.scss b/packages/components/src/components/number-input/_number-input.scss
@@ -33,15 +33,14 @@
     width: 100%;
     min-width: 9.375rem;
     height: rem(40px);
-    padding-right: $carbon--spacing-07;
+    padding-right: rem(128px);
     padding-left: $carbon--spacing-05;
     color: $text-01;
     font-weight: 300;
-
     font-family: carbon--font-family('mono');
     background-color: $field-01;
-    border: none;
-    border-bottom: 1px solid $ui-04;
+    border: 0;
+    border-bottom: rem(1px) solid $ui-04;
     border-radius: 0;
     transition: background-color $duration--fast-01 motion(standard, productive),
       outline $duration--fast-01 motion(standard, productive);
@@ -73,6 +72,14 @@
     }
   }
 
+  .#{$prefix}--number--xl.#{$prefix}--number input[type='number'] {
+    padding-right: rem(144px);
+  }
+
+  .#{$prefix}--number--sm.#{$prefix}--number input[type='number'] {
+    padding-right: rem(112px);
+  }
+
   .#{$prefix}--number input[type='number']:disabled,
   .#{$prefix}--number--readonly input[type='number'] {
     color: $disabled;
@@ -95,9 +102,11 @@
     top: 50%;
     right: 0;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     align-items: center;
     justify-content: center;
+    width: rem(80px);
+    height: 100%;
     transform: translateY(-50%);
 
     // Windows, Firefox HCM Fix
@@ -111,24 +120,36 @@
   .#{$prefix}--number__control-btn {
     @include button-reset;
 
+    position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: rem(32px);
-    height: rem(20px);
+    height: 100%;
     color: $icon-01;
+    border-bottom: rem(1px) solid $ui-04;
+
+    &::before,
+    &::after {
+      position: absolute;
+      top: rem(2px);
+      display: block;
+      width: rem(2px);
+      // height: calc(100% - 4px) is calculated differently in Safari
+      height: rem(36px);
+      background-color: $field-01;
+      content: '';
+    }
 
-    svg {
-      position: relative;
-      fill: currentColor;
+    &::before {
+      left: 0;
     }
 
-    &.up-icon svg {
-      top: rem(5px);
+    &::after {
+      right: 0;
     }
 
-    &.down-icon svg {
-      top: rem(-5px);
+    svg {
+      fill: currentColor;
     }
 
     &:focus {
@@ -141,25 +162,189 @@
 
     &:hover {
       color: $icon-01;
+      background-color: $hover-ui;
       cursor: pointer;
+
+      &::before,
+      &::after {
+        background-color: $hover-ui;
+      }
+    }
+
+    &:focus::before,
+    &:focus::after,
+    &:hover:focus::before,
+    &:hover:focus::after {
+      background-color: transparent;
     }
 
     &:disabled {
       color: $disabled;
+      border-bottom-color: transparent;
       cursor: not-allowed;
     }
   }
 
+  // set orders to facilitate styling for rule dividers
+  .#{$prefix}--number__control-btn.down-icon {
+    order: 1;
+  }
+
+  .#{$prefix}--number__control-btn.up-icon {
+    order: 2;
+  }
+
+  // add top and bottom outlines to number controls when input is focused
+  .#{$prefix}--number
+    input[type='number']:focus
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn {
+    border-bottom-width: 0;
+
+    &:hover {
+      @include focus-outline('outline');
+
+      border: 0;
+    }
+  }
+
+  .#{$prefix}--number
+    input[type='number'][data-invalid]
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn {
+    border-bottom-width: 0;
+  }
+
+  // add invalid outline to number controls only when invalid input is not focused
+  .#{$prefix}--number
+    input[type='number'][data-invalid]:not(:focus)
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:hover {
+    @include focus-outline('invalid');
+  }
+
+  .#{$prefix}--number
+    input[type='number']:focus
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn.up-icon::after {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--number
+    input[type='number'][data-invalid]
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn.up-icon::after {
+    background-color: $support-01;
+  }
+
+  .#{$prefix}--number
+    input[type='number'][data-invalid]:focus
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn.up-icon::after,
+  .#{$prefix}--number
+    input[type='number'][data-invalid]
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn.up-icon:focus::after {
+    background-color: $focus;
+  }
+
+  .#{$prefix}--number__rule-divider {
+    position: absolute;
+    z-index: z('overlay');
+    width: rem(1px);
+    height: rem(16px);
+    background-color: $ui-03;
+
+    &:first-of-type {
+      order: 0;
+    }
+  }
+
+  // rule divider styles
+  .#{$prefix}--number__controls
+    .#{$prefix}--number__rule-divider:first-of-type {
+    left: 0;
+    background-color: transparent;
+  }
+
+  .#{$prefix}--number__invalid
+    + .#{$prefix}--number__controls
+    .#{$prefix}--number__rule-divider:first-of-type {
+    background-color: $ui-03;
+  }
+
+  .#{$prefix}--number--light .#{$prefix}--number__rule-divider,
+  .#{$prefix}--number--light
+    .#{$prefix}--number__invalid
+    + .#{$prefix}--number__controls
+    .#{$prefix}--number__rule-divider:first-of-type {
+    background-color: $decorative-01;
+  }
+
+  .#{$prefix}--number
+    input[type='number']:disabled
+    + .#{$prefix}--number__controls
+    .#{$prefix}--number__rule-divider:first-of-type {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--number
+    input[type='number']:disabled
+    + .#{$prefix}--number__controls
+    .#{$prefix}--number__rule-divider {
+    background-color: $disabled-02;
+  }
+
+  .#{$prefix}--number__control-btn:focus ~ .#{$prefix}--number__rule-divider {
+    background-color: transparent;
+  }
+
   .#{$prefix}--number--readonly .#{$prefix}--number__control-btn {
     display: none;
   }
 
   .#{$prefix}--number__invalid {
     position: absolute;
-    right: 2rem;
+    right: rem(96px);
     fill: $support-01;
   }
 
+  .#{$prefix}--number--xl .#{$prefix}--number__invalid {
+    right: rem(112px);
+  }
+
+  .#{$prefix}--number--sm .#{$prefix}--number__invalid {
+    right: rem(80px);
+  }
+
+  .#{$prefix}--number__invalid + .#{$prefix}--number__rule-divider {
+    position: absolute;
+    right: rem(80px);
+  }
+
+  .#{$prefix}--number--xl
+    .#{$prefix}--number__invalid
+    + .#{$prefix}--number__rule-divider {
+    right: rem(96px);
+  }
+
+  .#{$prefix}--number--sm
+    .#{$prefix}--number__invalid
+    + .#{$prefix}--number__rule-divider {
+    right: rem(64px);
+  }
+
+  .#{$prefix}--number__control-btn.down-icon:hover
+    ~ .#{$prefix}--number__rule-divider,
+  .#{$prefix}--number__control-btn.up-icon:hover
+    + .#{$prefix}--number__rule-divider,
+  .#{$prefix}--number__control-btn.down-icon:focus
+    ~ .#{$prefix}--number__rule-divider,
+  .#{$prefix}--number__control-btn.up-icon:focus
+    + .#{$prefix}--number__rule-divider {
+    background-color: transparent;
+  }
+
   .#{$prefix}--number__invalid--warning {
     fill: $support-03;
   }
@@ -180,6 +365,22 @@
     background-color: $field-02;
   }
 
+  .#{$prefix}--number--light .#{$prefix}--number__control-btn::before,
+  .#{$prefix}--number--light .#{$prefix}--number__control-btn::after {
+    background-color: $field-02;
+  }
+
+  .#{$prefix}--number--light .#{$prefix}--number__control-btn:focus::before,
+  .#{$prefix}--number--light .#{$prefix}--number__control-btn:focus::after {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover,
+  .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover::before,
+  .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover::after {
+    background-color: $hover-light-ui;
+  }
+
   .#{$prefix}--number--mobile {
     width: auto;
     min-width: rem(144px);
@@ -233,8 +434,18 @@
     height: rem(48px);
   }
 
+  .#{$prefix}--number--xl .#{$prefix}--number__controls {
+    width: rem(96px);
+  }
+
   .#{$prefix}--number--xl .#{$prefix}--number__control-btn {
-    height: rem(24px);
+    width: rem(48px);
+
+    &::before,
+    &::after {
+      // height: calc(100% - 4px) is calculated differently in Safari
+      height: rem(44px);
+    }
   }
 
   .#{$prefix}--number--xl.#{$prefix}--number--mobile
@@ -243,22 +454,22 @@
     height: rem(48px);
   }
 
-  .#{$prefix}--number--xl .#{$prefix}--number__control-btn.up-icon svg {
-    // Needed to maintain arrow spacing between input sizes.
-    top: rem(6.6px);
-  }
-
-  .#{$prefix}--number--xl .#{$prefix}--number__control-btn.down-icon svg {
-    // Needed to maintain arrow spacing between input sizes.
-    top: rem(-6.6px);
-  }
-
   .#{$prefix}--number--sm input[type='number'] {
     height: rem(32px);
   }
 
+  .#{$prefix}--number--sm .#{$prefix}--number__controls {
+    width: rem(64px);
+  }
+
   .#{$prefix}--number--sm .#{$prefix}--number__control-btn {
-    height: rem(16px);
+    width: rem(32px);
+
+    &::before,
+    &::after {
+      // height: calc(100% - 4px) is calculated differently in Safari
+      height: rem(28px);
+    }
   }
 
   .#{$prefix}--number--sm.#{$prefix}--number--mobile
@@ -267,16 +478,6 @@
     height: rem(32px);
   }
 
-  .#{$prefix}--number--sm .#{$prefix}--number__control-btn.up-icon svg {
-    // Needed to maintain arrow spacing between input sizes.
-    top: rem(3.4px);
-  }
-
-  .#{$prefix}--number--sm .#{$prefix}--number__control-btn.down-icon svg {
-    // Needed to maintain arrow spacing between input sizes.
-    top: rem(-3.4px);
-  }
-
   //No label positioning adjustment
   .#{$prefix}--number--nolabel .bx--label + .bx--form__helper-text {
     margin-top: 0;