Skip to content

Commit

Permalink
Add support for non-responsive values to Grid's gap, columns, a…
Browse files Browse the repository at this point in the history
…nd `areas` props.
  • Loading branch information
jesstelford committed Oct 7, 2023
1 parent aaeb85d commit 8eac426
Show file tree
Hide file tree
Showing 9 changed files with 152 additions and 218 deletions.
5 changes: 5 additions & 0 deletions .changeset/slimy-donuts-report.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@shopify/polaris': minor
---

Added support for non-responsive values to `Grid`'s `gap`, `columns`, and `areas` props.
72 changes: 18 additions & 54 deletions polaris-react/src/components/Grid/Grid.scss
Original file line number Diff line number Diff line change
@@ -1,60 +1,24 @@
@import '../../styles/common';

.Grid {
// Remap custom properties as mobile first fallbacks for grid-template-areas and grid-template-columns
// stylelint-disable -- Polaris component custom properties
--pc-grid-areas-xs: initial;
--pc-grid-areas-sm: var(--pc-grid-areas-xs);
--pc-grid-areas-md: var(--pc-grid-areas-sm);
--pc-grid-areas-lg: var(--pc-grid-areas-md);
--pc-grid-areas-xl: var(--pc-grid-areas-lg);
--pc-grid-columns-xs: 6;
--pc-grid-columns-sm: var(--pc-grid-columns-xs);
--pc-grid-columns-md: var(--pc-grid-columns-sm);
--pc-grid-columns-lg: 12;
--pc-grid-columns-xl: var(--pc-grid-columns-lg);
// stylelint-enable
display: grid;
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
gap: var(--pc-grid-gap-xs, var(--p-space-400));
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
grid-template-areas: var(--pc-grid-areas-xs);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
grid-template-columns: repeat(var(--pc-grid-columns-xs), minmax(0, 1fr));

@media #{$p-breakpoints-sm-up} {
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
gap: var(--pc-grid-gap-sm, var(--p-space-400));
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
grid-template-areas: var(--pc-grid-areas-sm);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
grid-template-columns: repeat(var(--pc-grid-columns-sm), minmax(0, 1fr));
}

@media #{$p-breakpoints-md-up} {
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
gap: var(--pc-grid-gap-md, var(--p-space-400));
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
grid-template-areas: var(--pc-grid-areas-md);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
grid-template-columns: repeat(var(--pc-grid-columns-md), minmax(0, 1fr));
}

@media #{$p-breakpoints-lg-up} {
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
gap: var(--pc-grid-gap-lg, var(--p-space-400));
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
grid-template-areas: var(--pc-grid-areas-lg);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
grid-template-columns: repeat(var(--pc-grid-columns-lg), minmax(0, 1fr));
}

