feat(dropdown): add warn prop
MODIFY
packages/components/src/components/form/_form.scss
packages/components/src/components/form/_form.scss
.#{$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);

MODIFY
packages/components/src/components/list-box/_list-box.scss
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;
}

MODIFY
packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
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],
},

MODIFY
packages/react/src/components/Dropdown/Dropdown-story.js
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 {

MODIFY
packages/react/src/components/Dropdown/Dropdown.js
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 && (
<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}
@@ -178,7 +193,7 @@ const Dropdown = React.forwardRef(function Dropdown(
})}
</ListBox.Menu>
</ListBox>
- {!inline && !invalid && helper}
+ {!inline && !invalid && !warn && helper}
</div>
);
});
@@ -310,6 +325,16 @@ Dropdown.propTypes = {
* The dropdown type, `default` or `inline`
*/
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.string,
};
Dropdown.defaultProps = {

MODIFY
packages/react/src/components/ListBox/ListBox.js
packages/react/src/components/ListBox/ListBox.js
@@ -37,12 +37,16 @@ const ListBox = React.forwardRef(function ListBox(
size,
invalid,
invalidText,
+ warn,
+ warnText,
light,
isOpen,
...rest
},
ref
) {
+ const showWarning = !invalid && warn;
+
const className = cx({
[containerClassName]: !!containerClassName,
[`${prefix}--list-box`]: true,
@@ -51,6 +55,7 @@ const ListBox = React.forwardRef(function ListBox(
[`${prefix}--list-box--disabled`]: disabled,
[`${prefix}--list-box--light`]: light,
[`${prefix}--list-box--expanded`]: isOpen,
+ [`${prefix}--list-box--warning`]: showWarning,
});
return (
<>
@@ -67,6 +72,9 @@ const ListBox = React.forwardRef(function ListBox(
{invalid ? (
<div className={`${prefix}--form-requirement`}>{invalidText}</div>
) : null}
+ {showWarning ? (
+ <div className={`${prefix}--form-requirement`}>{warnText}</div>
+ ) : null}
</>
);
});
@@ -118,6 +126,16 @@ ListBox.propTypes = {
* `inline` as an option.
*/
type: ListBoxType.isRequired,
+
+ /**
+ * 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,
};
ListBox.defaultProps = {

feat(dropdown): add warn prop (#6959)

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