diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index cc210ed806c0..3f652fa22dbf 100644
--- 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
index d941a7288355..f60773320e3a 100644
--- 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
index 4f1baf5bc654..2e0949e4a127 100644
--- 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}>
)}
+ {showWarning && (
+
+ )}
{inputValue && (
)}
- {helperText && !invalid && (
+ {helperText && !invalid && !warn && (
{helperText}