Add support for non-responsive values to Grid's gap, columns, and areas props.

Author: jesstelford

.changeset/slimy-donuts-report.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Add support for non-responsive values to `Grid`'s `gap`, `columns`, and `areas` props.

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

@@ -1,60 +1,21 @@
 @import '../../styles/common';
 
 .Grid {
-  // Remap custom properties as mobile first fallbacks for grid-template-areas and grid-template-columns
+  display: grid;
+
   // 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);
+  @include responsive-props('grid', 'gap', 'gap', $default: 'var(--p-space-4)');
+  @include responsive-props('grid', 'areas', 'grid-template-areas');
+  @include responsive-props(
+    'grid',
+    'columns',
+    '--pc-grid-template-columns',
+    $default: ('xs': 6, 'lg': 12)
+  );
   // stylelint-enable
-  display: grid;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  gap: var(--pc-grid-gap-xs, var(--p-space-4));
-  // 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-4));
-    // 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-4));
-    // 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-4));
-    // 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-4));
-    // 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));
-  }
+  grid-template-columns: repeat(
+    var(--pc-grid-template-columns),
+    minmax(0, 1fr)
+  );
 }

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

@@ -1,53 +1,42 @@
 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 {
   /**
    * Set grid-template-areas
    * @deprecated Use nested layout components instead
    */
-  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 (
@@ -57,7 +46,7 @@ export const Grid: React.FunctionComponent<GridProps> & {
   );
 };
 
-export function formatAreas(areas?: string[]) {
+export function formatAreas(areas?: Area) {
   if (!areas) return;
   return `'${areas?.join(`' '`)}'`;
 }

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

@@ -1,52 +1,12 @@
 @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 {

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

@@ -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<string>;
 
 interface Columns {
   /** Number of columns the section should span on extra small screens */
@@ -52,16 +49,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 (

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

@@ -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,
     });
   });
@@ -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,
     });
   });