Rename vertical stack to block stack (Shopify#10032)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Part of Shopify#9984

Documentation improvement will be done in a follow up

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### 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)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 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

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>
     </>
   );
 }

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

@@ -8,7 +8,7 @@ import {Card} from '../Card';
 import {Box} from '../Box';
 import {InlineStack} from '../InlineStack';
 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}>
         <InlineStack gap="4">
           {avatarMarkup}
-          <VerticalStack gap="1">
+          <BlockStack gap="1">
             {titleMarkup}
             {detailsMarkup}
-          </VerticalStack>
+          </BlockStack>
         </InlineStack>
       </SettingAction>
       {termsOfServiceMarkup}

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>
   );
 }
 

polaris-react/src/components/ActionList/components/Section/Section.tsx

@@ -8,7 +8,7 @@ import type {
   ActionListSection,
 } from '../../../../types';
 import {InlineStack} from '../../../InlineStack';
-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>
     </>
   );

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>
       );
     };

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

@@ -6,7 +6,7 @@ import {
   Avatar,
   Button,
   Popover,
-  VerticalStack,
+  BlockStack,
   InlineStack,
   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} />
                 ))}
               </InlineStack>
-            </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 />
                 ))}
               </InlineStack>
-            </VerticalStack>
-            <VerticalStack gap="2">
+            </BlockStack>
+            <BlockStack gap="2">
               <Text as="h2" variant="headingXs">
                 With image
               </Text>
@@ -115,12 +115,12 @@ export function All() {
                   />
                 ))}
               </InlineStack>
-            </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]) => (
                   <InlineStack key={style} gap="2" blockAlign="center">
                     {sizeEntries.map(([size]) => (
@@ -133,13 +133,13 @@ export function All() {
                     ))}
                   </InlineStack>
                 ))}
-              </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]) => (
                   <InlineStack key={style} gap="2" blockAlign="center">
                     {sizeEntries.map(([size]) => (
@@ -152,13 +152,13 @@ export function All() {
                     ))}
                   </InlineStack>
                 ))}
-              </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]) => (
                   <InlineStack key={style} gap="2" blockAlign="center">
                     {sizeEntries.map(([size]) => (
@@ -171,13 +171,13 @@ export function All() {
                     ))}
                   </InlineStack>
                 ))}
-              </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">
                 <InlineStack gap="2" blockAlign="center">
                   {sizeEntries.map(([size]) => (
                     <Avatar
@@ -188,12 +188,12 @@ export function All() {
                     />
                   ))}
                 </InlineStack>
-              </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">
       <InlineStack 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" />
       </InlineStack>
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
 export function CircleInitialsColorsSizes() {
   return (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       <InlineStack 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" />
       </InlineStack>
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
@@ -325,7 +325,7 @@ export function CircleImage() {
 
 export function SquareIconColorsSizes() {
   return (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       <InlineStack 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" />
       </InlineStack>
-    </VerticalStack>
+    </BlockStack>
   );
 }
 
 export function SquareInitialsColorsSizes() {
   return (
-    <VerticalStack gap="4">
+    <BlockStack gap="4">
       <InlineStack 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" />
       </InlineStack>
-    </VerticalStack>
+    </BlockStack>
   );
 }