@media #{$p-breakpoints-xl-up} {
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
gap: var(--pc-grid-gap-xl, var(--p-space-400));
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
grid-template-areas: var(--pc-grid-areas-xl);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
grid-template-columns: repeat(var(--pc-grid-columns-xl), minmax(0, 1fr));
}
@include responsive-props(
'grid',
'gap',
'gap',
$default: 'var(--p-space-400)'
);
@include responsive-props('grid', 'areas', 'grid-template-areas');
@include responsive-props(
'grid',
'columns',
'--pc-grid-template-columns',
$default: ('xs': 6, 'lg': 12)
);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
grid-template-columns: repeat(
var(--pc-grid-template-columns),
minmax(0, 1fr)
);
}
2 changes: 1 addition & 1 deletion polaris-react/src/components/Grid/Grid.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export function TwoColumn() {
export function TwoThirdsAndOneThirdColumn() {
return (
<Page fullWidth>
<Grid columns={{sm: 3}}>
<Grid>
<Grid.Cell columnSpan={{xs: 6, sm: 4, md: 4, lg: 8, xl: 8}}>
<LegacyCard title="Sales" sectioned>
<p>View a summary of your online store’s sales.</p>
Expand Down
53 changes: 21 additions & 32 deletions polaris-react/src/components/Grid/Grid.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,17 @@
import React from 'react';
import type {SpaceScale} from '@shopify/polaris-tokens';

import {
getResponsiveProps,
getResponsiveValue,
mapResponsivePropValues,
} from '../../utilities/css';
import type {ResponsiveProp} from '../../utilities/css';

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

type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

type Areas = {
[Breakpoint in Breakpoints]?: string[];
};

type Columns = {
[Breakpoint in Breakpoints]?: number;
};

type Gap = {
[Breakpoint in Breakpoints]?: string;
};
type Area = string[];

export interface GridProps {
/**
Expand All @@ -24,32 +20,25 @@ export interface GridProps {
* cells instead. See:
* https://polaris.shopify.com/components/layout-and-structure
*/
areas?: Areas;
areas?: ResponsiveProp<Area>;
/* Number of columns */
columns?: Columns;
columns?: ResponsiveProp<number>;
/* Grid gap */
gap?: Gap;
gap?: ResponsiveProp<SpaceScale>;
children?: React.ReactNode;
}

export const Grid: React.FunctionComponent<GridProps> & {
Cell: typeof Cell;
} = function Grid({gap, areas, children, columns}: GridProps) {
const style = {
'--pc-grid-gap-xs': gap?.xs,
'--pc-grid-gap-sm': gap?.sm,
'--pc-grid-gap-md': gap?.md,
'--pc-grid-gap-lg': gap?.lg,
'--pc-grid-gap-xl': gap?.xl,
'--pc-grid-columns-xs': columns?.xs,
'--pc-grid-columns-sm': columns?.sm,
'--pc-grid-columns-md': columns?.md,
'--pc-grid-columns-lg': columns?.lg,
'--pc-grid-columns-xl': columns?.xl,
'--pc-grid-areas-xs': formatAreas(areas?.xs),
'--pc-grid-areas-sm': formatAreas(areas?.sm),
'--pc-grid-areas-md': formatAreas(areas?.md),
'--pc-grid-areas-lg': formatAreas(areas?.lg),
'--pc-grid-areas-xl': formatAreas(areas?.xl),
...getResponsiveProps('grid', 'gap', 'space', gap),
...getResponsiveValue('grid', 'columns', columns),
...getResponsiveValue(
'grid',
'areas',
mapResponsivePropValues(areas, formatAreas),
),
} as React.CSSProperties;

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

export function formatAreas(areas?: string[]) {
export function formatAreas(areas?: Area) {
if (!areas) return;
return `'${areas?.join(`' '`)}'`;
}
Expand Down
46 changes: 2 additions & 44 deletions polaris-react/src/components/Grid/components/Cell/Cell.scss
Original file line number Diff line number Diff line change
@@ -1,52 +1,10 @@
@import '../../../../styles/common';

.Cell {
@include responsive-props('grid-cell', 'row', 'grid-row');
@include responsive-props('grid-cell', 'column', 'grid-column');
// Remap custom properties as mobile first fallbacks for grid-row and grid-column
// stylelint-disable -- Polaris component custom properties
--pc-row-xs: initial;
--pc-row-sm: var(--pc-row-xs);
--pc-row-md: var(--pc-row-sm);
--pc-row-lg: var(--pc-row-md);
--pc-row-xl: var(--pc-row-lg);
--pc-column-xs: initial;
--pc-column-sm: var(--pc-column-xs);
--pc-column-md: var(--pc-column-sm);
--pc-column-lg: var(--pc-column-md);
--pc-column-xl: var(--pc-column-lg);
// stylelint-enable
min-width: 0;
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
grid-row: var(--pc-row-xs);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
grid-column: var(--pc-column-xs);

@media #{$p-breakpoints-sm-up} {
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
grid-row: var(--pc-row-sm);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
grid-column: var(--pc-column-sm);
}

@media #{$p-breakpoints-md-up} {
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
grid-row: var(--pc-row-md);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
grid-column: var(--pc-column-md);
}

@media #{$p-breakpoints-lg-up} {
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
grid-row: var(--pc-row-lg);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
grid-column: var(--pc-column-lg);
}

@media #{$p-breakpoints-xl-up} {
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
grid-row: var(--pc-row-xl);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
grid-column: var(--pc-column-xl);
}
}

@for $i from 1 through 6 {
Expand Down
21 changes: 5 additions & 16 deletions polaris-react/src/components/Grid/components/Cell/Cell.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
import React from 'react';

import {classNames} from '../../../../utilities/css';
import {classNames, getResponsiveValue} from '../../../../utilities/css';
import type {ResponsiveProp} from '../../../../utilities/css';

import styles from './Cell.scss';

type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

type Cell = {
[Breakpoint in Breakpoints]?: string;
};
type Cell = ResponsiveProp;

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

const style = {
gridArea,
'--pc-column-xs': column?.xs,
'--pc-column-sm': column?.sm,
'--pc-column-md': column?.md,
'--pc-column-lg': column?.lg,
'--pc-column-xl': column?.xl,
'--pc-row-xs': row?.xs,
'--pc-row-sm': row?.sm,
'--pc-row-md': row?.md,
'--pc-row-lg': row?.lg,
'--pc-row-xl': row?.xl,
...getResponsiveValue('grid-cell', 'column', column),
...getResponsiveValue('grid-cell', 'row', row),
};

return (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ describe('<Cell />', () => {

expect(cell).toContainReactComponent('div', {
style: {
'--pc-column-xs': '2 / span 1',
'--pc-column-lg': 'span 12',
'--pc-grid-cell-column-xs': '2 / span 1',
'--pc-grid-cell-column-lg': 'span 12',
} as React.CSSProperties,
});
});
Expand All @@ -50,8 +50,8 @@ describe('<Cell />', () => {

expect(cell).toContainReactComponent('div', {
style: {
'--pc-row-xs': '2 / span 3',
'--pc-row-lg': '1 / span 2',
'--pc-grid-cell-row-xs': '2 / span 3',
'--pc-grid-cell-row-lg': '1 / span 2',
} as React.CSSProperties,
});
});
Expand Down

0 comments on commit 8eac426

Please sign in to comment.