Skip to content

Commit 1a1ddb7

Browse files
kleinju1017kleinju1017
committed
Merge branch 'master' into feat(Bubble-Chart)-new-bubble/scatter-chart
2 parents 248d741 + 7d6537f commit 1a1ddb7

File tree

16 files changed

+618
-863
lines changed

16 files changed

+618
-863
lines changed

‎CHANGELOG.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,23 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6+
# [0.10.0-rc.4](https://github.com/SAP/ui5-webcomponents-react/compare/v0.10.0-rc.3...v0.10.0-rc.4) (2020-06-18)
7+
8+
9+
### Code Refactoring
10+
11+
* **Form:** use grid layout ([#576](https://github.com/SAP/ui5-webcomponents-react/issues/576)) ([6f14ae5](https://github.com/SAP/ui5-webcomponents-react/commit/6f14ae5b8131f06fe1c3f32083a8cdb75e5b613a)), closes [#564](https://github.com/SAP/ui5-webcomponents-react/issues/564)
12+
13+
14+
### BREAKING CHANGES
15+
16+
* **Form:** deleted `CurrentViewportRange` (mostly used internally)
17+
* **Form:** `FormGroup` and `FormItem` don't support `className`, `style`, `ref`, ..etc. props anymore, there are only used for calculating the final form layout.
18+
19+
20+
21+
22+
623
# [0.10.0-rc.3](https://github.com/SAP/ui5-webcomponents-react/compare/v0.10.0-rc.2...v0.10.0-rc.3) (2020-06-16)
724

825

‎lerna.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"packages": [
33
"packages/*"
44
],
5-
"version": "0.10.0-rc.3",
5+
"version": "0.10.0-rc.4",
66
"npmClient": "yarn",
77
"useWorkspaces": true,
88
"command": {

‎package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -116,8 +116,10 @@
116116
},
117117
"lint-staged": {
118118
"*.{js,jsx,ts,tsx}": [
119-
"prettier -config ./prettier.config.js --write",
120-
"git add"
119+
"prettier -config ./prettier.config.js --write"
120+
],
121+
"*.mdx": [
122+
"prettier -config ./prettier.config.js --write --parser mdx"
121123
]
122124
}
123125
}

‎packages/main/CHANGELOG.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,23 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6+
# [0.10.0-rc.4](https://github.com/SAP/ui5-webcomponents-react/compare/v0.10.0-rc.3...v0.10.0-rc.4) (2020-06-18)
7+
8+
9+
### Code Refactoring
10+
11+
* **Form:** use grid layout ([#576](https://github.com/SAP/ui5-webcomponents-react/issues/576)) ([6f14ae5](https://github.com/SAP/ui5-webcomponents-react/commit/6f14ae5b8131f06fe1c3f32083a8cdb75e5b613a)), closes [#564](https://github.com/SAP/ui5-webcomponents-react/issues/564)
12+
13+
14+
### BREAKING CHANGES
15+
16+
* **Form:** deleted `CurrentViewportRange` (mostly used internally)
17+
* **Form:** `FormGroup` and `FormItem` don't support `className`, `style`, `ref`, ..etc. props anymore, there are only used for calculating the final form layout.
18+
19+
20+
21+
22+
623
# [0.10.0-rc.3](https://github.com/SAP/ui5-webcomponents-react/compare/v0.10.0-rc.2...v0.10.0-rc.3) (2020-06-16)
724

825

‎packages/main/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@ui5/webcomponents-react",
3-
"version": "0.10.0-rc.3",
3+
"version": "0.10.0-rc.4",
44
"description": "React Wrapper for UI5 Web Components and additional components",
55
"main": "index.cjs.js",
66
"module": "index.esm.js",

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

Lines changed: 0 additions & 5 deletions
This file was deleted.

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,19 @@
11
import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
22

33
const styles = {
4+
form: {
5+
display: 'grid',
6+
alignItems: 'center',
7+
rowGap: '0.5rem',
8+
columnGap: '0.25rem',
9+
gridTemplateColumns: `repeat(12, 1fr)`,
10+
'--ui5wcr_form_full_span': 'span 12',
11+
'--ui5wcr_form_label_text_align': 'end'
12+
},
413
formTitle: {
514
borderBottom: `1px solid ${ThemingParameters.sapGroup_TitleBorderColor}`,
6-
marginBottom: '2rem'
15+
marginBottom: '1.75rem',
16+
gridColumn: 'var(--ui5wcr_form_full_span)'
717
}
818
};
919

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

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { Title, Subtitle, Description, Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
2+
import { CheckBox } from '@ui5/webcomponents-react/lib/CheckBox';
3+
import { Form } from '@ui5/webcomponents-react/lib/Form';
4+
import { FormGroup } from '@ui5/webcomponents-react/lib/FormGroup';
5+
import { FormItem } from '@ui5/webcomponents-react/lib/FormItem';
6+
import { Input } from '@ui5/webcomponents-react/lib/Input';
7+
import { InputType } from '@ui5/webcomponents-react/lib/InputType';
8+
import { Option } from '@ui5/webcomponents-react/lib/Option';
9+
import { Select } from '@ui5/webcomponents-react/lib/Select';
10+
import { Label } from '@ui5/webcomponents-react/lib/Label';
11+
12+
<Meta title="Components / Form" component={Form} subcomponents={{ FormGroup, FormItem }} />
13+
14+
<Title />
15+
16+
```js
17+
import { Form } from '@ui5/webcomponents-react/lib/Form';
18+
```
19+
20+
<Preview>
21+
<Story name="Default">
22+
<Form title={'Test Form'}>
23+
<FormGroup title={'Personal Data'}>
24+
<FormItem label={'Name'}>
25+
<Input type={InputType.Text} />
26+
</FormItem>
27+
<FormItem label={<Label>Address</Label>}>
28+
<Input type={InputType.Text} />
29+
</FormItem>
30+
<FormItem label={'Country'}>
31+
<Select>
32+
<Option>Germany</Option>
33+
<Option>France</Option>
34+
<Option>Italy</Option>
35+
</Select>
36+
</FormItem>
37+
<FormItem label={'Home address'}>
38+
<CheckBox checked />
39+
</FormItem>
40+
</FormGroup>
41+
<FormItem label={'Sole Form Item'}>
42+
<Input type={InputType.Text} />
43+
</FormItem>
44+
<FormGroup title={'Company Data'}>
45+
<FormItem label={'Company Name'}>
46+
<Input type={InputType.Text} />
47+
</FormItem>
48+
<FormItem label={'Company Address'}>
49+
<Input type={InputType.Text} />
50+
</FormItem>
51+
<FormItem label={'Company City'}>
52+
<Input type={InputType.Text} />
53+
</FormItem>
54+
<FormItem label={'Company Country'}>
55+
<Input type={InputType.Text} />
56+
</FormItem>
57+
<FormItem label={'Number of Employees'}>
58+
<Input type={InputType.Number} value={'5000'} disabled />
59+
</FormItem>
60+
<FormItem label={'Member of Partner Network'}>
61+
<CheckBox checked />
62+
</FormItem>
63+
</FormGroup>
64+
<FormGroup title={'Marketing Data'}>
65+
<FormItem label={'Email'}>
66+
<Input type={InputType.Email} />
67+
</FormItem>
68+
<FormItem label="Company Email">
69+
<Input type={InputType.Email} />
70+
</FormItem>
71+
<FormItem label="I want to receive the newsletter">
72+
<CheckBox />
73+
</FormItem>
74+
</FormGroup>
75+
</Form>
76+
</Story>
77+
</Preview>
78+
79+
### Usage Notes
80+
81+
Please note that the `FormGroup` and `FormItem` components are only used for calculating the final layout of the `Form`,
82+
thus they don't accept any other props then the specified ones, especially no `className`, `style` or `ref`.
83+
84+
<Props components={{ Form, FormGroup, FormItem }} />

‎packages/main/src/components/Form/Form.stories.tsx

Lines changed: 0 additions & 56 deletions
This file was deleted.

‎packages/main/src/components/Form/Form.test.tsx

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -58,21 +58,6 @@ describe('Create a Form', () => {
5858
expect(wrapper.render()).toMatchSnapshot();
5959
});
6060

61-
test('should create a FormGroup and put ungrouped FormItems into it', () => {
62-
const ungroupedChildren = (
63-
<Form title={'Test form'}>
64-
<FormItem label={'item 1'}>
65-
<Input type={InputType.Text} />
66-
</FormItem>
67-
<FormItem label={'item 2'}>
68-
<Input type={InputType.Number} />
69-
</FormItem>
70-
</Form>
71-
);
72-
const wrapper = mount(ungroupedChildren);
73-
expect(wrapper.render()).toMatchSnapshot();
74-
});
75-
7661
test("should use a single FormGroup's title as a Form title if one is not set", () => {
7762
const ungroupedChildren = (
7863
<Form>

0 commit comments

Comments
 (0)