[Banner] Wrap children in Box

Author: sophschneider

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

@@ -265,6 +265,17 @@ export function All() {
         Custom icon
       </Text>
       <AllBanners icon={DiscountsMajor} onDismiss={() => {}} />
+      <Text as="h2" variant="headingMd">
+        With links
+      </Text>
+      <AllBanners
+        onDismiss={() => {}}
+        children={
+          <>
+            Text with <Link url="">monochrome link</Link>.
+          </>
+        }
+      />
       <Text as="h2" variant="headingMd">
         In card
       </Text>
@@ -295,6 +306,19 @@ export function All() {
       <LegacyCard sectioned>
         <AllBanners icon={DiscountsMinor} onDismiss={() => {}} />
       </LegacyCard>
+      <Text as="h2" variant="headingMd">
+        In card with links
+      </Text>
+      <LegacyCard sectioned>
+        <AllBanners
+          onDismiss={() => {}}
+          children={
+            <>
+              Text with <Link url="">monochrome link</Link>.
+            </>
+          }
+        />
+      </LegacyCard>
     </VerticalStack>
   );
 }

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

@@ -90,7 +90,7 @@ export function BannerExperimental({
             <VerticalStack gap="2">
               <VerticalStack gap="05">
                 {bannerTitle}
-                {children}
+                <Box>{children}</Box>
               </VerticalStack>
               {actionButtons}
             </VerticalStack>
@@ -128,7 +128,7 @@ export function BannerExperimental({
         {hasContent && (
           <Box padding={{xs: '3', sm: '4'}} paddingBlockStart="3">
             <VerticalStack gap="2">
-              {children}
+              <Box>{children}</Box>
               {actionButtons}
             </VerticalStack>
           </Box>