fix: correct alignment of text and icons in AlertBanner

washingtonpost · Oct 27, 2023 · 18d3deb · 18d3deb
1 parent 3221741
commit 18d3deb
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 10 deletions.
diff --git 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
@@ -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({});