feat(multi-select): add warn prop (#7043)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Oct 14, 2020 · 1cdd7f8 · 1cdd7f8
1 parent a49f90a
commit 1cdd7f8
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 4 deletions.
diff --git a/packages/components/src/components/combo-box/_combo-box.scss b/packages/components/src/components/combo-box/_combo-box.scss
@@ -30,7 +30,11 @@
   .#{$prefix}--combo-box .#{$prefix}--list-box__field,
   .#{$prefix}--combo-box.#{$prefix}--list-box[data-invalid]
     .#{$prefix}--list-box__field,
+  .#{$prefix}--combo-box.#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field,
   .#{$prefix}--combo-box.#{$prefix}--list-box--disabled.#{$prefix}--list-box[data-invalid]
+    .#{$prefix}--list-box__field,
+  .#{$prefix}--combo-box.#{$prefix}--list-box--disabled.#{$prefix}--list-box--warning
     .#{$prefix}--list-box__field {
     padding: 0;
   }

diff --git a/packages/components/src/components/form/_form.scss b/packages/components/src/components/form/_form.scss
@@ -82,6 +82,7 @@
   .#{$prefix}--date-picker-input__wrapper,
   .#{$prefix}--time-picker--invalid,
   .#{$prefix}--text-input__field-wrapper[data-invalid],
+  .#{$prefix}--text-input__field-wrapper--warning,
   .#{$prefix}--text-input__field-wrapper--warning > .#{$prefix}--text-input,
   .#{$prefix}--text-area__wrapper[data-invalid],
   .#{$prefix}--select-input__wrapper[data-invalid],

diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss
@@ -315,13 +315,20 @@ $list-box-menu-width: rem(300px);
 
   // invalid && populated input field
   .#{$prefix}--list-box[data-invalid]
+    .#{$prefix}--list-box__field
+    .#{$prefix}--text-input,
+  .#{$prefix}--list-box--warning
     .#{$prefix}--list-box__field
     .#{$prefix}--text-input {
     // to account for clear input button outline
     padding-right: rem(98px);
   }
 
   .#{$prefix}--list-box[data-invalid]
+    .#{$prefix}--list-box__field
+    .#{$prefix}--text-input
+    + .#{$prefix}--list-box__invalid-icon,
+  .#{$prefix}--list-box--warning
     .#{$prefix}--list-box__field
     .#{$prefix}--text-input
     + .#{$prefix}--list-box__invalid-icon {
@@ -336,12 +343,19 @@ $list-box-menu-width: rem(300px);
 
   // invalid && empty input field
   .#{$prefix}--list-box[data-invalid]
+    .#{$prefix}--list-box__field
+    .#{$prefix}--text-input--empty,
+  .#{$prefix}--list-box--warning
     .#{$prefix}--list-box__field
     .#{$prefix}--text-input--empty {
     padding-right: carbon--mini-units(9);
   }
 
   .#{$prefix}--list-box[data-invalid]
+    .#{$prefix}--list-box__field
+    .#{$prefix}--text-input--empty
+    + .#{$prefix}--list-box__invalid-icon,
+  .#{$prefix}--list-box--warning
     .#{$prefix}--list-box__field
     .#{$prefix}--text-input--empty
     + .#{$prefix}--list-box__invalid-icon {

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -3544,6 +3544,12 @@ Map {
         "useTitleInItem": Object {
           "type": "bool",
         },
+        "warn": Object {
+          "type": "bool",
+        },
+        "warnText": Object {
+          "type": "string",
+        },
       },
     },
     "defaultProps": Object {
@@ -3778,6 +3784,12 @@ Map {
       "useTitleInItem": Object {
         "type": "bool",
       },
+      "warn": Object {
+        "type": "bool",
+      },
+      "warnText": Object {
+        "type": "string",
+      },
     },
     "render": [Function],
   },

diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
@@ -11,7 +11,7 @@ import React from 'react';
 import Downshift from 'downshift';
 import isEqual from 'lodash.isequal';
 import { settings } from 'carbon-components';
-import { WarningFilled16 } from '@carbon/icons-react';
+import { WarningFilled16, WarningAltFilled16 } from '@carbon/icons-react';
 import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox';
 import Checkbox from '../Checkbox';
 import Selection from '../../internal/Selection';
