[Columns] Refactor gap to use getResponsiveProps util (#7761)

### WHY are these changes introduced?

Resolves #7749.

Refactors the `Columns` `gap` prop to use the `getResponsiveProps` util.
Also refactors `gap` so that it accepts a single string value or an
object with different values at varying breakpoints.

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

Updates `Columns` to use `getResponsiveProps` util.
Also updates tests, storybook examples, and the style guide.

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩


**[Storybook](https://5d559397bae39100201eedc1-egzpnipkkn.chromatic.com/?path=/story/all-components-columns--default).**

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

.changeset/light-mirrors-act.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': patch
+'polaris.shopify.com': patch
+---
+
+Refactored `Columns` `gap` to use `getResponsiveProps` util

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

@@ -1,37 +1,29 @@
 @import '../../styles/common';
 
 .Columns {
+  @include responsive-props('columns', 'gap', 'gap');
+
   --pc-columns-xs: 6;
   --pc-columns-sm: var(--pc-columns-xs);
   --pc-columns-md: var(--pc-columns-sm);
   --pc-columns-lg: var(--pc-columns-md);
   --pc-columns-xl: var(--pc-columns-lg);
-  --pc-columns-gap-xs: var(--p-space-4);
-  --pc-columns-gap-sm: var(--pc-columns-gap-xs);
-  --pc-columns-gap-md: var(--pc-columns-gap-sm);
-  --pc-columns-gap-lg: var(--pc-columns-gap-md);
-  --pc-columns-gap-xl: var(--pc-columns-gap-lg);
   display: grid;
-  gap: var(--pc-columns-gap-xs);
   grid-template-columns: var(--pc-columns-xs);
 
   @media #{$p-breakpoints-sm-up} {
-    gap: var(--pc-columns-gap-sm);
     grid-template-columns: var(--pc-columns-sm);
   }
 
   @media #{$p-breakpoints-md-up} {
-    gap: var(--pc-columns-gap-md);
     grid-template-columns: var(--pc-columns-md);
   }
 
   @media #{$p-breakpoints-lg-up} {
-    gap: var(--pc-columns-gap-lg);
     grid-template-columns: var(--pc-columns-lg);
   }
 
   @media #{$p-breakpoints-xl-up} {
-    gap: var(--pc-columns-gap-xl);
     grid-template-columns: var(--pc-columns-xl);
   }
 }

polaris-react/src/components/Columns/Columns.stories.tsx

@@ -7,7 +7,7 @@ export default {
   component: Columns,
 } as ComponentMeta<typeof Columns>;
 
