Rename VerticalStack as BlockStack

Shopify · Aug 11, 2023 · a991236 · a991236
1 parent efc5305
commit a991236
Show file tree

Hide file tree

Showing 70 changed files with 510 additions and 530 deletions.
diff --git a/polaris-react/src/components/AccountConnection/AccountConnection.stories.tsx b/polaris-react/src/components/AccountConnection/AccountConnection.stories.tsx
@@ -1,12 +1,6 @@
 import React, {useCallback, useState} from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {
-  AccountConnection,
-  Box,
-  Link,
-  Text,
-  VerticalStack,
-} from '@shopify/polaris';
+import {AccountConnection, Box, Link, Text, BlockStack} from '@shopify/polaris';
 
 import {useFeatures} from '../../utilities/features';
 
@@ -17,20 +11,20 @@ export default {
 export function All() {
   return (
     <>
-      <VerticalStack gap="4">
+      <BlockStack gap="4">
         <Text as="h2" variant="headingXl">
           Default
         </Text>
         <Default />
         <Box paddingBlockEnd="3" />
-      </VerticalStack>
-      <VerticalStack gap="4">
+      </BlockStack>
+      <BlockStack gap="4">
         <Text as="h2" variant="headingXl">
           With account connected
         </Text>
         <WithAccountConnected />
         <Box paddingBlockEnd="3" />
-      </VerticalStack>
+      </BlockStack>
     </>
   );
 }

diff --git a/polaris-react/src/components/AccountConnection/AccountConnection.tsx b/polaris-react/src/components/AccountConnection/AccountConnection.tsx
@@ -8,7 +8,7 @@ import {Card} from '../Card';
 import {Box} from '../Box';
 import {HorizontalStack} from '../HorizontalStack';
 import {Text} from '../Text';
-import {VerticalStack} from '../VerticalStack';
+import {BlockStack} from '../BlockStack';
 import {useBreakpoints} from '../../utilities/breakpoints';
 
 export interface AccountConnectionProps {
@@ -84,10 +84,10 @@ export function AccountConnection({
       <SettingAction action={actionElement}>
         <HorizontalStack gap="4">
           {avatarMarkup}
-          <VerticalStack gap="1">
+          <BlockStack gap="1">
             {titleMarkup}
             {detailsMarkup}
-          </VerticalStack>
+          </BlockStack>
         </HorizontalStack>
       </SettingAction>
       {termsOfServiceMarkup}

diff --git a/polaris-react/src/components/ActionList/ActionList.stories.tsx b/polaris-react/src/components/ActionList/ActionList.stories.tsx
@@ -7,7 +7,7 @@ import {
   Icon,
   Popover,
   Thumbnail,
-  VerticalStack,
+  BlockStack,
 } from '@shopify/polaris';
 import {
   TickSmallMinor,
@@ -27,7 +27,7 @@ export default {
 
 export function All() {
   return (
-    <VerticalStack gap="16">
+    <BlockStack gap="16">
       <InAPopover />
       <WithIconsOrImage />
       <WithAnIconAndASuffix />
@@ -36,7 +36,7 @@ export function All() {
       <WithDestructiveItem />
       <WithHelpText />
       <WithAPrefixAndASuffix />
-    </VerticalStack>
+    </BlockStack>
   );
 }
 

diff --git a/polaris-react/src/components/ActionList/components/Section/Section.tsx b/polaris-react/src/components/ActionList/components/Section/Section.tsx
@@ -8,7 +8,7 @@ import type {
   ActionListSection,
 } from '../../../../types';
 import {HorizontalStack} from '../../../HorizontalStack';
-import {VerticalStack} from '../../../VerticalStack';
+import {BlockStack} from '../../../BlockStack';
 
 export interface SectionProps {
   /** Section of action items */
@@ -108,13 +108,9 @@ export function Section({
         {...(hasMultipleSections && {paddingBlockStart: '0'})}
         tabIndex={!hasMultipleSections ? -1 : undefined}
       >
-        <VerticalStack
-          gap="1"
-          as="ul"
-          {...(sectionRole && {role: sectionRole})}
-        >
+        <BlockStack gap="1" as="ul" {...(sectionRole && {role: sectionRole})}>
           {actionMarkup}
-        </VerticalStack>
+        </BlockStack>
       </Box>
     </>
   );

diff --git a/polaris-react/src/components/AppProvider/AppProvider.stories.tsx b/polaris-react/src/components/AppProvider/AppProvider.stories.tsx
@@ -8,7 +8,7 @@ import {
   Page,
   ResourceList,
   Text,
-  VerticalStack,
+  BlockStack,
 } from '@shopify/polaris';
 
 export default {
@@ -180,7 +180,7 @@ export const WithSummerEditionsFeature = {
     const CheckFeature = () => {
       return (
         <Card>
-          <VerticalStack gap="4">
+          <BlockStack gap="4">
             <Text
               as="h2"
               variant={polarisSummerEditions2023 ? 'headingXl' : 'bodyMd'}
@@ -190,7 +190,7 @@ export const WithSummerEditionsFeature = {
                 polarisSummerEditions2023 ? 'ON' : 'OFF'
               }`}
             </Text>
-          </VerticalStack>
+          </BlockStack>
         </Card>
       );
     };

diff --git a/polaris-react/src/components/Avatar/Avatar.stories.tsx b/polaris-react/src/components/Avatar/Avatar.stories.tsx
@@ -6,7 +6,7 @@ import {
   Avatar,
   Button,
   Popover,
-  VerticalStack,
+  BlockStack,
   HorizontalStack,
   Box,
   Text,
@@ -74,14 +74,14 @@ const styleInitialsLongEntries = Object.entries(styleInitialsLong) as Entries<
 
 export function All() {
   return (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       {shapeEntries.map(([shape, shapeLabel]) => (
         <Box key={shape} paddingBlockEnd="2">
-          <VerticalStack gap="3">
+          <BlockStack gap="3">
             <Text as="h2" variant="headingXl">
               Shape: {shapeLabel}
             </Text>
-            <VerticalStack gap="2">
+            <BlockStack gap="2">
               <Text as="h2" variant="headingXs">
                 Default
               </Text>
@@ -90,8 +90,8 @@ export function All() {
                   <Avatar key={size} shape={shape} size={size} />
                 ))}
               </HorizontalStack>
-            </VerticalStack>
-            <VerticalStack gap="2">
+            </BlockStack>
+            <BlockStack gap="2">
               <Text as="h2" variant="headingXs">
                 With customer
               </Text>
@@ -100,8 +100,8 @@ export function All() {
                   <Avatar key={size} shape={shape} size={size} customer />
                 ))}
               </HorizontalStack>
-            </VerticalStack>
-            <VerticalStack gap="2">
+            </BlockStack>
+            <BlockStack gap="2">
               <Text as="h2" variant="headingXs">
                 With image
               </Text>
@@ -115,12 +115,12 @@ export function All() {
                   />
                 ))}
               </HorizontalStack>
-            </VerticalStack>
-            <VerticalStack gap="2">
+            </BlockStack>
+            <BlockStack gap="2">
               <Text as="h2" variant="headingXs">
                 With name (all styles)
               </Text>
-              <VerticalStack gap="2">
+              <BlockStack gap="2">
                 {styleInitialsDefaultEntries.map(([style, initials]) => (
                   <HorizontalStack key={style} gap="2" blockAlign="center">
                     {sizeEntries.map(([size]) => (
@@ -133,13 +133,13 @@ export function All() {
                     ))}
                   </HorizontalStack>
                 ))}
-              </VerticalStack>
-            </VerticalStack>
-            <VerticalStack gap="2">
+              </BlockStack>
+            </BlockStack>
+            <BlockStack gap="2">
               <Text as="h2" variant="headingXs">
                 With default initials (all styles)
               </Text>
-              <VerticalStack gap="2">
+              <BlockStack gap="2">
                 {styleInitialsDefaultEntries.map(([style, initials]) => (
                   <HorizontalStack key={style} gap="2" blockAlign="center">
                     {sizeEntries.map(([size]) => (
@@ -152,13 +152,13 @@ export function All() {
                     ))}
                   </HorizontalStack>
                 ))}
-              </VerticalStack>
-            </VerticalStack>
-            <VerticalStack gap="2">
+              </BlockStack>
+            </BlockStack>
+            <BlockStack gap="2">
               <Text as="h2" variant="headingXs">
                 With long initials (all styles)
               </Text>
-              <VerticalStack gap="2">
+              <BlockStack gap="2">
                 {styleInitialsLongEntries.map(([style, initialsLong]) => (
                   <HorizontalStack key={style} gap="2" blockAlign="center">
                     {sizeEntries.map(([size]) => (
@@ -171,13 +171,13 @@ export function All() {
                     ))}
                   </HorizontalStack>
                 ))}
-              </VerticalStack>
-            </VerticalStack>
-            <VerticalStack gap="2">
+              </BlockStack>
+            </BlockStack>
+            <BlockStack gap="2">
               <Text as="h2" variant="headingXs">
                 With long and wide initials
               </Text>
-              <VerticalStack gap="2">
+              <BlockStack gap="2">
                 <HorizontalStack gap="2" blockAlign="center">
                   {sizeEntries.map(([size]) => (
                     <Avatar
@@ -188,12 +188,12 @@ export function All() {
                     />
                   ))}
                 </HorizontalStack>
-              </VerticalStack>
-            </VerticalStack>
-          </VerticalStack>
+              </BlockStack>
+            </BlockStack>
+          </BlockStack>
         </Box>
       ))}
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
@@ -203,7 +203,7 @@ export function Default() {
 
 export function CircleIconColorsSizes() {
   return (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       <HorizontalStack gap="4">
         <Avatar customer size="extraSmall" />
         <Avatar name="AG" size="extraSmall" />
@@ -236,13 +236,13 @@ export function CircleIconColorsSizes() {
         <Avatar name="AB" size="large" />
         <Avatar name="AE" size="large" />
       </HorizontalStack>
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
 export function CircleInitialsColorsSizes() {
   return (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       <HorizontalStack gap="4">
         <Avatar initials="AG" size="extraSmall" />
         <Avatar initials="AA" size="extraSmall" />
@@ -275,7 +275,7 @@ export function CircleInitialsColorsSizes() {
         <Avatar initials="AE" size="large" />
         <Avatar initials="WW" size="large" />
       </HorizontalStack>
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
@@ -325,7 +325,7 @@ export function CircleImage() {
 
 export function SquareIconColorsSizes() {
   return (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       <HorizontalStack gap="4">
         <Avatar customer size="extraSmall" shape="square" />
         <Avatar name="AG" size="extraSmall" shape="square" />
@@ -358,13 +358,13 @@ export function SquareIconColorsSizes() {
         <Avatar name="AB" size="large" shape="square" />
         <Avatar name="AE" size="large" shape="square" />
       </HorizontalStack>
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
 export function SquareInitialsColorsSizes() {
   return (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       <HorizontalStack gap="4">
         <Avatar initials="AG" size="extraSmall" shape="square" />
         <Avatar initials="AA" size="extraSmall" shape="square" />
@@ -397,6 +397,6 @@ export function SquareInitialsColorsSizes() {
         <Avatar initials="AE" size="large" shape="square" />
         <Avatar initials="WW" size="large" shape="square" />
       </HorizontalStack>
-    </VerticalStack>
+    </BlockStack>
   );
 }