refactor(form): remove custom classes and add container to form items

eea · Mar 8, 2022 · d1ec083 · d1ec083
1 parent 061f3e3
commit d1ec083
Show file tree

Hide file tree

Showing 5 changed files with 181 additions and 236 deletions.
diff --git a/src/ui/Form/Checkbox.stories.js b/src/ui/Form/Checkbox.stories.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Checkbox, Form, Message } from 'semantic-ui-react';
+import { Checkbox, Form, Message, Container } from 'semantic-ui-react';
 
 export default {
   title: 'Components/Forms/Checkbox',
@@ -76,32 +76,34 @@ function CheckboxForm({
   required,
 }) {
   return (
-    <Form>
-      <Form.Field>
-        {label}
-        {required ? (
-          <span style={{ color: 'red' }}>{requiredText}</span>
-        ) : (
-          <span>{optionalText}</span>
-        )}
-      </Form.Field>
-      <Form.Field>{helperText}</Form.Field>
-      {invalid ? (
-        <Message icon="exclamation circle" content={errorMessage} negative />
-      ) : null}
-      <Form.Field error={invalid}>
-        <Checkbox label="Option 1" defaultChecked id="field1"></Checkbox>
-        <label htmlFor="field1">Helper text for option 1</label>
-      </Form.Field>
-      <Form.Field error={invalid}>
-        <Checkbox label="Option 2" id="field2"></Checkbox>
-        <label htmlFor="field2">Helper text for option 2</label>
-      </Form.Field>
-      <Form.Field error={invalid}>
-        <Checkbox label="Option 3 (disabled)" disabled id="field3"></Checkbox>
-        <label htmlFor="field3">Helper text for option 3</label>
-      </Form.Field>
-    </Form>
+    <Container>
+      <Form>
+        <Form.Field>
+          {label}
+          {required ? (
+            <span style={{ color: 'red' }}>{requiredText}</span>
+          ) : (
+            <span>{optionalText}</span>
+          )}
+        </Form.Field>
+        <Form.Field>{helperText}</Form.Field>
+        {invalid ? (
+          <Message icon="exclamation circle" content={errorMessage} negative />
+        ) : null}
+        <Form.Field error={invalid}>
+          <Checkbox label="Option 1" defaultChecked id="field1"></Checkbox>
+          <label htmlFor="field1">Helper text for option 1</label>
+        </Form.Field>
+        <Form.Field error={invalid}>
+          <Checkbox label="Option 2" id="field2"></Checkbox>
+          <label htmlFor="field2">Helper text for option 2</label>
+        </Form.Field>
+        <Form.Field error={invalid}>
+          <Checkbox label="Option 3 (disabled)" disabled id="field3"></Checkbox>
+          <label htmlFor="field3">Helper text for option 3</label>
+        </Form.Field>
+      </Form>
+    </Container>
   );
 }
 
@@ -115,25 +117,27 @@ function SingleCheckboxForm({
   required,
 }) {
   return (
-    <Form>
-      <Form.Field>
-        {label}
-        {required ? (
-          <span style={{ color: 'red' }}>{requiredText}</span>
-        ) : (
-          <span>{optionalText}</span>
-        )}
-      </Form.Field>
-      <Form.Field>{helperText}</Form.Field>
+    <Container>
+      <Form>
+        <Form.Field>
+          {label}
+          {required ? (
+            <span style={{ color: 'red' }}>{requiredText}</span>
+          ) : (
+            <span>{optionalText}</span>
+          )}
+        </Form.Field>
+        <Form.Field>{helperText}</Form.Field>
 
-      <Form.Field error={invalid}>
-        <Checkbox label="Option 1" defaultChecked id="field4"></Checkbox>
-        <label htmlFor="field4">Helper text for option 1</label>
-      </Form.Field>
-      {invalid ? (
-        <Message header="Error Message" content={errorMessage} negative />
-      ) : null}
-    </Form>
+        <Form.Field error={invalid}>
+          <Checkbox label="Option 1" defaultChecked id="field4"></Checkbox>
+          <label htmlFor="field4">Helper text for option 1</label>
+        </Form.Field>
+        {invalid ? (
+          <Message header="Error Message" content={errorMessage} negative />
+        ) : null}
+      </Form>
+    </Container>
   );
 }
 

diff --git a/src/ui/Form/Dropdown.stories.js b/src/ui/Form/Dropdown.stories.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, Form } from 'semantic-ui-react';
+import { Dropdown, Form, Container } from 'semantic-ui-react';
 import FormFieldWrapper from '../FormFieldWrapper/FormFieldWrapper';
 
 export default {
@@ -57,21 +57,18 @@ const listOptions = [
 ];
 
 const Template = ({ label, error, ...args }) => (
-  <Form>
-    <FormFieldWrapper
-      label={label}
-      error={error}
-      required={args.required}
-      columns={label ? 1 : 0}
-    >
-      <Dropdown
-        className="eea-dropdown"
-        selection
-        {...args}
-        aria-label="item"
-      ></Dropdown>
-    </FormFieldWrapper>
-  </Form>
+  <Container>
+    <Form>
+      <FormFieldWrapper
+        label={label}
+        error={error}
+        required={args.required}
+        columns={label ? 1 : 0}
+      >
+        <Dropdown selection {...args} aria-label="item"></Dropdown>
+      </FormFieldWrapper>
+    </Form>
+  </Container>
 );
 
 export const Default = Template.bind({});
@@ -83,13 +80,9 @@ export const Playground = Template.bind({});
 Playground.args = {
   placeholder: 'Select Option',
   options: listOptions,
-  label: 'Dropdown Label',
+  label: 'Dropdown',
   required: true,
   search: false,
-  multiple: false,
-  clearable: false,
-  inline: false,
-  floating: false,
   disabled: false,
   fluid: false,
 };
@@ -102,34 +95,6 @@ Playground.argTypes = {
       defaultValue: { summary: false },
     },
   },