-export function BasicColumns() {
+export function Default() {
   return (
     <Page fullWidth>
       <Columns>
@@ -22,7 +22,7 @@ export function BasicColumns() {
   );
 }
 
-export function ColumnsWithTemplateColumns() {
+export function WithTemplateColumns() {
   return (
     <Page fullWidth>
       <Columns
@@ -32,7 +32,6 @@ export function ColumnsWithTemplateColumns() {
           md: '1fr 3fr auto 1fr',
           lg: '1fr 4fr auto 2fr 3fr auto',
         }}
-        gap={{xs: '4'}}
       >
         <div style={{background: 'aquamarine'}}>Column one</div>
         <div style={{background: 'aquamarine'}}>Column two</div>
@@ -45,7 +44,7 @@ export function ColumnsWithTemplateColumns() {
   );
 }
 
-export function ColumnsWithMixedPropTypes() {
+export function WithMixedPropTypes() {
   return (
     <Page fullWidth>
       <Columns
@@ -63,12 +62,24 @@ export function ColumnsWithMixedPropTypes() {
   );
 }
 
-export function ColumnsWithVaryingGap() {
+export function WithGap() {
+  return (
+    <Page fullWidth>
+      <Columns columns={{xs: 3}} gap="5">
+        <div style={{background: 'aquamarine'}}>Column one</div>
+        <div style={{background: 'aquamarine'}}>Column two</div>
+        <div style={{background: 'aquamarine'}}>Column three</div>
+      </Columns>
+    </Page>
+  );
+}
+
+export function WithResponsiveGap() {
   return (
     <Page fullWidth>
       <Columns
         columns={{xs: 3}}
-        gap={{xs: '025', sm: '05', md: '1', lg: '2', xl: '4'}}
+        gap={{xs: '025', sm: '4', md: '6', lg: '8', xl: '10'}}
       >
         <div style={{background: 'aquamarine'}}>Column one</div>
         <div style={{background: 'aquamarine'}}>Column two</div>
@@ -78,7 +89,7 @@ export function ColumnsWithVaryingGap() {
   );
 }
 
-export function ColumnsWithFreeAndFixedWidths() {
+export function WithFreeAndFixedWidths() {
   return (
     <Page fullWidth>
       <Columns columns={{xs: '1fr auto auto'}} gap={{xs: '05'}}>

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

@@ -4,43 +4,44 @@ import type {
   SpacingSpaceScale,
 } from '@shopify/polaris-tokens';
 
-import {sanitizeCustomProperties} from '../../utilities/css';
+import {
+  getResponsiveProps,
+  sanitizeCustomProperties,
+} from '../../utilities/css';
+import type {ResponsiveProp} from '../../utilities/css';
 
 import styles from './Columns.scss';
 
 type Columns = {
   [Breakpoint in BreakpointsAlias]?: number | string;
 };
 
-type Gap = {
-  [Breakpoint in BreakpointsAlias]?: SpacingSpaceScale;
-};
+type Gap = ResponsiveProp<SpacingSpaceScale>;
 
 export interface ColumnsProps {
-  /** The spacing between columns
-   * @default '4'
-   */
-  gap?: Gap;
+  /** Elements to display inside columns */
+  children?: React.ReactNode;
   /** The number of columns to display
    * @default {xs: 6, sm: 6, md: 6, lg: 6, xl: 6}
    */
   columns?: Columns;
-  /** Elements to display inside columns */
-  children?: React.ReactNode;
+  /** The spacing between columns. Accepts a spacing token or an object of spacing tokens for different screen sizes.
+   * @default '4'
+   * @example
+   * gap='2'
+   * gap={{xs: '1', sm: '2', md: '3', lg: '4', xl: '5'}}
+   */
+  gap?: Gap;
 }
 
-export function Columns({columns, children, gap}: ColumnsProps) {
+export function Columns({children, columns, gap = '4'}: ColumnsProps) {
   const style = {
     '--pc-columns-xs': formatColumns(columns?.xs || 6),
     '--pc-columns-sm': formatColumns(columns?.sm),
     '--pc-columns-md': formatColumns(columns?.md),
     '--pc-columns-lg': formatColumns(columns?.lg),
     '--pc-columns-xl': formatColumns(columns?.xl),
-    '--pc-columns-gap-xs': gap?.xs ? `var(--p-space-${gap?.xs})` : undefined,
-    '--pc-columns-gap-sm': gap?.sm ? `var(--p-space-${gap?.sm})` : undefined,
-    '--pc-columns-gap-md': gap?.md ? `var(--p-space-${gap?.md})` : undefined,
-    '--pc-columns-gap-lg': gap?.lg ? `var(--p-space-${gap?.lg})` : undefined,
-    '--pc-columns-gap-xl': gap?.xl ? `var(--p-space-${gap?.xl})` : undefined,
+    ...getResponsiveProps('columns', 'gap', 'space', gap),
   } as React.CSSProperties;
 
   return (

polaris-react/src/components/Columns/tests/Columns.test.tsx

@@ -4,12 +4,13 @@ import {mountWithApp} from 'tests/utilities';
 import {Columns} from '..';
 
 describe('Columns', () => {
-  it('does not render custom properties by default', () => {
+  it('renders custom properties with default values', () => {
     const columns = mountWithApp(<Columns />);
 
     expect(columns).toContainReactComponent('div', {
       style: {
         '--pc-columns-xs': 'repeat(6, minmax(0, 1fr))',
+        '--pc-columns-gap-xs': 'var(--p-space-4)',
       } as React.CSSProperties,
     });
   });
@@ -34,6 +35,7 @@ describe('Columns', () => {
       style: {
         '--pc-columns-xs': '1fr 1fr',
         '--pc-columns-lg': '1.5fr 0.5fr',
+        '--pc-columns-gap-xs': 'var(--p-space-4)',
       } as React.CSSProperties,
     });
   });
@@ -45,6 +47,7 @@ describe('Columns', () => {
       style: {
         '--pc-columns-xs': 'repeat(1, minmax(0, 1fr))',
         '--pc-columns-md': 'repeat(4, minmax(0, 1fr))',
+        '--pc-columns-gap-xs': 'var(--p-space-4)',
       } as React.CSSProperties,
     });
   });