fix(DropdownV2): match experimental spec

package.json

@@ -181,7 +181,7 @@
     "babel-plugin-dev-expression": "^0.2.1",
     "babel-plugin-react-docgen": "^2.0.0",
     "bowser": "^1.6.1",
-    "carbon-components": "^9.87.2",
+    "carbon-components": "^9.90.9",
     "carbon-icons": "^7.0.5",
     "chalk": "^2.3.0",
     "cli-table": "^0.3.0",

src/components/DropdownV2/DropdownV2-story.js

@@ -47,12 +47,17 @@ const types = {
 
 const props = () => ({
   type: select('Dropdown type (type)', types, 'default'),
-  label: text('Label (label)', 'Label'),
+  label: text('Label (label)', 'Dropdown menu options'),
   ariaLabel: text('Aria Label (ariaLabel)', 'Dropdown'),
   disabled: boolean('Disabled (disabled)', false),
   light: boolean('Light variant (light)', false),
   titleText: text('Title (titleText)', 'This is not a dropdown title.'),
   helperText: text('Helper text (helperText)', 'This is not some helper text.'),
+  invalid: boolean('Show form validation UI (invalid)', false),
+  invalidText: text(
+    'Form validation UI content (invalidText)',
+    'A valid value is required'
+  ),
 });
 
 const itemToElement = item => {

src/components/DropdownV2/DropdownV2.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;
 
@@ -44,6 +46,21 @@ export default class DropdownV2 extends React.Component {
       PropTypes.string,
     ]),
 
+    /**
+     * Specify whether you want the inline version of this control
+     */
+    inline: PropTypes.bool,
+
+    /**
+     * Specify if the currently selected value is invalid.
+     */
+    invalid: PropTypes.bool,
+
+    /**
+     * Message which is displayed if the value is invalid.
+     */
+    invalidText: PropTypes.string,
+
     /**
      * Helper function passed to downshift that allows the library to render a
      * given item to a string label. By default, it extracts the `label` field
@@ -130,85 +147,117 @@ export default class DropdownV2 extends React.Component {
       type,
       initialSelectedItem,
       selectedItem,
-      light,
       id,
       titleText,
       helperText,
+      light,
+      invalid,
+      invalidText,
     } = this.props;
-    const className = cx(`${prefix}--dropdown`, containerClassName, {
-      [`${prefix}--dropdown--light`]: light,
+    const inline = type === 'inline';
+    const className = ({ isOpen }) =>
+      cx(`${prefix}--dropdown`, containerClassName, {
+        [`${prefix}--dropdown--invalid`]: invalid,
+        [`${prefix}--dropdown--open`]: isOpen,
+        [`${prefix}--dropdown--inline`]: inline,
+        [`${prefix}--dropdown--disabled`]: disabled,
+        [`${prefix}--dropdown--light`]: light,
+      });
+    const titleClasses = cx(`${prefix}--label`, {
+      [`${prefix}--label--disabled`]: disabled,
     });
     const title = titleText ? (
-      <label htmlFor={id} className={`${prefix}--label`}>
+      <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={`${prefix}--form__helper-text`}>{helperText}</div>
+      <div className={helperClasses}>{helperText}</div>
     ) : null;
+    const wrapperClasses = cx(
+      `${prefix}--dropdown__wrapper`,
+      `${prefix}--list-box__wrapper`,
+      {
+        [`${prefix}--dropdown__wrapper--inline`]: inline,
+        [`${prefix}--list-box__wrapper--inline`]: inline,
+        [`${prefix}--dropdown__wrapper--inline--invalid`]: inline && invalid,
+        [`${prefix}--list-box__wrapper--inline--invalid`]: inline && invalid,
+      }
+    );
 
     // needs to be Capitalized for react to render it correctly
     const ItemToElement = itemToElement;
     const Dropdown = (
-      <Downshift
-        id={id}
-        onChange={this.handleOnChange}
-        itemToString={itemToString}
-        defaultSelectedItem={initialSelectedItem}
-        selectedItem={selectedItem}>
-        {({
-          isOpen,
-          itemToString,
-          selectedItem,
-          highlightedIndex,
-          getRootProps,
-          getButtonProps,
-          getItemProps,
-          getLabelProps,
-        }) => (
-          <ListBox
-            type={type}
-            className={className}
-            disabled={disabled}
-            ariaLabel={ariaLabel}
-            {...getRootProps({ refKey: 'innerRef' })}>
-            <ListBox.Field {...getButtonProps({ disabled })}>
-              <span
-                className={`${prefix}--list-box__label`}
-                {...getLabelProps()}>
-                {selectedItem ? itemToString(selectedItem) : label}
-              </span>
-              <ListBox.MenuIcon isOpen={isOpen} />
-            </ListBox.Field>
-            {isOpen && (
-              <ListBox.Menu>
-                {items.map((item, index) => (
-                  <ListBox.MenuItem
-                    key={itemToString(item)}
-                    isActive={selectedItem === item}
-                    isHighlighted={
-                      highlightedIndex === index || selectedItem === item
-                    }
-                    {...getItemProps({ item, index })}>
-                    {itemToElement ? (
-                      <ItemToElement key={itemToString(item)} {...item} />
-                    ) : (
-                      itemToString(item)
-                    )}
-                  </ListBox.MenuItem>
-                ))}
-              </ListBox.Menu>
-            )}
-          </ListBox>
-        )}
-      </Downshift>
-    );
-    return title || helper ? (
       <>
         {title}
-        {helper}
-        {Dropdown}
+        {!inline && helper}
+        <Downshift
+          id={id}
+          onChange={this.handleOnChange}
+          itemToString={itemToString}
+          defaultSelectedItem={initialSelectedItem}
+          selectedItem={selectedItem}>
+          {({
+            isOpen,
+            itemToString,
+            selectedItem,
+            highlightedIndex,
+            getRootProps,
+            getButtonProps,
+            getItemProps,
+            getLabelProps,
+          }) => (
+            <ListBox
+              type={type}
+              className={className({ isOpen })}
+              disabled={disabled}
+              ariaLabel={ariaLabel}
+              isOpen={isOpen}
+              invalid={invalid}
+              invalidText={invalidText}
+              {...getRootProps({ refKey: 'innerRef' })}>
+              {componentsX && invalid && (
+                <WarningFilled16
+                  className={`${prefix}--list-box__invalid-icon`}
+                />
+              )}
+              <ListBox.Field {...getButtonProps({ disabled })}>
+                <span
+                  className={`${prefix}--list-box__label`}
+                  {...getLabelProps()}>
+                  {selectedItem ? itemToString(selectedItem) : label}
+                </span>
+                <ListBox.MenuIcon isOpen={isOpen} />
+              </ListBox.Field>
+              {isOpen && (
+                <ListBox.Menu>
+                  {items.map((item, index) => (
+                    <ListBox.MenuItem
+                      key={itemToString(item)}
+                      isActive={selectedItem === item}
+                      isHighlighted={
+                        highlightedIndex === index || selectedItem === item
+                      }
+                      {...getItemProps({ item, index })}>
+                      {itemToElement ? (
+                        <ItemToElement key={itemToString(item)} {...item} />
+                      ) : (
+                        itemToString(item)
+                      )}
+                    </ListBox.MenuItem>
+                  ))}
+                </ListBox.Menu>
+              )}
+            </ListBox>
+          )}
+        </Downshift>
       </>
+    );
+    return componentsX ? (
+      <div className={wrapperClasses}>{Dropdown}</div>
     ) : (
       Dropdown
     );

src/components/DropdownV2/__snapshots__/DropdownV2-test.js.snap

@@ -65,6 +65,7 @@ exports[`DropdownV2 should render 1`] = `
       className="bx--dropdown"
       disabled={false}
       innerRef={[Function]}
+      isOpen={false}
       type="default"
     >
       <div
@@ -235,14 +236,15 @@ exports[`DropdownV2 should render DropdownItem components 1`] = `
   >
     <ListBox
       ariaLabel="Choose an item"
-      className="bx--dropdown"
+      className="bx--dropdown bx--dropdown--open"
       disabled={false}
       innerRef={[Function]}
+      isOpen={true}
       type="default"
     >
       <div
         aria-label="Choose an item"
-        className="bx--dropdown bx--list-box"
+        className="bx--dropdown bx--dropdown--open bx--list-box bx--list-box--expanded"
         onClick={[Function]}
         onKeyDown={[Function]}
         role="listbox"
@@ -649,14 +651,15 @@ exports[`DropdownV2 should render custom item components 1`] = `
   >
     <ListBox
       ariaLabel="Choose an item"
-      className="bx--dropdown"
+      className="bx--dropdown bx--dropdown--open"
       disabled={false}
       innerRef={[Function]}
+      isOpen={true}
       type="default"
     >
       <div
         aria-label="Choose an item"
-        className="bx--dropdown bx--list-box"
+        className="bx--dropdown bx--dropdown--open bx--list-box bx--list-box--expanded"
         onClick={[Function]}
         onKeyDown={[Function]}
         role="listbox"
@@ -955,14 +958,15 @@ exports[`DropdownV2 should render with strings as items 1`] = `
   >
     <ListBox
       ariaLabel="Choose an item"
-      className="bx--dropdown"
+      className="bx--dropdown bx--dropdown--open"
       disabled={false}
       innerRef={[Function]}
+      isOpen={true}
       type="default"
     >
       <div
         aria-label="Choose an item"
-        className="bx--dropdown bx--list-box"
+        className="bx--dropdown bx--dropdown--open bx--list-box bx--list-box--expanded"
         onClick={[Function]}
         onKeyDown={[Function]}
         role="listbox"

src/components/ListBox/ListBox.js

@@ -13,6 +13,7 @@ import ListBoxField from './ListBoxField';
 import ListBoxMenu from './ListBoxMenu';
 import { ListBoxType } from './ListBoxPropTypes';
 import childrenOf from '../../prop-types/childrenOf';
+import WarningFilled16 from '@carbon/icons-react/lib/warning--filled/16';
 
 const { prefix } = settings;
 
@@ -42,6 +43,7 @@ const ListBox = ({
   invalidText,
   light,
   innerTabIndex,
+  isOpen,
   ...rest
 }) => {
   const className = cx({
@@ -50,6 +52,7 @@ const ListBox = ({
     [`${prefix}--list-box--inline`]: type === 'inline',
     [`${prefix}--list-box--disabled`]: disabled,
     [`${prefix}--list-box--light`]: light,
+    [`${prefix}--list-box--expanded`]: isOpen,
   });
   return (
     <>
@@ -74,7 +77,7 @@ const ListBox = ({
 };
 
 ListBox.propTypes = {
-  children: childrenOf([ListBoxField, ListBoxMenu]),
+  children: childrenOf([ListBoxField, ListBoxMenu, WarningFilled16]),
 
   /**
    * Specify a class name to be applied on the containing list box node

src/components/ListBox/ListBoxMenuItem.js

@@ -9,6 +9,7 @@ import cx from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { settings } from 'carbon-components';
+import { componentsX } from '../../internal/FeatureFlags';
 
 const { prefix } = settings;
 
@@ -25,7 +26,13 @@ const ListBoxMenuItem = ({ children, isActive, isHighlighted, ...rest }) => {
   });
   return (
     <div className={className} {...rest}>
-      {children}
+      {componentsX ? (
+        <div className={`${prefix}--list-box__menu-item__option`}>
+          {children}
+        </div>
+      ) : (
+        children
+      )}
     </div>
   );
 };

yarn.lock

@@ -3195,10 +3195,10 @@ capture-stack-trace@^1.0.0:
   resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz#a6c0bbe1f38f3aa0b92238ecb6ff42c344d4135d"
   integrity sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw==
 
-carbon-components@^9.87.2:
-  version "9.87.2"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-9.87.2.tgz#20a96389975529526fd990789461cf20595a6273"
-  integrity sha512-wUbpYabgaX/rzBVWlKhBzQgO7W/62eFYJ6fnH9ATcz78vqRZy4ptzk1Z5EnyE4CjMOUnCUQrt/VuVSHP88LNtg==
+carbon-components@^9.90.9:
+  version "9.90.9"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-9.90.9.tgz#3ae43bb29d1ede088c1c683ddc9643bb4feb160e"
+  integrity sha512-h7ugDyO0XjHoe6faO1w27OckmLAm2D/As6H9LVTlW8HEFsRiQjhor4v6k3Ihz6cAAeMK7+DM7eYTaKNR/6dOmA==
   dependencies:
     carbon-icons "^7.0.7"
     flatpickr "4.5.7"