fix(components): Correctly apply TextArea styles (#445)

* feat(components): pass styles to Input as object not classname

Deprecates the use of classname props to pass styles to the Input component. Will be removed in the
next major version.

* refactor(components): deprecate the element prop on the Input

* fix(components): correctly pass custom textarea styles

Author: connor-baer

src/components/Input/Input.js

@@ -24,7 +24,10 @@ import { size } from 'polished';
 import HtmlElement from '../HtmlElement';
 import { textMega, disableVisually } from '../../styles/style-helpers';
 import { directions } from '../../styles/constants';
-import { childrenPropType } from '../../util/shared-prop-types';
+import {
+  childrenPropType,
+  deprecatedPropType
+} from '../../util/shared-prop-types';
 
 import Tooltip from '../Tooltip';
 
@@ -268,8 +271,12 @@ const StyledInput = ({
   inline,
   disabled,
   wrapperClassName,
+  wrapperStyles,
   inputClassName,
+  inputStyles,
   deepRef,
+  element,
+  as,
   ...props
 }) => {
   const prefix = RenderPrefix && <RenderPrefix css={prefixStyles} />;
@@ -284,7 +291,13 @@ const StyledInput = ({
 
   return (
     <InputContainer
-      {...{ noMargin, inline, disabled, className: wrapperClassName }}
+      {...{
+        noMargin,
+        inline,
+        disabled,
+        className: wrapperClassName,
+        css: wrapperStyles
+      }}
     >
       {prefix}
       <InputElement
@@ -294,9 +307,11 @@ const StyledInput = ({
           disabled,
           hasWarning,
           deepRef,
+          element: element || as,
           hasPrefix: !!prefix,
           hasSuffix: !!suffix,
-          className: inputClassName
+          className: inputClassName,
+          css: inputStyles
         }}
         aria-invalid={invalid}
         blacklist={{
@@ -327,9 +342,20 @@ Input.RIGHT = directions.RIGHT;
 Input.propTypes = {
   children: childrenPropType,
   /**
+   * @deprecated
    * The HTML input element to render.
    */
-  element: PropTypes.oneOf(['input', 'textarea']),
+  element: deprecatedPropType(
+    PropTypes.oneOf(['input', 'textarea']),
+    [
+      'Emotion 10 introduced the ability to change the HTML element.',
+      'Use the "as" prop instead.'
+    ].join(' ')
+  ),
+  /**
+   * The HTML input element to render.
+   */
+  as: PropTypes.oneOf(['input', 'textarea']),
   /**
    * Render prop that should render a left-aligned overlay icon or element.
    * Receives a className prop.
@@ -382,13 +408,35 @@ Input.propTypes = {
    */
   textAlign: PropTypes.oneOf([Input.LEFT, Input.RIGHT]),
   /**
+   * @deprecated
    * Class name to overwrite the <input> element styles.
    */
-  inputClassName: PropTypes.string,
+  inputClassName: deprecatedPropType(
+    PropTypes.string,
+    [
+      'Emotion 10 uses style objects instead of classnames.',
+      'Use the "inputStyles" prop instead.'
+    ].join(' ')
+  ),
   /**
+   * Emotion style object to overwrite the <input> element styles.
+   */
+  inputStyles: PropTypes.object,
+  /**
+   * @deprecated
    * Class name to overwrite the input wrapper element styles.
    */
-  wrapperClassName: PropTypes.string,
+  wrapperClassName: deprecatedPropType(
+    PropTypes.string,
+    [
+      'Emotion 10 uses style objects instead of classnames.',
+      'Use the "wrapperStyles" prop instead.'
+    ].join(' ')
+  ),
+  /**
+   * Emotion style object to overwrite the input wrapper element styles.
+   */
+  wrapperStyles: PropTypes.object,
   /**
    * DOM node to be forwarded to the actual input being rendered by
    * styled.
@@ -400,7 +448,7 @@ StyledInput.propTypes = Input.propTypes;
 
 Input.defaultProps = {
   children: null,
-  element: 'input',
+  as: 'input',
   renderPrefix: null,
   renderSuffix: null,
   validationHint: null,

src/components/Input/Input.spec.js

@@ -14,6 +14,7 @@
  */
 
 import React from 'react';
+import { css } from '@emotion/core';
 
 import Input from '.';
 import Label from '../Label';
@@ -107,6 +108,20 @@ describe('Input', () => {
     expect(actual).toMatchSnapshot();
   });
 
+  it('should render with custom styles', () => {
+    const actual = create(
+      <Input
+        wrapperStyles={css`
+          border: 1px solid red;
+        `}
+        inputStyles={css`
+          color: red;
+        `}
+      />
+    );
+    expect(actual).toMatchSnapshot();
+  });
+
   /**
    * Accessibility tests.
    */

src/components/Input/__snapshots__/Input.spec.js.snap

@@ -605,6 +605,91 @@ exports[`Input should render with a suffix when passed the suffix prop 1`] = `
 </div>
 `;
 
+exports[`Input should render with custom styles 1`] = `
+.circuit-2 {
+  opacity: 0;
+  -webkit-transition: opacity 200ms ease-in-out;
+  transition: opacity 200ms ease-in-out;
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  height: 16px;
+  width: 16px;
+  margin: 12px;
+  pointer-events: none;
+}
+
+.circuit-4 {
+  color: #212933;
+  display: block;
+  position: relative;
+  margin-bottom: 16px;
+  border: 1px solid red;
+}
+
+.circuit-0 {
+  background-color: #FFFFFF;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8DDE1;
+  border-radius: 4px;
+  box-shadow: inset 0 1px 2px 0 rgba(102,113,123,0.12);
+  padding: 8px 12px;
+  -webkit-transition: border-color 200ms ease-in-out;
+  transition: border-color 200ms ease-in-out;
+  width: 100%;
+  font-size: 16px;
+  line-height: 24px;
+  padding-right: calc( 12px + 16px + 12px );
+  color: red;
+}
+
+.circuit-0:focus,
+.circuit-0:active {
+  border: 1px solid #3388FF;
+  outline: none;
+}
+
+.circuit-0::-webkit-input-placeholder {
+  color: #9DA7B1;
+  -webkit-transition: color 200ms ease-in-out;
+  transition: color 200ms ease-in-out;
+}
+
+.circuit-0::-moz-placeholder {
+  color: #9DA7B1;
+  -webkit-transition: color 200ms ease-in-out;
+  transition: color 200ms ease-in-out;
+}
+
+.circuit-0:-ms-input-placeholder {
+  color: #9DA7B1;
+  -webkit-transition: color 200ms ease-in-out;
+  transition: color 200ms ease-in-out;
+}
+
+.circuit-0::placeholder {
+  color: #9DA7B1;
+  -webkit-transition: color 200ms ease-in-out;
+  transition: color 200ms ease-in-out;
+}
+
+<div
+  className=" circuit-4 circuit-5"
+  disabled={false}
+>
+  <input
+    aria-invalid={false}
+    className=" circuit-0 circuit-1"
+    disabled={false}
+    required={false}
+  />
+  <div
+    className="circuit-2 circuit-3"
+  />
+</div>
+`;
+
 exports[`Input should render with default styles 1`] = `
 .circuit-4 {
   color: #212933;

src/components/TextArea/TextArea.js

@@ -29,7 +29,7 @@ const textAreaStyles = css`
  * TextArea component for forms.
  */
 const TextArea = props => (
-  <Input {...props} css={textAreaStyles} element="textarea" />
+  <Input {...props} inputStyles={textAreaStyles} as="textarea" />
 );
 
 TextArea.LEFT = Input.LEFT;

src/components/TextArea/__snapshots__/TextArea.spec.js.snap

@@ -15,6 +15,8 @@ exports[`TextArea should prioritize disabled over error styles 1`] = `
   font-size: 16px;
   line-height: 24px;
   padding-right: calc( 12px + 16px + 12px );
+  overflow: auto;
+  resize: vertical;
 }
 
 .circuit-0:focus,
@@ -106,6 +108,8 @@ exports[`TextArea should prioritize disabled over warning styles 1`] = `
   font-size: 16px;
   line-height: 24px;
   padding-right: calc( 12px + 16px + 12px );
+  overflow: auto;
+  resize: vertical;
 }
 
 .circuit-0:focus,
@@ -237,6 +241,8 @@ exports[`TextArea should prioritize error over optional styles 1`] = `
   border-style: dashed;
   box-shadow: none;
   padding-right: calc( 12px + 16px + 12px );
+  overflow: auto;
+  resize: vertical;
 }
 
 .circuit-0:focus,
@@ -331,6 +337,8 @@ exports[`TextArea should render with a Tooltip when passed the validationHint pr
   font-size: 16px;
   line-height: 24px;
   padding-right: calc( 12px + 16px + 12px );
+  overflow: auto;
+  resize: vertical;
 }
 
 .circuit-0:focus,
@@ -460,6 +468,8 @@ exports[`TextArea should render with a prefix when passed the prefix prop 1`] =
   font-size: 16px;
   line-height: 24px;
   padding-right: calc( 12px + 16px + 12px );
+  overflow: auto;
+  resize: vertical;
 }
 
 .circuit-0:focus,
@@ -544,6 +554,8 @@ exports[`TextArea should render with a suffix when passed the suffix prop 1`] =
   font-size: 16px;
   line-height: 24px;
   padding-right: calc( 12px + 16px + 12px );
+  overflow: auto;
+  resize: vertical;
 }
 
 .circuit-0:focus,
@@ -628,6 +640,8 @@ exports[`TextArea should render with default styles 1`] = `
   font-size: 16px;
   line-height: 24px;
   padding-right: calc( 12px + 16px + 12px );
+  overflow: auto;
+  resize: vertical;
 }
 
 .circuit-0:focus,
@@ -704,6 +718,8 @@ exports[`TextArea should render with disabled styled when passed the disabled pr
   font-size: 16px;
   line-height: 24px;
   padding-right: calc( 12px + 16px + 12px );
+  overflow: auto;
+  resize: vertical;
 }
 
 .circuit-0:focus,
@@ -774,6 +790,8 @@ exports[`TextArea should render with inline styles when passed the inline prop 1
   font-size: 16px;
   line-height: 24px;
   padding-right: calc( 12px + 16px + 12px );
+  overflow: auto;
+  resize: vertical;
 }
 
 .circuit-0:focus,
@@ -880,6 +898,8 @@ exports[`TextArea should render with invalid styles when passed the invalid prop
   font-size: 16px;
   line-height: 24px;
   padding-right: calc( 12px + 16px + 12px );
+  overflow: auto;
+  resize: vertical;
 }
 
 .circuit-0:focus,
@@ -967,6 +987,8 @@ exports[`TextArea should render with no margin styles when passed the noMargin p
   font-size: 16px;
   line-height: 24px;
   padding-right: calc( 12px + 16px + 12px );
+  overflow: auto;
+  resize: vertical;
 }
 
 .circuit-0:focus,
@@ -1074,6 +1096,8 @@ exports[`TextArea should render with optional styles when passed the optional pr
   border-style: dashed;
   box-shadow: none;
   padding-right: calc( 12px + 16px + 12px );
+  overflow: auto;
+  resize: vertical;
 }
 
 .circuit-0:focus,
@@ -1144,6 +1168,8 @@ exports[`TextArea should render with valid styles when passed the showValid prop
   font-size: 16px;
   line-height: 24px;
   padding-right: calc( 12px + 16px + 12px );
+  overflow: auto;
+  resize: vertical;
 }
 
 .circuit-0:focus,
@@ -1231,6 +1257,8 @@ exports[`TextArea should render with warning styles when passed the hasWarning p
   font-size: 16px;
   line-height: 24px;
   padding-right: calc( 12px + 16px + 12px );
+  overflow: auto;
+  resize: vertical;
 }
 
 .circuit-0:focus,