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}