Skip to content

Commit 8086069

Browse files
jesstelfordjesstelford
committed
Update Grid/Grid.Cell to use system's CSS encapsulation
1 parent 28a12bc commit 8086069

File tree

4 files changed

+36
-139
lines changed

4 files changed

+36
-139
lines changed

‎polaris-react/src/components/Grid/Grid.scss‎

Lines changed: 14 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,21 @@
11
@import '../../styles/common';
22

33
.Grid {
4-
// Remap custom properties as mobile first fallbacks for grid-template-areas and grid-template-columns
4+
display: grid;
5+
56
// stylelint-disable -- Polaris component custom properties
6-
--pc-grid-areas-xs: initial;
7-
--pc-grid-areas-sm: var(--pc-grid-areas-xs);
8-
--pc-grid-areas-md: var(--pc-grid-areas-sm);
9-
--pc-grid-areas-lg: var(--pc-grid-areas-md);
10-
--pc-grid-areas-xl: var(--pc-grid-areas-lg);
11-
--pc-grid-columns-xs: 6;
12-
--pc-grid-columns-sm: var(--pc-grid-columns-xs);
13-
--pc-grid-columns-md: var(--pc-grid-columns-sm);
14-
--pc-grid-columns-lg: 12;
15-
--pc-grid-columns-xl: var(--pc-grid-columns-lg);
7+
@include responsive-props('grid', 'gap', 'gap', $default: 'var(--p-space-4)');
8+
@include responsive-props('grid', 'areas', 'grid-template-areas');
9+
@include responsive-props(
10+
'grid',
11+
'columns',
12+
'--pc-grid-template-columns',
13+
$default: ('xs': 6, 'lg': 12)
14+
);
1615
// stylelint-enable
17-
display: grid;
18-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
19-
gap: var(--pc-grid-gap-xs, var(--p-space-4));
20-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
21-
grid-template-areas: var(--pc-grid-areas-xs);
2216
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
23-
grid-template-columns: repeat(var(--pc-grid-columns-xs), minmax(0, 1fr));
24-
25-
@media #{$p-breakpoints-sm-up} {
26-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
27-
gap: var(--pc-grid-gap-sm, var(--p-space-4));
28-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
29-
grid-template-areas: var(--pc-grid-areas-sm);
30-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
31-
grid-template-columns: repeat(var(--pc-grid-columns-sm), minmax(0, 1fr));
32-
}
33-
34-
@media #{$p-breakpoints-md-up} {
35-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
36-
gap: var(--pc-grid-gap-md, var(--p-space-4));
37-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
38-
grid-template-areas: var(--pc-grid-areas-md);
39-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
40-
grid-template-columns: repeat(var(--pc-grid-columns-md), minmax(0, 1fr));
41-
}
42-
43-
@media #{$p-breakpoints-lg-up} {
44-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
45-
gap: var(--pc-grid-gap-lg, var(--p-space-4));
46-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
47-
grid-template-areas: var(--pc-grid-areas-lg);
48-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
49-
grid-template-columns: repeat(var(--pc-grid-columns-lg), minmax(0, 1fr));
50-
}
51-
52-
@media #{$p-breakpoints-xl-up} {
53-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
54-
gap: var(--pc-grid-gap-xl, var(--p-space-4));
55-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
56-
grid-template-areas: var(--pc-grid-areas-xl);
57-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
58-
grid-template-columns: repeat(var(--pc-grid-columns-xl), minmax(0, 1fr));
59-
}
17+
grid-template-columns: repeat(
18+
var(--pc-grid-template-columns),
19+
minmax(0, 1fr)
20+
);
6021
}

‎polaris-react/src/components/Grid/Grid.tsx‎

Lines changed: 15 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,15 @@
11
import React from 'react';
2+
import type {SpaceScale} from '@shopify/polaris-tokens';
3+
4+
import {getResponsiveProps, getResponsiveValue} from '../../utilities/css';
5+
import type {ResponsiveProp} from '../../utilities/css';
26

37
import {Cell} from './components';
48
import styles from './Grid.scss';
59

6-
type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
7-
8-
type Areas = {
9-
[Breakpoint in Breakpoints]?: string[];
10-
};
11-
12-
type Columns = {
13-
[Breakpoint in Breakpoints]?: number;
14-
};
15-
16-
type Gap = {
17-
[Breakpoint in Breakpoints]?: string;
18-
};
10+
type Areas = ResponsiveProp<string[]>;
11+
type Columns = ResponsiveProp<number>;
12+
type Gap = ResponsiveProp<SpaceScale>;
1913

