Skip to content

Commit f548035

Browse files
jesstelfordjesstelford
committed
Add support for non-responsive values to Grid's gap, columns, and areas props.
1 parent ec79662 commit f548035

File tree

9 files changed

+152
-218
lines changed

9 files changed

+152
-218
lines changed

‎.changeset/slimy-donuts-report.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/polaris': minor
3+
---
4+
5+
Added support for non-responsive values to `Grid`'s `gap`, `columns`, and `areas` props.

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

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

33
.Grid {
4-
// Remap custom properties as mobile first fallbacks for grid-template-areas and grid-template-columns
5-
// 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);
16-
// stylelint-enable
174
display: grid;
18-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
19-
gap: var(--pc-grid-gap-xs, var(--p-space-400));
20-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
21-
grid-template-areas: var(--pc-grid-areas-xs);
22-
// 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-400));
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-
}
335

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-400));
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-400));
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-400));
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-
}
6+
@include responsive-props(
7+
'grid',
8+
'gap',
9+
'gap',
10+
$default: 'var(--p-space-400)'
11+
);
12+
@include responsive-props('grid', 'areas', 'grid-template-areas');
13+
@include responsive-props(
14+
'grid',
15+
'columns',
16+
'--pc-grid-template-columns',
17+
$default: ('xs': 6, 'lg': 12)
18+
);
19+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
20+
grid-template-columns: repeat(
21+
var(--pc-grid-template-columns),
22+
minmax(0, 1fr)
23+
);
6024
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export function TwoColumn() {
2828
export function TwoThirdsAndOneThirdColumn() {
2929
return (
3030
<Page fullWidth>
31-
<Grid columns={{sm: 3}}>
31+
<Grid>
3232
<Grid.Cell columnSpan={{xs: 6, sm: 4, md: 4, lg: 8, xl: 8}}>
3333
<LegacyCard title="Sales" sectioned>
3434
<p>View a summary of your online store’s sales.</p>

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

Lines changed: 21 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
11
import React from 'react';
2+
import type {SpaceScale} from '@shopify/polaris-tokens';
3+
4+
import {
5+
getResponsiveProps,
6+
getResponsiveValue,
7+
mapResponsivePropValues,
8+
} from '../../utilities/css';
9+
import type {ResponsiveProp} from '../../utilities/css';
210

311
import {Cell} from './components';
412
import styles from './Grid.scss';
513

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-
};
14+
type Area = string[];
1915

2016
export interface GridProps {
2117
/**
@@ -24,32 +20,25 @@ export interface GridProps {
2420
* cells instead. See:
2521
* https://polaris.shopify.com/components/layout-and-structure
2622
*/
27-
areas?: Areas;
23+
areas?: ResponsiveProp<Area>;
2824
/* Number of columns */
29-
columns?: Columns;
25+
columns?: ResponsiveProp<number>;
3026
/* Grid gap */
31-
gap?: Gap;
27+
gap?: ResponsiveProp<SpaceScale>;
3228
children?: React.ReactNode;
3329
}
30+
3431
export const Grid: React.FunctionComponent<GridProps> & {
3532
Cell: typeof Cell;
3633
} = function Grid({gap, areas, children, columns}: GridProps) {
3734
const style = {
38-
'--pc-grid-gap-xs': gap?.xs,
39-
'--pc-grid-gap-sm': gap?.sm,
40-
'--pc-grid-gap-md': gap?.md,
41-
'--pc-grid-gap-lg': gap?.lg,
42-
'--pc-grid-gap-xl': gap?.xl,
43-
'--pc-grid-columns-xs': columns?.xs,
44-
'--pc-grid-columns-sm': columns?.sm,
45-
'--pc-grid-columns-md': columns?.md,
46-
'--pc-grid-columns-lg': columns?.lg,
47-
'--pc-grid-columns-xl': columns?.xl,
48-
'--pc-grid-areas-xs': formatAreas(areas?.xs),
49-
'--pc-grid-areas-sm': formatAreas(areas?.sm),
50-
'--pc-grid-areas-md': formatAreas(areas?.md),
51-
'--pc-grid-areas-lg': formatAreas(areas?.lg),
52-
'--pc-grid-areas-xl': formatAreas(areas?.xl),
35+
...getResponsiveProps('grid', 'gap', 'space', gap),
36+
...getResponsiveValue('grid', 'columns', columns),
37+
...getResponsiveValue(
38+
'grid',
39+
'areas',
40+
mapResponsivePropValues(areas, formatAreas),
41+
),
5342
} as React.CSSProperties;
5443

5544
return (
@@ -59,7 +48,7 @@ export const Grid: React.FunctionComponent<GridProps> & {
5948
);
6049
};
6150

62-
export function formatAreas(areas?: string[]) {
51+
export function formatAreas(areas?: Area) {
6352
if (!areas) return;
6453
return `'${areas?.join(`' '`)}'`;
6554
}

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

Lines changed: 2 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,10 @@
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
5-
// 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);
16-
// stylelint-enable
177
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-
}
508
}
519

5210
@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;
129

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

5552
const style = {
5653
gridArea,
57-
'--pc-column-xs': column?.xs,
58-
'--pc-column-sm': column?.sm,
59-
'--pc-column-md': column?.md,
60-
'--pc-column-lg': column?.lg,
61-
'--pc-column-xl': column?.xl,
62-
'--pc-row-xs': row?.xs,
63-
'--pc-row-sm': row?.sm,
64-
'--pc-row-md': row?.md,
65-
'--pc-row-lg': row?.lg,
66-
'--pc-row-xl': row?.xl,
54+
...getResponsiveValue('grid-cell', 'column', column),
55+
...getResponsiveValue('grid-cell', 'row', row),
6756
};
6857

6958
return (

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@ describe('<Cell />', () => {
3737

3838
expect(cell).toContainReactComponent('div', {
3939
style: {
40-
'--pc-column-xs': '2 / span 1',
41-
'--pc-column-lg': 'span 12',
40+
'--pc-grid-cell-column-xs': '2 / span 1',
41+
'--pc-grid-cell-column-lg': 'span 12',
4242
} as React.CSSProperties,
4343
});
4444
});
@@ -50,8 +50,8 @@ describe('<Cell />', () => {
5050

5151
expect(cell).toContainReactComponent('div', {
5252
style: {
53-
'--pc-row-xs': '2 / span 3',
54-
'--pc-row-lg': '1 / span 2',
53+
'--pc-grid-cell-row-xs': '2 / span 3',
54+
'--pc-grid-cell-row-lg': '1 / span 2',
5555
} as React.CSSProperties,
5656
});
5757
});

0 commit comments

Comments
 (0)