From cf41bb8414867fcdadccd70e29f6cae633e4275f Mon Sep 17 00:00:00 2001
From: Andrew Berg <andrew.berg@washpost.com>
Date: Fri, 27 Oct 2023 15:04:28 -0400
Subject: [PATCH] fix: correct alignment of text and icons in AlertBanner

---
 ui/alert-banner/src/AlertBanner.tsx  | 12 ++----------
 ui/alert-banner/src/play.stories.tsx | 22 ++++++++++++++++++++++
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/ui/alert-banner/src/AlertBanner.tsx b/ui/alert-banner/src/AlertBanner.tsx
index 8e3738e83..145eb4189 100644
--- a/ui/alert-banner/src/AlertBanner.tsx
+++ b/ui/alert-banner/src/AlertBanner.tsx
@@ -17,7 +17,6 @@ import {
 
 const StyledAlertBannerTrigger = styled(Button, {
   alignSelf: "flex-start",
-  marginTop: "$025",
 });
 
 type AlertBannerTriggerVariants = React.ComponentProps<
@@ -54,14 +53,8 @@ type AlertBannerTriggerProps = React.ComponentProps<typeof AlertBannerTrigger>;
 AlertBannerTrigger.displayName = "AlertBannerTrigger";
 
 const StyledAlertBannerContent = styled("p", {
-  width: "100%",
-  display: "inline-block",
-  justifyContent: "center",
-  alignItems: "flex-start",
-  margin: "0 auto",
-  flexDirection: "column",
-  py: "$050",
-  marginTop: "0",
+  marginBlock: "0.625rem",
+  flex: "1",
 });
 const AlertBannerContent = StyledAlertBannerContent;
 type AlertBannerContentProps = React.ComponentProps<typeof AlertBannerContent>;
@@ -183,7 +176,6 @@ const AlertBannerRoot = React.forwardRef<HTMLDivElement, AlertBannerVariants>(
           css={{
             alignSelf: "flex-start",
             border: "none",
-            marginTop: "$025",
             borderRadius: 0,
             cursor: "auto",
             "@hover": {
diff --git a/ui/alert-banner/src/play.stories.tsx b/ui/alert-banner/src/play.stories.tsx
index 4c32d66f6..2d5914079 100644
--- a/ui/alert-banner/src/play.stories.tsx
+++ b/ui/alert-banner/src/play.stories.tsx
@@ -110,3 +110,25 @@ Play.decorators = [
 ];
 
 Play.storyName = "Alert banner";
+
+const SpacingTemplate: ComponentStory<typeof AlertBanner.Root> = ({
+  ...args
+}) => (
+  <Column>
+    <AlertBanner.Root {...args} shadow>
+      <AlertBanner.Content as="p">
+        This is a single line of text
+      </AlertBanner.Content>
+      <AlertBanner.Trigger />
+    </AlertBanner.Root>
+    <AlertBanner.Root {...args} shadow>
+      <AlertBanner.Content as="p">
+        This is multiple lines of text that should wrap. Lorem ipsum dolor sit
+        amet, consectetur adipiscing elit.
+      </AlertBanner.Content>
+      <AlertBanner.Trigger />
+    </AlertBanner.Root>
+  </Column>
+);
+
+export const Spacing = SpacingTemplate.bind({});