fix(atoms): fix row direction in the form field

8base · Jun 29, 2018 · 6aed206 · 6aed206
1 parent dd95b23
commit 6aed206
Show file tree

Hide file tree

Showing 4 changed files with 1,192 additions and 695 deletions.
diff --git a/src/atoms/dataEntry/Form/FormField.js b/src/atoms/dataEntry/Form/FormField.js
@@ -24,6 +24,11 @@ const theme = createTheme(name, {
 
 const FormFieldTag = createStyledTag(name, props => ({
   position: 'relative',
+  display: 'inline-flex',
+  width: props.stretch ? '100%' : 'auto',
+}));
+
+const FormFieldDirectionTag = createStyledTag(name, props => ({
   display: 'inline-flex',
   flexDirection: props.direction === 'row' ? 'row-reverse' : 'column',
   alignItems: props.direction === 'row' ? 'center' : 'flex-start',
@@ -56,6 +61,7 @@ const FormField = ({
   label,
   children,
   direction,
+  stretch,
   hideErrorLabel,
   ...rest
   }: FormFieldProps) => {
@@ -64,13 +70,15 @@ const FormField = ({
   const hasLabel = !!label;
 
   return (
-    <FormFieldTag { ...rest } direction={ direction } tagName="div">
-      <If condition={ hasLabel }>
-        <ControlLabelTag direction={ direction } tagName="div">
-          { label }
-        </ControlLabelTag>
-      </If>
-      { children }
+    <FormFieldTag { ...rest } stretch={ stretch } tagName="div">
+      <FormFieldDirectionTag direction={ direction } stretch={ stretch } tagName="div">
+        <If condition={ hasLabel }>
+          <ControlLabelTag direction={ direction } tagName="div">
+            { label }
+          </ControlLabelTag>
+        </If>
+        { children }
+      </FormFieldDirectionTag>
       <If condition={ hasError && !hideErrorLabel }>
         <ControlErrorWrapperTag tagName="div">
           <ControlErrorTag tagName="span">{ error }</ControlErrorTag>

diff --git a/src/atoms/dataEntry/Input/Input.stories.js b/src/atoms/dataEntry/Input/Input.stories.js
@@ -18,6 +18,9 @@ export default (asStory) => {
       .add('with stretch=false', () => (
         <Input name="input" stretch={ false } onChange={ () => null } />
       ))
+      .add('with square=true', () => (
+        <Input name="input" square onChange={ () => null } />
+      ))
       .add('with left icon', () => (
         <Input name="input" leftIcon="i" />
       ))

diff --git a/src/atoms/dataEntry/InputField/InputField.stories.js b/src/atoms/dataEntry/InputField/InputField.stories.js
@@ -20,6 +20,9 @@ export default (asStory) => {
       .add('with error', () => (
         <InputField label="Input" input={{ name: 'input', onChange }} meta={{ error: 'Required', touched: true }} />
       ))
+      .add('with error and row direction', () => (
+        <InputField label="Input" direction="row" input={{ name: 'input', onChange }} meta={{ error: 'Required', touched: true }} />
+      ))
       .add('without label', () => (
         <InputField input={{ name: 'input', onChange }} />
       ))
@@ -29,7 +32,7 @@ export default (asStory) => {
       .add('with row direction', () => (
         <InputField direction="row" label="Input" input={{ name: 'input', onChange }} />
       ))
-      .add('with row direction stretch=false', () => (
+      .add('with row direction and stretch=false', () => (
         <InputField direction="row" stretch={ false } label="Input" input={{ name: 'input', onChange }} />
       ))
       .add('with square input', () => (