[BannerExperimental] Add gap between dismiss button and content (#9870)

### WHY are these changes introduced? add a gap between banner content and dismiss button in the in card variant |Before|After| |-|-| | ![screenshot_2023-08-01_at_2 45 22_pm](https://github.com/Shopify/polaris/assets/20652326/848d8e51-2437-422f-b830-9ab0b2d689a0)|<img width="1042" alt="Screenshot 2023-08-01 at 6 35 34 PM" src="https://github.com/Shopify/polaris/assets/20652326/b062e79a-1655-48dd-8fb9-89e2a7258c64">|
Shopify · Aug 2, 2023 · bc56fe5 · bc56fe5
1 parent a11ccda
commit bc56fe5
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/polaris-react/src/components/Banner/Banner.stories.tsx b/polaris-react/src/components/Banner/Banner.stories.tsx
@@ -361,6 +361,26 @@ export function All() {
           }
         />
       </LegacyCard>
+      <Text as="h2" variant="headingMd">
+        In card with long text
+      </Text>
+      <LegacyCard sectioned>
+        <AllBanners
+          onDismiss={() => {}}
+          title={undefined}
+          children={
+            <>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </>
+          }
+        />
+      </LegacyCard>
     </VerticalStack>
   );
 }

diff --git a/polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.tsx b/polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.tsx
@@ -242,7 +242,12 @@ function WithinContentContainerBanner({
       borderRadius="2"
       color={textColor}
     >
-      <HorizontalStack align="space-between" blockAlign="start" wrap={false}>
+      <HorizontalStack
+        align="space-between"
+        blockAlign="start"
+        wrap={false}
+        gap="2"
+      >
         <HorizontalStack gap="1_5-experimental" wrap={false}>
           {bannerIcon}
           <Box width="100%">