feat: update textfield to use hoc

cmpsr · Oct 30, 2020 · 563eca9 · 563eca9
1 parent 7350f08
commit 563eca9
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 27 deletions.
diff --git a/packages/styled-components/src/components/primitives/Form/TextField/TextField.stories.tsx b/packages/styled-components/src/components/primitives/Form/TextField/TextField.stories.tsx
@@ -5,7 +5,7 @@ import { boolean, text, select, number } from '@storybook/addon-knobs';
 
 export default {
   title: 'Primitives/Form/TextField',
-  component: TextField
+  component: TextField,
 };
 
 export const Shapes = () => (
@@ -58,6 +58,7 @@ export const Playground = () => (
       shape={select('Shape', TextField.Shapes, TextField.Shapes.Rectangle)}
       inputMode={select('Mode', TextField.Modes, TextField.Modes.Text)}
       onChange={action('On change')}
+      customCss={text('Custom css', 'padding: 10px; border: 1px dashed blue;')}
     />
   </>
 );
diff --git a/packages/styled-components/src/components/primitives/Form/TextField/TextField.styled.ts b/packages/styled-components/src/components/primitives/Form/TextField/TextField.styled.ts
@@ -1,56 +1,54 @@
 import styled from 'styled-components';
 import { getTheme } from 'utils/getTheme';
-import { customCss } from 'utils/customCss';
 import {
   StyledBaseProps,
-  StyledCssProps
+  StyledCssProps,
 } from 'components/Components.styled.types';
+import { withCustomCss } from 'utils/withCustomCss';
 
 type Props = StyledBaseProps & StyledCssProps;
 
-export const StyledInput = styled.input<Props>`
-  background-color: ${props => getTheme(props).colors.fillFormEnabled};
+export const StyledInput = withCustomCss(styled.input<Props>`
+  background-color: ${(props) => getTheme(props).colors.fillFormEnabled};
   position: relative;
   display: block;
   width: 100%;
   padding: 0.75rem;
-  color: ${props => getTheme(props).Typography.colors.dark100};
+  color: ${(props) => getTheme(props).Typography.colors.dark100};
   z-index: 10;
-  font-size: ${props => getTheme(props).Typography.sm.fontSize.form};
-  font-family: ${props => getTheme(props).Typography.sm.fontFamily.form};
+  font-size: ${(props) => getTheme(props).Typography.sm.fontSize.form};
+  font-family: ${(props) => getTheme(props).Typography.sm.fontFamily.form};
   appearance: none;
   border-width: 1px;
   border-style: solid;
-  border-color: ${props => getTheme(props).colors.outlineFormFilled};
+  border-color: ${(props) => getTheme(props).colors.outlineFormFilled};
 
   &.rounded {
-    border-radius: ${props => getTheme(props).Input.borderRadius.rounded};
+    border-radius: ${(props) => getTheme(props).Input.borderRadius.rounded};
   }
   &.semiRounded {
-    border-radius: ${props => getTheme(props).Input.borderRadius.semiRounded};
+    border-radius: ${(props) => getTheme(props).Input.borderRadius.semiRounded};
   }
   &.rectangle {
-    border-radius: ${props => getTheme(props).Input.borderRadius.rectangle};
+    border-radius: ${(props) => getTheme(props).Input.borderRadius.rectangle};
   }
   &.invalid {
-    border-color: ${props => getTheme(props).colors.fillSystemError};
+    border-color: ${(props) => getTheme(props).colors.fillSystemError};
   }
-  &:placeholder {
-    color: ${props => getTheme(props).colors.outlineFormFilled};
+  &::placeholder {
+    color: ${(props) => getTheme(props).colors.outlineFormFilled};
   }
   &:focus {
     outline: none;
-    border-color: ${props => getTheme(props).colors.outlineFormFocus};
+    border-color: ${(props) => getTheme(props).colors.outlineFormFocus};
   }
   &:disabled {
-    background-color: ${props => getTheme(props).colors.fillFormDisabled};
-    border-color: ${props => getTheme(props).colors.outlineFormDisabled};
-    color: ${props => getTheme(props).Typography.colors.dark50};
+    background-color: ${(props) => getTheme(props).colors.fillFormDisabled};
+    border-color: ${(props) => getTheme(props).colors.outlineFormDisabled};
+    color: ${(props) => getTheme(props).Typography.colors.dark50};
   }
-  @media (min-width: ${props => getTheme(props).breakpoints.md}) {
-    font-size: ${props => getTheme(props).Typography.md.fontSize.form};
-    font-family: ${props => getTheme(props).Typography.md.fontFamily.form};
+  @media (min-width: ${(props) => getTheme(props).breakpoints.md}) {
+    font-size: ${(props) => getTheme(props).Typography.md.fontSize.form};
+    font-family: ${(props) => getTheme(props).Typography.md.fontFamily.form};
   }
-
-  ${props => customCss(props)};
-`;
+`);
diff --git a/packages/styled-components/src/components/primitives/Form/TextField/TextField.tsx b/packages/styled-components/src/components/primitives/Form/TextField/TextField.tsx
@@ -20,7 +20,7 @@ export const TextField: Type = forwardRef<HTMLInputElement, Props>(
       maxLength,
       inputMode,
       testId = 'textField',
-      customCss
+      customCss,
     }: Props,
     ref
   ) => (
@@ -29,7 +29,6 @@ export const TextField: Type = forwardRef<HTMLInputElement, Props>(
       css={customCss}
       className={cn(className, shape, {
         invalid: invalid,
-        custom: customCss
       })}
       aria-label={ariaLabel}
       name={name}