refactor(Form): use grid layout (#576)

BREAKING CHANGE: deleted `CurrentViewportRange` (mostly used internally)
BREAKING CHANGE: `FormGroup` and `FormItem` don't support `className`, `style`, `ref`, ..etc. props anymore, there are only used for calculating the final form layout.

Closes #564

Author: MarcusNotheis

package.json

@@ -116,8 +116,10 @@
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
-      "prettier -config ./prettier.config.js --write",
-      "git add"
+      "prettier -config ./prettier.config.js --write"
+    ],
+    "*.mdx": [
+      "prettier -config ./prettier.config.js --write --parser mdx"
     ]
   }
 }

packages/main/src/components/Form/CurrentViewportRangeContext.ts

@@ -1,9 +1,19 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
 
 const styles = {
+  form: {
+    display: 'grid',
+    alignItems: 'center',
+    rowGap: '0.5rem',
+    columnGap: '0.25rem',
+    gridTemplateColumns: `repeat(12, 1fr)`,
+    '--ui5wcr_form_full_span': 'span 12',
+    '--ui5wcr_form_label_text_align': 'end'
+  },
   formTitle: {
     borderBottom: `1px solid ${ThemingParameters.sapGroup_TitleBorderColor}`,
-    marginBottom: '2rem'
+    marginBottom: '1.75rem',
+    gridColumn: 'var(--ui5wcr_form_full_span)'
   }
 };
 

packages/main/src/components/Form/Form.jss.ts

@@ -0,0 +1,84 @@
+import { Title, Subtitle, Description, Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { CheckBox } from '@ui5/webcomponents-react/lib/CheckBox';
+import { Form } from '@ui5/webcomponents-react/lib/Form';
+import { FormGroup } from '@ui5/webcomponents-react/lib/FormGroup';
+import { FormItem } from '@ui5/webcomponents-react/lib/FormItem';
+import { Input } from '@ui5/webcomponents-react/lib/Input';
+import { InputType } from '@ui5/webcomponents-react/lib/InputType';
+import { Option } from '@ui5/webcomponents-react/lib/Option';
+import { Select } from '@ui5/webcomponents-react/lib/Select';
+import { Label } from '@ui5/webcomponents-react/lib/Label';
+
+<Meta title="Components / Form" component={Form} subcomponents={{ FormGroup, FormItem }} />
+
+<Title />
+
+```js
+import { Form } from '@ui5/webcomponents-react/lib/Form';
+```
+
+<Preview>
+  <Story name="Default">
+    <Form title={'Test Form'}>
+      <FormGroup title={'Personal Data'}>
+        <FormItem label={'Name'}>
+          <Input type={InputType.Text} />
+        </FormItem>
+        <FormItem label={<Label>Address</Label>}>
+          <Input type={InputType.Text} />
+        </FormItem>
+        <FormItem label={'Country'}>
+          <Select>
+            <Option>Germany</Option>
+            <Option>France</Option>
+            <Option>Italy</Option>
+          </Select>
+        </FormItem>
+        <FormItem label={'Home address'}>
+          <CheckBox checked />
+        </FormItem>
+      </FormGroup>
+      <FormItem label={'Sole Form Item'}>
+        <Input type={InputType.Text} />
+      </FormItem>
+      <FormGroup title={'Company Data'}>
+        <FormItem label={'Company Name'}>
+          <Input type={InputType.Text} />
+        </FormItem>
+        <FormItem label={'Company Address'}>
+          <Input type={InputType.Text} />
+        </FormItem>
+        <FormItem label={'Company City'}>
+          <Input type={InputType.Text} />
+        </FormItem>
+        <FormItem label={'Company Country'}>
+          <Input type={InputType.Text} />
+        </FormItem>
+        <FormItem label={'Number of Employees'}>
+          <Input type={InputType.Number} value={'5000'} disabled />
+        </FormItem>
+        <FormItem label={'Member of Partner Network'}>
+          <CheckBox checked />
+        </FormItem>
+      </FormGroup>
+      <FormGroup title={'Marketing Data'}>
+        <FormItem label={'Email'}>
+          <Input type={InputType.Email} />
+        </FormItem>
+        <FormItem label="Company Email">
+          <Input type={InputType.Email} />
+        </FormItem>
+        <FormItem label="I want to receive the newsletter">
+          <CheckBox />
+        </FormItem>
+      </FormGroup>
+    </Form>
+  </Story>
+</Preview>
+
+### Usage Notes
+
+Please note that the `FormGroup` and `FormItem` components are only used for calculating the final layout of the `Form`,
+thus they don't accept any other props then the specified ones, especially no `className`, `style` or `ref`.
+
+<Props components={{ Form, FormGroup, FormItem }} />

packages/main/src/components/Form/Form.stories.mdx

@@ -58,21 +58,6 @@ describe('Create a Form', () => {
     expect(wrapper.render()).toMatchSnapshot();
   });
 
-  test('should create a FormGroup and put ungrouped FormItems into it', () => {
-    const ungroupedChildren = (
-      <Form title={'Test form'}>
-        <FormItem label={'item 1'}>
-          <Input type={InputType.Text} />
-        </FormItem>
-        <FormItem label={'item 2'}>
-          <Input type={InputType.Number} />
-        </FormItem>
-      </Form>
-    );
-    const wrapper = mount(ungroupedChildren);
-    expect(wrapper.render()).toMatchSnapshot();
-  });
-
   test("should use a single FormGroup's title as a Form title if one is not set", () => {
     const ungroupedChildren = (
       <Form>