Merge 3f37201 into 58d89fd

SparkPost · Jan 7, 2019 · f243bba · f243bba
2 parents 58d89fd + 3f37201
commit f243bba
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 14 deletions.
diff --git a/packages/matchbox/src/components/TextField/TextField.js b/packages/matchbox/src/components/TextField/TextField.js
@@ -95,9 +95,9 @@ class TextField extends Component {
 
     const { paddingLeft, paddingRight } = this.state;
 
-    const setClasses = classnames(
-      styles.TextField,
-      error && styles.error
+    const setInputClasses = classnames(
+      styles.Input,
+      error && styles.Error
     );
 
     const requiredIndicator = required
@@ -134,7 +134,7 @@ class TextField extends Component {
       onFocus,
       onBlur,
       onChange,
-      className: styles.Input,
+      className: setInputClasses,
       style: { paddingLeft, paddingRight, resize }
       // 'aria-describedby':
       // 'aria-labelledby':
@@ -150,7 +150,7 @@ class TextField extends Component {
       : input;
 
     return (
-      <fieldset className={setClasses}>
+      <fieldset className={styles.TextField}>
         {label && !labelHidden && labelMarkup}
         <Connect left={connectLeft} right={connectRight}>
           {inputMarkup}

diff --git a/packages/matchbox/src/components/TextField/TextField.module.scss b/packages/matchbox/src/components/TextField/TextField.module.scss
@@ -11,11 +11,6 @@
   }
 }
 
-.error .Input {
-  border: 1px solid color(red);
-  background: rgba(color(red, dark), 0.06);
-}
-
 .InlineError {
   padding-left: spacing(small);
 }
@@ -39,6 +34,11 @@
 
   transition: border 0.15s;
 
+  &.Error {
+    border: 1px solid color(red);
+    background: rgba(color(red, dark), 0.06);
+  }
+
   &:focus {
     border: 1px solid color(blue);
     box-shadow: 0 0 0 1px color(blue);

diff --git a/packages/matchbox/src/components/TextField/tests/__snapshots__/TextField.test.js.snap b/packages/matchbox/src/components/TextField/tests/__snapshots__/TextField.test.js.snap
@@ -23,11 +23,11 @@ exports[`TextField renders TextField disabled 1`] = `
 
 exports[`TextField renders TextField error 1`] = `
 <fieldset
-  className="TextField error"
+  className="TextField"
 >
   <Connect>
     <input
-      className="Input"
+      className="Input Error"
       style={
         Object {
           "paddingLeft": undefined,
@@ -46,11 +46,11 @@ exports[`TextField renders TextField error 1`] = `
 
 exports[`TextField renders TextField errorInLabel 1`] = `
 <fieldset
-  className="TextField error"
+  className="TextField"
 >
   <Connect>
     <input
-      className="Input"
+      className="Input Error"
       style={
         Object {
           "paddingLeft": undefined,