feat(ComboBox): support warning state (#7733)

* feat(ComboBox): support warning state * docs(ComboBox): add warn prop * chore: update snapshots Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Feb 9, 2021 · 70bf4b4 · 70bf4b4
1 parent f6ecfbf
commit 70bf4b4
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 3 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -638,6 +638,12 @@ Map {
         ],
         "type": "oneOf",
       },
+      "warn": Object {
+        "type": "bool",
+      },
+      "warnText": Object {
+        "type": "node",
+      },
     },
   },
   "ComposedModal" => Object {

diff --git a/packages/react/src/components/ComboBox/ComboBox-story.js b/packages/react/src/components/ComboBox/ComboBox-story.js
@@ -86,6 +86,11 @@ const props = () => ({
   direction: select('Dropdown direction (direction)', directions, 'bottom'),
   onChange: action('onChange'),
   onToggleClick: action('onClick'),
+  warn: boolean('Show warning state (warn)', false),
+  warnText: text(
+    'Warning state text (warnText)',
+    'This mode may perform worse on older machines'
+  ),
 });
 
 export const Playground = () => (

diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
@@ -10,7 +10,11 @@ import Downshift from 'downshift';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { settings } from 'carbon-components';
-import { Checkmark16, WarningFilled16 } from '@carbon/icons-react';
+import {
+  Checkmark16,
+  WarningAltFilled16,
+  WarningFilled16,
+} from '@carbon/icons-react';
 import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox';
 import { match, keys } from '../../internal/keyboard';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
@@ -199,6 +203,16 @@ export default class ComboBox extends React.Component {
      * Currently supports either the default type, or an inline variant
      */
     type: ListBoxPropTypes.ListBoxType,
+
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn: PropTypes.bool,
+
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText: PropTypes.node,
   };
 
   static defaultProps = {
@@ -331,10 +345,14 @@ export default class ComboBox extends React.Component {
       onToggleClick, // eslint-disable-line no-unused-vars
       downshiftProps,
       direction,
+      warn,
+      warnText,
       ...rest
     } = this.props;
+    const showWarning = !invalid && warn;
     const className = cx(`${prefix}--combo-box`, containerClassName, {
       [`${prefix}--list-box--up`]: direction === 'top',
+      [`${prefix}--combo-box--warning`]: showWarning,
     });
     const titleClasses = cx(`${prefix}--label`, {
       [`${prefix}--label--disabled`]: disabled,
@@ -390,7 +408,9 @@ export default class ComboBox extends React.Component {
               invalidText={invalidText}
               isOpen={isOpen}
               light={light}
-              size={size}>
+              size={size}
+              warn={warn}
+              warnText={warnText}>
               <ListBox.Field
                 {...getToggleButtonProps({
                   disabled,
@@ -423,6 +443,11 @@ export default class ComboBox extends React.Component {
                     className={`${prefix}--list-box__invalid-icon`}
                   />
                 )}
+                {showWarning && (
+                  <WarningAltFilled16
+                    className={`${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`}
+                  />
+                )}
                 {inputValue && (
                   <ListBox.Selection
                     clearSelection={clearSelection}
@@ -470,7 +495,7 @@ export default class ComboBox extends React.Component {
                 </ListBox.Menu>
               )}
             </ListBox>
-            {helperText && !invalid && (
+            {helperText && !invalid && !warn && (
               <div id={comboBoxHelperId} className={helperClasses}>
                 {helperText}
               </div>