[Layout foundations][Batch 1] Rebuild components with layout primitives (#7408)

### WHY are these changes introduced?

Related to [7565](#7565).

### WHAT is this pull request doing?

Rebuilds the following components to use our layout primitives.
- `ChoiceList` #7354
- `Modal` #7340 
- `AccountConnection` #7341 
- `Banner` #7358 

### How to 🎩

[Spin
instance](https://admin.web.layout-rebuild-batch-1-b.lo-kim.us.spin.dev/store/shop1)
[Storybook](https://5d559397bae39100201eedc1-cshuopiodd.chromatic.com/)

🖥 [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

- [x] 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

Co-authored-by: aveline <aveline@users.noreply.github.com>
Co-authored-by: Kyle Durand <kyledurand@users.noreply.github.com>

Author: 3 people

.changeset/cold-keys-raise.md

@@ -0,0 +1,7 @@
+---
+'@shopify/polaris': minor
+---
+
+- Refactored `ChoiceList` to use primitive Layout components
+- Added support for `legend` element to `Box`
+- Added support for `fieldset` element to `AlphaStack`

.changeset/healthy-apricots-rule.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Updated `Banner` component to use new layout primitives

.changeset/hip-wombats-sin.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Refactored `Modal` and its children components to use layout primitives

.changeset/pink-apricots-help.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Refactored `AccountConnection` to use new layout primitives

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

@@ -3,12 +3,12 @@ import React from 'react';
 import type {Action} from '../../types';
 import {Avatar} from '../Avatar';
 import {buttonFrom} from '../Button';
-import {Card} from '../Card';
-import {Stack} from '../Stack';
-import {Text} from '../Text';
 import {SettingAction} from '../SettingAction';
-
-import styles from './AccountConnection.scss';
+import {AlphaCard} from '../AlphaCard';
+import {Box} from '../Box';
+import {Inline} from '../Inline';
+import {Text} from '../Text';
+import {AlphaStack} from '../AlphaStack';
 
 export interface AccountConnectionProps {
   /** Content to display as title */
@@ -52,43 +52,34 @@ export function AccountConnection({
     />
   ) : null;
 
-  let titleMarkup: React.ReactNode = null;
-  if (title) {
-    titleMarkup = <div>{title}</div>;
-  } else if (accountName) {
-    titleMarkup = <div>{accountName}</div>;
-  }
+  const titleMarkup = title ? title : accountName;
 
   const detailsMarkup = details ? (
-    <div>
-      <Text variant="bodyMd" color="subdued" as="span">
-        {details}
-      </Text>
-    </div>
+    <Text as="span" variant="bodyMd" color="subdued">
+      {details}
+    </Text>
   ) : null;
 
   const termsOfServiceMarkup = termsOfService ? (
-    <div className={styles.TermsOfService}>{termsOfService}</div>
+    <Box paddingBlockStart="5">{termsOfService}</Box>
   ) : null;
 
   const actionElement = action
     ? buttonFrom(action, {primary: !connected})
     : null;
 
   return (
-    <Card sectioned>
+    <AlphaCard>
       <SettingAction action={actionElement}>
-        <Stack>
+        <Inline gap="4">
           {avatarMarkup}
-          <Stack.Item fill>
-            <div className={styles.Content}>
-              {titleMarkup}
-              {detailsMarkup}
-            </div>
-          </Stack.Item>
-        </Stack>
+          <AlphaStack gap="2">
+            {titleMarkup}
+            {detailsMarkup}
+          </AlphaStack>
+        </Inline>
       </SettingAction>
       {termsOfServiceMarkup}
-    </Card>
+    </AlphaCard>
   );
 }

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

@@ -1,11 +1,20 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
+import {matchMedia} from '@shopify/jest-dom-mocks';
 
 import {Avatar} from '../../Avatar';
 import {Button} from '../../Button';
 import {AccountConnection} from '../AccountConnection';
 
 describe('<AccountConnection />', () => {
+  beforeEach(() => {
+    matchMedia.mock();
+  });
+
+  afterEach(() => {
+    matchMedia.restore();
+  });
+
   describe('title', () => {
     it('shows the title when one is provided', () => {
       const title = 'Example app';

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

@@ -46,6 +46,12 @@
   padding-inline-start: 0;
 }
 
+.fieldsetReset {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
 .fullWidth {
   > * {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY

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

@@ -54,6 +54,7 @@ export const AlphaStack = ({
     styles.AlphaStack,
     fullWidth && styles.fullWidth,
     as === 'ul' && styles.listReset,
+    as === 'fieldset' && styles.fieldsetReset,
   );
 
   const style = {

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

@@ -75,8 +75,8 @@
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   display: flex;
 
-  // stylelint-disable selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
-  &.statusCritical .PrimaryAction .Button {
+  // stylelint-disable selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
+  &.statusCritical .PrimaryAction.Button {
     border-color: var(--p-border-critical-subdued);
     background: var(--p-surface-critical-subdued);
 
@@ -96,7 +96,7 @@
     }
   }
 
-  &.statusWarning .PrimaryAction .Button {
+  &.statusWarning .PrimaryAction.Button {
     border-color: var(--p-border-warning-subdued);
     background: var(--p-surface-warning-subdued);
 
@@ -116,7 +116,7 @@
     }
   }
 
-  &.statusInfo .PrimaryAction .Button {
+  &.statusInfo .PrimaryAction.Button {
     border-color: var(--p-border-highlight-subdued);
     background: var(--p-surface-highlight-subdued);
 
@@ -136,7 +136,7 @@
     }
   }
 
-  &.statusSuccess .PrimaryAction .Button {
+  &.statusSuccess .PrimaryAction.Button {
     border-color: var(--p-border-success-subdued);
     background: var(--p-surface-success-subdued);
 
@@ -155,13 +155,7 @@
       background: var(--p-surface-success-subdued);
     }
   }
-  // stylelint-enable selector-max-class, selector-max-combinators, selector-max-specificity
-}
-
-.ContentWrapper {
-  margin-top: calc(-1 * var(--p-space-05));
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  flex: 1 1 auto;
+  // stylelint-enable selector-max-class, selector-max-specificity
 }
 
 .withinContentContainer {
@@ -176,19 +170,11 @@
     position: absolute;
   }
 
-  .Ribbon {
-    padding-right: var(--p-space-4);
-  }
-
   @include banner-variants($in-page: false);
 
   + .Banner {
     margin-top: var(--p-space-2);
   }
-
-  .Actions {
-    padding: var(--p-space-3) 0 var(--p-space-1) 0;
-  }
 }
 
 .withinPage {
@@ -206,10 +192,6 @@
     padding-right: var(--p-space-4);
   }
 
-  .Actions {
-    padding-top: var(--p-space-4);
-  }
-
   .Dismiss {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     right: var(--p-space-4);
@@ -225,25 +207,6 @@
   padding-right: calc(var(--p-space-8) + var(--p-icon-size-small));
 }
 
-.Heading {
-  word-break: break-word;
-}
-
-.Content {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include text-breakword;
-  padding: var(--p-space-05) 0;
-}
-
-.Ribbon {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  flex: 0 0 var(--p-space-8);
-}
-
-.PrimaryAction {
-  margin-right: var(--p-space-2);
-}
-
 // We need pretty high specificity to do the descendant selectors
 // onto the text, which needs to be the relative positioned wrapper
 // so that the borders/ backgrounds do not extend outside of it.