[Layout foundations] Update layout component custom properties

.changeset/rotten-coats-drive.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Updated custom property names to align with new component names for `HorizontalGrid`, `HorizontalStack`, and `VerticalStack`

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

@@ -1,17 +1,17 @@
 @import '../../styles/common';
 
 .HorizontalGrid {
-  @include responsive-props('columns', 'gap', 'gap');
+  @include responsive-props('horizontal-grid', 'gap', 'gap');
   @include responsive-props(
-    'columns',
+    'horizontal-grid',
     'grid-template-columns',
     'grid-template-columns'
   );
 
   // stylelint-disable -- Polaris component custom properties
-  --pc-columns-align-items: initial;
+  --pc-horizontal-grid-align-items: initial;
   // stylelint-enable
   display: grid;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  align-items: var(--pc-columns-align-items);
+  align-items: var(--pc-horizontal-grid-align-items);
 }

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

@@ -45,12 +45,12 @@ export function HorizontalGrid({
 }: HorizontalGridProps) {
   const style = {
     ...getResponsiveValue(
-      'columns',
+      'horizontal-grid',
       'grid-template-columns',
       formatHorizontalGrid(columns),
     ),
-    ...getResponsiveProps('columns', 'gap', 'space', gap),
-    '--pc-columns-align-items': alignItems,
+    ...getResponsiveProps('horizontal-grid', 'gap', 'space', gap),
+    '--pc-horizontal-grid-align-items': alignItems,
   } as React.CSSProperties;
 
   return (

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

@@ -5,54 +5,58 @@ import {HorizontalGrid} from '..';
 
 describe('HorizontalGrid', () => {
   it('only renders custom properties that match the properties passed in', () => {
-    const columns = mountWithApp(
+    const horizontalGrid = mountWithApp(
       <HorizontalGrid gap={{md: '1'}} alignItems="start" />,
     );
 
-    expect(columns).toContainReactComponent('div', {
+    expect(horizontalGrid).toContainReactComponent('div', {
       style: {
-        '--pc-columns-gap-md': 'var(--p-space-1)',
-        '--pc-columns-align-items': 'start',
+        '--pc-horizontal-grid-gap-md': 'var(--p-space-1)',
+        '--pc-horizontal-grid-align-items': 'start',
       } as React.CSSProperties,
     });
   });
 
   it('formats string columns', () => {
-    const columns = mountWithApp(
+    const horizontalGrid = mountWithApp(
       <HorizontalGrid columns={{xs: '1fr 1fr', lg: '1.5fr 0.5fr'}} />,
     );
 
-    expect(columns).toContainReactComponent('div', {
+    expect(horizontalGrid).toContainReactComponent('div', {
       style: {
-        '--pc-columns-grid-template-columns-xs': '1fr 1fr',
-        '--pc-columns-grid-template-columns-lg': '1.5fr 0.5fr',
+        '--pc-horizontal-grid-grid-template-columns-xs': '1fr 1fr',
+        '--pc-horizontal-grid-grid-template-columns-lg': '1.5fr 0.5fr',
       } as React.CSSProperties,
     });
   });
 
   it('formats number columns', () => {
-    const columns = mountWithApp(<HorizontalGrid columns={{xs: 1, md: 4}} />);
+    const horizontalGrid = mountWithApp(
+      <HorizontalGrid columns={{xs: 1, md: 4}} />,
+    );
 
-    expect(columns).toContainReactComponent('div', {
+    expect(horizontalGrid).toContainReactComponent('div', {
       style: {
-        '--pc-columns-grid-template-columns-xs': 'repeat(1, minmax(0, 1fr))',
-        '--pc-columns-grid-template-columns-md': 'repeat(4, minmax(0, 1fr))',
+        '--pc-horizontal-grid-grid-template-columns-xs':
+          'repeat(1, minmax(0, 1fr))',
+        '--pc-horizontal-grid-grid-template-columns-md':
+          'repeat(4, minmax(0, 1fr))',
       } as React.CSSProperties,
     });
   });
 
   it('formats alias columns', () => {
-    const columns = mountWithApp(
+    const horizontalGrid = mountWithApp(
       <HorizontalGrid
         columns={{xs: ['oneHalf', 'oneHalf'], md: ['oneThird', 'twoThirds']}}
       />,
     );
 
-    expect(columns).toContainReactComponent('div', {
+    expect(horizontalGrid).toContainReactComponent('div', {
       style: {
-        '--pc-columns-grid-template-columns-xs':
+        '--pc-horizontal-grid-grid-template-columns-xs':
           'minmax(0, 1fr) minmax(0, 1fr)',
-        '--pc-columns-grid-template-columns-md':
+        '--pc-horizontal-grid-grid-template-columns-md':
           'minmax(0, 1fr) minmax(0, 2fr)',
       } as React.CSSProperties,
     });

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

@@ -1,12 +1,12 @@
 @import '../../styles/common';
 
 .HorizontalStack {
-  @include responsive-props('inline', 'gap', 'gap');
+  @include responsive-props('horizontal-stack', 'gap', 'gap');
   display: flex;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  flex-wrap: var(--pc-inline-wrap);
+  flex-wrap: var(--pc-horizontal-stack-wrap);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  align-items: var(--pc-inline-block-align);
+  align-items: var(--pc-horizontal-stack-block-align);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  justify-content: var(--pc-inline-align);
+  justify-content: var(--pc-horizontal-stack-align);
 }

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

@@ -43,10 +43,10 @@ export const HorizontalStack = function HorizontalStack({
   children,
 }: HorizontalStackProps) {
   const style = {
-    '--pc-inline-align': align,
-    '--pc-inline-block-align': blockAlign,
-    '--pc-inline-wrap': wrap ? 'wrap' : 'nowrap',
-    ...getResponsiveProps('inline', 'gap', 'space', gap),
+    '--pc-horizontal-stack-align': align,
+    '--pc-horizontal-stack-block-align': blockAlign,
+    '--pc-horizontal-stack-wrap': wrap ? 'wrap' : 'nowrap',
+    ...getResponsiveProps('horizontal-stack', 'gap', 'space', gap),
   } as React.CSSProperties;
 
   return (

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

@@ -13,54 +13,54 @@ describe('<HorizontalStack />', () => {
     ));
 
   it('renders its children', () => {
-    const stack = mountWithApp(
+    const horizontalStack = mountWithApp(
       <HorizontalStack>{renderChildren()}</HorizontalStack>,
     );
 
-    expect(stack).toContainReactText(childText);
+    expect(horizontalStack).toContainReactText(childText);
   });
 
   it('renders custom properties by default', () => {
-    const stack = mountWithApp(
+    const horizontalStack = mountWithApp(
       <HorizontalStack>{renderChildren()}</HorizontalStack>,
     );
 
-    expect(stack).toContainReactComponent('div', {
+    expect(horizontalStack).toContainReactComponent('div', {
       style: expect.objectContaining({
-        '--pc-inline-wrap': 'wrap',
+        '--pc-horizontal-stack-wrap': 'wrap',
       }) as React.CSSProperties,
     });
   });
 
   it('overrides custom properties if they are passed in', () => {
-    const stack = mountWithApp(
+    const horizontalStack = mountWithApp(
       <HorizontalStack align="center" blockAlign="start" gap="10">
         {renderChildren()}
       </HorizontalStack>,
     );
 
-    expect(stack).toContainReactComponent('div', {
+    expect(horizontalStack).toContainReactComponent('div', {
       style: expect.objectContaining({
-        '--pc-inline-align': 'center',
-        '--pc-inline-block-align': 'start',
-        '--pc-inline-wrap': 'wrap',
-        '--pc-inline-gap-xs': 'var(--p-space-10)',
+        '--pc-horizontal-stack-align': 'center',
+        '--pc-horizontal-stack-block-align': 'start',
+        '--pc-horizontal-stack-wrap': 'wrap',
+        '--pc-horizontal-stack-gap-xs': 'var(--p-space-10)',
       }) as React.CSSProperties,
     });
   });
 
   it('accepts gap based on breakpoints', () => {
-    const stack = mountWithApp(
+    const horizontalStack = mountWithApp(
       <HorizontalStack gap={{xs: '2', md: '8'}}>
         {renderChildren()}
       </HorizontalStack>,
     );
 
-    expect(stack).toContainReactComponent('div', {
+    expect(horizontalStack).toContainReactComponent('div', {
       style: expect.objectContaining({
-        '--pc-inline-wrap': 'wrap',
-        '--pc-inline-gap-xs': 'var(--p-space-2)',
-        '--pc-inline-gap-md': 'var(--p-space-8)',
+        '--pc-horizontal-stack-wrap': 'wrap',
+        '--pc-horizontal-stack-gap-xs': 'var(--p-space-2)',
+        '--pc-horizontal-stack-gap-md': 'var(--p-space-8)',
       }) as React.CSSProperties,
     });
   });

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

@@ -1,19 +1,19 @@
 @import '../../styles/common';
 
 .VerticalStack {
-  @include responsive-props('stack', 'gap', 'gap');
+  @include responsive-props('vertical-stack', 'gap', 'gap');
   // stylelint-disable -- Polaris component custom properties
-  --pc-stack-align: initial;
-  --pc-stack-inline-align: initial;
-  --pc-stack-order: initial;
+  --pc-vertical-stack-align: initial;
+  --pc-vertical-stack-inline-align: initial;
+  --pc-vertical-stack-order: initial;
   // stylelint-enable
   display: flex;
   // stylelint-disable-next-line -- custom property to set flex direction
-  flex-direction: var(--pc-stack-order);
+  flex-direction: var(--pc-vertical-stack-order);
   // stylelint-disable-next-line -- custom property to set horizontal alignment
-  align-items: var(--pc-stack-inline-align);
+  align-items: var(--pc-vertical-stack-inline-align);
   // stylelint-disable-next-line -- custom property to set vertical alignment
-  justify-content: var(--pc-stack-align);
+  justify-content: var(--pc-vertical-stack-align);
 }
 
 .listReset {

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

@@ -61,10 +61,10 @@ export const VerticalStack = ({
   );
 
   const style = {
-    '--pc-stack-align': align ? `${align}` : '',
-    '--pc-stack-inline-align': inlineAlign ? `${inlineAlign}` : '',
-    '--pc-stack-order': reverseOrder ? 'column-reverse' : 'column',
-    ...getResponsiveProps('stack', 'gap', 'space', gap),
+    '--pc-vertical-stack-align': align ? `${align}` : '',
+    '--pc-vertical-stack-inline-align': inlineAlign ? `${inlineAlign}` : '',
+    '--pc-vertical-stack-order': reverseOrder ? 'column-reverse' : 'column',
+    ...getResponsiveProps('vertical-stack', 'gap', 'space', gap),
   } as React.CSSProperties;
 
   return React.createElement(

polaris-react/src/components/VerticalStack/tests/VerticalStack.tsx → polaris-react/src/components/VerticalStack/tests/VerticalStack.test.tsx

@@ -8,45 +8,49 @@ const children = <p>{text}</p>;
 
 describe('<VerticalStack />', () => {
   it('renders children', () => {
-    const stack = mountWithApp(<VerticalStack>{children}</VerticalStack>);
+    const verticalStack = mountWithApp(
+      <VerticalStack>{children}</VerticalStack>,
+    );
 
-    expect(stack).toContainReactComponent('p', {children: text});
+    expect(verticalStack).toContainReactComponent('p', {children: text});
   });
 
   it('renders custom properties by default', () => {
-    const stack = mountWithApp(<VerticalStack>{children}</VerticalStack>);
+    const verticalStack = mountWithApp(
+      <VerticalStack>{children}</VerticalStack>,
+    );
 
-    expect(stack).toContainReactComponent('div', {
+    expect(verticalStack).toContainReactComponent('div', {
       style: expect.objectContaining({
-        '--pc-stack-order': 'column',
+        '--pc-vertical-stack-order': 'column',
       }) as React.CSSProperties,
     });
   });
 
   it('overrides custom properties if they are passed in', () => {
-    const stack = mountWithApp(
+    const verticalStack = mountWithApp(
       <VerticalStack inlineAlign="center" gap="10">
         {children}
       </VerticalStack>,
     );
 
-    expect(stack).toContainReactComponent('div', {
+    expect(verticalStack).toContainReactComponent('div', {
       style: expect.objectContaining({
-        '--pc-stack-inline-align': 'center',
-        '--pc-stack-gap-xs': 'var(--p-space-10)',
+        '--pc-vertical-stack-inline-align': 'center',
+        '--pc-vertical-stack-gap-xs': 'var(--p-space-10)',
       }) as React.CSSProperties,
     });
   });
 
   it('accepts gap based on breakpoints', () => {
-    const stack = mountWithApp(
+    const verticalStack = mountWithApp(
       <VerticalStack gap={{xs: '2', md: '8'}}>{children}</VerticalStack>,
     );
 
-    expect(stack).toContainReactComponent('div', {
+    expect(verticalStack).toContainReactComponent('div', {
       style: expect.objectContaining({
-        '--pc-stack-gap-md': 'var(--p-space-8)',
-        '--pc-stack-gap-xs': 'var(--p-space-2)',
+        '--pc-vertical-stack-gap-md': 'var(--p-space-8)',
+        '--pc-vertical-stack-gap-xs': 'var(--p-space-2)',
       }) as React.CSSProperties,
     });
   });