Columns spacing

.changeset/few-ghosts-carry.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': patch
+'polaris.shopify.com': patch
+---
+
+Renamed `Columns` spacing

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

@@ -6,32 +6,32 @@
   --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);
+  --pc-columns-space-xs: var(--p-space-4);
+  --pc-columns-space-sm: var(--pc-columns-space-xs);
+  --pc-columns-space-md: var(--pc-columns-space-sm);
+  --pc-columns-space-lg: var(--pc-columns-space-md);
+  --pc-columns-space-xl: var(--pc-columns-space-lg);
   display: grid;
-  gap: var(--pc-columns-gap-xs);
+  gap: var(--pc-columns-space-xs);
   grid-template-columns: var(--pc-columns-xs);
 
   @media #{$p-breakpoints-sm-up} {
-    gap: var(--pc-columns-gap-sm);
+    gap: var(--pc-columns-space-sm);
     grid-template-columns: var(--pc-columns-sm);
   }
 
   @media #{$p-breakpoints-md-up} {
-    gap: var(--pc-columns-gap-md);
+    gap: var(--pc-columns-space-md);
     grid-template-columns: var(--pc-columns-md);
   }
 
   @media #{$p-breakpoints-lg-up} {
-    gap: var(--pc-columns-gap-lg);
+    gap: var(--pc-columns-space-lg);
     grid-template-columns: var(--pc-columns-lg);
   }
 
   @media #{$p-breakpoints-xl-up} {
-    gap: var(--pc-columns-gap-xl);
+    gap: var(--pc-columns-space-xl);
     grid-template-columns: var(--pc-columns-xl);
   }
 }

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

