fix(Input): replace borderColor style to the root to avoid problem wi…

…th custom themes
8base · Apr 29, 2019 · 051854a · 051854a
1 parent 544ca51
commit 051854a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/src/components/Input/Input.stories.js b/src/components/Input/Input.stories.js
@@ -45,6 +45,9 @@ export default (asStory) => {
         <StateContainer value="0">
           <Input name="input" type="number" stretch={ false } />
         </StateContainer>
+      ))
+      .add('with kind="underline"', () => (
+        <Input name="input" kind="underline" placeholder="custom placeholder" onChange={ () => null } />
       ));
   });
 };
diff --git a/src/components/Input/Input.theme.js b/src/components/Input/Input.theme.js
@@ -16,6 +16,8 @@ const [InputTag, themeInput] = createThemeTag(name, ({ COLORS, SIZES }: *): * =>
       ? COLORS.LIGHT_GRAY5
       : COLORS.WHITE,
 
+    borderColor: COLORS.PRIMARY_BORDER_COLOR,
+
     '&:focus': {
       borderColor: (props.disabled || props.readOnly)
         ? COLORS.PRIMARY_BORDER_COLOR
@@ -51,16 +53,18 @@ const [InputTag, themeInput] = createThemeTag(name, ({ COLORS, SIZES }: *): * =>
     },
     kind: {
       bordered: {
-        border: `1px solid ${COLORS.PRIMARY_BORDER_COLOR}`,
+        borderStyle: 'solid',
+        borderWidth: '1px',
         borderRadius: '5px',
       },
       underline: {
-        border: 0,
-        borderBottom: `1px solid ${COLORS.PRIMARY_BORDER_COLOR}`,
+        borderWidth: 0,
+        borderBottomStyle: 'solid',
+        borderBottomWidth: '1px',
       },
     },
     hasError: {
-      borderColor: `${COLORS.DANGER} !important`,
+      borderColor: `${COLORS.DANGER}`,
     },
   },
 }));