fix(atoms): remove sizes modifier from the form

8base · Oct 2, 2018 · c34e906 · c34e906
1 parent 0fce6bf
commit c34e906
Show file tree

Hide file tree

Showing 8 changed files with 274 additions and 206 deletions.
diff --git a/src/atoms/dataEntry/Form/Form.stories.js b/src/atoms/dataEntry/Form/Form.stories.js
@@ -20,14 +20,18 @@ export default (asStory) => {
         <Form.Plate>
           <Form.Section>
             <Form.SectionTitle>Some section 1</Form.SectionTitle>
-            <FieldMock component={ InputField } name="curple" label="Jobs" />
-            <FieldMock component={ InputField } name="provect" label="Posted" />
-            <FieldMock component={ InputField } name="inlaying" label="My Active Jobs" />
+            <Form.SectionBody>
+              <FieldMock component={ InputField } name="curple" label="Jobs" />
+              <FieldMock component={ InputField } name="provect" label="Posted" />
+              <FieldMock component={ InputField } name="inlaying" label="My Active Jobs" />
+            </Form.SectionBody>
           </Form.Section>
           <Form.Section>
             <Form.SectionTitle>Some section 2</Form.SectionTitle>
-            <FieldMock component={ InputField } name="saccharifier" label="Active Requests" />
-            <FieldMock component={ InputField } name="inertance" label="Applied" />
+            <Form.SectionBody>
+              <FieldMock component={ InputField } name="saccharifier" label="Active Requests" />
+              <FieldMock component={ InputField } name="inertance" label="Applied" />
+            </Form.SectionBody>
           </Form.Section>
         </Form.Plate>
       ));

diff --git a/src/atoms/dataEntry/Form/FormField.js b/src/atoms/dataEntry/Form/FormField.js
@@ -47,6 +47,8 @@ export const ControlErrorTag = createStyledTag(name, props => ({
   fontSize: '1rem',
   color: props.theme.COLORS.DANGER,
   lineHeight: 1,
+  position: 'relative',
+  top: '-2px',
 }));
 
 const ControlLabelTag = createStyledTag(name, props => ({

diff --git a/src/atoms/dataEntry/Form/FormPlate.js b/src/atoms/dataEntry/Form/FormPlate.js
@@ -45,7 +45,13 @@ function FormPlate({
       tagName={ component }
       onSubmit={ onSubmit }
     >
-      <FlexLayout { ...rest }>{ children }</FlexLayout>
+      <FlexLayout
+        { ...rest }
+        gap="md"
+        alignItems="stretch"
+      >
+        { children }
+      </FlexLayout>
     </FormStyledTag>
   );
 }

diff --git a/src/atoms/dataEntry/Form/FormSection.js b/src/atoms/dataEntry/Form/FormSection.js
@@ -5,21 +5,19 @@ import React from 'react';
 import { FlexLayout } from '../../FlexLayout/FlexLayout';
 
 type FormSectionProps = {
-  direction?: 'column' | 'row',
-  stretch?: boolean,
   children: React$Node,
 };
 
-const FormSection = ({ ...rest }: FormSectionProps) => {
-  return (
-    <FlexLayout { ...rest } />
-  );
-};
-
-FormSection.defaultProps = {
-  direction: 'column',
-  stretch: true,
-};
+const FormSection = ({ children, ...rest }: FormSectionProps) => (
+  <FlexLayout
+    { ...rest }
+    stretch
+    gap="sm"
+    direction="column"
+  >
+    { children }
+  </FlexLayout>
+);
 
 export { FormSection };
 
diff --git a/src/atoms/dataEntry/Form/FormSectionBody.js b/src/atoms/dataEntry/Form/FormSectionBody.js
@@ -0,0 +1,31 @@
+// @flow
+
+import React from 'react';
+
+import { FlexLayout } from '../../FlexLayout/FlexLayout';
+import type { PropLayoutStretch } from '../../../types';
+
+type FormSectionBodyProps = {
+  alignItems: PropLayoutStretch,
+  children: React$Node,
+};
+
+const FormSectionBody = ({ children, ...rest }: FormSectionBodyProps) => {
+  return (
+    <FlexLayout
+      { ...rest }
+      stretch
+      gap="md"
+      direction="column"
+    >
+      { children }
+    </FlexLayout>
+  );
+};
+
+FormSectionBody.defaultProps = {
+  alignItems: 'stretch',
+};
+
+export { FormSectionBody };
+
diff --git a/src/atoms/dataEntry/Form/FormSectionTitle.js b/src/atoms/dataEntry/Form/FormSectionTitle.js
@@ -2,42 +2,22 @@
 
 import React from 'react';
 import { createStyledTag, createTheme } from '../../../utils';
-import type { PropSizes } from '../../../types';
 
 type FormSectionTitleProps = {|
   children?: React$Node,
   text?: string,
-  size?: PropSizes,
 |}
 
 const name = 'formSectionTitle';
 
 const theme = createTheme(name, {
-  modifiers: {
-    size: {
-      xs: {
-        fontSize: '1rem',
-      },
-      sm: {
-        fontSize: '1.2rem',
-      },
-      md: {
-        fontSize: '1.4rem',
-      },
-      lg: {
-        fontSize: '1.6rem',
-      },
-      xl: {
-        fontSize: '1.8rem',
-      },
-    },
-  },
-  defaults: {
-  },
+  modifiers: {},
+  defaults: {},
 });
 
 const FormSectionTitleTag = createStyledTag(name, {
   fontWeight: 600,
+  fontSize: '1.2rem',
 });
 
 const FormSectionTitle = ({ children, text, ...rest }: FormSectionTitleProps) => (

diff --git a/src/atoms/dataEntry/Form/index.js b/src/atoms/dataEntry/Form/index.js
@@ -3,13 +3,15 @@
 import { FormField as Field, theme as formFieldTheme, ControlErrorTag } from './FormField';
 import { FormPlate as Plate, theme as formPlateTheme } from './FormPlate';
 import { FormSection as Section } from './FormSection';
+import { FormSectionBody as SectionBody } from './FormSectionBody';
 import { FormSectionTitle as SectionTitle, theme as formSectionTitleTheme } from './FormSectionTitle';
 
 const Form = {
   Field,
   Plate,
   Section,
   SectionTitle,
+  SectionBody,
   ControlErrorTag,
 };