diff --git a/packages/components/src/components/form/_form.scss b/packages/components/src/components/form/_form.scss index eb7af8d51b6a..5add0dbeb0f6 100644 --- 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 index 04157fe7b516..d1858fc1187f 100644 --- 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 index 291c7334e09d..b240a2160a4b 100644 --- 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 index a73f30a3dd41..8e6c8f2e2c10 100644 --- 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 index 9d79923af581..c56c6bfcb327 100644 --- 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 && ( )} + {showWarning && ( + + )}