feat(components): add combo-box component (#496)

src/components/combo-box/README.md

@@ -0,0 +1,9 @@
+# `combo-box`
+
+### SCSS
+
+#### Classes
+
+| Name  | Description |
+|:------|:-------------|
+| `.bx--combo-box` | Used on a container node to specify its control type |

src/components/combo-box/_combo-box.scss

@@ -0,0 +1,16 @@
+//-----------------------------
+// ComboBox
+//-----------------------------
+
+@import '../../globals/scss/colors';
+@import '../../globals/scss/css--helpers';
+@import '../../globals/scss/layout';
+@import '../../globals/scss/import-once';
+@import '../../globals/scss/vars';
+@import '../list-box/list-box';
+
+@include exports('combo-box') {
+  .bx--combo-box > .bx--list-box__field {
+    padding: 0;
+  }
+}

src/components/combo-box/combo-box--disabled.html

@@ -0,0 +1,11 @@
+<div class="bx--form-item bx--combo-box bx--list-box bx--list-box--disabled">
+  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu" aria-expanded="false" aria-haspopup="true" disabled="">
+    <input class="bx--text-input" role="combobox" aria-autocomplete="list" aria-expanded="false" autocomplete="off" value="" disabled="" id="downshift-input-13" placeholder="Filter...">
+    <div class="bx--list-box__menu-icon">
+      <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Open menu">
+        <title>Open menu</title>
+        <path d="M10 0L5 5 0 0z"></path>
+      </svg>
+    </div>
+  </div>
+</div>

src/components/combo-box/combo-box.html

@@ -0,0 +1,28 @@
+<div class="bx--form-item bx--combo-box bx--list-box">
+  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu" aria-expanded="false" aria-haspopup="true">
+    <input class="bx--text-input" role="combobox" aria-autocomplete="list" aria-expanded="false" autocomplete="off" value="" id="downshift-input-2" placeholder="Filter...">
+    <div class="bx--list-box__menu-icon">
+      <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Open menu">
+        <title>Open menu</title>
+        <path d="M10 0L5 5 0 0z"></path>
+      </svg>
+    </div>
+  </div>
+</div>
+<div class="bx--form-item bx--combo-box bx--list-box">
+  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="close menu" aria-expanded="true" aria-haspopup="true">
+    <input class="bx--text-input" role="combobox" aria-autocomplete="list" aria-expanded="true" autocomplete="off" value="" id="downshift-input-2" placeholder="Filter..." aria-activedescendant="downshift-1-item-2">
+    <div class="bx--list-box__menu-icon bx--list-box__menu-icon--open">
+      <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Close menu">
+        <title>Close menu</title>
+        <path d="M10 0L5 5 0 0z"></path>
+      </svg>
+    </div>
+  </div>
+  <div class="bx--list-box__menu">
+    <div class="bx--list-box__menu-item" id="downshift-1-item-0">Option 1</div>
+    <div class="bx--list-box__menu-item" id="downshift-1-item-1">Option 2</div>
+    <div class="bx--list-box__menu-item bx--list-box__menu-item--highlighted" id="downshift-1-item-2">Option 3</div>
+    <div class="bx--list-box__menu-item" id="downshift-1-item-3">Option 4</div>
+  </div>
+</div>

src/components/list-box/_list-box.scss

@@ -20,6 +20,7 @@ $list-box-menu-width: rem(300px);
     position: relative;
     width: $list-box-width;
     height: $list-box-height;
+    max-height: $list-box-height;
     background-color: rgba($field-01, 0.1);
   }
 

src/globals/scss/styles.scss

@@ -51,6 +51,7 @@ $deprecations--message: 'Deprecated code was found, this code will be removed be
 @import '../../components/copy-button/copy-button';
 @import '../../components/file-uploader/file-uploader';
 @import '../../components/checkbox/checkbox';
+@import '../../components/combo-box/combo-box';
 @import '../../components/radio-button/radio-button';
 @import '../../components/toggle/toggle';
 @import '../../components/search/search';