[Layout foundations] Rename spacing prop to gap

.changeset/thin-bobcats-kneel.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': patch
+'polaris.shopify.com': patch
+---
+
+Renamed `spacing` prop to `gap` on `Inline`, `AlphaStack`, `Columns`, and `Tiles`

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

@@ -9,7 +9,7 @@ export default {
 export function Default() {
   return (
     <AlphaCard>
-      <AlphaStack spacing="5">
+      <AlphaStack gap="5">
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>
@@ -22,7 +22,7 @@ export function Default() {
 export function BackgroundSubdued() {
   return (
     <AlphaCard background="surface-subdued">
-      <AlphaStack spacing="5">
+      <AlphaStack gap="5">
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>
@@ -35,7 +35,7 @@ export function BackgroundSubdued() {
 export function BorderRadiusRoundedAbove() {
   return (
     <AlphaCard roundedAbove="sm">
-      <AlphaStack spacing="5">
+      <AlphaStack gap="5">
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>

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

@@ -1,30 +1,30 @@
 @import '../../styles/common';
 
 .AlphaStack {
-  --pc-stack-spacing-xs: var(--p-space-4);
-  --pc-stack-spacing-sm: var(--pc-stack-spacing-xs);
-  --pc-stack-spacing-md: var(--pc-stack-spacing-sm);
-  --pc-stack-spacing-lg: var(--pc-stack-spacing-md);
-  --pc-stack-spacing-xl: var(--pc-stack-spacing-lg);
+  --pc-stack-gap-xs: var(--p-space-4);
+  --pc-stack-gap-sm: var(--pc-stack-gap-xs);
+  --pc-stack-gap-md: var(--pc-stack-gap-sm);
+  --pc-stack-gap-lg: var(--pc-stack-gap-md);
+  --pc-stack-gap-xl: var(--pc-stack-gap-lg);
   display: flex;
   flex-direction: column;
   align-items: var(--pc-stack-align);
-  gap: var(--pc-stack-spacing-xs);
+  gap: var(--pc-stack-gap-xs);
 
   @media #{$p-breakpoints-sm-up} {
-    gap: var(--pc-stack-spacing-sm);
+    gap: var(--pc-stack-gap-sm);
   }
 
   @media #{$p-breakpoints-md-up} {
-    gap: var(--pc-stack-spacing-md);
+    gap: var(--pc-stack-gap-md);
   }
 
   @media #{$p-breakpoints-lg-up} {
-    gap: var(--pc-stack-spacing-lg);
+    gap: var(--pc-stack-gap-lg);
   }
 
   @media #{$p-breakpoints-xl-up} {
-    gap: var(--pc-stack-spacing-xl);
+    gap: var(--pc-stack-gap-xl);
   }
 
   > * {

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

@@ -17,9 +17,9 @@ export function Default() {
   );
 }
 
-export function Spacing() {
+export function Gap() {
   return (
-    <AlphaStack spacing="8">
+    <AlphaStack gap="8">
       <Badge>Paid</Badge>
       <Badge>Processing</Badge>
       <Badge>Fulfilled</Badge>
@@ -61,9 +61,9 @@ export function FullWidthChildren() {
   );
 }
 
-export function ResponsiveSpacing() {
+export function ResponsiveGap() {
   return (
-    <AlphaStack spacing={{xs: '4', md: '10'}}>
+    <AlphaStack gap={{xs: '4', md: '10'}}>
       <Badge>Paid</Badge>
       <Badge>Processing</Badge>
       <Badge>Fulfilled</Badge>

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

@@ -14,7 +14,7 @@ type Align = 'start' | 'end' | 'center';
 
 type Element = 'div' | 'ul' | 'ol' | 'fieldset';
 
-type Spacing = ResponsiveProp<SpacingSpaceScale>;
+type Gap = ResponsiveProp<SpacingSpaceScale>;
 
 export interface AlphaStackProps {
   /** HTML Element type
@@ -32,15 +32,15 @@ export interface AlphaStackProps {
   /** The spacing between elements
    * @default '4'
    */
-  spacing?: Spacing;
+  gap?: Gap;
 }
 
 export const AlphaStack = ({
   as = 'div',
   children,
   align = 'start',
   fullWidth,
-  spacing = '4',
+  gap = '4',
 }: AlphaStackProps) => {
   const className = classNames(
     styles.AlphaStack,
@@ -50,7 +50,7 @@ export const AlphaStack = ({
 
   const style = {
     '--pc-stack-align': align ? `${align}` : '',
-    ...getResponsiveProps('stack', 'spacing', 'space', spacing),
+    ...getResponsiveProps('stack', 'gap', 'space', gap),
   } as React.CSSProperties;
 
   return createElement(

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

@@ -19,35 +19,35 @@ describe('<AlphaStack />', () => {
     expect(stack).toContainReactComponent('div', {
       style: expect.objectContaining({
         '--pc-stack-align': 'start',
-        '--pc-stack-spacing-xs': 'var(--p-space-4)',
+        '--pc-stack-gap-xs': 'var(--p-space-4)',
       }) as React.CSSProperties,
     });
   });
 
   it('overrides custom properties if they are passed in', () => {
     const stack = mountWithApp(
-      <AlphaStack align="center" spacing="10">
+      <AlphaStack align="center" gap="10">
         {children}
       </AlphaStack>,
     );
 
     expect(stack).toContainReactComponent('div', {
       style: expect.objectContaining({
         '--pc-stack-align': 'center',
-        '--pc-stack-spacing-xs': 'var(--p-space-10)',
+        '--pc-stack-gap-xs': 'var(--p-space-10)',
       }) as React.CSSProperties,
     });
   });
 
-  it('accepts spacing based on breakpoints', () => {
+  it('accepts gap based on breakpoints', () => {
     const stack = mountWithApp(
-      <AlphaStack spacing={{xs: '2', md: '8'}}>{children}</AlphaStack>,
+      <AlphaStack gap={{xs: '2', md: '8'}}>{children}</AlphaStack>,
     );
 
     expect(stack).toContainReactComponent('div', {
       style: expect.objectContaining({
-        '--pc-stack-spacing-md': 'var(--p-space-8)',
-        '--pc-stack-spacing-xs': 'var(--p-space-2)',
+        '--pc-stack-gap-md': 'var(--p-space-8)',
+        '--pc-stack-gap-xs': 'var(--p-space-2)',
       }) as React.CSSProperties,
     });
   });

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

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

@@ -32,7 +32,7 @@ export function ColumnsWithTemplateColumns() {
           md: '1fr 3fr auto 1fr',
           lg: '1fr 4fr auto 2fr 3fr auto',
         }}
-        spacing={{xs: '4'}}
+        gap={{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}}
-        spacing={{xs: '2'}}
+        gap={{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}}
-        spacing={{xs: '025', sm: '05', md: '1', lg: '2', xl: '4'}}
+        gap={{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'}} spacing={{xs: '05'}}>
+      <Columns columns={{xs: '1fr auto auto'}} gap={{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,15 +12,15 @@ type Columns = {
   [Breakpoint in BreakpointsAlias]?: number | string;
 };
 
-type Spacing = {
+type Gap = {
   [Breakpoint in BreakpointsAlias]?: SpacingSpaceScale;
 };
 
 export interface ColumnsProps {
   /** The spacing between columns
    * @default '4'
    */
-  spacing?: Spacing;
+  gap?: Gap;
   /** The number of columns to display
    * @default {xs: 6, sm: 6, md: 6, lg: 6, xl: 6}
    */
@@ -29,28 +29,18 @@ export interface ColumnsProps {
   children?: React.ReactNode;
 }
 
-export function Columns({columns, children, spacing}: ColumnsProps) {
+export function Columns({columns, children, gap}: 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-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,
+    '--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,
   } as React.CSSProperties;
 
   return (

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

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

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

@@ -1,6 +1,6 @@
 .Inline {
   display: flex;
-  gap: var(--pc-inline-spacing);
+  gap: var(--pc-inline-gap);
   flex-wrap: var(--pc-inline-wrap);
   align-items: var(--pc-inline-block-align);
   justify-content: var(--pc-inline-align);