Light dropdown styles (#809)

* feat(dropdown): Add light variation * feat(list-box): Add light variation
carbon-design-system · May 24, 2018 · aa76c18 · aa76c18
1 parent 5becac0
commit aa76c18
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 11 deletions.
diff --git a/src/components/list-box/_list-box.scss b/src/components/list-box/_list-box.scss
@@ -21,7 +21,17 @@ $list-box-menu-width: rem(300px);
     width: $list-box-width;
     height: $list-box-height;
     max-height: $list-box-height;
-    background-color: rgba($field-01, 0.1);
+    background-color: $field-01;
+    border: none;
+    box-shadow: 0 1px 0 0 $text-02;
+    order: 1;
+    cursor: pointer;
+    color: $text-01;
+  }
+
+  // Light variation for 'list-box'
+  .#{$prefix}--list-box--light {
+    background-color: $field-02;
   }
 
   // Disabled state for a `list-box`
@@ -36,10 +46,11 @@ $list-box-menu-width: rem(300px);
   }
 
   // Inline variant for a `list-box`
-  .#{$prefix}--list-box--inline {
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline {
     background-color: inherit;
     width: auto;
     height: $list-box-inline-height;
+    box-shadow: none;
   }
 
   .#{$prefix}--list-box--inline .#{$prefix}--list-box__label {
@@ -65,8 +76,10 @@ $list-box-menu-width: rem(300px);
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
   }
 
-  .#{$prefix}--list-box--inline > .#{$prefix}--list-box__field[aria-expanded='true'] {
+  .#{$prefix}--list-box--inline > .#{$prefix}--list-box__field[aria-expanded='true'],
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline > .#{$prefix}--list-box__field:focus {
     outline: none;
+    box-shadow: none;
   }
 
   // The field we use for input, showing selection, etc.
@@ -82,15 +95,13 @@ $list-box-menu-width: rem(300px);
 
   .#{$prefix}--list-box__field:focus,
   .#{$prefix}--list-box__field[aria-expanded='true'] {
-    outline: 1px solid $brand-01;
+    outline: none;
+    box-shadow: 0 2px 0 0 $brand-01;
   }
 
   .#{$prefix}--list-box__field[disabled] {
     outline: none;
-  }
-
-  .#{$prefix}--list-box__field[aria-expanded='true'] ~ .#{$prefix}--list-box__menu {
-    box-shadow: 0 1px 0 0 $brand-01, 1px 0 0 0 $brand-01, -1px 0 0 0 $brand-01, 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+    opacity: 0.5;
   }
 
   // Label for a `list-box__field`
@@ -207,7 +218,9 @@ $list-box-menu-width: rem(300px);
 
   .#{$prefix}--list-box__menu-item:hover,
   .#{$prefix}--list-box__menu-item--highlighted {
-    background-color: rgba($field-01, 0.1);
+    background-color: $hover-row;
+    outline: 1px solid transparent;
+    text-decoration: underline;
     color: $text-01;
   }
 
@@ -225,6 +238,7 @@ $list-box-menu-width: rem(300px);
     background-color: inherit;
     font-weight: 600;
     outline-offset: 0;
+    min-width: 0;
   }
 
   .#{$prefix}--list-box input[role='combobox']::placeholder {

diff --git a/src/components/list-box/list-box.config.js b/src/components/list-box/list-box.config.js
@@ -13,5 +13,12 @@ module.exports = {
         inline: true,
       },
     },
+    {
+      name: 'light',
+      label: 'Light',
+      context: {
+        light: true,
+      },
+    },
   ],
 };
diff --git a/src/components/list-box/list-box.hbs b/src/components/list-box/list-box.hbs
@@ -1,4 +1,4 @@
-<div class="bx--form-item bx--list-box{{#if inline}} bx--list-box--inline{{/if}}">
+<div class="bx--form-item bx--list-box{{#if inline}} bx--list-box--inline{{/if}}{{#if light}} bx--list-box--light{{/if}}">
   <div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu" aria-expanded="false" aria-haspopup="true">
     <span class="bx--list-box__label">Label</span>
     <div class="bx--list-box__menu-icon">
@@ -9,7 +9,7 @@
     </div>
   </div>
 </div>
-<div class="bx--form-item bx--list-box{{#if inline}} bx--list-box--inline{{/if}}">
+<div class="bx--form-item bx--list-box{{#if inline}} bx--list-box--inline{{/if}}{{#if light}} bx--list-box--light{{/if}}">
   <div role="button" class="bx--list-box__field" tabindex="0" aria-label="close menu" aria-expanded="true" aria-haspopup="true">
     <span class="bx--list-box__label">Label</span>
     <div class="bx--list-box__menu-icon bx--list-box__menu-icon--open">