Update Banner mobile styles

.changeset/grumpy-cheetahs-hug.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Updated `Banner` styling for small screens

polaris-react/src/components/Banner/Banner.module.css

@@ -21,8 +21,6 @@
 }
 
 .withinPage {
-  @mixin shadow-bevel var(--p-shadow-200), var(--p-border-radius-0);
-
   @media (--p-breakpoints-sm-up) {
     @mixin shadow-bevel var(--p-shadow-200), var(--p-border-radius-300);
   }

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

@@ -299,8 +299,8 @@ export const All = {
         </Text>
         <AllBanners
           onDismiss={() => {}}
-          action={{content: 'Primary action'}}
-          secondaryAction={{content: 'Secondary action'}}
+          action={{content: 'Primary'}}
+          secondaryAction={{content: 'Secondary'}}
         />
         <Text as="h2" variant="headingMd">
           Default by status

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

@@ -108,6 +108,7 @@ export function BannerLayout({
   children,
 }: BannerProps) {
   const i18n = useI18n();
+  const {smUp} = useBreakpoints();
   const withinContentContainer = useContext(WithinContentContext);
   const isInlineIconBanner = !title && !withinContentContainer;
   const bannerTone = Object.keys(bannerAttributes).includes(tone)
@@ -118,6 +119,20 @@ export function BannerLayout({
       withinContentContainer ? 'withinContentContainer' : 'withinPage'
     ];
 
+  let iconClassName = '';
+
+  if (smUp) {
+    if (isInlineIconBanner) {
+      iconClassName = 'icon-secondary';
+    } else {
+      iconClassName = bannerColors.icon;
+    }
+  } else if (withinContentContainer) {
+    iconClassName = bannerColors.icon;
+  } else {
+    iconClassName = 'icon-secondary';
+  }
+
   const sharedBannerProps: BannerLayoutProps = {
     backgroundColor: bannerColors.background,
     textColor: bannerColors.text,
@@ -133,7 +148,7 @@ export function BannerLayout({
     ),
     actionButtons:
       action || secondaryAction ? (
-        <ButtonGroup>
+        <ButtonGroup fullWidth={!smUp} gap={smUp ? 'tight' : 'extraTight'}>
           {action && (
             <Button onClick={action.onAction} {...action}>
               {action.content}
@@ -150,11 +165,7 @@ export function BannerLayout({
       <Button
         variant="tertiary"
         icon={
-          <span
-            className={
-              styles[isInlineIconBanner ? 'icon-secondary' : bannerColors.icon]
-            }
-          >
+          <span className={styles[iconClassName]}>
             <Icon source={XIcon} />
           </span>
         }
@@ -201,7 +212,19 @@ export function DefaultBanner({
   const {smUp} = useBreakpoints();
   const hasContent = children || actionButtons;
 
-  return (
+  const xsOnlyBannerMarkup = (
+    <InlineIconBanner
+      backgroundColor={backgroundColor}
+      bannerTitle={bannerTitle}
+      bannerIcon={bannerIcon}
+      actionButtons={actionButtons}
+      dismissButton={dismissButton}
+    >
+      {children}
+    </InlineIconBanner>
+  );
+
+  const smUpBannerMarkup = (
     <Box width="100%">
       <BlockStack align="space-between">
         <Box
@@ -237,20 +260,26 @@ export function DefaultBanner({
       </BlockStack>
     </Box>
   );
+
+  const bannerMarkup = smUp ? smUpBannerMarkup : xsOnlyBannerMarkup;
+
+  return bannerMarkup;
 }
 
 export function InlineIconBanner({
   backgroundColor,
+  bannerTitle,
   bannerIcon,
   actionButtons,
   dismissButton,
   children,
-}: PropsWithChildren<Omit<BannerLayoutProps, 'textColor' | 'bannerTitle'>>) {
+}: PropsWithChildren<Omit<BannerLayoutProps, 'textColor'>>) {
   const [blockAlign, setBlockAlign] =
     useState<InlineStackProps['blockAlign']>('center');
   const contentNode = useRef<HTMLDivElement>(null);
   const iconNode = useRef<HTMLDivElement>(null);
   const dismissIconNode = useRef<HTMLDivElement>(null);
+  const {smUp} = useBreakpoints();
 
   const handleResize = useCallback(() => {
     const contentHeight = contentNode.current?.offsetHeight;
@@ -285,7 +314,16 @@ export function InlineIconBanner({
             ) : null}
             <Box ref={contentNode} width="100%">
               <BlockStack gap="200">
-                <div>{children}</div>
+                {bannerTitle ? (
+                  <BlockStack gap="100">
+                    <Box paddingBlockStart={smUp ? '0' : '100'}>
+                      {bannerTitle}
+                    </Box>
+                    {children}
+                  </BlockStack>
+                ) : (
+                  <div>{children}</div>
+                )}
                 {actionButtons}
               </BlockStack>
             </Box>

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

@@ -1,7 +1,7 @@
 import React, {useEffect, useRef} from 'react';
 import {
   PlusCircleIcon,
-  CheckIcon,
+  CheckCircleIcon,
   AlertTriangleIcon,
   InfoIcon,
   AlertDiamondIcon,
@@ -356,7 +356,7 @@ describe('<Banner />', () => {
 
   describe('icon', () => {
     it.each([
-      ['success', CheckIcon],
+      ['success', CheckCircleIcon],
       ['info', InfoIcon],
       ['warning', AlertTriangleIcon],
       ['critical', AlertDiamondIcon],

polaris-react/src/components/Banner/utilities.ts

@@ -7,7 +7,7 @@ import {
   AlertDiamondIcon,
   InfoIcon,
   AlertTriangleIcon,
-  CheckIcon,
+  CheckCircleIcon,
 } from '@shopify/polaris-icons';
 import {useImperativeHandle, useRef, useState} from 'react';
 
@@ -39,7 +39,7 @@ export const bannerAttributes: {[key in BannerTone]: BannerAttributes} = {
       text: 'text-success',
       icon: 'text-success',
     },
-    icon: CheckIcon,
+    icon: CheckCircleIcon,
   },
   warning: {
     withinPage: {