feat(multi-select): add warn prop
MODIFY
packages/components/src/components/combo-box/_combo-box.scss
packages/components/src/components/combo-box/_combo-box.scss
.#{$prefix}--combo-box .#{$prefix}--list-box__field,
.#{$prefix}--combo-box.#{$prefix}--list-box[data-invalid]
.#{$prefix}--list-box__field,
+ .#{$prefix}--combo-box.#{$prefix}--list-box--warning
+ .#{$prefix}--list-box__field,
.#{$prefix}--combo-box.#{$prefix}--list-box--disabled.#{$prefix}--list-box[data-invalid]
+ .#{$prefix}--list-box__field,
+ .#{$prefix}--combo-box.#{$prefix}--list-box--disabled.#{$prefix}--list-box--warning
.#{$prefix}--list-box__field {
padding: 0;
}

MODIFY
packages/components/src/components/form/_form.scss
packages/components/src/components/form/_form.scss
.#{$prefix}--date-picker-input__wrapper,
.#{$prefix}--time-picker--invalid,
.#{$prefix}--text-input__field-wrapper[data-invalid],
+ .#{$prefix}--text-input__field-wrapper--warning,
.#{$prefix}--text-input__field-wrapper--warning > .#{$prefix}--text-input,
.#{$prefix}--text-area__wrapper[data-invalid],
.#{$prefix}--select-input__wrapper[data-invalid],

MODIFY
packages/components/src/components/list-box/_list-box.scss
packages/components/src/components/list-box/_list-box.scss
@@ -315,6 +315,9 @@ $list-box-menu-width: rem(300px);
// invalid && populated input field
.#{$prefix}--list-box[data-invalid]
+ .#{$prefix}--list-box__field
+ .#{$prefix}--text-input,
+ .#{$prefix}--list-box--warning
.#{$prefix}--list-box__field
.#{$prefix}--text-input {
// to account for clear input button outline
@@ -322,6 +325,10 @@ $list-box-menu-width: rem(300px);
}
.#{$prefix}--list-box[data-invalid]
+ .#{$prefix}--list-box__field
+ .#{$prefix}--text-input
+ + .#{$prefix}--list-box__invalid-icon,
+ .#{$prefix}--list-box--warning
.#{$prefix}--list-box__field
.#{$prefix}--text-input
+ .#{$prefix}--list-box__invalid-icon {
@@ -336,12 +343,19 @@ $list-box-menu-width: rem(300px);
// invalid && empty input field
.#{$prefix}--list-box[data-invalid]
+ .#{$prefix}--list-box__field
+ .#{$prefix}--text-input--empty,
+ .#{$prefix}--list-box--warning
.#{$prefix}--list-box__field
.#{$prefix}--text-input--empty {
padding-right: carbon--mini-units(9);
}
.#{$prefix}--list-box[data-invalid]
+ .#{$prefix}--list-box__field
+ .#{$prefix}--text-input--empty
+ + .#{$prefix}--list-box__invalid-icon,
+ .#{$prefix}--list-box--warning
.#{$prefix}--list-box__field
.#{$prefix}--text-input--empty
+ .#{$prefix}--list-box__invalid-icon {

MODIFY
packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -3544,6 +3544,12 @@ Map {
"useTitleInItem": Object {
"type": "bool",
},
+ "warn": Object {
+ "type": "bool",
+ },
+ "warnText": Object {
+ "type": "string",
+ },
},
},
"defaultProps": Object {
@@ -3778,6 +3784,12 @@ Map {
"useTitleInItem": Object {
"type": "bool",
},
+ "warn": Object {
+ "type": "bool",
+ },
+ "warnText": Object {
+ "type": "string",
+ },
},
"render": [Function],
},

