[Banner] Fix no title hidden icon (#10045)

### WHY are these changes introduced? Hides icon `Box` for the no title Banner variant when `hideIcon` is true |Before|After| |-|-| |<img width="1222" alt="Screenshot 2023-08-14 at 10 31 17 AM" src="https://github.com/Shopify/polaris/assets/20652326/f5b627d9-55b9-4166-9190-8d3dd90cfce1">|<img width="1221" alt="Screenshot 2023-08-14 at 10 31 40 AM" src="https://github.com/Shopify/polaris/assets/20652326/a4c7f8e2-a990-40c7-9649-6eebd230afb2">|
Shopify · Aug 14, 2023 · 65ad4e2 · 65ad4e2
1 parent 1d82a3b
commit 65ad4e2
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 5 deletions.
diff --git a/.changeset/lazy-apricots-visit.md b/.changeset/lazy-apricots-visit.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed BannerExperimental no title hidden icon variant
diff --git a/polaris-react/src/components/Banner/Banner.stories.tsx b/polaris-react/src/components/Banner/Banner.stories.tsx
@@ -295,6 +295,19 @@ export function All() {
           </Text>
         }
       />
+      <Text as="h2" variant="headingMd">
+        No title with hidden icon
+      </Text>
+      <AllBanners
+        title={undefined}
+        hideIcon
+        children={
+          <Text as="p">
+            Changing the phone number for this customer will unsubscribe them
+            from SMS marketing text messages until they provide consent.
+          </Text>
+        }
+      />
       <Text as="h2" variant="headingMd">
         Only title
       </Text>

diff --git a/polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.tsx b/polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.tsx
@@ -206,11 +206,13 @@ export function InlineIconBanner({
       >
         <Box width="100%">
           <HorizontalStack gap="2" wrap={false} blockAlign={blockAlign}>
-            <div ref={iconNode}>
-              <Box background={backgroundColor} borderRadius="2" padding="1">
-                {bannerIcon}
-              </Box>
-            </div>
+            {bannerIcon ? (
+              <div ref={iconNode}>
+                <Box background={backgroundColor} borderRadius="2" padding="1">
+                  {bannerIcon}
+                </Box>
+              </div>
+            ) : null}
             <Box ref={contentNode} width="100%">
               <VerticalStack gap="2">
                 <div>{children}</div>