fix(combo-box): support v10 input controls

carbon-design-system · Mar 29, 2019 · 0a006e7 · 0a006e7
1 parent efc93f3
commit 0a006e7
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 19 deletions.
diff --git a/src/components/combo-box/_combo-box.scss b/src/components/combo-box/_combo-box.scss
@@ -22,8 +22,6 @@
 
 @mixin combo-box--x {
   .#{$prefix}--combo-box .#{$prefix}--text-input {
-    padding-right: $carbon--spacing-09;
-
     &::placeholder {
       color: $text-02;
       opacity: 1;
@@ -34,10 +32,6 @@
     }
   }
 
-  .#{$prefix}--combo-box.#{$prefix}--list-box[data-invalid] .#{$prefix}--text-input {
-    padding-right: carbon--mini-units(8);
-  }
-
   .#{$prefix}--combo-box .#{$prefix}--list-box__field,
   .#{$prefix}--combo-box.#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field {
     padding: 0;

diff --git a/src/components/list-box/_list-box.scss b/src/components/list-box/_list-box.scss
@@ -472,7 +472,7 @@ $list-box-menu-width: rem(300px);
   }
 
   .#{$prefix}--list-box.#{$prefix}--list-box--inline .#{$prefix}--list-box__menu-icon {
-    padding: 0 $carbon--spacing-03;
+    right: $carbon--spacing-03;
   }
 
   .#{$prefix}--list-box.#{$prefix}--list-box--inline .#{$prefix}--list-box__invalid-icon {
@@ -512,6 +512,38 @@ $list-box-menu-width: rem(300px);
     border-bottom: none; // Use border on list box instead
   }
 
+  // populated input field
+  .#{$prefix}--list-box__field .#{$prefix}--text-input[value] {
+    padding-right: carbon--mini-units(9);
+  }
+
+  // invalid && populated input field
+  .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field .#{$prefix}--text-input[value] {
+    padding-right: rem(98px); // to account for clear input button outline
+  }
+
+  .#{$prefix}--list-box[data-invalid]
+    .#{$prefix}--list-box__field
+    .#{$prefix}--text-input[value]
+    + .#{$prefix}--list-box__invalid-icon {
+    right: rem(66px); // to account for clear input button outline
+  }
+
+  // empty input field
+  .#{$prefix}--list-box__field .#{$prefix}--text-input[value=''] {
+    padding-right: $carbon--spacing-09;
+  }
+
+  // invalid && empty input field
+  .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field .#{$prefix}--text-input[value=''] {
+    padding-right: carbon--mini-units(9);
+  }
+
+  // disabled && invalid && empty input field
+  .#{$prefix}--list-box--disabled[data-invalid] .#{$prefix}--list-box__field .#{$prefix}--text-input[value=''] {
+    padding-right: $carbon--spacing-09;
+  }
+
   // Label for a `list-box__field`
   .#{$prefix}--list-box__label {
     @include type-style('body-short-01');
@@ -524,13 +556,9 @@ $list-box-menu-width: rem(300px);
 
   // Menu status inside of a `list-box__field`
   .#{$prefix}--list-box__menu-icon {
-    display: inline-block;
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
+    right: $carbon--spacing-05;
     height: 100%;
-    padding: 0 1rem;
     transition: transform $duration--fast-02 motion(standard, productive);
     cursor: pointer;
   }
@@ -546,21 +574,24 @@ $list-box-menu-width: rem(300px);
 
   // Selection indicator for a `list-box__field`
   .#{$prefix}--list-box__selection {
-    display: inline-block;
     position: absolute;
-    top: 0;
-    right: rem(26px);
-    bottom: 0;
-    height: rem(40px);
-    padding: 0 1rem;
+    right: rem(33px); // to preserve .5rem space between icons according to spec
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: rem(30px);
+    width: rem(30px);
     cursor: pointer;
     user-select: none;
     transition: background-color $duration--fast-02 motion(standard, productive);
+
+    &:focus {
+      @include focus-outline('outline');
+    }
   }
 
   .#{$prefix}--list-box__selection > svg {
     fill: $ui-05;
-    height: 100%;
   }
 
   // Modifier for a selection to show that multiple selections have been made
@@ -573,6 +604,7 @@ $list-box-menu-width: rem(300px);
     padding: 0;
     background-color: $inverse-02;
     height: rem(24px);
+    width: auto;
     color: $inverse-01;
     line-height: 0;
     padding: rem(8px);