add error state when !isNumber to Numeric component

Author: VeraZab

src/components/widgets/NumericInput.js

@@ -12,13 +12,25 @@ export default class NumericInput extends Component {
   constructor(props) {
     super(props);
 
-    this.state = {value: props.value};
+    this.state = {
+      value: props.value,
+      numericInputClassName: this.getNumericInputClassName(props.value),
+    };
+
     this.onChange = this.onChange.bind(this);
     this.updateValue = this.updateValue.bind(this);
     this.onKeyDown = this.onKeyDown.bind(this);
     this.onWheel = this.onWheel.bind(this);
   }
 
+  getNumericInputClassName(value) {
+    return isNumeric(value)
+      ? `numeric-input__number ${this.props.editableClassName ? this.props.editableClassName : ''}`
+      : `numeric-input__number--error ${
+          this.props.editableClassName ? this.props.editableClassName : ''
+        }`;
+  }
+
   componentWillReceiveProps(nextProps) {
     if (nextProps.value !== this.state.value) {
       this.setState({value: nextProps.value});
@@ -49,17 +61,20 @@ export default class NumericInput extends Component {
   }
 
   onChange(value) {
-    this.setState({value});
+    this.setState({value, numericInputClassName: this.getNumericInputClassName(value)});
   }
 
   updateValue(newValue) {
-    const {max, min, integerOnly, value: propsValue} = this.props;
+    const {max, min, integerOnly} = this.props;
     let updatedValue = newValue;
 
     // When the user blurs on non-numeric data reset the component
     // to the last known good value (this.props.value).
     if (!isNumeric(updatedValue)) {
-      this.setState({value: propsValue});
+      this.setState({
+        value: updatedValue,
+        numericInputClassName: this.getNumericInputClassName(updatedValue),
+      });
       return;
     }
 
@@ -151,7 +166,7 @@ export default class NumericInput extends Component {
     return (
       <div className="numeric-input__wrapper">
         <EditableText
-          className={`numeric-input__number ${this.props.editableClassName}`}
+          className={this.state.numericInputClassName}
           placeholder={this.props.placeholder}
           text={this.state.value}
           type="text"

src/styles/components/widgets/_numeric-input.scss

@@ -49,6 +49,26 @@
   font-family: inherit;
 }
 
+.numeric-input__number--error {
+  display: inline-block;
+  border: var(--border-default);
+  border-color: var(--color-sienna);
+  background: var(--color-background-inputs);
+  cursor: text;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  border-radius: var(--border-radius-small);
+  padding: var(--spacing-quarter-unit) var(--spacing-quarter-unit) var(--spacing-quarter-unit)
+    var(--spacing-half-unit);
+  width: 62px;
+  vertical-align: middle;
+  font-size: inherit;
+  color: inherit;
+  font-family: inherit;
+}
+
 .numeric-input__caret-box {
   display: inline-block;
   max-height: 32px;