Merge pull request #1748 from FoxComm/refactor/core-swatch-input

Refactor: core SwatchInput

Author: tonypizzicato

ashes/src/components/core/swatch-input/swatch-input.css

@@ -10,12 +10,10 @@
     color: #BFBFBF;
   }
 
-  & :global(input[type=text].fc-text-input) {
+  & .input {
     width: 130px;
+    height: 40px;
     padding-left: 30px;
-  }
-
-  & input {
     text-transform: uppercase;
   }
 }

ashes/src/components/core/swatch-input/swatch-input.jsx

@@ -6,6 +6,9 @@
 import React, { Component, Element } from 'react';
 import { autobind } from 'core-decorators';
 
+// components
+import TextInput from 'components/forms/text-input';
+
 // styles
 import s from './swatch-input.css';
 
@@ -37,8 +40,8 @@ class SwatchInput extends Component {
   };
 
   @autobind
-  handleChange({ target }: EventTarget) {
-    this.props.onChange(target.value);
+  handleChange(value: string) {
+    this.props.onChange(value);
   }
 
   render() {
@@ -49,11 +52,11 @@ class SwatchInput extends Component {
 
     return (
       <div className={s.swatchInput}>
-        <input
+        <TextInput
           id="swatch-fld"
           type="text"
           maxLength="6"
-          className="fc-text-input"
+          className={s.input}
           onChange={this.handleChange}
           value={hexCode}
         />