fix(combo-box): support v10 input controls (#2241)

* refactor(list-box): nest warning icon

* docs(combo-box): add examples with selected option

* fix(combo-box): support v10 input controls

* Revert "refactor(list-box): nest warning icon"

This reverts commit b5c33c9.

* refactor(combo-box): nest warning icons

* fix(list-box): style invalid icon for empty input value

* docs(combo-box): add examples for populated inputs

* fix(list-box): add style for populated input

* fix(combo-box): fix a11y attributes

- remove list-box__field tabindex

* fix(combo-box): remove chevron button tabindex

* fix(combo-box): remove input field role

* fix(combo-box): add role to menu

* fix(combo-box): add role and aria-label to menu

* fix(combo-box): add aria-owns and IDs

* fix(list-box): ignore text-input bottom border

* refactor(list-box): use new icon color tokens

* fix(form): target invalid combo box text inputs

* docs(combo-box): add spacer divs for FF overlap

* fix(list-box): change menu icon svg token

* fix(combo-box): override text input defaults

* Revert "docs(combo-box): add spacer divs for FF overlap"

This reverts commit 927026b.

* docs(combo-box): remove spacer line breaks

* docs(combo-box): add dev env specific spacing

demo/js/components/ComponentExample/component-overrides.scss

@@ -6,29 +6,29 @@
   width: 100%;
   max-width: 1000px;
 
-  & > .primary-button button,
-  & > .secondary-button button {
+  &>.primary-button button,
+  &>.secondary-button button {
     margin: 0.5rem;
   }
 
-  & > .detail-page-header--no-tabs > .bx--detail-page-header--no-tabs {
+  &>.detail-page-header--no-tabs>.bx--detail-page-header--no-tabs {
     width: 100%;
     left: 0;
     top: 206px;
   }
 
-  & > .detail-page-header--with-tabs > .bx--detail-page-header--with-tabs {
+  &>.detail-page-header--with-tabs>.bx--detail-page-header--with-tabs {
     width: 100%;
     left: 0;
     top: 206px;
   }
 
-  & > .inline-notification .bx--inline-notification {
+  &>.inline-notification .bx--inline-notification {
     display: inline-flex;
     margin-right: 10rem;
   }
 
-  & > .overflow-menu .bx--overflow-menu {
+  &>.overflow-menu .bx--overflow-menu {
     position: absolute;
     left: 3rem;
 
@@ -67,7 +67,7 @@
     margin-bottom: 0.5rem;
   }
 
-  .data-table > div {
+  .data-table>div {
     width: 100%;
   }
 
@@ -90,7 +90,7 @@
     }
   }
 
-  & .notification > div {
+  & .notification>div {
     max-width: 700px;
   }
 
@@ -121,7 +121,7 @@
     }
   }
 
-  & > .dropdown > div {
+  &>.dropdown>div {
     width: 100%;
     max-width: 502px;
   }
@@ -151,15 +151,15 @@
   }
 
   & .tabs {
-    & > div {
+    &>div {
       min-width: 100%;
 
       @include breakpoint(if(not feature-flag-enabled('components-x'), '768px', '42rem')) {
         min-width: 570px;
       }
     }
 
-    .bx--tabs + div {
+    .bx--tabs+div {
       padding: 0 !important;
       margin-top: 2rem;
     }
@@ -174,9 +174,13 @@
       }
     }
   }
+
+  .combo-box .bx--form-item:nth-last-of-type(-n + 3) {
+    margin-bottom: 10rem;
+  }
 }
 
-.page-header + div > .bx--tabs {
+.page-header+div>.bx--tabs {
   background-color: $field-01;
 
   @include breakpoint(if(not feature-flag-enabled('components-x'), '768px', '42rem')) {

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,8 +32,8 @@
     }
   }
 
-  .#{$prefix}--combo-box.#{$prefix}--list-box[data-invalid] .#{$prefix}--text-input {
-    padding-right: carbon--mini-units(8);
+  .#{$prefix}--combo-box.#{$prefix}--list-box--expanded .#{$prefix}--text-input {
+    border-bottom-color: $ui-03;
   }
 
   .#{$prefix}--combo-box .#{$prefix}--list-box__field,

src/components/combo-box/combo-box.hbs

@@ -14,10 +14,10 @@
     {{/unless}}
     <div
       class="{{@root.prefix}}--combo-box {{@root.prefix}}--list-box{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}">
-      <div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="open menu"
-        aria-expanded="false" aria-haspopup="true">
-        <input class="{{@root.prefix}}--text-input" role="combobox" aria-autocomplete="list" aria-expanded="false"
-          autocomplete="off" value="" id="downshift-input-2" placeholder="Filter...">
+      <div role="combobox" class="{{@root.prefix}}--list-box__field" aria-label="open menu" aria-expanded="false"
+        aria-haspopup="listbox">
+        <input class="{{@root.prefix}}--text-input" aria-autocomplete="list" aria-expanded="false" autocomplete="off"
+          value="" id="downshift-input-2" placeholder="Filter..." aria-label="Filter...">
         <div class="{{@root.prefix}}--list-box__menu-icon">
           {{ carbon-icon 'ChevronDown16' aria-label='Open menu' }}
         </div>
@@ -26,6 +26,54 @@
   </div>
 </div>
 
+<div class="{{@root.prefix}}--form-item">
+  <div class="{{@root.prefix}}--list-box__wrapper{{#if inline}} {{@root.prefix}}--list-box__wrapper--inline{{/if}}">
+    <label class="{{@root.prefix}}--label">Combo box label</label>
+    {{#unless inline}}
+    <div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
+    {{/unless}}
+    <div
+      class="{{@root.prefix}}--combo-box {{@root.prefix}}--list-box{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}">
+      <div role="combobox" class="{{@root.prefix}}--list-box__field" aria-label="open menu" aria-expanded="false"
+        aria-haspopup="listbox">
+        <input class="{{@root.prefix}}--text-input" aria-autocomplete="list" aria-expanded="false" autocomplete="off"
+          value="This is not a value." id="downshift-input-2" placeholder="Filter..." aria-label="Filter...">
+        <div class="{{@root.prefix}}--list-box__selection" role="button">
+          {{ carbon-icon "Close16" aria-label="Clear all" title="Clear all" }}
+        </div>
+        <div class="{{@root.prefix}}--list-box__menu-icon">
+          {{ carbon-icon 'ChevronDown16' aria-label='Open menu' }}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="{{@root.prefix}}--form-item">
+  <div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
+    <label class="{{@root.prefix}}--label">Combo box label</label>
+    {{#unless inline}}
+    <div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
+    {{/unless}}
+    <div
+      class="{{@root.prefix}}--combo-box {{@root.prefix}}--list-box{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}"
+      data-invalid>
+      <div role="combobox" class="{{@root.prefix}}--list-box__field" aria-label="open menu" aria-expanded="false"
+        aria-haspopup="listbox">
+        <input class="{{@root.prefix}}--text-input" aria-autocomplete="list" aria-expanded="false" autocomplete="off"
+          value="" id="downshift-input-2" placeholder="Filter..." aria-label="Filter...">
+        {{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--list-box__invalid-icon')}}
+        <div class="{{@root.prefix}}--list-box__menu-icon">
+          {{ carbon-icon 'ChevronDown16' aria-label='Open menu' }}
+        </div>
+      </div>
+    </div>
+    <div class="{{@root.prefix}}--form-requirement">
+      Validation message here
+    </div>
+  </div>
+</div>
+
 <div class="{{@root.prefix}}--form-item">
   <div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
     <label class="{{@root.prefix}}--label">Combo box label</label>
@@ -35,11 +83,40 @@
     <div
       class="{{@root.prefix}}--combo-box {{@root.prefix}}--list-box{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}"
       data-invalid>
-      {{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--list-box__invalid-icon')}}
-      <div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="open menu"
-        aria-expanded="false" aria-haspopup="true">
-        <input class="{{@root.prefix}}--text-input" role="combobox" aria-autocomplete="list" aria-expanded="false"
-          autocomplete="off" value="" id="downshift-input-2" placeholder="Filter...">
+      <div role="combobox" class="{{@root.prefix}}--list-box__field" aria-label="open menu" aria-expanded="false"
+        aria-haspopup="listbox">
+        <input class="{{@root.prefix}}--text-input" aria-autocomplete="list" aria-expanded="false" autocomplete="off"
+          value="This is not a value." id="downshift-input-2" placeholder="Filter..." aria-label="Filter...">
+        {{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--list-box__invalid-icon')}}
+        <div class="{{@root.prefix}}--list-box__selection" role="button">
+          {{ carbon-icon "Close16" aria-label="Clear all" title="Clear all" }}
+        </div>
+        <div class="{{@root.prefix}}--list-box__menu-icon">
+          {{ carbon-icon 'ChevronDown16' aria-label='Open menu' }}
+        </div>
+      </div>
+    </div>
+    <div class="{{@root.prefix}}--form-requirement">
+      Validation message here
+    </div>
+  </div>
+</div>
+
+<div class="{{@root.prefix}}--form-item">
+  <div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
+    <label class="{{@root.prefix}}--label {{@root.prefix}}--label--disabled">Combo box label</label>
+    {{#unless inline}}
+    <div class="{{@root.prefix}}--form__helper-text {{@root.prefix}}--form__helper-text--disabled">Optional helper text
+      here</div>
+    {{/unless}}
+    <div
+      class="{{@root.prefix}}--combo-box {{@root.prefix}}--list-box {{@root.prefix}}--list-box--disabled{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}"
+      data-invalid>
+      <div role="combobox" class="{{@root.prefix}}--list-box__field" aria-label="open menu" aria-expanded="false"
+        aria-haspopup="true" disabled>
+        <input class="{{@root.prefix}}--text-input" aria-autocomplete="list" aria-expanded="false" autocomplete="off"
+          value="" id="downshift-input-2" placeholder="Filter..." disabled>
+        {{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--list-box__invalid-icon')}}
         <div class="{{@root.prefix}}--list-box__menu-icon">
           {{ carbon-icon 'ChevronDown16' aria-label='Open menu' }}
         </div>
@@ -61,10 +138,14 @@
     <div
       class="{{@root.prefix}}--combo-box {{@root.prefix}}--list-box {{@root.prefix}}--list-box--disabled{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}"
       data-invalid>
-      <div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="open menu"
-        aria-expanded="false" aria-haspopup="true" disabled>
-        <input class="{{@root.prefix}}--text-input" role="combobox" aria-autocomplete="list" aria-expanded="false"
-          autocomplete="off" value="" id="downshift-input-2" placeholder="Filter..." disabled>
+      <div role="combobox" class="{{@root.prefix}}--list-box__field" aria-label="open menu" aria-expanded="false"
+        aria-haspopup="true" disabled>
+        <input class="{{@root.prefix}}--text-input" aria-autocomplete="list" aria-expanded="false" autocomplete="off"
+          value="This is not a value" id="downshift-input-2" placeholder="Filter..." disabled>
+        {{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--list-box__invalid-icon')}}
+        <div class="{{@root.prefix}}--list-box__selection" role="button">
+          {{ carbon-icon "Close16" aria-label="Clear all" title="Clear all" }}
+        </div>
         <div class="{{@root.prefix}}--list-box__menu-icon">
           {{ carbon-icon 'ChevronDown16' aria-label='Open menu' }}
         </div>
@@ -85,10 +166,10 @@
     {{/unless}}
     <div
       class="{{@root.prefix}}--combo-box {{@root.prefix}}--list-box {{@root.prefix}}--list-box--disabled{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}">
-      <div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="open menu"
-        aria-expanded="false" aria-haspopup="true" disabled>
-        <input class="{{@root.prefix}}--text-input" role="combobox" aria-autocomplete="list" aria-expanded="false"
-          autocomplete="off" value="" id="downshift-input-2" placeholder="Filter..." disabled>
+      <div role="combobox" class="{{@root.prefix}}--list-box__field" aria-label="open menu" aria-expanded="false"
+        aria-haspopup="true" disabled>
+        <input class="{{@root.prefix}}--text-input" aria-autocomplete="list" aria-expanded="false" autocomplete="off"
+          value="" id="downshift-input-2" placeholder="Filter..." disabled>
         <div class="{{@root.prefix}}--list-box__menu-icon">
           {{ carbon-icon 'ChevronDown16' aria-label='Open menu' }}
         </div>
@@ -107,15 +188,15 @@
     {{/unless}}
     <div
       class="{{@root.prefix}}--combo-box {{@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}}">
-      <div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="close menu"
-        aria-expanded="true" aria-haspopup="true">
-        <input class="{{@root.prefix}}--text-input" role="combobox" aria-autocomplete="list" aria-expanded="false"
-          autocomplete="off" value="" id="downshift-input-2" placeholder="Filter...">
+      <div role="combobox" class="{{@root.prefix}}--list-box__field" aria-label="close menu" aria-expanded="true"
+        aria-haspopup="listbox">
+        <input class="{{@root.prefix}}--text-input" aria-autocomplete="list" aria-expanded="false" autocomplete="off"
+          value="" id="downshift-input-2" placeholder="Filter..." aria-label="Filter..." aria-owns="list-box__menu-0">
         <div class="{{@root.prefix}}--list-box__menu-icon {{@root.prefix}}--list-box__menu-icon--open">
           {{ carbon-icon 'ChevronDown16' aria-label='Close menu' }}
         </div>
       </div>
-      <ul class="{{@root.prefix}}--list-box__menu">
+      <ul class="{{@root.prefix}}--list-box__menu" role="listbox" id="list-box__menu-0" aria-label="Filter...">
         {{#each items}}
         <li
           class="{{@root.prefix}}--list-box__menu-item{{#if selected}} {{@root.prefix}}--list-box__menu-item--highlighted{{/if}}"
@@ -129,10 +210,87 @@
     </div>
   </div>
 </div>
+
+<div class="{{@root.prefix}}--form-item">
+  <div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
+    <label class="{{@root.prefix}}--label">Combo box label</label>
+    {{#unless inline}}
+    <div class="{{@root.prefix}}--form__helper-text">Optional helper text
+      here
+    </div>
+    {{/unless}}
+    <div
+      class="{{@root.prefix}}--combo-box {{@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}}">
+      <div role="combobox" class="{{@root.prefix}}--list-box__field" aria-label="close menu" aria-expanded="true"
+        aria-haspopup="listbox">
+        <input class="{{@root.prefix}}--text-input" aria-autocomplete="list" aria-expanded="false" autocomplete="off"
+          value="Option 3" id="downshift-input-2" placeholder="Filter..." aria-label="Filter..."
+          aria-owns="list-box__menu-1">
+        <div role="button" class="{{@root.prefix}}--list-box__selection" title="Clear selected item">
+          {{ carbon-icon 'Close16' aria-label="Clear text input" }}
+        </div>
+        <div class="{{@root.prefix}}--list-box__menu-icon {{@root.prefix}}--list-box__menu-icon--open">
+          {{ carbon-icon 'ChevronDown16' aria-label='Close menu' }}
+        </div>
+      </div>
+      <ul class="{{@root.prefix}}--list-box__menu" role="listbox" id="list-box__menu-1" aria-label="Filter...">
+        {{#each items}}
+        <li
+          class="{{@root.prefix}}--list-box__menu-item{{#if selected}} {{@root.prefix}}--list-box__menu-item--highlighted{{/if}}"
+          id="{{id}}">
+          <div class="{{@root.prefix}}--list-box__menu-item__option" tabindex="0">
+            {{label}}
+          </div>
+        </li>
+        {{/each}}
+      </ul>
+    </div>
+  </div>
+</div>
+
+<div class="{{@root.prefix}}--form-item">
+  <div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
+    <label class="{{@root.prefix}}--label">Combo box label</label>
+    {{#unless inline}}
+    <div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
+    {{/unless}}
+    <div
+      class="{{@root.prefix}}--combo-box {{@root.prefix}}--list-box{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}"
+      data-invalid>
+      <div role="combobox" class="{{@root.prefix}}--list-box__field" aria-label="open menu" aria-expanded="false"
+        aria-haspopup="listbox">
+        <input class="{{@root.prefix}}--text-input" aria-autocomplete="list" aria-expanded="false" autocomplete="off"
+          value="Option 3" id="downshift-input-2" placeholder="Filter..." aria-label="Filter..."
+          aria-owns="list-box__menu-2">
+        {{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--list-box__invalid-icon')}}
+        <div role="button" class="{{@root.prefix}}--list-box__selection" title="Clear selected item">
+          {{ carbon-icon 'Close16' aria-label="Clear text input" }}
+        </div>
+        <div class="{{@root.prefix}}--list-box__menu-icon {{@root.prefix}}--list-box__menu-icon--open">
+          {{ carbon-icon 'ChevronDown16' aria-label='Close menu' }}
+        </div>
+      </div>
+      <ul class="{{@root.prefix}}--list-box__menu" role="listbox" id="list-box__menu-2" aria-label="Filter...">
+        {{#each items}}
+        <li
+          class="{{@root.prefix}}--list-box__menu-item{{#if selected}} {{@root.prefix}}--list-box__menu-item--highlighted{{/if}}"
+          id="{{id}}">
+          <div class="{{@root.prefix}}--list-box__menu-item__option" tabindex="0">
+            {{label}}
+          </div>
+        </li>
+        {{/each}}
+      </ul>
+    </div>
+    <div class="{{@root.prefix}}--form-requirement">
+      Validation message here
+    </div>
+  </div>
+</div>
 {{else}}
 <div
   class="{{@root.prefix}}--form-item {{@root.prefix}}--combo-box {{@root.prefix}}--list-box{{#if disabled}} {{@root.prefix}}--list-box--disabled{{/if}}">
-  <div role="button" class="{{@root.prefix}}--list-box__field" aria-label="open menu" aria-expanded="false"
+  <div role="combobox" class="{{@root.prefix}}--list-box__field" aria-label="open menu" aria-expanded="false"
     aria-haspopup="true" {{#if disabled}} disabled{{/if}}> <input class="{{@root.prefix}}--text-input" role="combobox"
       aria-autocomplete="list" aria-expanded="false" autocomplete="off" value="" id="downshift-input-2"
       placeholder="Filter..." {{#if disabled}} disabled{{/if}}>
@@ -146,7 +304,7 @@
 </div>
 <div
   class="{{@root.prefix}}--form-item {{@root.prefix}}--combo-box {{@root.prefix}}--list-box{{#if disabled}} {{@root.prefix}}--list-box--disabled{{/if}}">
-  <div role="button" class="{{@root.prefix}}--list-box__field" aria-label="close menu" aria-expanded="true"
+  <div role="combobox" class="{{@root.prefix}}--list-box__field" aria-label="close menu" aria-expanded="true"
     aria-haspopup="true" {{#if disabled}} disabled{{/if}}> <input class="{{@root.prefix}}--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" {{#if disabled}} disabled{{/if}}>