Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(dropdown): add warn prop #6959

Merged
merged 2 commits into from
Oct 12, 2020
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/components/src/components/form/_form.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
14 changes: 13 additions & 1 deletion packages/components/src/components/list-box/_list-box.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
6 changes: 6 additions & 0 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -2315,6 +2315,12 @@ Map {
],
"type": "oneOf",
},
"warn": Object {
"type": "bool",
},
"warnText": Object {
"type": "string",
},
},
"render": [Function],
},
Expand Down
5 changes: 5 additions & 0 deletions packages/react/src/components/Dropdown/Dropdown-story.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
29 changes: 27 additions & 2 deletions packages/react/src/components/Dropdown/Dropdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -45,6 +49,8 @@ const Dropdown = React.forwardRef(function Dropdown(
light,
invalid,
invalidText,
warn,
warnText,
initialSelectedItem,
selectedItem: controlledSelectedItem,
downshiftProps,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -178,7 +193,7 @@ const Dropdown = React.forwardRef(function Dropdown(
})}
</ListBox.Menu>
</ListBox>
{!inline && !invalid && helper}
{!inline && !invalid && !warn && helper}
</div>
);
});
Expand Down Expand Up @@ -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 = {
Expand Down
18 changes: 18 additions & 0 deletions packages/react/src/components/ListBox/ListBox.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 (
<>
Expand All @@ -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}
</>
);
});
Expand Down Expand Up @@ -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 = {
Expand Down