refactor(atoms): using form field for select field

8base · May 21, 2018 · 4d29561 · 4d29561
1 parent 58bef39
commit 4d29561
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 47 deletions.
diff --git a/src/atoms/dataEntry/Select/Select.theme.js b/src/atoms/dataEntry/Select/Select.theme.js
@@ -21,7 +21,7 @@ const SelectValue = styled('div')((props) => ({
   fontFamily: 'Poppins',
   fontSize: '14px',
   fontWeight: 400,
-  height: '3rem',
+  height: '4rem',
   lineHeight: 'normal',
   outline: 'none',
   display: 'inline-flex',

diff --git a/src/atoms/dataEntry/SelectField/SelectField.js b/src/atoms/dataEntry/SelectField/SelectField.js
@@ -1,17 +1,22 @@
 import React from 'react';
 
-import { createStyledTag, createTheme } from 'utils';
+import { createTheme } from 'utils';
 import { Select } from '../Select';
-import { Label } from 'atoms/typography/Label';
+import { FormField } from '../FormField';
 
 type SelectFieldProps = {|
-  label: string,
-  name: string,
-  onChange: (event?: SyntheticInputEvent) => void,
+  /** array of select options */
   options: Array<Object>,
+  /** placeholder */
   placeholder?: string,
-  value?: string,
+  /** field label */
+  label?: string,
+  /** when true then stretch to the maximal width */
   stretch?: boolean,
+  /** form input object */
+  input?: InputType,
+  /** form meta object */
+  meta?: MetaType,
 |};
 
 const name = 'selectField';
@@ -23,33 +28,29 @@ const theme = createTheme(name, {
   },
 });
 
-const StyledTag = createStyledTag(name, {
-  display: 'inline-flex',
-  flexDirection: 'column',
-});
-
 function SelectField({
-  label,
-  name,
-  onChange,
-  placeholder,
-  value,
   options,
+  placeholder,
+  label,
   stretch,
+  input = {},
+  meta = {},
   ...rest
   }: SelectFieldProps) {
+  const { name, value, onChange } = input;
+
   return (
-    <StyledTag { ...rest } tagName="div">
-      <Label text={ label } kind="secondary" />
+    <FormField label={ label } stretch={ stretch } input={ input } meta={ meta }>
       <Select
+        { ...rest }
         name={ name }
         onChange={ onChange }
         placeholder={ placeholder }
         value={ value }
         options={ options }
         stretch={ stretch }
       />
-    </StyledTag>
+    </FormField>
   );
 }
 

diff --git a/src/atoms/dataEntry/SelectField/SelectField.stories.js b/src/atoms/dataEntry/SelectField/SelectField.stories.js
@@ -17,11 +17,10 @@ export default (asStory) => {
       .add('default', () => (
         <SelectField
           label="Select Label"
-          name="input"
+          input={{ name: 'input', onChange: () => null, value: OPTIONS[0].value }}
           placeholder="Select an option"
-          onChange={ () => null }
           options={ OPTIONS }
-          value={ OPTIONS[0].value }
+          stretch
         />
       ));
   });

diff --git a/storybook/__tests__/__snapshots__/storyshots.test.js.snap b/storybook/__tests__/__snapshots__/storyshots.test.js.snap
@@ -2684,7 +2684,7 @@ exports[`Storyshots ATOMS/DATA ENTRY/Select default 1`] = `
   font-family: Poppins;
   font-size: 14px;
   font-weight: 400;
-  height: 3rem;
+  height: 4rem;
   line-height: normal;
   outline: none;
   display: -webkit-inline-box;
@@ -2800,7 +2800,7 @@ exports[`Storyshots ATOMS/DATA ENTRY/Select filled 1`] = `
   font-family: Poppins;
   font-size: 14px;
   font-weight: 400;
-  height: 3rem;
+  height: 4rem;
   line-height: normal;
   outline: none;
   display: -webkit-inline-box;
@@ -2916,7 +2916,7 @@ exports[`Storyshots ATOMS/DATA ENTRY/Select stretch 1`] = `
   font-family: Poppins;
   font-size: 14px;
   font-weight: 400;
-  height: 3rem;
+  height: 4rem;
   line-height: normal;
   outline: none;
   display: -webkit-inline-box;
@@ -3003,27 +3003,27 @@ exports[`Storyshots ATOMS/DATA ENTRY/SelectField default 1`] = `
   margin: 2rem;
 }
 
-.emotion-5 {
-  cursor: pointer;
+.emotion-4 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  height: auto;
-  width: auto;
-  z-index: 2;
+  width: 100%;
+  height: 100%;
 }
 
-.emotion-4 {
+.emotion-5 {
+  cursor: pointer;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  width: 100%;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
   height: 100%;
+  width: 100%;
+  z-index: 2;
 }
 
 .emotion-0 {
@@ -3033,13 +3033,25 @@ exports[`Storyshots ATOMS/DATA ENTRY/SelectField default 1`] = `
   margin: 0;
 }
 
+.emotion-7 {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  width: 100%;
+}
+
 .emotion-3 {
   border: 1px solid #D0D7DD;
   border-radius: 5px;
   font-family: Poppins;
   font-size: 14px;
   font-weight: 400;
-  height: 3rem;
+  height: 4rem;
   line-height: normal;
   outline: none;
   display: -webkit-inline-box;
@@ -3075,16 +3087,6 @@ exports[`Storyshots ATOMS/DATA ENTRY/SelectField default 1`] = `
   height: 2.4rem;
 }
 
-.emotion-7 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
 <div
   className="emotion-8"
 >