[Layout foundations] Replace Stack with AlphaStack (#8577)

### WHY are these changes introduced?

Resolves #8102.

Replaces deprecated `Stack` component with `AlphaStack`.

### WHAT is this pull request doing?

- Replaces deprecated Stack with AlphaStack in `polaris-react`
- Updates examples and components using AlphaStack to use Stack
- Removes deprecated Stack documentation and examples
- Updates AlphaStack documentation and examples

### 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)
- [x] 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
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Author: laurkim

.changeset/light-mails-type.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': minor
+'polaris.shopify.com': minor
+---
+
+Replaced `Stack` with `AlphaStack`

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

@@ -8,7 +8,7 @@ import {Card} from '../Card';
 import {Box} from '../Box';
 import {Inline} from '../Inline';
 import {Text} from '../Text';
-import {AlphaStack} from '../AlphaStack';
+import {Stack} from '../Stack';
 
 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">
+          <Stack gap="2">
             {titleMarkup}
             {detailsMarkup}
-          </AlphaStack>
+          </Stack>
         </Inline>
       </SettingAction>
       {termsOfServiceMarkup}

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

@@ -1,7 +1,7 @@
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import type {ComponentMeta} from '@storybook/react';
 import {
-  AlphaStack,
+  Stack,
   Banner,
   Button,
   LegacyCard,
@@ -193,7 +193,7 @@ export function InACard() {
 export function WithEndJustifiedContent() {
   return (
     <Banner status="critical">
-      <AlphaStack gap="1" fullWidth>
+      <Stack gap="1" fullWidth>
         <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>
+      </Stack>
     </Banner>
   );
 }

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {AlphaStack, Box, Icon} from '@shopify/polaris';
+import {Stack, 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">
+    <Stack gap="4">
       <Box background="surface" padding={{xs: '2', sm: '8'}} border="dark">
         <Icon source={PaintBrushMajor} color="base" />
       </Box>
@@ -68,6 +68,6 @@ export function WithResponsivePadding() {
       >
         <Icon source={PaintBrushMajor} color="base" />
       </Box>
-    </AlphaStack>
+    </Stack>
   );
 }