fix(multi-select): add styles for filterable multiselect inputs (#2265)

* docs(multi-select): add light variant to docs * docs(multi-select): add static filterable examples * fix(multi-select): style filterable multi-selects * fix(multi-select): modify selection chip spacing
carbon-design-system · Apr 4, 2019 · b457d9a · b457d9a
1 parent c136483
commit b457d9a
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 2 deletions.
diff --git a/src/components/multi-select/_multi-select.scss b/src/components/multi-select/_multi-select.scss
@@ -44,6 +44,27 @@
   .#{$prefix}--multi-select .#{$prefix}--list-box__menu-item .#{$prefix}--checkbox:checked ~ .#{$prefix}--checkbox-label-text {
     color: $text-01;
   }
+
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--selected .#{$prefix}--list-box__field {
+    padding-left: $carbon--spacing-03;
+  }
+
+  .#{$prefix}--multi-select--filterable {
+    .#{$prefix}--list-box__selection--multi {
+      position: absolute;
+      left: $carbon--spacing-03;
+      right: auto;
+    }
+  }
+
+  .#{$prefix}--multi-select--selected .#{$prefix}--text-input {
+    // this value will need to change based on the number of digits in
+    // the number of items selected
+    //
+    // i.e. the input field needs adjusted padding to account for the width of
+    // the number in <ListBox.Selection>
+    padding-left: carbon--mini-units(6);
+  }
 }
 
 @include exports('multi-select') {

diff --git a/src/components/multi-select/multi-select.config.js b/src/components/multi-select/multi-select.config.js
@@ -47,6 +47,14 @@ module.exports = {
         items,
       },
     },
+    {
+      name: 'filterable',
+      label: 'Filterable Multi Select',
+      context: {
+        filterable: true,
+        items,
+      },
+    },
     {
       name: 'inline',
       label: 'Inline',
@@ -55,5 +63,13 @@ module.exports = {
         items,
       },
     },
+    {
+      name: 'light',
+      label: 'Light',
+      context: {
+        light: true,
+        items,
+      },
+    },
   ],
 };
diff --git a/src/components/multi-select/multi-select.hbs b/src/components/multi-select/multi-select.hbs
@@ -13,10 +13,14 @@
     <div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
     {{/unless}}
     <div
-      class="{{@root.prefix}}--multi-select {{@root.prefix}}--list-box {{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}">
+      class="{{@root.prefix}}--multi-select {{@root.prefix}}--list-box {{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}{{#if filterable}} {{@root.prefix}}--combo-box {{@root.prefix}}--multi-select--filterable{{/if}}">
       <div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="open menu"
         aria-expanded="false" aria-haspopup="true">
+        {{#if filterable}}
+        <input class="{{@root.prefix}}--text-input" placeholder="Filter...">
+        {{else}}
         <span class="{{@root.prefix}}--list-box__label">Multi select options</span>
+        {{/if}}
         <div class="{{@root.prefix}}--list-box__menu-icon">
           {{ carbon-icon 'ChevronDown16' aria-label='Open menu' }}
         </div>
@@ -31,15 +35,19 @@
     <div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
     {{/unless}}
     <div
-      class="{{@root.prefix}}--multi-select {{@root.prefix}}--list-box {{@root.prefix}}--list-box--expanded{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}">
+      class="{{@root.prefix}}--multi-select {{@root.prefix}}--list-box {{@root.prefix}}--list-box--expanded {{@root.prefix}}--multi-select--selected{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}{{#if filterable}} {{@root.prefix}}--combo-box {{@root.prefix}}--multi-select--filterable{{/if}}">
       <div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="close menu"
         aria-expanded="true" aria-haspopup="true">
         <div role="button" class="{{@root.prefix}}--list-box__selection {{@root.prefix}}--list-box__selection--multi"
           tabindex="0" title="Clear all selected items">
           1
           {{ carbon-icon 'Close16' aria-label='Clear selection' }}
         </div>
+        {{#if filterable}}
+        <input class="{{@root.prefix}}--text-input" placeholder="Filter...">
+        {{else}}
         <span class="{{@root.prefix}}--list-box__label">Multi select options</span>
+        {{/if}}
         <div class="{{@root.prefix}}--list-box__menu-icon">
           {{ carbon-icon 'ChevronUp16' aria-label='Close menu' }}
         </div>