From 31cc943bd6cdaa74c2155ee23ca0d3a065443e82 Mon Sep 17 00:00:00 2001 From: Ryker Blunck Date: Thu, 13 Aug 2026 11:11:45 -0600 Subject: [PATCH 1/5] fix centering of banner icons for Action and Dismissable banners. Subject to change --- .../Banners/ActionBanner/ActionBanner.component.tsx | 6 +++++- .../src/components/Banners/Banners.styles.ts | 7 +++++-- .../DismissableBanner/DismissableBanner.component.tsx | 6 +++++- 3 files changed, 15 insertions(+), 4 deletions(-) diff --git a/packages/atomic-elements/src/components/Banners/ActionBanner/ActionBanner.component.tsx b/packages/atomic-elements/src/components/Banners/ActionBanner/ActionBanner.component.tsx index d57ec4f84..b10e75662 100644 --- a/packages/atomic-elements/src/components/Banners/ActionBanner/ActionBanner.component.tsx +++ b/packages/atomic-elements/src/components/Banners/ActionBanner/ActionBanner.component.tsx @@ -48,7 +48,11 @@ export const ActionBanner = forwardRef( return ( - {icon && } + {icon && ( +
+ +
+ )} {renderProps.children} {buttonText} diff --git a/packages/atomic-elements/src/components/Banners/Banners.styles.ts b/packages/atomic-elements/src/components/Banners/Banners.styles.ts index 91f2dd231..e405f0651 100644 --- a/packages/atomic-elements/src/components/Banners/Banners.styles.ts +++ b/packages/atomic-elements/src/components/Banners/Banners.styles.ts @@ -14,12 +14,15 @@ export const StyledBanner = styled.div` align-items: flex-start; gap: 4px; - & > i { + & > .aje-banner__icon-container { height: var(--banner-btn-size); width: var(--banner-btn-size); display: grid; place-items: center; - color: var(--banner-icon-clr); + + & > i { + color: var(--banner-icon-clr); + } } &.aje-banner { diff --git a/packages/atomic-elements/src/components/Banners/DismissableBanner/DismissableBanner.component.tsx b/packages/atomic-elements/src/components/Banners/DismissableBanner/DismissableBanner.component.tsx index 0ca7be412..e8ae9bc5f 100644 --- a/packages/atomic-elements/src/components/Banners/DismissableBanner/DismissableBanner.component.tsx +++ b/packages/atomic-elements/src/components/Banners/DismissableBanner/DismissableBanner.component.tsx @@ -52,7 +52,11 @@ export const DismissableBanner = forwardRef< return ( - {icon && } + {icon && ( +
+ +
+ )} {renderProps.children} {onDismiss && ( Date: Thu, 13 Aug 2026 11:21:25 -0600 Subject: [PATCH 2/5] Add a Banner.Icon component to match the existing pattern --- .changeset/whole-grapes-wear.md | 5 + .../ActionBanner/ActionBanner.component.tsx | 7 +- .../Banners/Banner/Banner.component.tsx | 23 +++- .../Banners/Banner/Banner.stories.tsx | 7 +- .../Banner/__snapshots__/Banner.spec.tsx.snap | 24 ++-- .../src/components/Banners/Banner/index.tsx | 6 +- .../src/components/Banners/Banners.styles.ts | 17 ++- .../DismissableBanner.component.tsx | 7 +- .../DismissableBanner.spec.tsx.snap | 112 +++++++++++------- .../__snapshots__/LoadingStatus.spec.tsx.snap | 16 ++- 10 files changed, 139 insertions(+), 85 deletions(-) create mode 100644 .changeset/whole-grapes-wear.md diff --git a/.changeset/whole-grapes-wear.md b/.changeset/whole-grapes-wear.md new file mode 100644 index 000000000..fc6971325 --- /dev/null +++ b/.changeset/whole-grapes-wear.md @@ -0,0 +1,5 @@ +--- +"@atomicjolt/atomic-elements": minor +--- + +Added a Banner.Icon component that correctly positions Material Icons diff --git a/packages/atomic-elements/src/components/Banners/ActionBanner/ActionBanner.component.tsx b/packages/atomic-elements/src/components/Banners/ActionBanner/ActionBanner.component.tsx index b10e75662..6878cc090 100644 --- a/packages/atomic-elements/src/components/Banners/ActionBanner/ActionBanner.component.tsx +++ b/packages/atomic-elements/src/components/Banners/ActionBanner/ActionBanner.component.tsx @@ -5,7 +5,6 @@ import { MaterialIcons, RenderBaseProps, } from "../../../types"; -import { MaterialIcon } from "../../Icons/MaterialIcon"; import { Banner, BannerVariants } from "../Banner"; import { ButtonVariants } from "../../Buttons/Button"; import { useRenderProps } from "@hooks"; @@ -48,11 +47,7 @@ export const ActionBanner = forwardRef( return ( - {icon && ( -
- -
- )} + {icon && } {renderProps.children} {buttonText} diff --git a/packages/atomic-elements/src/components/Banners/Banner/Banner.component.tsx b/packages/atomic-elements/src/components/Banners/Banner/Banner.component.tsx index 988cfe5bf..ca8dd99ad 100644 --- a/packages/atomic-elements/src/components/Banners/Banner/Banner.component.tsx +++ b/packages/atomic-elements/src/components/Banners/Banner/Banner.component.tsx @@ -5,9 +5,14 @@ import { RenderBaseProps, SuggestStrings, } from "../../../types"; -import { BannerContent, StyledBanner } from "../Banners.styles"; +import { + BannerContent, + StyledBanner, + StyledBannerIcon, +} from "../Banners.styles"; import { IconButton, IconButtonProps } from "../../Buttons/IconButton"; import { Button, ButtonProps } from "../../Buttons/Button"; +import { MaterialIcon, MaterialIconProps } from "../../Icons/MaterialIcon"; export type BannerVariants = SuggestStrings< "info" | "error" | "success" | "warning" @@ -33,6 +38,16 @@ function Banner(props: BannerProps, ref: React.Ref) { return ; } +export type BannerIconProps = MaterialIconProps; + +const BannerIcon = forwardRef((props, ref) => { + return ( + + + + ); +}); + const BannerIconButton = forwardRef( (props, ref) => { const { variant = "banner", ...rest } = props; @@ -51,6 +66,7 @@ interface ForwardedBanner { (props: BannerProps & RefAttributes): JSX.Element; displayName: string; Content: typeof BannerContent; + Icon: typeof BannerIcon; IconButton: typeof BannerIconButton; Button: typeof BannerButton; } @@ -66,6 +82,11 @@ _Banner.displayName = "Banner"; _Banner.Content = BannerContent; BannerContent.displayName = "Banner.Content"; +/** Icon for Banners. Renders a `MaterialIcon` inside a wrapper that keeps it + * aligned with the Banner's buttons */ +_Banner.Icon = BannerIcon; +BannerIcon.displayName = "Banner.Icon"; + /** IconButton for Banners */ _Banner.IconButton = BannerIconButton; BannerIconButton.displayName = "Banner.IconButton"; diff --git a/packages/atomic-elements/src/components/Banners/Banner/Banner.stories.tsx b/packages/atomic-elements/src/components/Banners/Banner/Banner.stories.tsx index 3e1256c4f..e1eabf96d 100644 --- a/packages/atomic-elements/src/components/Banners/Banner/Banner.stories.tsx +++ b/packages/atomic-elements/src/components/Banners/Banner/Banner.stories.tsx @@ -1,6 +1,5 @@ import { Meta, StoryObj } from "@storybook/react"; import { Banner } from "."; -import { MaterialIcon } from "../../Icons/MaterialIcon"; import { getCssProps } from "@sb/cssprops"; import { RenderPropsArgTypes } from "@sb/helpers"; @@ -32,7 +31,7 @@ export const WithIcon: Story = { args: { ...Primary.args, children: [ - , + , This is a banner, ], }, @@ -42,7 +41,7 @@ export const WithIconButton: Story = { args: { ...Primary.args, children: [ - , + , This is a banner, , ], @@ -53,7 +52,7 @@ export const WithButton: Story = { args: { ...Primary.args, children: [ - , + , This is a banner, Click Me, ], diff --git a/packages/atomic-elements/src/components/Banners/Banner/__snapshots__/Banner.spec.tsx.snap b/packages/atomic-elements/src/components/Banners/Banner/__snapshots__/Banner.spec.tsx.snap index 4cb98d99f..26856644c 100644 --- a/packages/atomic-elements/src/components/Banners/Banner/__snapshots__/Banner.spec.tsx.snap +++ b/packages/atomic-elements/src/components/Banners/Banner/__snapshots__/Banner.spec.tsx.snap @@ -6,7 +6,7 @@ exports[`Banner > Banner.Button > should match snapshot 1`] = ` "baseElement":