[Layout foundations][Batch 1] Rebuild components with layout primitives

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

@@ -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/tests/AccountConnection.test.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/AlphaStack/AlphaStack.scss

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

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

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

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

@@ -15,17 +15,18 @@ import {
 
 import {classNames, variationName} from '../../utilities/css';
 import {BannerContext} from '../../utilities/banner-context';
-import {useUniqueId} from '../../utilities/unique-id';
 import {useI18n} from '../../utilities/i18n';
 import type {Action, DisableableAction, LoadableAction} from '../../types';
 import {Button} from '../Button';
-import {Text} from '../Text';
 import {ButtonGroup} from '../ButtonGroup';
 import {UnstyledButton, unstyledButtonFrom} from '../UnstyledButton';
 import {UnstyledLink} from '../UnstyledLink';
 import {Spinner} from '../Spinner';
 import {Icon, IconProps} from '../Icon';
 import {WithinContentContext} from '../../utilities/within-content-context';
+import {Text} from '../Text';
+import {Box} from '../Box';
+import {Bleed} from '../Bleed';
 
 import styles from './Banner.scss';
 
@@ -64,7 +65,6 @@ export const Banner = forwardRef<BannerHandles, BannerProps>(function Banner(
   bannerRef,
 ) {
   const withinContentContainer = useContext(WithinContentContext);
-  const id = useUniqueId('Banner');
   const i18n = useI18n();
   const {wrapperRef, handleKeyUp, handleBlur, handleMouseUp, shouldShowFocus} =
     useBannerFocus(bannerRef);
@@ -79,16 +79,12 @@ export const Banner = forwardRef<BannerHandles, BannerProps>(function Banner(
   );
 
   let headingMarkup: React.ReactNode = null;
-  let headingID: string | undefined;
 
   if (title) {
-    headingID = `${id}Heading`;
     headingMarkup = (
-      <div className={styles.Heading} id={headingID}>
-        <Text as="p" variant="headingMd">
-          {title}
-        </Text>
-      </div>
+      <Text as="h2" variant="headingMd">
+        {title}
+      </Text>
     );
   }
 
@@ -111,13 +107,13 @@ export const Banner = forwardRef<BannerHandles, BannerProps>(function Banner(
   ) : null;
 
   const primaryActionMarkup = action ? (
-    <div className={styles.PrimaryAction}>
+    <Box paddingInlineEnd="2">
       {action.loading
         ? spinnerMarkup
         : unstyledButtonFrom(action, {
-            className: styles.Button,
+            className: `${styles.Button} ${styles.PrimaryAction}`,
           })}
-    </div>
+    </Box>
   ) : null;
 
   const secondaryActionMarkup = secondaryAction ? (
@@ -126,24 +122,25 @@ export const Banner = forwardRef<BannerHandles, BannerProps>(function Banner(
 
   const actionMarkup =
     action || secondaryAction ? (
-      <div className={styles.Actions}>
+      <Box
+        paddingBlockStart={withinContentContainer ? '3' : '4'}
+        paddingBlockEnd={withinContentContainer ? '1' : undefined}
+      >
         <ButtonGroup>
           {primaryActionMarkup}
           {secondaryActionMarkup}
         </ButtonGroup>
-      </div>
+      </Box>
     ) : null;
 
   let contentMarkup: React.ReactNode = null;
-  let contentID: string | undefined;
 
   if (children || actionMarkup) {
-    contentID = `${id}Content`;
     contentMarkup = (
-      <div className={styles.Content} id={contentID}>
+      <Box paddingBlockStart="05" paddingBlockEnd="05">
         {children}
         {actionMarkup}
-      </div>
+      </Box>
     );
   }
 
@@ -170,19 +167,17 @@ export const Banner = forwardRef<BannerHandles, BannerProps>(function Banner(
         onMouseUp={handleMouseUp}
         onKeyUp={handleKeyUp}
         onBlur={handleBlur}
-        aria-labelledby={headingID}
-        aria-describedby={contentID}
       >
         {dismissButton}
 
-        <div className={styles.Ribbon}>
+        <Box paddingInlineEnd="4">
           <Icon source={iconName} color={iconColor} />
-        </div>
+        </Box>
 
-        <div className={styles.ContentWrapper}>
+        <Bleed marginInline="0" marginBlockStart="05">
           {headingMarkup}
           {contentMarkup}
-        </div>
+        </Bleed>
       </div>
     </BannerContext.Provider>
   );