[Modal] Rebuild with layout primitives

.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';
@@ -152,15 +154,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
@@ -199,7 +203,7 @@ export const Modal: React.FunctionComponent<ModalProps> & {
         <Header titleHidden={titleHidden} id={headerId} onClose={onClose}>
           {title}
         </Header>
-        <div className={styles.BodyWrapper}>{bodyMarkup}</div>
+        {bodyMarkup}
         {footerMarkup}
       </Dialog>
     );
@@ -211,7 +215,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

@@ -73,6 +73,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.tsx

@@ -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/Header/Header.scss

@@ -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;
-  margin-top: var(--p-space-1);
 }

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

@@ -1,7 +1,10 @@
 import React from 'react';
 
-import {DisplayText} from '../../../DisplayText';
+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,16 +16,40 @@ export interface 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}>
-        <DisplayText element="h2" size="small">
-          {children}
-        </DisplayText>
-      </div>
-      <CloseButton 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/Section/Section.scss

@@ -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.tsx

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

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

@@ -2,12 +2,14 @@ import React, {useRef} from 'react';
 import {animationFrame} from '@shopify/jest-dom-mocks';
 import {mountWithApp} from 'tests/utilities';
 
+import {Backdrop} from '../../Backdrop';
 import {Badge} from '../../Badge';
+import {Box} from '../../Box';
 import {Button} from '../../Button';
+import {Portal} from '../../Portal';
 import {Scrollable} from '../../Scrollable';
 import {Spinner} from '../../Spinner';
-import {Portal} from '../../Portal';
-import {Backdrop} from '../../Backdrop';
+import {Text} from '../../Text';
 import {Footer, Dialog, Header} from '../components';
 import {Modal} from '../Modal';
 import {WithinContentContext} from '../../../utilities/within-content-context';
@@ -302,9 +304,7 @@ describe('<Modal>', () => {
         <Modal onClose={jest.fn()} open title="foo" />,
       );
 
-      expect(modal.find(Header)).toContainReactComponent('div', {
-        className: 'Header',
-      });
+      expect(modal.find(Box)).toContainReactComponent(Text);
     });
 
     it('only renders a close button when titleHidden is present', () => {
@@ -315,6 +315,7 @@ describe('<Modal>', () => {
       expect(modal.find(Header)).toContainReactComponent('div', {
         className: 'titleHidden',
       });
+      expect(modal.find(Header)).not.toContainReactComponent(Box);
     });
   });