From 28e3d037a24b3eec633a72294f89efa4f40b3889 Mon Sep 17 00:00:00 2001 From: Jan Hassel Date: Wed, 12 Aug 2020 09:48:49 +0200 Subject: [PATCH 1/2] feat(NumberInput): add warn prop --- .../components/src/components/form/_form.scss | 3 +- .../number-input/_number-input.scss | 9 ++++++ .../NumberInput/NumberInput-story.js | 5 ++++ .../src/components/NumberInput/NumberInput.js | 28 ++++++++++++++++++- 4 files changed, 43 insertions(+), 2 deletions(-) diff --git a/packages/components/src/components/form/_form.scss b/packages/components/src/components/form/_form.scss index 6618d9d219aa..7a39c490448c 100644 --- a/packages/components/src/components/form/_form.scss +++ b/packages/components/src/components/form/_form.scss @@ -78,10 +78,11 @@ input[data-invalid], .#{$prefix}--number[data-invalid] .#{$prefix}--number__input-wrapper, + .#{$prefix}--number[data-warn] .#{$prefix}--number__input-wrapper, .#{$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[data-warn], .#{$prefix}--text-area__wrapper[data-invalid], .#{$prefix}--select-input__wrapper[data-invalid], .#{$prefix}--time-picker[data-invalid], diff --git a/packages/components/src/components/number-input/_number-input.scss b/packages/components/src/components/number-input/_number-input.scss index 3049a7001922..082f50a39997 100644 --- a/packages/components/src/components/number-input/_number-input.scss +++ b/packages/components/src/components/number-input/_number-input.scss @@ -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; } diff --git a/packages/react/src/components/NumberInput/NumberInput-story.js b/packages/react/src/components/NumberInput/NumberInput-story.js index 6cc7a695238c..21731859dfca 100644 --- a/packages/react/src/components/NumberInput/NumberInput-story.js +++ b/packages/react/src/components/NumberInput/NumberInput-story.js @@ -44,6 +44,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'), diff --git a/packages/react/src/components/NumberInput/NumberInput.js b/packages/react/src/components/NumberInput/NumberInput.js index 012070382ec8..48e6fb22d3b3 100644 --- a/packages/react/src/components/NumberInput/NumberInput.js +++ b/packages/react/src/components/NumberInput/NumberInput.js @@ -11,6 +11,7 @@ import classNames from 'classnames'; import { settings } from 'carbon-components'; import { WarningFilled16, + WarningAltFilled16, CaretDownGlyph, CaretUpGlyph, } from '@carbon/icons-react'; @@ -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 = { @@ -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, @@ -278,6 +289,8 @@ class NumberInput extends Component { readOnly, invalid, invalidText, + warn, + warnText, helperText, ariaLabel, light, @@ -353,6 +366,14 @@ class NumberInput extends Component { {invalidText} ); + } else if (warn) { + inputWrapperProps['data-warn'] = true; + errorId = `${id}-error-id`; + error = ( +
+ {warnText} +
+ ); } const helper = helperText ? ( @@ -434,6 +455,11 @@ class NumberInput extends Component { {isInputInvalid && ( )} + {!isInputInvalid && warn && ( + + )}
- {isInputInvalid ? null : helper} + {error ? null : helper} ); })()} From 9bb401124f1e43d166ff5e615388bc666bce5d76 Mon Sep 17 00:00:00 2001 From: Jan Hassel Date: Fri, 11 Sep 2020 14:39:50 +0200 Subject: [PATCH 2/2] fix: use --warning modifier instead of data-warn attribute --- packages/components/src/components/form/_form.scss | 6 +++--- .../react/src/components/NumberInput/NumberInput.js | 7 +++++-- packages/react/src/components/TextInput/TextInput.js | 12 +++++++----- 3 files changed, 15 insertions(+), 10 deletions(-) diff --git a/packages/components/src/components/form/_form.scss b/packages/components/src/components/form/_form.scss index 7a39c490448c..eb7af8d51b6a 100644 --- a/packages/components/src/components/form/_form.scss +++ b/packages/components/src/components/form/_form.scss @@ -78,11 +78,11 @@ input[data-invalid], .#{$prefix}--number[data-invalid] .#{$prefix}--number__input-wrapper, - .#{$prefix}--number[data-warn] .#{$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__field-wrapper[data-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], @@ -111,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; } diff --git a/packages/react/src/components/NumberInput/NumberInput.js b/packages/react/src/components/NumberInput/NumberInput.js index 48e6fb22d3b3..8dfb44d4930e 100644 --- a/packages/react/src/components/NumberInput/NumberInput.js +++ b/packages/react/src/components/NumberInput/NumberInput.js @@ -367,7 +367,6 @@ class NumberInput extends Component { ); } else if (warn) { - inputWrapperProps['data-warn'] = true; errorId = `${id}-error-id`; error = (
@@ -395,6 +394,10 @@ class NumberInput extends Component { t('decrement.number'), ]; + const wrapperClasses = classNames(`${prefix}--number__input-wrapper`, { + [`${prefix}--number__input-wrapper--warning`]: !isInputInvalid && warn, + }); + return (
@@ -441,7 +444,7 @@ class NumberInput extends Component { return ( <> {labelText} -
+
{labelText} @@ -136,10 +141,7 @@ const TextInput = React.forwardRef(function TextInput(
)}
-
+
{invalid && (