fix(ComboBox): match experimental spec (#2158)

* feat(ComboBox): add title and helper text support

* feat(ComboBox): support invalid state

* docs(ComboBox): add knob for light variant

* refactor(ComboBox): match vanilla invalid state

* fix(ListBox): pass aria label and role into menu

* fix(ListBoxMenuIcon): add `role="button"`

* fix(ListBox): require id for listbox menus

* fix(ListBox): add aria attrs for listbox inputs

* fix(ComboBox): pass `isOpen` to `<ListBox>`

* fix(ListBoxField): set default negative tabindex

* fix(ListBox): remove tabindex on wrapper div

* test(ListBox): remove outdated tests

* test(ListBoxField): test modifiable tabindex prop

* chore: update snapshots

* docs: add `ariaLabel` propType

* test: pass in example IDs

* docs(ListBox): remove unused propType

* fix(Dropdown): remove unneeded ListBox prop

* chore: update snapshots

* fix: add IDs for Dropdown and Multiselect control

* chore: update snapshots

* fix(Dropdown): make listbox field tabbable

* fix(MultiSelect): make listbox field tabbable

* fix(FilterableMultiSelect): remove unused prop

* chore: update snapshots

* chore: bump carbon-components version

Author: emyarod

src/components/ComboBox/ComboBox-story.js

@@ -14,26 +14,38 @@ import WithState from '../../tools/withState';
 
 const items = [
   {
-    id: 'option-1',
+    id: 'option-0',
     text: 'Option 1',
   },
   {
-    id: 'option-2',
+    id: 'option-1',
     text: 'Option 2',
   },
   {
-    id: 'option-3',
+    id: 'option-2',
     text: 'Option 3',
+    selected: true,
   },
   {
-    id: 'option-4',
+    id: 'option-3',
     text: 'Option 4',
   },
+  {
+    id: 'option-4',
+    text:
+      'An example option that is really long to show what should be done to handle long text',
+  },
 ];
 
 const props = () => ({
-  disabled: boolean('Disabled (disabled)', false),
+  id: text('Combobox ID (id)', 'carbon-combobox-example'),
   placeholder: text('Placeholder text (placeholder)', 'Filter...'),
+  titleText: text('Title (titleText)', 'Combobox title'),
+  helperText: text('Helper text (helperText)', 'Optional helper text here'),
+  light: boolean('Light (light)', false),
+  disabled: boolean('Disabled (disabled)', false),
+  invalid: boolean('Invalid (invalid)', false),
+  invalidText: text('Invalid text (invalidText)', 'A valid value is required'),
   onChange: action('onChange'),
 });
 

src/components/ComboBox/ComboBox.js

@@ -10,7 +10,9 @@ import Downshift from 'downshift';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { settings } from 'carbon-components';
+import WarningFilled16 from '@carbon/icons-react/lib/warning--filled/16';
 import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox';
+import { componentsX } from '../../internal/FeatureFlags';
 
 const { prefix } = settings;
 
@@ -51,6 +53,11 @@ const findHighlightedIndex = ({ items, itemToString }, inputValue) => {
 
 export default class ComboBox extends React.Component {
   static propTypes = {
+    /**
+     * 'aria-label' of the ListBox component.
+     */
+    ariaLabel: PropTypes.string,
+
     /**
      * An optional className to add to the container node
      */
@@ -64,7 +71,7 @@ export default class ComboBox extends React.Component {
     /**
      * Specify a custom `id` for the input
      */
-    id: PropTypes.string,
+    id: PropTypes.string.isRequired,
 
     /**
      * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
@@ -147,7 +154,7 @@ export default class ComboBox extends React.Component {
     itemToString: defaultItemToString,
     shouldFilterItem: defaultShouldFilterItem,
     type: 'default',
-    ariaLabel: 'ListBox input field',
+    ariaLabel: 'Choose an item',
     light: false,
   };
 
@@ -218,6 +225,8 @@ export default class ComboBox extends React.Component {
       id,
       items,
       itemToString,
+      titleText,
+      helperText,
       placeholder,
       initialSelectedItem,
       ariaLabel,
@@ -231,13 +240,25 @@ export default class ComboBox extends React.Component {
       onInputChange, // eslint-disable-line no-unused-vars
       ...rest
     } = this.props;
-    const className = cx(
-      `${prefix}--form-item`,
-      `${prefix}--combo-box`,
-      containerClassName
-    );
-
-    return (
+    const className = cx(`${prefix}--combo-box`, containerClassName, {
+      [`${prefix}--form-item`]: !componentsX,
+    });
+    const titleClasses = cx(`${prefix}--label`, {
+      [`${prefix}--label--disabled`]: disabled,
+    });
+    const title = titleText ? (
+      <label htmlFor={id} className={titleClasses}>
+        {titleText}
+      </label>
+    ) : null;
+    const helperClasses = cx(`${prefix}--form__helper-text`, {
+      [`${prefix}--form__helper-text--disabled`]: disabled,
+    });
+    const helper = helperText ? (
+      <div className={helperClasses}>{helperText}</div>
+    ) : null;
+    const wrapperClasses = cx(`${prefix}--list-box__wrapper`);
+    const input = (
       <Downshift
         onChange={this.handleOnChange}
         onInputValueChange={this.handleOnInputValueChange}
@@ -260,16 +281,25 @@ export default class ComboBox extends React.Component {
             disabled={disabled}
             invalid={invalid}
             invalidText={invalidText}
+            isOpen={isOpen}
             light={light}
             {...getRootProps({ refKey: 'innerRef' })}>
             <ListBox.Field
+              id={id}
               {...getButtonProps({
                 disabled,
                 onClick: this.onToggleClick(isOpen),
               })}>
+              {componentsX && invalid && (
+                <WarningFilled16
+                  className={`${prefix}--list-box__invalid-icon`}
+                />
+              )}
               <input
                 className={`${prefix}--text-input`}
                 aria-label={ariaLabel}
+                aria-controls={`${id}__menu`}
+                aria-autocomplete="list"
                 ref={this.textInput}
                 {...rest}
                 {...getInputProps({
@@ -291,7 +321,7 @@ export default class ComboBox extends React.Component {
               />
             </ListBox.Field>
             {isOpen && (
-              <ListBox.Menu>
+              <ListBox.Menu aria-label={ariaLabel} id={id}>
                 {this.filterItems(items, itemToString, inputValue).map(
                   (item, index) => (
                     <ListBox.MenuItem
@@ -313,5 +343,15 @@ export default class ComboBox extends React.Component {
         )}
       </Downshift>
     );
+
+    return componentsX ? (
+      <div className={wrapperClasses}>
+        {title}
+        {helper}
+        {input}
+      </div>
+    ) : (
+      input
+    );
   }
 }

src/components/Dropdown/Dropdown-story.js

@@ -46,6 +46,7 @@ const types = {
 };
 
 const props = () => ({
+  id: text('Dropdown ID (id)', 'carbon-dropdown-example'),
   type: select('Dropdown type (type)', types, 'default'),
   label: text('Label (label)', 'Dropdown menu options'),
   ariaLabel: text('Aria Label (ariaLabel)', 'Dropdown'),

src/components/Dropdown/Dropdown-test.js

@@ -23,6 +23,7 @@ describe('Dropdown', () => {
   let mockProps;
   beforeEach(() => {
     mockProps = {
+      id: 'test-dropdown',
       items: generateItems(5, generateGenericItem),
       onChange: jest.fn(),
       label: 'input',

src/components/Dropdown/Dropdown.js

@@ -46,6 +46,11 @@ export default class Dropdown extends React.Component {
       PropTypes.string,
     ]),
 
+    /**
+     * Specify a custom `id`
+     */
+    id: PropTypes.string.isRequired,
+
     /**
      * Specify whether you want the inline version of this control
      */
@@ -195,7 +200,6 @@ export default class Dropdown extends React.Component {
         {title}
         {!inline && helper}
         <Downshift
-          id={id}
           onChange={this.handleOnChange}
           itemToString={itemToString}
           defaultSelectedItem={initialSelectedItem}
@@ -211,10 +215,10 @@ export default class Dropdown extends React.Component {
             getLabelProps,
           }) => (
             <ListBox
+              id={id}
               type={type}
               className={className({ isOpen })}
               disabled={disabled}
-              ariaLabel={ariaLabel}
               isOpen={isOpen}
               invalid={invalid}
               invalidText={invalidText}
@@ -224,7 +228,10 @@ export default class Dropdown extends React.Component {
                   className={`${prefix}--list-box__invalid-icon`}
                 />
               )}
-              <ListBox.Field {...getButtonProps({ disabled })}>
+              <ListBox.Field
+                id={id}
+                tabIndex="0"
+                {...getButtonProps({ disabled })}>
                 <span
                   className={`${prefix}--list-box__label`}
                   {...getLabelProps()}>
@@ -233,7 +240,7 @@ export default class Dropdown extends React.Component {
                 <ListBox.MenuIcon isOpen={isOpen} />
               </ListBox.Field>
               {isOpen && (
-                <ListBox.Menu>
+                <ListBox.Menu aria-label={ariaLabel} id={id}>
                   {items.map((item, index) => (
                     <ListBox.MenuItem
                       key={itemToString(item)}