feat(dropdown): add warn prop (#6959)

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

Hide file tree

Showing 6 changed files with 71 additions and 4 deletions.
diff --git a/packages/components/src/components/form/_form.scss b/packages/components/src/components/form/_form.scss
@@ -86,7 +86,8 @@
   .#{$prefix}--text-area__wrapper[data-invalid],
   .#{$prefix}--select-input__wrapper[data-invalid],
   .#{$prefix}--time-picker[data-invalid],
-  .#{$prefix}--list-box[data-invalid] {
+  .#{$prefix}--list-box[data-invalid],
+  .#{$prefix}--list-box--warning {
     ~ .#{$prefix}--form-requirement {
       display: block;
       max-height: rem(200px);

diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss
@@ -121,7 +121,19 @@ $list-box-menu-width: rem(300px);
     fill: $support-01;
   }
 
-  .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field {
+  .#{$prefix}--list-box__invalid-icon--warning {
+    fill: $support-03;
+  }
+
+  .#{$prefix}--list-box__invalid-icon--warning
+    path[data-icon-path='inner-path'] {
+    opacity: 1;
+    fill: $carbon__black-100;
+  }
+
+  .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field,
+  .#{$prefix}--list-box.#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field {
     padding-right: carbon--mini-units(8);
     border-bottom: 0;
   }

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

diff --git a/packages/react/src/components/Dropdown/Dropdown-story.js b/packages/react/src/components/Dropdown/Dropdown-story.js
@@ -66,6 +66,11 @@ const props = () => ({
     'Form validation UI content (invalidText)',
     'A valid value is required'
   ),
+  warn: boolean('Show warning state (warn)', false),
+  warnText: text(
+    'Warning state text (warnText)',
+    'This mode may perform worse on older machines'
+  ),
 });
 
 export default {

diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js
@@ -10,7 +10,11 @@ import { useSelect } from 'downshift';
 import { settings } from 'carbon-components';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import { Checkmark16, WarningFilled16 } from '@carbon/icons-react';
+import {
+  Checkmark16,
+  WarningAltFilled16,
+  WarningFilled16,
+} from '@carbon/icons-react';
 import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox';
 import { mapDownshiftProps } from '../../tools/createPropAdapter';
 import deprecate from '../../prop-types/deprecate';
@@ -45,6 +49,8 @@ const Dropdown = React.forwardRef(function Dropdown(
     light,
     invalid,
     invalidText,
+    warn,
+    warnText,
     initialSelectedItem,
     selectedItem: controlledSelectedItem,
     downshiftProps,
@@ -76,9 +82,11 @@ const Dropdown = React.forwardRef(function Dropdown(
     selectedItem,
   } = useSelect(selectProps);
   const inline = type === 'inline';
+  const showWarning = !invalid && warn;
 
   const className = cx(`${prefix}--dropdown`, containerClassName, {
     [`${prefix}--dropdown--invalid`]: invalid,
+    [`${prefix}--dropdown--warning`]: showWarning,
     [`${prefix}--dropdown--open`]: isOpen,
     [`${prefix}--dropdown--inline`]: inline,
     [`${prefix}--dropdown--disabled`]: disabled,
@@ -132,12 +140,19 @@ const Dropdown = React.forwardRef(function Dropdown(
         className={className}
         invalid={invalid}
         invalidText={invalidText}
+        warn={warn}
+        warnText={warnText}
         light={light}
         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}
@@ -178,7 +193,7 @@ const Dropdown = React.forwardRef(function Dropdown(
             })}
         </ListBox.Menu>
       </ListBox>
-      {!inline && !invalid && helper}
+      {!inline && !invalid && !warn && helper}
     </div>
   );
 });
@@ -310,6 +325,16 @@ Dropdown.propTypes = {
    * The dropdown type, `default` or `inline`
    */
   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.string,
 };
 
 Dropdown.defaultProps = {

diff --git a/packages/react/src/components/ListBox/ListBox.js b/packages/react/src/components/ListBox/ListBox.js
@@ -37,12 +37,16 @@ const ListBox = React.forwardRef(function ListBox(
     size,
     invalid,
     invalidText,
+    warn,
+    warnText,
     light,
     isOpen,
     ...rest
   },
   ref
 ) {
+  const showWarning = !invalid && warn;
+
   const className = cx({
     [containerClassName]: !!containerClassName,
     [`${prefix}--list-box`]: true,
@@ -51,6 +55,7 @@ const ListBox = React.forwardRef(function ListBox(
     [`${prefix}--list-box--disabled`]: disabled,
     [`${prefix}--list-box--light`]: light,
     [`${prefix}--list-box--expanded`]: isOpen,
+    [`${prefix}--list-box--warning`]: showWarning,
   });
   return (
     <>
@@ -67,6 +72,9 @@ const ListBox = React.forwardRef(function ListBox(
       {invalid ? (
         <div className={`${prefix}--form-requirement`}>{invalidText}</div>
       ) : null}
+      {showWarning ? (
+        <div className={`${prefix}--form-requirement`}>{warnText}</div>
+      ) : null}
     </>
   );
 });
@@ -118,6 +126,16 @@ ListBox.propTypes = {
    * `inline` as an option.
    */
   type: ListBoxType.isRequired,
+
+  /**
+   * 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,
 };
 
 ListBox.defaultProps = {