feat(components): add styles for multi-select (#494)

* feat(components): add styles for multi-select * fix(MultiSelect,ListBox): update selectors and HTML examples
carbon-design-system · Jan 11, 2018 · 0b4ccfb · 0b4ccfb
1 parent f723daa
commit 0b4ccfb
Show file tree

Hide file tree

Showing 8 changed files with 1,725 additions and 75 deletions.
diff --git a/src/components/list-box/list-box--dropdown--inline.html b/src/components/list-box/list-box--dropdown--inline.html
@@ -1,4 +1,4 @@
-<div class="bx--list-box bx--list-box--inline">
+<div class="bx--form-item bx--list-box bx--list-box--inline">
   <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,8 +9,7 @@
     </div>
   </div>
 </div>
-<div style="margin-bottom: 2rem;"></div>
-<div class="bx--list-box bx--dropdown-v2 bx--list-box--inline">
+<div class="bx--form-item bx--list-box bx--list-box--inline">
   <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">

diff --git a/src/components/list-box/list-box--dropdown.html b/src/components/list-box/list-box--dropdown.html
@@ -1,4 +1,4 @@
-<div class="bx--list-box">
+<div class="bx--form-item bx--list-box">
   <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,8 +9,7 @@
     </div>
   </div>
 </div>
-<div style="margin-bottom: 2rem;"></div>
-<div class="bx--list-box">
+<div class="bx--form-item bx--list-box">
   <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">
       <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Close menu">

diff --git a/src/components/multi-select/README.md b/src/components/multi-select/README.md
@@ -0,0 +1,9 @@
+# `multi-select`
+
+### SCSS
+
+#### Classes
+
+| Name  | Description |
+|:------|:-------------|
+| `.bx--multi-select` | Used on a container node to specify its control type |
diff --git a/src/components/multi-select/_multi-select.scss b/src/components/multi-select/_multi-select.scss
@@ -0,0 +1,21 @@
+//-----------------------------
+// List Box
+//-----------------------------
+
+@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('multi-select') {
+  .bx--multi-select.bx--combo-box > .bx--list-box__field {
+    padding: 0 1rem;
+  }
+
+  .bx--multi-select.bx--combo-box input[role='combobox'] {
+    padding: 0;
+    outline: none;
+  }
+}
diff --git a/src/components/multi-select/multi-select--inline.html b/src/components/multi-select/multi-select--inline.html
@@ -0,0 +1,80 @@
+<div class="bx--form-item bx--multi-select bx--list-box bx--list-box--inline">
+  <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">
+      <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--multi-select bx--list-box bx--list-box--inline">
+  <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">
+      <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">
+      <div class="bx--form-item bx--checkbox-wrapper">
+        <label for="downshift-1-item-0" class="bx--checkbox-label">
+          <input type="checkbox" name="Option 1" readonly="" tabindex="-1" class="bx--checkbox" id="downshift-1-item-0" value="on">
+          <span class="bx--checkbox-appearance">
+            <svg class="bx--checkbox-checkmark" fill-rule="evenodd" height="9" name="checkmark" role="img" viewBox="0 0 12 9" width="12" aria-label="Select this item">
+              <title>Select this item</title>
+              <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+            </svg>
+          </span>
+          <span class="bx--checkbox-label-text">Option 1</span>
+        </label>
+      </div>
+    </div>
+    <div class="bx--list-box__menu-item" id="downshift-1-item-1">
+      <div class="bx--form-item bx--checkbox-wrapper">
+        <label for="downshift-1-item-1" class="bx--checkbox-label">
+          <input type="checkbox" name="Option 2" readonly="" tabindex="-1" class="bx--checkbox" id="downshift-1-item-1" value="on">
+          <span class="bx--checkbox-appearance">
+            <svg class="bx--checkbox-checkmark" fill-rule="evenodd" height="9" name="checkmark" role="img" viewBox="0 0 12 9" width="12" aria-label="Select this item">
+              <title>Select this item</title>
+              <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+            </svg>
+          </span>
+          <span class="bx--checkbox-label-text">Option 2</span>
+        </label>
+      </div>
+    </div>
+    <div class="bx--list-box__menu-item" id="downshift-1-item-2">
+      <div class="bx--form-item bx--checkbox-wrapper">
+        <label for="downshift-1-item-2" class="bx--checkbox-label">
+          <input type="checkbox" name="Option 3" readonly="" tabindex="-1" class="bx--checkbox" id="downshift-1-item-2" value="on">
+          <span class="bx--checkbox-appearance">
+            <svg class="bx--checkbox-checkmark" fill-rule="evenodd" height="9" name="checkmark" role="img" viewBox="0 0 12 9" width="12" aria-label="Select this item">
+              <title>Select this item</title>
+              <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+            </svg>
+          </span>
+          <span class="bx--checkbox-label-text">Option 3</span>
+        </label>
+      </div>
+    </div>
+    <div class="bx--list-box__menu-item" id="downshift-1-item-3">
+      <div class="bx--form-item bx--checkbox-wrapper">
+        <label for="downshift-1-item-3" class="bx--checkbox-label">
+          <input type="checkbox" name="Option 4" readonly="" tabindex="-1" class="bx--checkbox" id="downshift-1-item-3" value="on">
+          <span class="bx--checkbox-appearance">
+            <svg class="bx--checkbox-checkmark" fill-rule="evenodd" height="9" name="checkmark" role="img" viewBox="0 0 12 9" width="12" aria-label="Select this item">
+              <title>Select this item</title>
+              <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+            </svg>
+          </span>
+          <span class="bx--checkbox-label-text">Option 4</span>
+        </label>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/components/multi-select/multi-select.html b/src/components/multi-select/multi-select.html
@@ -0,0 +1,80 @@
+<div class="bx--form-item bx--multi-select bx--list-box">
+  <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">
+      <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--multi-select bx--list-box">
+  <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">
+      <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">
+      <div class="bx--form-item bx--checkbox-wrapper">
+        <label for="downshift-1-item-0" class="bx--checkbox-label">
+          <input type="checkbox" name="Option 1" readonly="" tabindex="-1" class="bx--checkbox" id="downshift-1-item-0" value="on">
+          <span class="bx--checkbox-appearance">
+            <svg class="bx--checkbox-checkmark" fill-rule="evenodd" height="9" name="checkmark" role="img" viewBox="0 0 12 9" width="12" aria-label="Select this item">
+              <title>Select this item</title>
+              <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+            </svg>
+          </span>
+          <span class="bx--checkbox-label-text">Option 1</span>
+        </label>
+      </div>
+    </div>
+    <div class="bx--list-box__menu-item" id="downshift-1-item-1">
+      <div class="bx--form-item bx--checkbox-wrapper">
+        <label for="downshift-1-item-1" class="bx--checkbox-label">
+          <input type="checkbox" name="Option 2" readonly="" tabindex="-1" class="bx--checkbox" id="downshift-1-item-1" value="on">
+          <span class="bx--checkbox-appearance">
+            <svg class="bx--checkbox-checkmark" fill-rule="evenodd" height="9" name="checkmark" role="img" viewBox="0 0 12 9" width="12" aria-label="Select this item">
+              <title>Select this item</title>
+              <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+            </svg>
+          </span>
+          <span class="bx--checkbox-label-text">Option 2</span>
+        </label>
+      </div>
+    </div>
+    <div class="bx--list-box__menu-item" id="downshift-1-item-2">
+      <div class="bx--form-item bx--checkbox-wrapper">
+        <label for="downshift-1-item-2" class="bx--checkbox-label">
+          <input type="checkbox" name="Option 3" readonly="" tabindex="-1" class="bx--checkbox" id="downshift-1-item-2" value="on">
+          <span class="bx--checkbox-appearance">
+            <svg class="bx--checkbox-checkmark" fill-rule="evenodd" height="9" name="checkmark" role="img" viewBox="0 0 12 9" width="12" aria-label="Select this item">
+              <title>Select this item</title>
+              <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+            </svg>
+          </span>
+          <span class="bx--checkbox-label-text">Option 3</span>
+        </label>
+      </div>
+    </div>
+    <div class="bx--list-box__menu-item" id="downshift-1-item-3">
+      <div class="bx--form-item bx--checkbox-wrapper">
+        <label for="downshift-1-item-3" class="bx--checkbox-label">
+          <input type="checkbox" name="Option 4" readonly="" tabindex="-1" class="bx--checkbox" id="downshift-1-item-3" value="on">
+          <span class="bx--checkbox-appearance">
+            <svg class="bx--checkbox-checkmark" fill-rule="evenodd" height="9" name="checkmark" role="img" viewBox="0 0 12 9" width="12" aria-label="Select this item">
+              <title>Select this item</title>
+              <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
+            </svg>
+          </span>
+          <span class="bx--checkbox-label-text">Option 4</span>
+        </label>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/globals/scss/styles.scss b/src/globals/scss/styles.scss
@@ -76,6 +76,7 @@ $deprecations--message: 'Deprecated code was found, this code will be removed be
 @import '../../components/loading/loading';
 @import '../../components/modal/modal';
 @import '../../components/module/module';
+@import '../../components/multi-select/multi-select';
 @import '../../components/notification/inline-notification';
 @import '../../components/notification/toast-notification';
 @import '../../components/tooltip/tooltip';