Skip to content

Commit fcc449a

Browse files
Lukas742Lukas742
authored
refactor(Grid): use CSS Grid layout (#504)
BREAKING CHANGE: remove prop `width`, width can now be set via `style` or `className` BREAKING CHANGE: prop `vSpacing` accepts now a CSS height instead of a number in `rem` BREAKING CHANGE: prop `hSpacing` accepts now a CSS width instead of a number in `rem` BREAKING CHANGE: change prop `data-layout` (object) on child elements to `data-layout-span` and `data-layout-indent`
1 parent f1f4db5 commit fcc449a

File tree

6 files changed

+129
-264
lines changed

6 files changed

+129
-264
lines changed

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

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22

33
exports[`Create a Form accepts both label and labelText 1`] = `
44
<div
5-
class="Grid-grid-0 Grid-gridHSpace1-0 Grid-gridVSpace1-0"
5+
class="Grid-grid-0"
66
>
77
<div
8-
class="Grid-gridSpan-0 Grid-gridSpan6-0"
8+
class="Grid-gridSpan6-0"
99
>
1010
<div>
1111
<div
@@ -95,10 +95,10 @@ Array [
9595
Test form
9696
</ui5-title>,
9797
<div
98-
class="Grid-grid-0 Grid-gridHSpace1-0 Grid-gridVSpace1-0"
98+
class="Grid-grid-0"
9999
>
100100
<div
101-
class="Grid-gridSpan-0 Grid-gridSpan6-0"
101+
class="Grid-gridSpan6-0"
102102
>
103103
<div>
104104
<div
@@ -164,10 +164,10 @@ Array [
164164
To be Form title
165165
</ui5-title>,
166166
<div
167-
class="Grid-grid-0 Grid-gridHSpace1-0 Grid-gridVSpace1-0"
167+
class="Grid-grid-0"
168168
>
169169
<div
170-
class="Grid-gridSpan-0 Grid-gridSpan6-0"
170+
class="Grid-gridSpan6-0"
171171
>
172172
<div>
173173
<div
@@ -233,10 +233,10 @@ Array [
233233
Test form
234234
</ui5-title>,
235235
<div
236-
class="Grid-grid-0 Grid-gridHSpace1-0 Grid-gridVSpace1-0"
236+
class="Grid-grid-0"
237237
>
238238
<div
239-
class="Grid-gridSpan-0 Grid-gridSpan12-0"
239+
class="Grid-gridSpan12-0"
240240
>
241241
<div>
242242
<ui5-title
@@ -296,7 +296,7 @@ Array [
296296
</div>
297297
</div>
298298
<div
299-
class="Grid-gridSpan-0 Grid-gridSpan12-0"
299+
class="Grid-gridSpan12-0"
300300
>
301301
<div>
302302
<ui5-title
@@ -368,10 +368,10 @@ Array [
368368
Test form
369369
</ui5-title>,
370370
<div
371-
class="Grid-grid-0 Grid-gridHSpace1-0 Grid-gridVSpace1-0"
371+
class="Grid-grid-0"
372372
>
373373
<div
374-
class="Grid-gridSpan-0 Grid-gridSpan12-0"
374+
class="Grid-gridSpan12-0"
375375
>
376376
<div>
377377
<ui5-title
@@ -431,7 +431,7 @@ Array [
431431
</div>
432432
</div>
433433
<div
434-
class="Grid-gridSpan-0 Grid-gridSpan12-0"
434+
class="Grid-gridSpan12-0"
435435
>
436436
<div>
437437
<ui5-title
@@ -503,10 +503,10 @@ Array [
503503
Test form
504504
</ui5-title>,
505505
<div
506-
class="Grid-grid-0 Grid-gridHSpace1-0 Grid-gridVSpace1-0"
506+
class="Grid-grid-0"
507507
>
508508
<div
509-
class="Grid-gridSpan-0 Grid-gridSpan12-0"
509+
class="Grid-gridSpan12-0"
510510
>
511511
<div>
512512
<ui5-title
@@ -566,7 +566,7 @@ Array [
566566
</div>
567567
</div>
568568
<div
569-
class="Grid-gridSpan-0 Grid-gridSpan12-0"
569+
class="Grid-gridSpan12-0"
570570
>
571571
<div>
572572
<ui5-title
@@ -638,10 +638,10 @@ Array [
638638
Test form
639639
</ui5-title>,
640640
<div
641-
class="Grid-grid-0 Grid-gridHSpace1-0 Grid-gridVSpace1-0"
641+
class="Grid-grid-0"
642642
>
643643
<div
644-
class="Grid-gridSpan-0 Grid-gridSpan6-0"
644+
class="Grid-gridSpan6-0"
645645
>
646646
<div>
647647
<ui5-title
@@ -701,7 +701,7 @@ Array [
701701
</div>
702702
</div>
703703
<div
704-
class="Grid-gridSpan-0 Grid-gridSpan6-0"
704+
class="Grid-gridSpan6-0"
705705
>
706706
<div>
707707
<ui5-title

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

Lines changed: 23 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -1,142 +1,26 @@
1-
const getWidthForSpan = (width, hSpace = 0) => {
2-
return {
3-
width: `calc(${(width * 100) / 12}% - ${hSpace}rem)`
4-
};
5-
};
6-
7-
const getIndentForSpan = (width, hSpace = 0) => {
8-
return {
9-
marginLeft: `calc(${(width * 100) / 12}% + ${hSpace / 2}rem)`
10-
};
11-
};
12-
13-
const getSpansForSpace = (hSpace = 0) => ({
14-
'&$gridSpan1': getWidthForSpan(1, hSpace),
15-
'&$gridSpan2': getWidthForSpan(2, hSpace),
16-
'&$gridSpan3': getWidthForSpan(3, hSpace),
17-
'&$gridSpan4': getWidthForSpan(4, hSpace),
18-
'&$gridSpan5': getWidthForSpan(5, hSpace),
19-
'&$gridSpan6': getWidthForSpan(6, hSpace),
20-
'&$gridSpan7': getWidthForSpan(7, hSpace),
21-
'&$gridSpan8': getWidthForSpan(8, hSpace),
22-
'&$gridSpan9': getWidthForSpan(9, hSpace),
23-
'&$gridSpan10': getWidthForSpan(10, hSpace),
24-
'&$gridSpan11': getWidthForSpan(11, hSpace),
25-
'&$gridSpan12': getWidthForSpan(12, hSpace)
26-
});
27-
28-
const getIndentsForSpace = (hSpace) => ({
29-
'&$gridIndent1': getIndentForSpan(1, hSpace),
30-
'&$gridIndent2': getIndentForSpan(2, hSpace),
31-
'&$gridIndent3': getIndentForSpan(3, hSpace),
32-
'&$gridIndent4': getIndentForSpan(4, hSpace),
33-
'&$gridIndent5': getIndentForSpan(5, hSpace),
34-
'&$gridIndent6': getIndentForSpan(6, hSpace),
35-
'&$gridIndent7': getIndentForSpan(7, hSpace),
36-
'&$gridIndent8': getIndentForSpan(8, hSpace),
37-
'&$gridIndent9': getIndentForSpan(9, hSpace),
38-
'&$gridIndent10': getIndentForSpan(10, hSpace),
39-
'&$gridIndent11': getIndentForSpan(11, hSpace),
40-
'&$gridIndent12': getIndentForSpan(12, hSpace)
41-
});
42-
43-
export const GridClasses = {
44-
'@global html': {
45-
'--_ui5wcr_Grid_float': 'left'
46-
},
47-
'@global [dir="rtl"]': {
48-
'--_ui5wcr_Grid_float': 'right'
49-
},
1+
export const styles = {
502
grid: {
51-
'& $gridSpan': { ...getSpansForSpace(0), ...getIndentsForSpace(0) },
52-
'&$gridHSpace05': {
53-
padding: '0 0.25rem',
54-
'& > div': {
55-
margin: '0 0.25rem'
56-
},
57-
'& $gridSpan': { ...getSpansForSpace(0.5), ...getIndentsForSpace(0.5) }
58-
},
59-
'&$gridHSpace1': {
60-
padding: '0 0.5rem',
61-
'& > div': {
62-
margin: '0 0.5rem'
63-
},
64-
'& $gridSpan': { ...getSpansForSpace(1), ...getIndentsForSpace(1) }
65-
},
66-
'&$gridHSpace2': {
67-
padding: '0 1rem',
68-
'& > div': {
69-
margin: '0 1rem'
70-
},
71-
'& $gridSpan': { ...getSpansForSpace(2), ...getIndentsForSpace(2) }
72-
},
73-
'&$gridVSpace0 > $gridSpan': {
74-
marginBottom: 0
75-
},
76-
'&$gridVSpace05 > $gridSpan': {
77-
marginBottom: '0.5rem'
78-
},
79-
'&$gridVSpace1 > $gridSpan': {
80-
marginBottom: '1rem'
81-
},
82-
'&$gridVSpace2 > $gridSpan': {
83-
marginBottom: '2rem'
84-
},
85-
'& > div': {
86-
float: 'var(--_ui5wcr_Grid_float)',
87-
overflow: 'hidden',
88-
minHeight: '1px'
89-
},
90-
'&$gridPositionCenter': {
91-
marginLeft: 'auto',
92-
marginRight: 'auto'
93-
},
94-
'&$gridPositionRight': {
95-
marginLeft: 'auto',
96-
marginRight: 0
97-
},
98-
'&:after, & > div:after': {
99-
clear: 'both',
100-
content: '" "',
101-
display: 'block',
102-
fontSize: 0,
103-
height: 0,
104-
visibility: 'hidden'
105-
}
3+
display: 'grid',
4+
gridTemplateColumns: `repeat(12, 1fr)`
5+
},
6+
gridSpan1: { gridColumn: 'span 1' },
7+
gridSpan2: { gridColumn: 'span 2' },
8+
gridSpan3: { gridColumn: 'span 3' },
9+
gridSpan4: { gridColumn: 'span 4' },
10+
gridSpan5: { gridColumn: 'span 5' },
11+
gridSpan6: { gridColumn: 'span 6' },
12+
gridSpan7: { gridColumn: 'span 7' },
13+
gridSpan8: { gridColumn: 'span 8' },
14+
gridSpan9: { gridColumn: 'span 9' },
15+
gridSpan10: { gridColumn: 'span 10' },
16+
gridSpan11: { gridColumn: 'span 11' },
17+
gridSpan12: { gridColumn: 'span 12' },
18+
positionCenter: {
19+
marginLeft: 'auto',
20+
marginRight: 'auto'
10621
},
107-
gridHSpace05: {},
108-
gridHSpace1: {},
109-
gridHSpace2: {},
110-
gridVSpace0: {},
111-
gridVSpace05: {},
112-
gridVSpace1: {},
113-
gridVSpace2: {},
114-
gridPositionCenter: {},
115-
gridPositionRight: {},
116-
// small spans
117-
gridSpan: {},
118-
gridSpan1: {},
119-
gridSpan2: {},
120-
gridSpan3: {},
121-
gridSpan4: {},
122-
gridSpan5: {},
123-
gridSpan6: {},
124-
gridSpan7: {},
125-
gridSpan8: {},
126-
gridSpan9: {},
127-
gridSpan10: {},
128-
gridSpan11: {},
129-
gridSpan12: {},
130-
gridIndent1: {},
131-
gridIndent2: {},
132-
gridIndent3: {},
133-
gridIndent4: {},
134-
gridIndent5: {},
135-
gridIndent6: {},
136-
gridIndent7: {},
137-
gridIndent8: {},
138-
gridIndent9: {},
139-
gridIndent10: {},
140-
gridIndent11: {},
141-
gridIndent12: {}
22+
positionRight: {
23+
marginLeft: 'auto',
24+
marginRight: 0
25+
}
14226
};

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

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
1+
import { text } from '@storybook/addon-knobs';
12
import { Grid } from '@ui5/webcomponents-react/lib/Grid';
23
import React from 'react';
34

45
export const defaultStory = () => {
56
return (
6-
<Grid>
7-
<div style={{ backgroundColor: 'lightgreen' }}>Div 1</div>
7+
<Grid
8+
defaultSpan={text('defaultSpan', 'XL3 L3 M6 S12')}
9+
defaultIndent={text('defaultIndent', 'XL0 L0 M0 S0')}
10+
vSpacing={text('vSpacing', '1rem')}
11+
hSpacing={text('hSpacing', '1rem')}
12+
>
13+
<div style={{ backgroundColor: 'lightgreen' }} data-layout-span="XL8 L8 M8 S12" data-layout-indent="XL1 L1 M1 S0">
14+
{`Div 1 with prop: data-layout-span="XL8 L8 M8 S12" and data-layout-indent="XL1 L1 M1 S0"`}
15+
</div>
816
<div style={{ backgroundColor: 'yellow' }}>Div 2</div>
917
<div style={{ backgroundColor: 'cyan' }}>Div 3</div>
1018
<div style={{ backgroundColor: 'orange' }}>Div 4</div>
11-
<div style={{ backgroundColor: '#f0ab00' }}>Div 5</div>
12-
<div style={{ backgroundColor: 'red' }}>Div 6</div>
19+
<div style={{ backgroundColor: 'red' }}>Div 5</div>
20+
<div style={{ backgroundColor: 'blue' }}>Div 6</div>
1321
</Grid>
1422
);
1523
};

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { createPassThroughPropsTest } from '@shared/tests/utils';
22
import { mount } from 'enzyme';
33
import { Grid } from '@ui5/webcomponents-react/lib/Grid';
4-
import { GridPosition } from '@ui5/webcomponents-react/lib/GridPosition';
54
import React from 'react';
5+
import { GridPosition } from '@ui5/webcomponents-react/lib/GridPosition';
66

77
const GridContent = () => (
88
<>
@@ -49,7 +49,7 @@ describe('Grid', () => {
4949

5050
test('Custom Class Names and Styling', () => {
5151
const wrapper = mount(
52-
<Grid width="60%" style={{ backgroundColor: 'purple' }} className="customClassName" hSpacing={0}>
52+
<Grid style={{ backgroundColor: 'purple' }} className="customClassName" hSpacing={0}>
5353
<GridContent />
5454
</Grid>
5555
);
@@ -65,15 +65,15 @@ describe('Grid', () => {
6565
width: '100%',
6666
backgroundColor: '#A9EAFF'
6767
}}
68-
data-layout={{ span: 'XL12 L12 M12 S12' }}
68+
data-layout-span="XL12 L12 M12 S12"
6969
/>
7070
<div
7171
style={{
7272
height: '6rem',
7373
width: '100%',
7474
backgroundColor: '#A9EAFF'
7575
}}
76-
data-layout={{ indent: 'XL1 L1 M1 S1' }}
76+
data-layout-indent="XL1 L1 M1 S1"
7777
/>
7878
</Grid>
7979
);
@@ -82,15 +82,15 @@ describe('Grid', () => {
8282

8383
test('Grid Position Center', () => {
8484
const wrapper = mount(
85-
<Grid width="60%" position={GridPosition.Center}>
85+
<Grid style={{ width: '60%' }} position={GridPosition.Center}>
8686
<GridContent />
8787
</Grid>
8888
);
8989
expect(wrapper.render()).toMatchSnapshot();
9090
});
9191
test('Grid Position Right', () => {
9292
const wrapper = mount(
93-
<Grid width="60%" position={GridPosition.Right}>
93+
<Grid style={{ width: '60%' }} position={GridPosition.Right}>
9494
<GridContent />
9595
</Grid>
9696
);

0 commit comments

Comments
 (0)