[Banner] Fix content size

.changeset/blue-queens-walk.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': patch
+---
+
+- Fixed `Bleed` width behavior
+- Fixed `Banner` content width

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

@@ -158,6 +158,11 @@
   // stylelint-enable selector-max-class, selector-max-specificity
 }
 
+.ContentWrapper {
+  margin-top: calc(-1 * var(--p-space-05));
+  flex: 1 1 auto;
+}
+
 .withinContentContainer {
   padding: var(--p-space-4);
 

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

@@ -1,12 +1,15 @@
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import type {ComponentMeta} from '@storybook/react';
 import {
+  AlphaStack,
   Banner,
   Button,
   Card,
+  Inline,
   Link,
   List,
   Modal,
+  Text,
   TextContainer,
 } from '@shopify/polaris';
 
@@ -186,3 +189,21 @@ export function InACard() {
     </Card>
   );
 }
+
+export function WithEndJustifiedContent() {
+  return (
+    <Banner status="critical">
+      <AlphaStack gap="1" fullWidth>
+        <Inline align="space-between">
+          <Text variant="headingMd" fontWeight="semibold" as="h3">
+            Deployment failed in 5min
+          </Text>
+          <Link external url="https://example.com">
+            Logs
+          </Link>
+        </Inline>
+        <p>This order was archived on March 7, 2017 at 3:12pm EDT.</p>
+      </AlphaStack>
+    </Banner>
+  );
+}

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

@@ -26,7 +26,6 @@ import {Icon, IconProps} from '../Icon';
 import {WithinContentContext} from '../../utilities/within-content-context';
 import {Text} from '../Text';
 import {Box} from '../Box';
-import {Bleed} from '../Bleed';
 
 import styles from './Banner.scss';
 
@@ -174,10 +173,10 @@ export const Banner = forwardRef<BannerHandles, BannerProps>(function Banner(
           <Icon source={iconName} color={iconColor} />
         </Box>
 
-        <Bleed marginInline="0" marginBlockStart="05">
+        <div className={styles.ContentWrapper}>
           {headingMarkup}
           {contentMarkup}
-        </Bleed>
+        </div>
       </div>
     </BannerContext.Provider>
   );

polaris-react/src/components/Bleed/Bleed.scss

@@ -1,7 +1,6 @@
 @import '../../styles/common';
 
 .Bleed {
-  min-width: 100%;
   // stylelint-disable -- Polaris component custom properties
   --pc-bleed-margin-block-start-xs: initial;
   --pc-bleed-margin-block-start-sm: var(--pc-bleed-margin-block-start-xs);