[Layout foundations] Update layout component custom properties (Shopify#8954)

laurkim · web-flow · commit 4345b34e51a6 · 2023-04-13T11:25:44.000-04:00
### WHY are these changes introduced? Small update to custom properties of `HorizontalStack`, `VerticalStack`, and `HorizontalGrid` to have the custom properties align with the new component names. ### WHAT is this pull request doing? - Updates `--pc-stack` custom properties to `--pc-vertical-stack` - Updates `--pc-inline` custom properties to `--pc-horizontal-stack` - Updates `--pc-columns` custom properties to `--pc-horizontal-grid` ### How to 🎩 🖥 [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 - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] 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 - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
diff --git a/.changeset/rotten-coats-drive.md b/.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`
diff --git a/polaris-react/src/components/HorizontalGrid/HorizontalGrid.scss b/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);
 }
diff --git a/polaris-react/src/components/HorizontalGrid/HorizontalGrid.tsx b/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 (
diff --git a/polaris-react/src/components/HorizontalGrid/tests/HorizontalGrid.test.tsx b/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,
     });
diff --git a/polaris-react/src/components/HorizontalStack/HorizontalStack.scss b/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);
 }
diff --git a/polaris-react/src/components/HorizontalStack/HorizontalStack.tsx b/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 (
diff --git a/polaris-react/src/components/HorizontalStack/tests/HorizontalStack.test.tsx b/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,
     });
   });
diff --git a/polaris-react/src/components/VerticalStack/VerticalStack.scss b/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 {
diff --git a/polaris-react/src/components/VerticalStack/VerticalStack.tsx b/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(
diff --git a/polaris-react/src/components/VerticalStack/tests/VerticalStack.test.tsx b/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,
     });
   });

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