[Banner] Rebuild with layout components (#7365)

Fixes #7358

Refactors `Banner` component to use new layout primitive components

Author: aveline

.changeset/healthy-apricots-rule.md

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

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

@@ -54,8 +54,8 @@
   position: relative;
   display: flex;
 
-  // stylelint-disable selector-max-class, selector-max-combinators, selector-max-specificity
-  &.statusCritical .PrimaryAction .Button {
+  // stylelint-disable selector-max-class, selector-max-specificity
+  &.statusCritical .PrimaryAction.Button {
     border-color: var(--p-border-critical-subdued);
     background: var(--p-surface-critical-subdued);
 
@@ -75,7 +75,7 @@
     }
   }
 
-  &.statusWarning .PrimaryAction .Button {
+  &.statusWarning .PrimaryAction.Button {
     border-color: var(--p-border-warning-subdued);
     background: var(--p-surface-warning-subdued);
 
@@ -95,7 +95,7 @@
     }
   }
 
-  &.statusInfo .PrimaryAction .Button {
+  &.statusInfo .PrimaryAction.Button {
     border-color: var(--p-border-highlight-subdued);
     background: var(--p-surface-highlight-subdued);
 
@@ -115,7 +115,7 @@
     }
   }
 
-  &.statusSuccess .PrimaryAction .Button {
+  &.statusSuccess .PrimaryAction.Button {
     border-color: var(--p-border-success-subdued);
     background: var(--p-surface-success-subdued);
 
@@ -134,12 +134,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));
-  flex: 1 1 auto;
+  // stylelint-enable selector-max-class, selector-max-specificity
 }
 
 .withinContentContainer {
@@ -151,19 +146,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 {
@@ -180,10 +167,6 @@
     padding-right: var(--p-space-4);
   }
 
-  .Actions {
-    padding-top: var(--p-space-4);
-  }
-
   .Dismiss {
     right: var(--p-space-4);
     top: var(--p-space-5);
@@ -195,23 +178,6 @@
   padding-right: calc(var(--p-space-8) + var(--p-icon-size-small));
 }
 
-.Heading {
-  word-break: break-word;
-}
-
-.Content {
-  @include text-breakword;
-  padding: var(--p-space-05) 0;
-}
-
-.Ribbon {
-  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 paddingRight="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
+        paddingTop={withinContentContainer ? '3' : '4'}
+        paddingBottom={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 paddingTop="05" paddingBottom="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 paddingRight="4">
           <Icon source={iconName} color={iconColor} />
-        </div>
+        </Box>
 
-        <div className={styles.ContentWrapper}>
+        <Bleed top="05">
           {headingMarkup}
           {contentMarkup}
-        </div>
+        </Bleed>
       </div>
     </BannerContext.Provider>
   );

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

@@ -21,12 +21,12 @@ import {Banner, BannerHandles} from '../Banner';
 describe('<Banner />', () => {
   it('renders a title', () => {
     const banner = mountWithApp(<Banner title="Banner title" />);
-    expect(banner.find(Text, {as: 'p'})).toContainReactText('Banner title');
+    expect(banner.find(Text)).toContainReactText('Banner title');
   });
 
-  it('passes a p element to Text', () => {
+  it('passes an h2 element to Heading', () => {
     const banner = mountWithApp(<Banner title="Banner title" />);
-    expect(banner).toContainReactComponent(Text, {as: 'p'});
+    expect(banner).toContainReactComponent(Text, {as: 'h2'});
   });
 
   it('passes the provided icon source to Icon', () => {