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.

Sign up for GitHub

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(NumberInput): add warn prop #6652

Merged
merged 7 commits into from
Sep 22, 2020
Merged

feat(NumberInput): add warn prop #6652

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
28e3d03
feat(NumberInput): add warn prop
janhassel Aug 12, 2020
b745130
Merge branch 'master' into number-input-warning
tw15egan Aug 13, 2020
9bb4011
fix: use --warning modifier instead of data-warn attribute
janhassel Sep 11, 2020
7711b2d
Merge branch 'master' into number-input-warning
janhassel Sep 11, 2020
3329c11
Merge branch 'master' into number-input-warning
andreancardona Sep 15, 2020
0866914
Merge branch 'master' into number-input-warning
tw15egan Sep 16, 2020
a122d41
Merge branch 'master' into number-input-warning
kodiakhq[bot] Sep 22, 2020
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
5 changes: 3 additions & 2 deletions packages/components/src/components/form/_form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,10 +78,11 @@

input[data-invalid],
.#{$prefix}--number[data-invalid] .#{$prefix}--number__input-wrapper,
.#{$prefix}--number__input-wrapper--warning,
.#{$prefix}--date-picker-input__wrapper,
.#{$prefix}--time-picker--invalid,
.#{$prefix}--text-input__field-wrapper[data-invalid],
.#{$prefix}--text-input--warn,
.#{$prefix}--text-input__field-wrapper--warning > .#{$prefix}--text-input,
.#{$prefix}--text-area__wrapper[data-invalid],
.#{$prefix}--select-input__wrapper[data-invalid],
.#{$prefix}--time-picker[data-invalid],
Expand Down Expand Up @@ -110,7 +111,7 @@

//Fluid Form
.#{$prefix}--form--fluid .#{$prefix}--text-input__field-wrapper[data-invalid],
.#{$prefix}--form--fluid .#{$prefix}--text-input__field-wrapper[data-warn] {
.#{$prefix}--form--fluid .#{$prefix}--text-input__field-wrapper--warning {
display: block;
}

Expand Down
9 changes: 9 additions & 0 deletions packages/components/src/components/number-input/_number-input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,15 @@
fill: $support-01;
}

.#{$prefix}--number__invalid--warning {
fill: $support-03;
}

.#{$prefix}--number__invalid--warning path[data-icon-path='inner-path'] {
opacity: 1;
fill: $carbon__black-100;
}

.#{$prefix}--number--light input[type='number'] {
background-color: $field-02;
}
Expand Down
5 changes: 5 additions & 0 deletions packages/react/src/components/NumberInput/NumberInput-story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,11 @@ const props = () => ({
'Form validation UI content (invalidText)',
'Number is not valid'
),
warn: boolean('Show warning state (warn)', false),
warnText: text(
'Warning state text (warnText)',
'A high threshold may impact performance'
),
helperText: text('Helper text (helperText)', 'Optional helper text.'),
light: boolean('Light variant (light)', false),
onChange: action('onChange'),
Expand Down
33 changes: 31 additions & 2 deletions packages/react/src/components/NumberInput/NumberInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import classNames from 'classnames';
import { settings } from 'carbon-components';
import {
WarningFilled16,
WarningAltFilled16,
CaretDownGlyph,
CaretUpGlyph,
} from '@carbon/icons-react';
Expand Down Expand Up @@ -143,6 +144,14 @@ class NumberInput extends Component {
* Specify the value of the input
*/
value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
/**
* 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 defaultProps = {
Expand All @@ -152,6 +161,8 @@ class NumberInput extends Component {
step: 1,
invalid: false,
invalidText: 'Provide invalidText',
warn: false,
warnText: '',
ariaLabel: 'Numeric input field with increment and decrement buttons',
helperText: '',
light: false,
Expand Down Expand Up @@ -278,6 +289,8 @@ class NumberInput extends Component {
readOnly,
invalid,
invalidText,
warn,
warnText,
helperText,
ariaLabel,
light,
Expand Down Expand Up @@ -353,6 +366,13 @@ class NumberInput extends Component {
{invalidText}
</div>
);
} else if (warn) {
errorId = `${id}-error-id`;
error = (
<div className={`${prefix}--form-requirement`} id={errorId}>
{warnText}
</div>
);
}

const helperTextClasses = classNames(`${prefix}--form__helper-text`, {
Expand All @@ -379,6 +399,10 @@ class NumberInput extends Component {
t('decrement.number'),
];

const wrapperClasses = classNames(`${prefix}--number__input-wrapper`, {
[`${prefix}--number__input-wrapper--warning`]: !isInputInvalid && warn,
});

return (
<div className={`${prefix}--form-item`}>
<div className={numberInputClasses} {...inputWrapperProps}>
Expand Down Expand Up @@ -425,7 +449,7 @@ class NumberInput extends Component {
return (
<>
{labelText}
<div className={`${prefix}--number__input-wrapper`}>
<div className={wrapperClasses}>
<input
data-invalid={isInputInvalid}
aria-invalid={isInputInvalid}
Expand All @@ -439,6 +463,11 @@ class NumberInput extends Component {
{isInputInvalid && (
<WarningFilled16 className={`${prefix}--number__invalid`} />
)}
{!isInputInvalid && warn && (
<WarningAltFilled16
className={`${prefix}--number__invalid ${prefix}--number__invalid--warning`}
/>
)}
<div className={`${prefix}--number__controls`}>
<button
type="button"
Expand All @@ -464,7 +493,7 @@ class NumberInput extends Component {
</button>
</div>
</div>
{isInputInvalid ? null : helper}
{error ? null : helper}
</>
);
})()}
Expand Down
12 changes: 7 additions & 5 deletions packages/react/src/components/TextInput/TextInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ const TextInput = React.forwardRef(function TextInput(
const textInputClasses = classNames(`${prefix}--text-input`, className, {
[`${prefix}--text-input--light`]: light,
[`${prefix}--text-input--invalid`]: invalid,
[`${prefix}--text-input--warn`]: warn,
[`${prefix}--text-input--${size}`]: size,
});
const sharedTextInputProps = {
Expand Down Expand Up @@ -89,6 +88,12 @@ const TextInput = React.forwardRef(function TextInput(
[`${prefix}--text-input__field-outer-wrapper--inline`]: inline,
}
);
const fieldWrapperClasses = classNames(
`${prefix}--text-input__field-wrapper`,
{
[`${prefix}--text-input__field-wrapper--warning`]: !invalid && warn,
}
);
const label = labelText ? (
<label htmlFor={id} className={labelClasses}>
{labelText}
Expand Down Expand Up @@ -136,10 +141,7 @@ const TextInput = React.forwardRef(function TextInput(
</div>
)}
<div className={fieldOuterWrapperClasses}>
<div
className={`${prefix}--text-input__field-wrapper`}
data-invalid={invalid || null}
data-warn={warn || null}>
<div className={fieldWrapperClasses} data-invalid={invalid || null}>
{invalid && (
<WarningFilled16
className={`${prefix}--text-input__invalid-icon`}
Expand Down