From 43776be71635454192aa3985a5f364f84177ddeb Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Fri, 3 Feb 2023 07:00:51 -0800
Subject: [PATCH] [Banner] Fix content size (#8256)

### WHY are these changes introduced?

Fixes some unexpected behaviour with the `Bleed` component content width

### WHAT is this pull request doing?

Content inside `Bleed` shouldn't extend past the intended content area
---
 .changeset/blue-queens-walk.md                |  6 ++++++
 .../src/components/Banner/Banner.scss         |  5 +++++
 .../src/components/Banner/Banner.stories.tsx  | 21 +++++++++++++++++++
 .../src/components/Banner/Banner.tsx          |  5 ++---
 polaris-react/src/components/Bleed/Bleed.scss |  1 -
 5 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/blue-queens-walk.md

diff --git a/.changeset/blue-queens-walk.md b/.changeset/blue-queens-walk.md
new file mode 100644
index 00000000000..2deb8fec507
--- /dev/null
+++ b/.changeset/blue-queens-walk.md
@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': patch
+---
+
+- Fixed `Bleed` width behavior
+- Fixed `Banner` content width
diff --git a/polaris-react/src/components/Banner/Banner.scss b/polaris-react/src/components/Banner/Banner.scss
index f5181bef24a..73f86c42f4c 100644
--- a/polaris-react/src/components/Banner/Banner.scss
+++ b/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);
 
diff --git a/polaris-react/src/components/Banner/Banner.stories.tsx b/polaris-react/src/components/Banner/Banner.stories.tsx
index 7106a449443..072a7f1ba8a 100644
--- a/polaris-react/src/components/Banner/Banner.stories.tsx
+++ b/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>
+  );
+}
diff --git a/polaris-react/src/components/Banner/Banner.tsx b/polaris-react/src/components/Banner/Banner.tsx
index e4aeae9ae95..a439788d345 100644
--- a/polaris-react/src/components/Banner/Banner.tsx
+++ b/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>
   );
diff --git a/polaris-react/src/components/Bleed/Bleed.scss b/polaris-react/src/components/Bleed/Bleed.scss
index 47b8ceaaee7..e94c9f78a7c 100644
--- a/polaris-react/src/components/Bleed/Bleed.scss
+++ b/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);