@@ -10,7 +10,7 @@ export default {
 export function BasicColumns() {
   return (
     <Page fullWidth>
-      <Columns columns={{xs: 1, sm: 2, md: 3, lg: 6}} gap={{xs: '2'}}>
+      <Columns columns={{xs: 1, sm: 2, md: 3, lg: 6}} spacing={{xs: '2'}}>
         <div style={{background: 'aquamarine'}}>one</div>
         <div style={{background: 'aquamarine'}}>two</div>
         <div style={{background: 'aquamarine'}}>three</div>
@@ -32,7 +32,7 @@ export function ColumnsWithTemplateColumns() {
           md: '1fr 3fr auto 1fr',
           lg: '1fr 4fr auto 2fr 3fr auto',
         }}
-        gap={{xs: '4'}}
+        spacing={{xs: '4'}}
       >
         <div style={{background: 'aquamarine'}}>Column one</div>
         <div style={{background: 'aquamarine'}}>Column two</div>
@@ -50,7 +50,7 @@ export function ColumnsWithMixedPropTypes() {
     <Page fullWidth>
       <Columns
         columns={{xs: 2, sm: '2fr 1fr', md: '2fr 1fr 1fr', lg: 6}}
-        gap={{xs: '2'}}
+        spacing={{xs: '2'}}
       >
         <div style={{background: 'aquamarine'}}>one</div>
         <div style={{background: 'aquamarine'}}>two</div>
@@ -68,7 +68,7 @@ export function ColumnsWithVaryingGap() {
     <Page fullWidth>
       <Columns
         columns={{xs: 3}}
-        gap={{xs: '025', sm: '05', md: '1', lg: '2', xl: '4'}}
+        spacing={{xs: '025', sm: '05', md: '1', lg: '2', xl: '4'}}
       >
         <div style={{background: 'aquamarine'}}>Column one</div>
         <div style={{background: 'aquamarine'}}>Column two</div>
@@ -81,7 +81,7 @@ export function ColumnsWithVaryingGap() {
 export function ColumnsWithFreeAndFixedWidths() {
   return (
     <Page fullWidth>
-      <Columns columns={{xs: '1fr auto auto'}} gap={{xs: '05'}}>
+      <Columns columns={{xs: '1fr auto auto'}} spacing={{xs: '05'}}>
         <div style={{background: 'aquamarine'}}>Column one</div>
         <div style={{background: 'aquamarine'}}>
           <Button icon={ChevronLeftMinor} accessibilityLabel="Previous" />

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

@@ -12,28 +12,38 @@ type Columns = {
   [Breakpoint in BreakpointsAlias]?: number | string;
 };
 
-type Gap = {
+type Spacing = {
   [Breakpoint in BreakpointsAlias]?: SpacingSpaceScale;
 };
 
 export interface ColumnsProps {
-  gap?: Gap;
+  spacing?: Spacing;
   columns?: Columns;
   children?: React.ReactNode;
 }
 
-export function Columns({columns, children, gap}: ColumnsProps) {
+export function Columns({columns, children, spacing}: ColumnsProps) {
   const style = {
     '--pc-columns-xs': formatColumns(columns?.xs),
     '--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,
+    '--pc-columns-space-xs': spacing?.xs
+      ? `var(--p-space-${spacing?.xs})`
+      : undefined,
+    '--pc-columns-space-sm': spacing?.sm
+      ? `var(--p-space-${spacing?.sm})`
+      : undefined,
+    '--pc-columns-space-md': spacing?.md
+      ? `var(--p-space-${spacing?.md})`
+      : undefined,
+    '--pc-columns-space-lg': spacing?.lg
+      ? `var(--p-space-${spacing?.lg})`
+      : undefined,
+    '--pc-columns-space-xl': spacing?.xl
+      ? `var(--p-space-${spacing?.xl})`
+      : undefined,
   } as React.CSSProperties;
 
   return (

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

@@ -11,10 +11,12 @@ describe('Columns', () => {
   });
 
   it('only renders custom properties that match the properties passed in', () => {
-    const columns = mountWithApp(<Columns gap={{md: '1'}} />);
+    const columns = mountWithApp(<Columns spacing={{md: '1'}} />);
 
     expect(columns).toContainReactComponent('div', {
-      style: {'--pc-columns-gap-md': 'var(--p-space-1)'} as React.CSSProperties,
+      style: {
+        '--pc-columns-space-md': 'var(--p-space-1)',
+      } as React.CSSProperties,
     });
   });
 

polaris.shopify.com/content/components/columns/index.md

@@ -10,8 +10,8 @@ status:
 examples:
   - fileName: columns-default.tsx
     title: Default
-  - fileName: columns-with-varying-gap.tsx
-    title: With varying gap
+  - fileName: columns-with-varying-spacing.tsx
+    title: With varying spacing
   - fileName: columns-with-free-and-fixed-widths.tsx
     title: With free and fixed widths
 ---

polaris.shopify.com/pages/examples/columns-default.tsx

@@ -6,7 +6,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 function ColumnsExample() {
   return (
     <div style={{width: '500px'}}>
-      <Columns columns={{xs: 1, sm: 2, md: 3, lg: 6}} gap={{xs: '2'}}>
+      <Columns columns={{xs: 1, sm: 2, md: 3, lg: 6}} spacing={{xs: '2'}}>
         <div style={{background: 'var(--p-surface-success)'}}>Column one</div>
         <div style={{background: 'var(--p-surface-success)'}}>Column two</div>
         <div style={{background: 'var(--p-surface-success)'}}>Column three</div>

polaris.shopify.com/pages/examples/columns-with-free-and-fixed-widths.tsx

@@ -8,7 +8,7 @@ function ColumnsWithFreeAndFixedWidthsExample() {
     <div style={{width: '90vw'}}>
       <Columns
         columns={{xs: 2, sm: '2fr 1fr', md: '2fr 1fr 1fr', lg: 6}}
-        gap={{xs: '2'}}
+        spacing={{xs: '2'}}
       >
         <div style={{background: 'var(--p-surface-success)'}}>Column one</div>
         <div style={{background: 'var(--p-surface-success)'}}>Column two</div>

polaris.shopify.com/pages/examples/columns-with-varying-gap.tsx → polaris.shopify.com/pages/examples/columns-with-varying-spacing.tsx

@@ -8,7 +8,7 @@ function ColumnsWithVaryingGapExample() {
     <div style={{width: '500px'}}>
       <Columns
         columns={{xs: 3}}
-        gap={{xs: '025', sm: '05', md: '1', lg: '2', xl: '4'}}
+        spacing={{xs: '025', sm: '05', md: '1', lg: '2', xl: '4'}}
       >
         <div style={{background: 'var(--p-surface-success)'}}>Column one</div>
         <div style={{background: 'var(--p-surface-success)'}}>Column two</div>