From b6c58f309dddcb4273da93222efd09c34613f23f Mon Sep 17 00:00:00 2001
From: jaketrent <trent.jake@gmail.com>
Date: Fri, 24 Apr 2020 10:55:29 -0600
Subject: [PATCH] fix(textinput): apply className only to label

Not also to the child input

BREAKING CHANGE only apply className to label
---
 .../__snapshots__/storyshots.spec.js.snap     | 37 +++++++++++++++++++
 .../src/react/__stories__/index.story.js      |  1 +
 packages/textinput/src/react/index.js         |  3 +-
 3 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/packages/textinput/src/react/__specs__/__snapshots__/storyshots.spec.js.snap b/packages/textinput/src/react/__specs__/__snapshots__/storyshots.spec.js.snap
index 7ef9d0ffe6..a05d8b32fa 100644
--- a/packages/textinput/src/react/__specs__/__snapshots__/storyshots.spec.js.snap
+++ b/packages/textinput/src/react/__specs__/__snapshots__/storyshots.spec.js.snap
@@ -1414,6 +1414,43 @@ exports[`Storyshots layouts right-aligned 1`] = `
 </div>
 `;
 
+exports[`Storyshots whitelist className 1`] = `
+<div
+  data-css-12kxz7c=""
+>
+  <div
+    style={
+      Object {
+        "padding": "24px",
+      }
+    }
+  >
+    <label
+      className="shouldExistOnOneElement"
+      data-css-w0yocm=""
+    >
+      <div
+        data-css-1r967oi=""
+      >
+        <div
+          data-css-ctre2o=""
+        >
+          <div
+            data-css-ydex85=""
+          >
+            <input
+              data-css-1aru8qc=""
+              disabled={false}
+              size="medium"
+            />
+          </div>
+        </div>
+      </div>
+    </label>
+  </div>
+</div>
+`;
+
 exports[`Storyshots whitelist name 1`] = `
 <div
   data-css-12kxz7c=""
diff --git a/packages/textinput/src/react/__stories__/index.story.js b/packages/textinput/src/react/__stories__/index.story.js
index f111d812fe..9ab85b8311 100644
--- a/packages/textinput/src/react/__stories__/index.story.js
+++ b/packages/textinput/src/react/__stories__/index.story.js
@@ -117,6 +117,7 @@ storiesOf('whitelist', module)
   .add('onChange', _ => (
     <TextInput placeholder="Change me" onChange={action('I changed')} />
   ))
+  .add('className', _ => <TextInput className="shouldExistOnOneElement" />)
 
 storiesOf('layouts', module)
   .addDecorator(PaddingDecorator)
diff --git a/packages/textinput/src/react/index.js b/packages/textinput/src/react/index.js
index 19ded822af..7a48abbbaf 100644
--- a/packages/textinput/src/react/index.js
+++ b/packages/textinput/src/react/index.js
@@ -78,6 +78,7 @@ const TextInput = React.forwardRef((props, forwardedRef) => {
   const themeName = useTheme()
   const allProps = { ...props, themeName }
   const {
+    className,
     error,
     fieldAfter,
     label,
@@ -93,7 +94,7 @@ const TextInput = React.forwardRef((props, forwardedRef) => {
     <label
       {...styles.textInput(allProps)}
       {...(allProps.style ? { style: allProps.style } : null)}
-      {...(allProps.className ? { className: allProps.className } : null)}
+      {...(allProps.className ? { className } : null)}
     >
       {label && <div {...styles.label(allProps)}>{label}</div>}