From a94ea3a23d0350b30928799db95d54bb4db9527b Mon Sep 17 00:00:00 2001
From: Laura Griffee <laura@mailzone.com>
Date: Mon, 29 Apr 2024 15:12:06 -0600
Subject: [PATCH 1/3] Update `Banner` mobile styles

---
 .changeset/grumpy-cheetahs-hug.md             |  5 +++
 .../src/components/Banner/Banner.module.css   |  2 -
 .../src/components/Banner/Banner.stories.tsx  |  4 +-
 .../src/components/Banner/Banner.tsx          | 43 ++++++++++++++++---
 .../components/Banner/tests/Banner.test.tsx   |  4 +-
 .../src/components/Banner/utilities.ts        |  4 +-
 6 files changed, 49 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/grumpy-cheetahs-hug.md

diff --git a/.changeset/grumpy-cheetahs-hug.md b/.changeset/grumpy-cheetahs-hug.md
new file mode 100644
index 00000000000..cb2d0345f3e
--- /dev/null
+++ b/.changeset/grumpy-cheetahs-hug.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Updated `Banner` styling for small screens
diff --git a/polaris-react/src/components/Banner/Banner.module.css b/polaris-react/src/components/Banner/Banner.module.css
index e30f8efbc62..80878f82382 100644
--- a/polaris-react/src/components/Banner/Banner.module.css
+++ b/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);
   }
diff --git a/polaris-react/src/components/Banner/Banner.stories.tsx b/polaris-react/src/components/Banner/Banner.stories.tsx
index b306594fe73..7666839bf8f 100644
--- a/polaris-react/src/components/Banner/Banner.stories.tsx
+++ b/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
diff --git a/polaris-react/src/components/Banner/Banner.tsx b/polaris-react/src/components/Banner/Banner.tsx
index a46ab9e2b9c..366f71c26f7 100644
--- a/polaris-react/src/components/Banner/Banner.tsx
+++ b/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)
@@ -133,7 +134,7 @@ export function BannerLayout({
     ),
     actionButtons:
       action || secondaryAction ? (
-        <ButtonGroup>
+        <ButtonGroup fullWidth={!smUp} gap={smUp ? 'tight' : 'extraTight'}>
           {action && (
             <Button onClick={action.onAction} {...action}>
               {action.content}
@@ -152,7 +153,13 @@ export function BannerLayout({
         icon={
           <span
             className={
-              styles[isInlineIconBanner ? 'icon-secondary' : bannerColors.icon]
+              styles[
+                isInlineIconBanner
+                  ? 'icon-secondary'
+                  : smUp
+                  ? bannerColors.icon
+                  : 'icon-secondary'
+              ]
             }
           >
             <Icon source={XIcon} />
@@ -201,7 +208,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,15 +256,20 @@ 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);
@@ -285,7 +309,16 @@ export function InlineIconBanner({
             ) : null}
             <Box ref={contentNode} width="100%">
               <BlockStack gap="200">
-                <div>{children}</div>
+                {bannerTitle ? (
+                  <BlockStack gap="100">
+                    <Text as="h2" variant="headingMd" breakWord>
+                      {bannerTitle}
+                    </Text>
+                    {children}
+                  </BlockStack>
+                ) : (
+                  <div>{children}</div>
+                )}
                 {actionButtons}
               </BlockStack>
             </Box>
diff --git a/polaris-react/src/components/Banner/tests/Banner.test.tsx b/polaris-react/src/components/Banner/tests/Banner.test.tsx
index 0ffa122fac5..e86f8107403 100644
--- a/polaris-react/src/components/Banner/tests/Banner.test.tsx
+++ b/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],
diff --git a/polaris-react/src/components/Banner/utilities.ts b/polaris-react/src/components/Banner/utilities.ts
index 84d9936e1b0..9d30ecd1ae5 100644
--- a/polaris-react/src/components/Banner/utilities.ts
+++ b/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: {

From a87d4e1b7fb20ad006a155ef810b4c2f46ca959a Mon Sep 17 00:00:00 2001
From: Laura Griffee <laura@mailzone.com>
Date: Tue, 7 May 2024 15:58:33 -0600
Subject: [PATCH 2/3] Update icon color logic

Co-authored-by: Aveline Thelen <aveline.thelen@shopify.com>
---
 .../src/components/Banner/Banner.tsx          | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/polaris-react/src/components/Banner/Banner.tsx b/polaris-react/src/components/Banner/Banner.tsx
index 366f71c26f7..e0a40da6bb0 100644
--- a/polaris-react/src/components/Banner/Banner.tsx
+++ b/polaris-react/src/components/Banner/Banner.tsx
@@ -119,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,
@@ -151,17 +165,7 @@ export function BannerLayout({
       <Button
         variant="tertiary"
         icon={
-          <span
-            className={
-              styles[
-                isInlineIconBanner
-                  ? 'icon-secondary'
-                  : smUp
-                  ? bannerColors.icon
-                  : 'icon-secondary'
-              ]
-            }
-          >
+          <span className={styles[iconClassName]}>
             <Icon source={XIcon} />
           </span>
         }

From 1f08404825fc48531d8f25be671645dcd7c9a4c0 Mon Sep 17 00:00:00 2001
From: Laura Griffee <laura@mailzone.com>
Date: Wed, 8 May 2024 09:44:34 -0600
Subject: [PATCH 3/3] Update `InlineIconBanner` title alignment

---
 polaris-react/src/components/Banner/Banner.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/polaris-react/src/components/Banner/Banner.tsx b/polaris-react/src/components/Banner/Banner.tsx
index e0a40da6bb0..a2a746eb609 100644
--- a/polaris-react/src/components/Banner/Banner.tsx
+++ b/polaris-react/src/components/Banner/Banner.tsx
@@ -279,6 +279,7 @@ export function InlineIconBanner({
   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;
@@ -315,9 +316,9 @@ export function InlineIconBanner({
               <BlockStack gap="200">
                 {bannerTitle ? (
                   <BlockStack gap="100">
-                    <Text as="h2" variant="headingMd" breakWord>
+                    <Box paddingBlockStart={smUp ? '0' : '100'}>
                       {bannerTitle}
-                    </Text>
+                    </Box>
                     {children}
                   </BlockStack>
                 ) : (