MODIFY
packages/react/src/components/MultiSelect/FilterableMultiSelect.js
packages/react/src/components/MultiSelect/FilterableMultiSelect.js
@@ -11,7 +11,7 @@ import React from 'react';
import Downshift from 'downshift';
import isEqual from 'lodash.isequal';
import { settings } from 'carbon-components';
-import { WarningFilled16 } from '@carbon/icons-react';
+import { WarningFilled16, WarningAltFilled16 } from '@carbon/icons-react';
import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox';
import Checkbox from '../Checkbox';
import Selection from '../../internal/Selection';
@@ -129,6 +129,16 @@ export default class FilterableMultiSelect extends React.Component {
* Specify title to show title on hover
*/
useTitleInItem: PropTypes.bool,
+
+ /**
+ * 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,
};
static getDerivedStateFromProps({ open }, state) {
@@ -277,11 +287,15 @@ export default class FilterableMultiSelect extends React.Component {
light,
invalid,
invalidText,
+ warn,
+ warnText,
useTitleInItem,
translateWithId,
downshiftProps,
} = this.props;
const inline = type === 'inline';
+ const showWarning = !invalid && warn;
+
const wrapperClasses = cx(
`${prefix}--multi-select__wrapper`,
`${prefix}--list-box__wrapper`,
@@ -376,6 +390,8 @@ export default class FilterableMultiSelect extends React.Component {
light={light}
invalid={invalid}
invalidText={invalidText}
+ warn={warn}
+ warnText={warnText}
isOpen={isOpen}
size={size}
{...getRootProps()}>
@@ -410,6 +426,11 @@ export default class FilterableMultiSelect extends React.Component {
className={`${prefix}--list-box__invalid-icon`}
/>
)}
+ {showWarning && (
+ <WarningAltFilled16
+ className={`${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`}
+ />
+ )}
{inputValue && isOpen && (
<ListBox.Selection
clearSelection={this.clearInputValue}
@@ -478,7 +499,7 @@ export default class FilterableMultiSelect extends React.Component {
<div className={wrapperClasses}>
{title}
{input}
- {!inline && !invalid ? helper : null}
+ {!inline && !invalid && !warn ? helper : null}
</div>
);
}

MODIFY
packages/react/src/components/MultiSelect/MultiSelect-story.js
packages/react/src/components/MultiSelect/MultiSelect-story.js
@@ -82,6 +82,11 @@ const props = () => ({
'Form validation UI content (invalidText)',
'Invalid Selection'
),
+ warn: boolean('Show warning state (warn)', false),
+ warnText: text(
+ 'Warning state text (warnText)',
+ 'Selecting more items may increase processing time'
+ ),
onChange: action('onChange'),
listBoxMenuIconTranslationIds: object(
'Listbox menu icon translation IDs (for translateWithId callback)',

MODIFY
packages/react/src/components/MultiSelect/MultiSelect.js
packages/react/src/components/MultiSelect/MultiSelect.js
* LICENSE file in the root directory of this source tree.
*/
-import { WarningFilled16 } from '@carbon/icons-react';
+import { WarningFilled16, WarningAltFilled16 } from '@carbon/icons-react';
import { settings } from 'carbon-components';
import cx from 'classnames';
import Downshift, { useSelect } from 'downshift';
@@ -52,6 +52,8 @@ const MultiSelect = React.forwardRef(function MultiSelect(
light,
invalid,
invalidText,
+ warn,
+ warnText,
useTitleInItem,
translateWithId,
downshiftProps,
@@ -104,6 +106,8 @@ const MultiSelect = React.forwardRef(function MultiSelect(
}
const inline = type === 'inline';
+ const showWarning = !invalid && warn;
+
const wrapperClasses = cx(
`${prefix}--multi-select__wrapper`,
`${prefix}--list-box__wrapper`,
@@ -127,6 +131,7 @@ const MultiSelect = React.forwardRef(function MultiSelect(
const className = cx(`${prefix}--multi-select`, containerClassName, {
[`${prefix}--multi-select--invalid`]: invalid,
+ [`${prefix}--multi-select--warning`]: showWarning,
[`${prefix}--multi-select--inline`]: inline,
[`${prefix}--multi-select--selected`]:
selectedItems && selectedItems.length > 0,
@@ -189,11 +194,18 @@ const MultiSelect = React.forwardRef(function MultiSelect(
light={light}
invalid={invalid}
invalidText={invalidText}
+ warn={warn}
+ warnText={warnText}
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}
@@ -245,7 +257,7 @@ const MultiSelect = React.forwardRef(function MultiSelect(
})}
</ListBox.Menu>
</ListBox>
- {!inline && !invalid && helperText && (
+ {!inline && !invalid && !warn && helperText && (
<div id={helperId} className={helperClasses}>
{helperText}
</div>
@@ -368,6 +380,16 @@ MultiSelect.propTypes = {
* Specify title to show title on hover
*/
useTitleInItem: PropTypes.bool,
+
+ /**
+ * 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,
};
MultiSelect.defaultProps = {

feat(multi-select): add warn prop (#7043)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>