@@ -129,6 +129,16 @@ export default class FilterableMultiSelect extends React.Component {
      * Specify title to show title on hover
      */
     useTitleInItem: PropTypes.bool,
+
+    /**
+     * 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.string,
   };
 
   static getDerivedStateFromProps({ open }, state) {
@@ -277,11 +287,15 @@ export default class FilterableMultiSelect extends React.Component {
       light,
       invalid,
       invalidText,
+      warn,
+      warnText,
       useTitleInItem,
       translateWithId,
       downshiftProps,
     } = this.props;
     const inline = type === 'inline';
+    const showWarning = !invalid && warn;
+
     const wrapperClasses = cx(
       `${prefix}--multi-select__wrapper`,
       `${prefix}--list-box__wrapper`,
@@ -376,6 +390,8 @@ export default class FilterableMultiSelect extends React.Component {
                   light={light}
                   invalid={invalid}
                   invalidText={invalidText}
+                  warn={warn}
+                  warnText={warnText}
                   isOpen={isOpen}
                   size={size}
                   {...getRootProps()}>
@@ -410,6 +426,11 @@ export default class FilterableMultiSelect extends React.Component {
                         className={`${prefix}--list-box__invalid-icon`}
                       />
                     )}
+                    {showWarning && (
+                      <WarningAltFilled16
+                        className={`${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`}
+                      />
+                    )}
                     {inputValue && isOpen && (
                       <ListBox.Selection
                         clearSelection={this.clearInputValue}
@@ -478,7 +499,7 @@ export default class FilterableMultiSelect extends React.Component {
       <div className={wrapperClasses}>
         {title}
         {input}
-        {!inline && !invalid ? helper : null}
+        {!inline && !invalid && !warn ? helper : null}
       </div>
     );
   }

diff --git a/packages/react/src/components/MultiSelect/MultiSelect-story.js b/packages/react/src/components/MultiSelect/MultiSelect-story.js
@@ -82,6 +82,11 @@ const props = () => ({
     'Form validation UI content (invalidText)',
     'Invalid Selection'
   ),
+  warn: boolean('Show warning state (warn)', false),
+  warnText: text(
+    'Warning state text (warnText)',
+    'Selecting more items may increase processing time'
+  ),
   onChange: action('onChange'),
   listBoxMenuIconTranslationIds: object(
     'Listbox menu icon translation IDs (for translateWithId callback)',

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { WarningFilled16 } from '@carbon/icons-react';
+import { WarningFilled16, WarningAltFilled16 } from '@carbon/icons-react';
 import { settings } from 'carbon-components';
 import cx from 'classnames';
 import Downshift, { useSelect } from 'downshift';
@@ -52,6 +52,8 @@ const MultiSelect = React.forwardRef(function MultiSelect(
     light,
     invalid,
     invalidText,
+    warn,
+    warnText,
     useTitleInItem,
     translateWithId,
     downshiftProps,
@@ -104,6 +106,8 @@ const MultiSelect = React.forwardRef(function MultiSelect(
   }
 
   const inline = type === 'inline';
+  const showWarning = !invalid && warn;
+
   const wrapperClasses = cx(
     `${prefix}--multi-select__wrapper`,
     `${prefix}--list-box__wrapper`,
@@ -127,6 +131,7 @@ const MultiSelect = React.forwardRef(function MultiSelect(
 
   const className = cx(`${prefix}--multi-select`, containerClassName, {
     [`${prefix}--multi-select--invalid`]: invalid,
+    [`${prefix}--multi-select--warning`]: showWarning,
     [`${prefix}--multi-select--inline`]: inline,
     [`${prefix}--multi-select--selected`]:
       selectedItems && selectedItems.length > 0,
@@ -189,11 +194,18 @@ const MultiSelect = React.forwardRef(function MultiSelect(
         light={light}
         invalid={invalid}
         invalidText={invalidText}
+        warn={warn}
+        warnText={warnText}
         isOpen={isOpen}
         id={id}>
         {invalid && (
           <WarningFilled16 className={`${prefix}--list-box__invalid-icon`} />
         )}
+        {showWarning && (
+          <WarningAltFilled16
+            className={`${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`}
+          />
+        )}
         <button
           type="button"
           ref={ref}
@@ -245,7 +257,7 @@ const MultiSelect = React.forwardRef(function MultiSelect(
             })}
         </ListBox.Menu>
       </ListBox>
-      {!inline && !invalid && helperText && (
+      {!inline && !invalid && !warn && helperText && (
         <div id={helperId} className={helperClasses}>
           {helperText}
         </div>
@@ -368,6 +380,16 @@ MultiSelect.propTypes = {
    * Specify title to show title on hover
    */
   useTitleInItem: PropTypes.bool,
+
+  /**
+   * 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.string,
 };
 
 MultiSelect.defaultProps = {