Skip to content

Commit

Permalink
fix: correct alignment of text and icons in AlertBanner
Browse files Browse the repository at this point in the history
  • Loading branch information
wp-aberg committed Oct 30, 2023
1 parent 3221741 commit cf41bb8
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 10 deletions.
12 changes: 2 additions & 10 deletions ui/alert-banner/src/AlertBanner.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import {

const StyledAlertBannerTrigger = styled(Button, {
alignSelf: "flex-start",
marginTop: "$025",
});

type AlertBannerTriggerVariants = React.ComponentProps<
Expand Down Expand Up @@ -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>;
Expand Down Expand Up @@ -183,7 +176,6 @@ const AlertBannerRoot = React.forwardRef<HTMLDivElement, AlertBannerVariants>(
css={{
alignSelf: "flex-start",
border: "none",
marginTop: "$025",
borderRadius: 0,
cursor: "auto",
"@hover": {
Expand Down
22 changes: 22 additions & 0 deletions ui/alert-banner/src/play.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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({});

4 comments on commit cf41bb8

@vercel
Copy link

@vercel vercel bot commented on cf41bb8 Oct 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on cf41bb8 Oct 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

wpds-ui-kit-vitejs-example – ./apps/vite-project

wpds-ui-kit-vitejs-example.preview.now.washingtonpost.com
wpds-ui-kit-vitejs-example-git-main.preview.now.washingtonpost.com

@vercel
Copy link

@vercel vercel bot commented on cf41bb8 Oct 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

wpds-ui-kit – ./build.washingtonpost.com

build.washingtonpost.com
wpds-ui-kit.preview.now.washingtonpost.com
wpds-ui-kit-git-main.preview.now.washingtonpost.com

@vercel
Copy link

@vercel vercel bot commented on cf41bb8 Oct 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

wpds-ui-kit-storybook – ./

wpds-ui-kit-storybook-git-main.preview.now.washingtonpost.com
wpds-ui-kit-storybook.preview.now.washingtonpost.com

Please sign in to comment.