feat(NumberInput): add warn prop (#6652)

* feat(NumberInput): add warn prop * fix: use --warning modifier instead of data-warn attribute Co-authored-by: TJ Egan <tw15egan@gmail.com> Co-authored-by: Andrea N. Cardona <andreancardona@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Sep 22, 2020 · bcc0bc3 · bcc0bc3
1 parent a77ca27
commit bcc0bc3
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 9 deletions.
diff --git 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__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],
@@ -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;
   }
 

diff --git 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
@@ -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
@@ -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,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`, {
@@ -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}>
@@ -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}
@@ -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"
@@ -464,7 +493,7 @@ class NumberInput extends Component {
                     </button>
                   </div>
                 </div>
-                {isInputInvalid ? null : helper}
+                {error ? null : helper}
               </>
             );
           })()}

diff --git a/packages/react/src/components/TextInput/TextInput.js b/packages/react/src/components/TextInput/TextInput.js
@@ -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 = {
@@ -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}
@@ -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`}