Rename AlphaStack to VerticalStack (#8935)

### WHY are these changes introduced?

With the UI consolidation effort happening we are aligning component
names and properties across repositories. This is a first step to align
component names.

### WHAT is this pull request doing?

**⚠️ Breaking change** to rename `AlphaStack` to `VerticalStack`

---------

Co-authored-by: Lo Kim <lo.kim@shopify.com>
Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>

Author: 3 people

.changeset/silly-meals-hang.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': minor
+'polaris.shopify.com': minor
+---
+
+Renamed `AlphaStack` to `VerticalStack`

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

@@ -8,7 +8,7 @@ import {AlphaCard} from '../AlphaCard';
 import {Box} from '../Box';
 import {Inline} from '../Inline';
 import {Text} from '../Text';
-import {AlphaStack} from '../AlphaStack';
+import {VerticalStack} from '../VerticalStack';
 
 export interface AccountConnectionProps {
   /** Content to display as title */
@@ -73,10 +73,10 @@ export function AccountConnection({
       <SettingAction action={actionElement}>
         <Inline gap="4">
           {avatarMarkup}
-          <AlphaStack gap="2">
+          <VerticalStack gap="2">
             {titleMarkup}
             {detailsMarkup}
-          </AlphaStack>
+          </VerticalStack>
         </Inline>
       </SettingAction>
       {termsOfServiceMarkup}

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

@@ -2,7 +2,7 @@ import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
 import {
   AlphaCard,
-  AlphaStack,
+  VerticalStack,
   Bleed,
   Box,
   Divider,
@@ -17,59 +17,59 @@ export default {
 export function Default() {
   return (
     <AlphaCard>
-      <AlphaStack gap="5">
+      <VerticalStack gap="5">
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>
         <p>View a summary of your online store’s performance.</p>
-      </AlphaStack>
+      </VerticalStack>
     </AlphaCard>
   );
 }
 
 export function WithBackgroundSubdued() {
   return (
     <AlphaCard background="bg-subdued">
-      <AlphaStack gap="5">
+      <VerticalStack gap="5">
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>
         <p>View a summary of your online store’s performance.</p>
-      </AlphaStack>
+      </VerticalStack>
     </AlphaCard>
   );
 }
 
 export function WithBorderRadiusRoundedAbove() {
   return (
     <AlphaCard roundedAbove="sm">
-      <AlphaStack gap="5">
+      <VerticalStack gap="5">
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>
         <p>View a summary of your online store’s performance.</p>
-      </AlphaStack>
+      </VerticalStack>
     </AlphaCard>
   );
 }
 
 export function WithResponsivePadding() {
   return (
     <AlphaCard padding={{xs: '5', sm: '6', md: '8'}} roundedAbove="sm">
-      <AlphaStack gap={{xs: '4', sm: '5'}}>
+      <VerticalStack gap={{xs: '4', sm: '5'}}>
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>
         <p>View a summary of your online store’s performance.</p>
-      </AlphaStack>
+      </VerticalStack>
     </AlphaCard>
   );
 }
 
 export function WithSubduedSection() {
   return (
     <AlphaCard roundedAbove="sm">
-      <AlphaStack gap="5">
+      <VerticalStack gap="5">
         <Text as="h3" variant="headingMd">
           Staff accounts
         </Text>
@@ -79,22 +79,22 @@ export function WithSubduedSection() {
             <List.Item>Ezequiel Manno</List.Item>
           </List>
         </Box>
-      </AlphaStack>
+      </VerticalStack>
       <Bleed
         marginBlockEnd={{xs: '4', sm: '5'}}
         marginInline={{xs: '4', sm: '5'}}
       >
         <Divider />
         <Box background="bg-subdued" padding={{xs: '4', sm: '5'}}>
-          <AlphaStack gap="2">
+          <VerticalStack gap="2">
             <Text variant="headingSm" as="h3">
               Deactivated staff accounts
             </Text>
             <List>
               <List.Item>Felix Crafford</List.Item>
               <List.Item>Ezequiel Manno</List.Item>
             </List>
-          </AlphaStack>
+          </VerticalStack>
         </Box>
       </Bleed>
     </AlphaCard>

polaris-react/src/components/AlphaFilters/components/FilterPill/FilterPill.tsx

@@ -5,7 +5,7 @@ import {useI18n} from '../../../../utilities/i18n';
 import {useToggle} from '../../../../utilities/use-toggle';
 import {Popover} from '../../../Popover';
 import {Button} from '../../../Button';
-import {AlphaStack} from '../../../AlphaStack';
+import {VerticalStack} from '../../../VerticalStack';
 import {Icon} from '../../../Icon';
 import {Text} from '../../../Text';
 import {Inline} from '../../../Inline';
@@ -178,10 +178,10 @@ export function FilterPill({
       >
         <div className={styles.PopoverWrapper}>
           <Popover.Section>
-            <AlphaStack gap="1">
+            <VerticalStack gap="1">
               {filter}
               {clearButtonMarkup}
-            </AlphaStack>
+            </VerticalStack>
           </Popover.Section>
         </div>
       </Popover>

polaris-react/src/components/AlphaStack/index.ts

@@ -1,7 +1,7 @@
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import type {ComponentMeta} from '@storybook/react';
 import {
-  AlphaStack,
+  VerticalStack,
   Banner,
   Button,
   LegacyCard,
@@ -193,7 +193,7 @@ export function InACard() {
 export function WithEndJustifiedContent() {
   return (
     <Banner status="critical">
-      <AlphaStack gap="1">
+      <VerticalStack gap="1">
         <Inline gap="4" align="space-between">
           <Text variant="headingMd" fontWeight="semibold" as="h3">
             Deployment failed in 5min
@@ -203,7 +203,7 @@ export function WithEndJustifiedContent() {
           </Link>
         </Inline>
         <p>This order was archived on March 7, 2017 at 3:12pm EDT.</p>
-      </AlphaStack>
+      </VerticalStack>
     </Banner>
   );
 }

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {AlphaStack, Box, Icon} from '@shopify/polaris';
+import {VerticalStack, Box, Icon} from '@shopify/polaris';
 import {PaintBrushMajor} from '@shopify/polaris-icons';
 
 export default {
@@ -33,7 +33,7 @@ export function WithBorderRadius() {
 
 export function WithResponsivePadding() {
   return (
-    <AlphaStack gap="4">
+    <VerticalStack gap="4">
       <Box background="bg" padding={{xs: '2', sm: '8'}} border="dark">
         <Icon source={PaintBrushMajor} color="base" />
       </Box>
@@ -64,6 +64,6 @@ export function WithResponsivePadding() {
       <Box background="bg" paddingInlineEnd={{xs: '4', sm: '10'}} border="dark">
         <Icon source={PaintBrushMajor} color="base" />
       </Box>
-    </AlphaStack>
+    </VerticalStack>
   );
 }

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

@@ -5,7 +5,7 @@ import type {Error} from '../../types';
 import {Checkbox} from '../Checkbox';
 import {RadioButton} from '../RadioButton';
 import {InlineError, errorTextID} from '../InlineError';
-import {AlphaStack} from '../AlphaStack';
+import {VerticalStack} from '../VerticalStack';
 import {Box} from '../Box';
 import {Bleed} from '../Bleed';
 
@@ -132,18 +132,18 @@ export function ChoiceList({
   );
 
   return (
-    <AlphaStack
+    <VerticalStack
       as="fieldset"
       gap={{xs: '4', md: '0'}}
       aria-invalid={error != null}
       id={finalName}
     >
       {titleMarkup}
-      <AlphaStack as="ul" gap={{xs: '4', md: '0'}}>
+      <VerticalStack as="ul" gap={{xs: '4', md: '0'}}>
         {choicesMarkup}
-      </AlphaStack>
+      </VerticalStack>
       {errorMarkup}
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {AlphaStack, Divider, Text} from '@shopify/polaris';
+import {VerticalStack, Divider, Text} from '@shopify/polaris';
 
 export default {
   component: Divider,
@@ -12,7 +12,7 @@ export function Default() {
 
 export function WithBorderStyles() {
   return (
-    <AlphaStack gap="5">
+    <VerticalStack gap="5">
       <Text as="h1" variant="headingXs">
         Default
       </Text>
@@ -29,6 +29,6 @@ export function WithBorderStyles() {
         Transparent
       </Text>
       <Divider borderColor="transparent" />
-    </AlphaStack>
+    </VerticalStack>
   );
 }