fix(textinput): apply className only to label

Not also to the child input BREAKING CHANGE only apply className to label
pluralsight · Apr 24, 2020 · b6c58f3 · b6c58f3
1 parent 7a0e701
commit b6c58f3
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 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
@@ -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
@@ -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
@@ -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>}