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 && (
+
+ )}