[polaris.shopify.com] Update alpha pages to use gap instead of spacing

Author: laurkim

polaris.shopify.com/content/components/alpha-stack.md

@@ -12,10 +12,10 @@ examples:
     title: Default
     description: >-
       By default, stack is left aligned and stacked items are spaced with 16px in between.
-  - fileName: alpha-stack-with-spacing.tsx
-    title: Spacing
+  - fileName: alpha-stack-with-gap.tsx
+    title: Gap
     description: >-
-      Spacing between stack child can be adjusted using the Space token.
+      Gaps between stack children can be adjusted using the Space token.
   - fileName: alpha-stack-with-full-width-children.tsx
     title: Full width
     description: >-

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

@@ -12,10 +12,10 @@ examples:
     title: Default
     description: >-
       By default, there are 6 columns with 16px spacing between them.
-  - fileName: columns-with-varying-spacing.tsx
-    title: Spacing
+  - fileName: columns-with-varying-gap.tsx
+    title: Gap
     description: >-
-      Use the spacing prop to set the amount of space between columns.
+      Use the gap prop to set the amount of space between columns.
   - fileName: columns-with-fixed-widths.tsx
     title: Column width
     description: >-

polaris.shopify.com/content/components/inline.md

@@ -11,15 +11,15 @@ examples:
   - fileName: inline-default.tsx
     title: Default
     description: >-
-     Items are vertically centered with 16px of space around them. They’ll wrap onto multiple lines when needed.
+      Items are vertically centered with 16px of space around them. They’ll wrap onto multiple lines when needed.
   - fileName: inline-with-non-wrapping.tsx
     title: Non-wrapping
     description: >-
       Use to create Inline where the children will not wrap to new rows on small screens.
-  - fileName: inline-with-spacing.tsx
-    title: Spacing
+  - fileName: inline-with-gap.tsx
+    title: Gap
     description: >-
-      Use to control spacing of items in inline in standard increments.
+      Use to control gaps around items in inline in standard increments.
   - fileName: inline-with-vertical-alignment.tsx
     title: Vertical alignment
     description: >-

polaris.shopify.com/content/components/tiles.md

@@ -8,10 +8,10 @@ status:
   value: Alpha
   message: This component is in development. There could be breaking changes made to it in a non-major release of Polaris. Please use with caution.
 examples:
-  - fileName: tiles-with-spacing.tsx
-    title: Spacing
+  - fileName: tiles-with-gap.tsx
+    title: Gap
     description: >-
-      Use the spacing prop to set the amount of space between tiles.
+      Use the gap prop to set the amount of space between tiles.
   - fileName: tiles-with-columns.tsx
     title: Columns
     description: >-

polaris.shopify.com/pages/examples/alpha-card-with-varying-padding.tsx

@@ -4,7 +4,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function AlphaCardExample() {
   return (
-    <AlphaStack spacing="4" fullWidth>
+    <AlphaStack gap="4" fullWidth>
       <AlphaCard>
         <Placeholder label="Content inside a card" />
       </AlphaCard>

polaris.shopify.com/pages/examples/alpha-stack-with-align.tsx

@@ -6,7 +6,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 function AlphaStackWithAlignExample() {
   return (
     <Page>
-      <AlphaStack spacing="5" fullWidth>
+      <AlphaStack gap="5" fullWidth>
         <AlphaStack align="start">
           <Placeholder width="320px" label="Start" childAlign="start" />
           <Placeholder width="320px" childAlign="start" />

polaris.shopify.com/pages/examples/alpha-stack-with-spacing.tsx renamed to polaris.shopify.com/pages/examples/alpha-stack-with-gap.tsx

@@ -3,10 +3,10 @@ import {AlphaStack, Text} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
-function AlphaStackWithSpacingExample() {
+function AlphaStackWithGapExample() {
   return (
     <SpacingBackground width="320px">
-      <AlphaStack spacing="5">
+      <AlphaStack gap="5">
         <Placeholder width="320px" label="Stack child" />
         <Placeholder width="320px" />
         <Placeholder width="320px" />
@@ -61,4 +61,4 @@ const Placeholder = ({
   );
 };
 
-export default withPolarisExample(AlphaStackWithSpacingExample);
+export default withPolarisExample(AlphaStackWithGapExample);

polaris.shopify.com/pages/examples/bleed-specific-direction.tsx

@@ -5,7 +5,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function BleedSpecificDirectionExample() {
   return (
-    <AlphaStack spacing="6" fullWidth>
+    <AlphaStack gap="6" fullWidth>
       <Box background="surface" border="base" padding="5">
         <Bleed top="5">
           <Placeholder label="Top" />

polaris.shopify.com/pages/examples/box-with-padding.tsx

@@ -11,7 +11,7 @@ function BoxWithPaddingExample() {
           <Placeholder label="All side padding" childAlign="center" />
         </Box>
       </div>
-      <Inline spacing="4">
+      <Inline gap="4">
         <div style={{backgroundColor: '#986BFF'}}>
           <Box paddingInlineStart="4" width="284px">
             <Placeholder label="PaddingLeft" childAlign="start" />
@@ -23,7 +23,7 @@ function BoxWithPaddingExample() {
           </Box>
         </div>
       </Inline>
-      <Inline spacing="4">
+      <Inline gap="4">
         <div style={{backgroundColor: '#986BFF'}}>
           <Box paddingBlockStart="4" width="284px">
             <Placeholder label="PaddingTop" childAlign="center" />

polaris.shopify.com/pages/examples/columns-with-set-number.tsx

@@ -11,7 +11,7 @@ function ColumnsWithSetNumberExample() {
           xs: '3fr 3fr',
           md: '4fr 2fr',
         }}
-        spacing={{
+        gap={{
           xs: '4',
           md: '2',
         }}