-  multiple: {
-    description: 'allow multiple selections',
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: false },
-    },
-  },
-  clearable: {
-    description: 'remove some selection',
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: false },
-    },
-  },
-  inline: {
-    description: 'format dropdown to appear inline in other content',
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: false },
-    },
-  },
-  floating: {
-    description: 'dropdown menu can appear to be floating below an element',
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: false },
-    },
-  },
   disabled: {
     description: 'disable dropdown',
     table: {
@@ -164,14 +129,10 @@ export const ErrorDropdown = Template.bind({});
 ErrorDropdown.args = {
   placeholder: 'Select Option',
   options: listOptions,
-  label: 'Dropdown Label',
+  label: 'Dropdown',
   error: true,
   required: true,
   search: false,
-  multiple: false,
-  clearable: false,
-  inline: false,
-  floating: false,
   disabled: false,
   fluid: false,
 };
@@ -184,34 +145,6 @@ ErrorDropdown.argTypes = {
       defaultValue: { summary: false },
     },
   },
-  multiple: {
-    description: 'allow multiple selections',
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: false },
-    },
-  },
-  clearable: {
-    description: 'remove some selection',
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: false },
-    },
-  },
-  inline: {
-    description: 'format dropdown to appear inline in other content',
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: false },
-    },
-  },
-  floating: {
-    description: 'dropdown menu can appear to be floating below an element',
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: false },
-    },
-  },
   disabled: {
     description: 'disable dropdown',
     table: {

diff --git a/src/ui/Form/Input.stories.js b/src/ui/Form/Input.stories.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input, Form } from 'semantic-ui-react';
+import { Input, Form, Container } from 'semantic-ui-react';
 import FormFieldWrapper from '../FormFieldWrapper/FormFieldWrapper';
 
 export default {
@@ -55,16 +55,18 @@ export default {
 };
 
 const Template = ({ label, error, ...rest }) => (
-  <Form>
-    <FormFieldWrapper
-      error={error}
-      label={label}
-      required={rest.required}
-      columns={label ? 1 : 0}
-    >
-      <Input {...rest} id="temp-id" />
-    </FormFieldWrapper>
-  </Form>
+  <Container>
+    <Form>
+      <FormFieldWrapper
+        error={error}
+        label={label}
+        required={rest.required}
+        columns={label ? 1 : 0}
+      >
+        <Input {...rest} id="temp-id" />
+      </FormFieldWrapper>
+    </Form>
+  </Container>
 );
 
 export const Default = Template.bind({});