2014
export interface GridProps {
2115
/**
@@ -29,25 +23,18 @@ export interface GridProps {
2923
gap?: Gap;
3024
children?: React.ReactNode;
3125
}
26+
3227
export const Grid: React.FunctionComponent<GridProps> & {
3328
Cell: typeof Cell;
3429
} = function Grid({gap, areas, children, columns}: GridProps) {
3530
const style = {
36-
'--pc-grid-gap-xs': gap?.xs,
37-
'--pc-grid-gap-sm': gap?.sm,
38-
'--pc-grid-gap-md': gap?.md,
39-
'--pc-grid-gap-lg': gap?.lg,
40-
'--pc-grid-gap-xl': gap?.xl,
41-
'--pc-grid-columns-xs': columns?.xs,
42-
'--pc-grid-columns-sm': columns?.sm,
43-
'--pc-grid-columns-md': columns?.md,
44-
'--pc-grid-columns-lg': columns?.lg,
45-
'--pc-grid-columns-xl': columns?.xl,
46-
'--pc-grid-areas-xs': formatAreas(areas?.xs),
47-
'--pc-grid-areas-sm': formatAreas(areas?.sm),
48-
'--pc-grid-areas-md': formatAreas(areas?.md),
49-
'--pc-grid-areas-lg': formatAreas(areas?.lg),
50-
'--pc-grid-areas-xl': formatAreas(areas?.xl),
31+
...getResponsiveProps('grid', 'gap', 'space', gap),
32+
...getResponsiveValue('grid', 'columns', columns),
33+
...Object.fromEntries(
34+
Object.entries(getResponsiveValue('grid', 'areas', areas)).map(
35+
([breakpoint, value]) => [breakpoint, formatAreas(value)],
36+
),
37+
),
5138
} as React.CSSProperties;
5239

5340
return (

‎polaris-react/src/components/Grid/components/Cell/Cell.scss‎

Lines changed: 2 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,12 @@
11
@import '../../../../styles/common';
22

33
.Cell {
4+
@include responsive-props('grid-cell', 'row', 'grid-row');
5+
@include responsive-props('grid-cell', 'column', 'grid-column');
46
// Remap custom properties as mobile first fallbacks for grid-row and grid-column
57
// stylelint-disable -- Polaris component custom properties
6-
--pc-row-xs: initial;
7-
--pc-row-sm: var(--pc-row-xs);
8-
--pc-row-md: var(--pc-row-sm);
9-
--pc-row-lg: var(--pc-row-md);
10-
--pc-row-xl: var(--pc-row-lg);
11-
--pc-column-xs: initial;
12-
--pc-column-sm: var(--pc-column-xs);
13-
--pc-column-md: var(--pc-column-sm);
14-
--pc-column-lg: var(--pc-column-md);
15-
--pc-column-xl: var(--pc-column-lg);
168
// stylelint-enable
179
min-width: 0;
18-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
19-
grid-row: var(--pc-row-xs);
20-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
21-
grid-column: var(--pc-column-xs);
22-
23-
@media #{$p-breakpoints-sm-up} {
24-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
25-
grid-row: var(--pc-row-sm);
26-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
27-
grid-column: var(--pc-column-sm);
28-
}
29-
30-
@media #{$p-breakpoints-md-up} {
31-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
32-
grid-row: var(--pc-row-md);
33-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
34-
grid-column: var(--pc-column-md);
35-
}
36-
37-
@media #{$p-breakpoints-lg-up} {
38-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
39-
grid-row: var(--pc-row-lg);
40-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
41-
grid-column: var(--pc-column-lg);
42-
}
43-
44-
@media #{$p-breakpoints-xl-up} {
45-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
46-
grid-row: var(--pc-row-xl);
47-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
48-
grid-column: var(--pc-column-xl);
49-
}
5010
}
5111

5212
@for $i from 1 through 6 {

‎polaris-react/src/components/Grid/components/Cell/Cell.tsx‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
import React from 'react';
22

3-
import {classNames} from '../../../../utilities/css';
3+
import {classNames, getResponsiveValue} from '../../../../utilities/css';
4+
import type {ResponsiveProp} from '../../../../utilities/css';
45

56
import styles from './Cell.scss';
67

7-
type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
8-
9-
type Cell = {
10-
[Breakpoint in Breakpoints]?: string;
11-
};
8+
type Cell = ResponsiveProp<string>;
129

1310
interface Columns {
1411
/** Number of columns the section should span on extra small screens */
@@ -52,16 +49,8 @@ export function Cell({
5249

5350
const style = {
5451
gridArea,
55-
'--pc-column-xs': column?.xs,
56-
'--pc-column-sm': column?.sm,
57-
'--pc-column-md': column?.md,
58-
'--pc-column-lg': column?.lg,
59-
'--pc-column-xl': column?.xl,
60-
'--pc-row-xs': row?.xs,
61-
'--pc-row-sm': row?.sm,
62-
'--pc-row-md': row?.md,
63-
'--pc-row-lg': row?.lg,
64-
'--pc-row-xl': row?.xl,
52+
...getResponsiveValue('grid-cell', 'column', column),
53+
...getResponsiveValue('grid-cell', 'row', row),
6554
};
6655

6756
return (

0 commit comments

Comments
 (0)