[Modal] Rebuild with layout primitives (#7454)

Resolves #7340.
Refactors `Modal` and its child components to use our layout primitives.

[Storybook
URL](https://5d559397bae39100201eedc1-nrruulmwsh.chromatic.com/?path=/story/all-components-modal--default).
Refactors `Modal`, `Modal.Section`, `Modal.Header`, and `Modal.Footer`
to use our layout primitives and remove css.

[Storybook
URL](https://5d559397bae39100201eedc1-nrruulmwsh.chromatic.com/?path=/story/all-components-modal--default).
I've tophatted all of our stories as well as the UI for all of our
breakpoints.

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

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

Author: laurkim

.changeset/hip-wombats-sin.md

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

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

@@ -2,13 +2,6 @@
 
 $small-width: 620px;
 
-.BodyWrapper {
-  display: flex;
-  flex-grow: 1;
-  overflow-x: hidden;
-  -webkit-overflow-scrolling: touch;
-}
-
 .Body {
   width: 100%;
 }
@@ -23,8 +16,3 @@ $small-width: 620px;
     max-width: $small-width;
   }
 }
-
-.Spinner {
-  margin: var(--p-space-4);
-  text-align: center;
-}

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

@@ -7,6 +7,8 @@ import {useI18n} from '../../utilities/i18n';
 import {WithinContentContext} from '../../utilities/within-content-context';
 import {wrapWithComponent} from '../../utilities/components';
 import {Backdrop} from '../Backdrop';
+import {Box} from '../Box';
+import {Inline} from '../Inline';
 import {Scrollable} from '../Scrollable';
 import {Spinner} from '../Spinner';
 import {Portal} from '../Portal';
@@ -153,15 +155,17 @@ export const Modal: React.FunctionComponent<ModalProps> & {
       : children;
 
     const body = loading ? (
-      <div className={styles.Spinner}>
-        <Spinner />
-      </div>
+      <Box padding="4">
+        <Inline align="center">
+          <Spinner />
+        </Inline>
+      </Box>
     ) : (
       content
     );
 
     const scrollContainerMarkup = noScroll ? (
-      <div className={styles.Body}>{body}</div>
+      <Box width="100%">{body}</Box>
     ) : (
       <Scrollable
         shadow
@@ -206,7 +210,7 @@ export const Modal: React.FunctionComponent<ModalProps> & {
         >
           {title}
         </Header>
-        <div className={styles.BodyWrapper}>{bodyMarkup}</div>
+        {bodyMarkup}
         {footerMarkup}
       </Dialog>
     );
@@ -218,7 +222,7 @@ export const Modal: React.FunctionComponent<ModalProps> & {
 
   const activatorMarkup =
     activator && !isRef(activator) ? (
-      <div ref={activatorRef}>{activator}</div>
+      <Box ref={activatorRef}>{activator}</Box>
     ) : null;
 
   return (

polaris-react/src/components/Modal/components/Dialog/Dialog.tsx

@@ -88,6 +88,7 @@ export function Dialog({
           <div
             role="dialog"
             aria-modal
+            aria-label={labelledBy}
             aria-labelledby={labelledBy}
             tabIndex={-1}
             className={styles.Dialog}

polaris-react/src/components/Modal/components/Footer/Footer.scss

@@ -3,9 +3,9 @@ import React from 'react';
 import type {ComplexAction} from '../../../../types';
 import {buttonsFrom} from '../../../Button';
 import {ButtonGroup} from '../../../ButtonGroup';
-import {Stack} from '../../../Stack';
-
-import styles from './Footer.scss';
+import {Box} from '../../../Box';
+import {Columns} from '../../../Columns';
+import {Inline} from '../../../Inline';
 
 export interface FooterProps {
   /** Primary action */
@@ -34,13 +34,18 @@ export function Footer({
     ) : null;
 
   return (
-    <div className={styles.Footer}>
-      <div className={styles.FooterContent}>
-        <Stack alignment="center">
-          <Stack.Item fill>{children}</Stack.Item>
+    <Box
+      borderBlockStart="divider"
+      minHeight="var(--p-space-16)"
+      padding="4"
+      width="100%"
+    >
+      <Columns columns={{xs: '1fr auto'}}>
+        <Inline alignY="center">{children}</Inline>
+        <Inline align="end" alignY="center">
           {actions}
-        </Stack>
-      </div>
-    </div>
+        </Inline>
+      </Columns>
+    </Box>
   );
 }

polaris-react/src/components/Modal/components/Footer/Footer.tsx

@@ -1,28 +1,5 @@
-@import '../../../../styles/common';
-
-.Header {
-  display: flex;
-  align-items: flex-start;
-  flex-shrink: 0;
-  padding: var(--p-space-4) var(--p-space-5);
-  border-bottom: var(--p-border-divider);
-}
-
 .titleHidden {
   position: absolute;
   right: 0;
   z-index: 1;
-  width: 100%;
-  display: flex;
-  justify-content: flex-end;
-
-  .Title {
-    display: none;
-  }
-}
-
-.Title {
-  @include text-breakword;
-  flex: 1;
-  align-self: center;
 }

polaris-react/src/components/Modal/components/Header/Header.scss

@@ -1,7 +1,10 @@
 import React from 'react';
 
-import {Text} from '../../../Text';
+import {Box} from '../../../Box';
 import {CloseButton} from '../CloseButton';
+import {Columns} from '../../../Columns';
+import {Inline} from '../../../Inline';
+import {Text} from '../../../Text';
 
 import styles from './Header.scss';
 
@@ -13,27 +16,41 @@ export interface HeaderProps {
   onClose(): void;
 }
 
-export function Header({
-  id,
-  titleHidden,
-  closing,
-  children,
-  onClose,
-}: HeaderProps) {
+export function Header({id, titleHidden, children, onClose}: HeaderProps) {
+  const titleHiddenMarkup = (
+    <div className={styles.titleHidden}>
+      <Inline align="end">
+        <CloseButton titleHidden={titleHidden} onClick={onClose} />
+      </Inline>
+    </div>
+  );
+
+  if (titleHidden || !children) {
+    return titleHiddenMarkup;
+  }
+
   return (
-    <div
-      className={titleHidden || !children ? styles.titleHidden : styles.Header}
+    <Box
+      paddingBlockStart="4"
+      paddingBlockEnd="4"
+      paddingInlineStart="5"
+      paddingInlineEnd="5"
+      borderBlockEnd="divider"
     >
-      <div id={id} className={styles.Title}>
-        <Text as="h2" variant="headingLg">
-          {children}
-        </Text>
-      </div>
-      <CloseButton
-        pressed={closing}
-        titleHidden={titleHidden}
-        onClick={onClose}
-      />
-    </div>
+      <Columns columns={{xs: '1fr auto'}}>
+        <Inline>
+          <Box id={id} paddingBlockStart="1">
+            <Box paddingBlockStart="05">
+              <Text as="h2" variant="headingLg" breakWord>
+                {children}
+              </Text>
+            </Box>
+          </Box>
+        </Inline>
+        <Inline>
+          <CloseButton titleHidden={titleHidden} onClick={onClose} />
+        </Inline>
+      </Columns>
+    </Box>
   );
 }

polaris-react/src/components/Modal/components/Header/Header.tsx

@@ -1,24 +1,13 @@
-@import '../../../../styles/common';
-
 $close-button-width: calc(var(--p-space-12) + var(--p-space-1));
 
 .Section {
   flex: 0 0 auto;
-  padding: var(--p-space-5);
 
   &:not(:last-of-type) {
     border-bottom: var(--p-border-divider);
   }
+}
 
-  &.subdued {
-    background: var(--p-surface-subdued);
-  }
-
-  &.flush {
-    padding: 0;
-  }
-
-  &.titleHidden {
-    padding-right: $close-button-width;
-  }
+.titleHidden {
+  padding-right: $close-button-width;
 }

polaris-react/src/components/Modal/components/Section/Section.scss

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import {Box} from '../../../Box';
 import {classNames} from '../../../../utilities/css';
 
 import styles from './Section.scss';
@@ -19,10 +20,19 @@ export function Section({
 }: SectionProps) {
   const className = classNames(
     styles.Section,
-    flush && styles.flush,
-    subdued && styles.subdued,
     titleHidden && styles.titleHidden,
   );
 
-  return <section className={className}>{children}</section>;
+  return (
+    <div className={className}>
+      <Box
+        as="section"
+        padding={flush ? '0' : '5'}
+        {...(titleHidden && {paddingInlineEnd: '0'})}
+        {...(subdued && {background: 'surface-subdued'})}
+      >
+        {children}
+      </Box>
+    </div>
+  );
 }