Skip to content

Commit ad0fce3

Browse files
MarcusNotheisMarcusNotheis
committed
refactor(Grid): Replace withStyles HOC with forwardRef
1 parent c501c67 commit ad0fce3

5 files changed

Lines changed: 163 additions & 134 deletions

File tree

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Grid } from '@ui5/webcomponents-react/lib/Grid';
2+
import React from 'react';
3+
4+
export const defaultStory = () => {
5+
return (
6+
<Grid>
7+
<div style={{ backgroundColor: 'lightgreen' }}>Div 1</div>
8+
<div style={{ backgroundColor: 'yellow' }}>Div 2</div>
9+
<div style={{ backgroundColor: 'cyan' }}>Div 3</div>
10+
<div style={{ backgroundColor: 'orange' }}>Div 4</div>
11+
<div style={{ backgroundColor: '#f0ab00' }}>Div 5</div>
12+
<div style={{ backgroundColor: 'red' }}>Div 6</div>
13+
</Grid>
14+
);
15+
};
16+
17+
export default {
18+
title: 'Components | Grid',
19+
component: Grid
20+
};

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { mount } from '@shared/tests/utils';
1+
import { mountThemedComponent } from '@shared/tests/utils';
22
import React from 'react';
3-
import { Grid, GridPosition } from './index';
3+
import { Grid } from '@ui5/webcomponents-react/lib/Grid';
4+
import { GridPosition } from '@ui5/webcomponents-react/lib/GridPosition';
45

56
const GridContent = () => (
67
<>
@@ -37,17 +38,16 @@ const GridContent = () => (
3738

3839
describe('Grid', () => {
3940
test('Renders Children', () => {
40-
const wrapper = mount(
41+
const wrapper = mountThemedComponent(
4142
<Grid>
4243
<GridContent />
4344
</Grid>
4445
);
4546
expect(wrapper.render()).toMatchSnapshot();
46-
wrapper.unmount();
4747
});
4848

4949
test('Custom Class Names and Styling', () => {
50-
const wrapper = mount(
50+
const wrapper = mountThemedComponent(
5151
<Grid width="60%" style={{ backgroundColor: 'purple' }} className="customClassName" hSpacing={0}>
5252
<GridContent />
5353
</Grid>
@@ -56,7 +56,7 @@ describe('Grid', () => {
5656
});
5757

5858
test('Renders Children with custom layout data', () => {
59-
const wrapper = mount(
59+
const wrapper = mountThemedComponent(
6060
<Grid>
6161
<div
6262
style={{
@@ -80,15 +80,15 @@ describe('Grid', () => {
8080
});
8181

8282
test('Grid Position Center', () => {
83-
const wrapper = mount(
83+
const wrapper = mountThemedComponent(
8484
<Grid width="60%" position={GridPosition.Center}>
8585
<GridContent />
8686
</Grid>
8787
);
8888
expect(wrapper.render()).toMatchSnapshot();
8989
});
9090
test('Grid Position Right', () => {
91-
const wrapper = mount(
91+
const wrapper = mountThemedComponent(
9292
<Grid width="60%" position={GridPosition.Right}>
9393
<GridContent />
9494
</Grid>

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

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

33
exports[`Grid Custom Class Names and Styling 1`] = `
44
<div
5-
class="WithStyles(Grid)-grid-0 WithStyles(Grid)-gridVSpace1-0 customClassName"
5+
class="Grid--grid- Grid--gridVSpace1- customClassName"
66
style="width: 60%; background-color: purple;"
77
>
88
<div
9-
class="WithStyles(Grid)-gridSpan-0"
9+
class="Grid--gridSpan-"
1010
>
1111
<div
1212
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
@@ -26,10 +26,10 @@ exports[`Grid Custom Class Names and Styling 1`] = `
2626

2727
exports[`Grid Grid Position Center 1`] = `
2828
<div
29-
class="WithStyles(Grid)-grid-0 WithStyles(Grid)-gridHSpace1-0 WithStyles(Grid)-gridVSpace1-0 WithStyles(Grid)-gridPositionCenter-0"
29+
class="Grid--grid- Grid--gridHSpace1- Grid--gridVSpace1- Grid--gridPositionCenter-"
3030
>
3131
<div
32-
class="WithStyles(Grid)-gridSpan-0"
32+
class="Grid--gridSpan-"
3333
>
3434
<div
3535
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
@@ -49,10 +49,10 @@ exports[`Grid Grid Position Center 1`] = `
4949

5050
exports[`Grid Grid Position Right 1`] = `
5151
<div
52-
class="WithStyles(Grid)-grid-0 WithStyles(Grid)-gridHSpace1-0 WithStyles(Grid)-gridVSpace1-0 WithStyles(Grid)-gridPositionRight-0"
52+
class="Grid--grid- Grid--gridHSpace1- Grid--gridVSpace1- Grid--gridPositionRight-"
5353
>
5454
<div
55-
class="WithStyles(Grid)-gridSpan-0"
55+
class="Grid--gridSpan-"
5656
>
5757
<div
5858
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
@@ -72,10 +72,10 @@ exports[`Grid Grid Position Right 1`] = `
7272

7373
exports[`Grid Renders Children 1`] = `
7474
<div
75-
class="WithStyles(Grid)-grid-0 WithStyles(Grid)-gridHSpace1-0 WithStyles(Grid)-gridVSpace1-0"
75+
class="Grid--grid- Grid--gridHSpace1- Grid--gridVSpace1-"
7676
>
7777
<div
78-
class="WithStyles(Grid)-gridSpan-0"
78+
class="Grid--gridSpan-"
7979
>
8080
<div
8181
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
@@ -95,18 +95,18 @@ exports[`Grid Renders Children 1`] = `
9595

9696
exports[`Grid Renders Children with custom layout data 1`] = `
9797
<div
98-
class="WithStyles(Grid)-grid-0 WithStyles(Grid)-gridHSpace1-0 WithStyles(Grid)-gridVSpace1-0"
98+
class="Grid--grid- Grid--gridHSpace1- Grid--gridVSpace1-"
9999
>
100100
<div
101-
class="WithStyles(Grid)-gridSpan-0"
101+
class="Grid--gridSpan-"
102102
>
103103
<div
104104
data-layout="[object Object]"
105105
style="height: 6rem; width: 100%; background-color: rgb(169, 234, 255);"
106106
/>
107107
</div>
108108
<div
109-
class="WithStyles(Grid)-gridSpan-0"
109+
class="Grid--gridSpan-"
110110
>
111111
<div
112112
data-layout="[object Object]"

0 commit comments

Comments
 (0)