Fix alignment of banner icons

packages/atomic-elements/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atomicjolt/atomic-elements
 
+## 3.9.0
+
+### Minor Changes
+
+- f9adc5c: Added a Banner.Icon component that correctly positions Material Icons
+
+  Fix duplicate class names applied to ActionBanner
+
 ## 3.8.0
 
 ### Minor Changes

packages/atomic-elements/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atomicjolt/atomic-elements",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "sideEffects": false,
   "module": "dist/esm/index.js",
   "main": "dist/cjs/index.js",

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";
@@ -32,23 +31,18 @@ export const ActionBanner = forwardRef<HTMLDivElement, ActionBannerProps>(
       buttonVariant = "inverted",
       buttonText,
       onPress,
-      className,
-      style,
       children,
       ...rest
     } = props;
 
     const renderProps = useRenderProps({
       componentClassName: "aje-banner",
-      className,
-      style,
-      variant,
       children,
     });
 
     return (
-      <Banner ref={ref} {...renderProps} {...rest}>
-        {icon && <MaterialIcon icon={icon} variant={iconVariant} />}
+      <Banner ref={ref} variant={variant} {...rest}>
+        {icon && <Banner.Icon icon={icon} variant={iconVariant} />}
         <Banner.Content>{renderProps.children}</Banner.Content>
         <Banner.Button variant={buttonVariant} onPress={onPress}>
           {buttonText}

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<HTMLDivElement>) {
   return <StyledBanner ref={ref} {...renderProps} {...rest} />;
 }
 
+export type BannerIconProps = MaterialIconProps;
+
+const BannerIcon = forwardRef<HTMLElement, BannerIconProps>((props, ref) => {
+  return (
+    <StyledBannerIcon className="aje-banner__icon">
+      <MaterialIcon ref={ref} {...props} />
+    </StyledBannerIcon>
+  );
+});
+
 const BannerIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   (props, ref) => {
     const { variant = "banner", ...rest } = props;
@@ -51,6 +66,7 @@ interface ForwardedBanner {
   (props: BannerProps & RefAttributes<HTMLDivElement>): 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";

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: [
-      <MaterialIcon key="icon" icon="info" />,
+      <Banner.Icon key="icon" icon="info" />,
       <Banner.Content key="content">This is a banner</Banner.Content>,
     ],
   },
@@ -42,7 +41,7 @@ export const WithIconButton: Story = {
   args: {
     ...Primary.args,
     children: [
-      <MaterialIcon icon="info" key="icon" />,
+      <Banner.Icon key="icon" icon="info" />,
       <Banner.Content key="content">This is a banner</Banner.Content>,
       <Banner.IconButton key="action" icon="close" />,
     ],
@@ -53,7 +52,7 @@ export const WithButton: Story = {
   args: {
     ...Primary.args,
     children: [
-      <MaterialIcon icon="info" />,
+      <Banner.Icon icon="info" />,
       <Banner.Content>This is a banner</Banner.Content>,
       <Banner.Button>Click Me</Banner.Button>,
     ],

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": <body>
     <div>
       <button
-        class="sc-eCQgVK achhC aje-btn aje-btn--inverted is-auto"
+        class="sc-jSppWd cQpOkx aje-btn aje-btn--inverted is-auto"
         tabindex="0"
         type="button"
       >
@@ -16,7 +16,7 @@ exports[`Banner > Banner.Button > should match snapshot 1`] = `
   </body>,
   "container": <div>
     <button
-      class="sc-eCQgVK achhC aje-btn aje-btn--inverted is-auto"
+      class="sc-jSppWd cQpOkx aje-btn aje-btn--inverted is-auto"
       tabindex="0"
       type="button"
     >
@@ -83,15 +83,15 @@ exports[`Banner > Banner.Content > should match snapshot 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="sc-gtcBCx hCHSt"
+        class="sc-dkXsAU kprRKQ"
       >
         Content
       </div>
     </div>
   </body>,
   "container": <div>
     <div
-      class="sc-gtcBCx hCHSt"
+      class="sc-dkXsAU kprRKQ"
     >
       Content
     </div>
@@ -156,14 +156,14 @@ exports[`Banner > Banner.IconButton > should match snapshot 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="sc-eCQgVK sc-jSppWd achhC gmYzfq aje-btn aje-icon-btn aje-btn--banner is-medium"
+        class="sc-jSppWd sc-gKkgUA cQpOkx fOHFWQ aje-btn aje-icon-btn aje-btn--banner is-medium"
         data-icon-button="true"
         tabindex="0"
         type="button"
       >
         <i
           aria-hidden="true"
-          class="sc-hKVpXn eoBHob aje-icon material-icons is-medium"
+          class="sc-eCQgVK cbqYKN aje-icon material-icons is-medium"
         >
           more_vert
         </i>
@@ -172,14 +172,14 @@ exports[`Banner > Banner.IconButton > should match snapshot 1`] = `
   </body>,
   "container": <div>
     <button
-      class="sc-eCQgVK sc-jSppWd achhC gmYzfq aje-btn aje-icon-btn aje-btn--banner is-medium"
+      class="sc-jSppWd sc-gKkgUA cQpOkx fOHFWQ aje-btn aje-icon-btn aje-btn--banner is-medium"
       data-icon-button="true"
       tabindex="0"
       type="button"
     >
       <i
         aria-hidden="true"
-        class="sc-hKVpXn eoBHob aje-icon material-icons is-medium"
+        class="sc-eCQgVK cbqYKN aje-icon material-icons is-medium"
       >
         more_vert
       </i>
@@ -245,13 +245,13 @@ exports[`Banner > Snapshots > should match snapshot 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="sc-bdDsCe jIeFyz aje-banner aje-banner--info"
+        class="sc-bdDsCe laBLsi aje-banner aje-banner--info"
       />
     </div>
   </body>,
   "container": <div>
     <div
-      class="sc-bdDsCe jIeFyz aje-banner aje-banner--info"
+      class="sc-bdDsCe laBLsi aje-banner aje-banner--info"
     />
   </div>,
   "debug": [Function],
@@ -314,13 +314,13 @@ exports[`Banner > Snapshots > should match snapshot with variant 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="sc-bdDsCe jIeFyz aje-banner aje-banner--success"
+        class="sc-bdDsCe laBLsi aje-banner aje-banner--success"
       />
     </div>
   </body>,
   "container": <div>
     <div
-      class="sc-bdDsCe jIeFyz aje-banner aje-banner--success"
+      class="sc-bdDsCe laBLsi aje-banner aje-banner--success"
     />
   </div>,
   "debug": [Function],

packages/atomic-elements/src/components/Banners/Banner/index.tsx

@@ -1,2 +1,6 @@
 export { Banner } from "./Banner.component";
-export type { BannerProps, BannerVariants } from "./Banner.component";
+export type {
+  BannerProps,
+  BannerVariants,
+  BannerIconProps,
+} from "./Banner.component";

packages/atomic-elements/src/components/Banners/Banners.styles.ts

@@ -14,6 +14,8 @@ export const StyledBanner = styled.div`
   align-items: flex-start;
   gap: 4px;
 
+  /** Legacy support for icons rendered directly inside a Banner.
+   * Prefer \`Banner.Icon\`, which aligns the icon with the Banner's buttons */
   & > i {
     height: var(--banner-btn-size);
     width: var(--banner-btn-size);
@@ -90,6 +92,14 @@ export const StyledBanner = styled.div`
   }
 `;
 
+export const StyledBannerIcon = styled.div`
+  height: var(--banner-btn-size);
+  width: var(--banner-btn-size);
+  display: grid;
+  place-items: center;
+  color: var(--banner-icon-clr);
+`;
+
 export const BannerContent = styled.div<MarginProps>`
   ${margins}
   flex: 1;

packages/atomic-elements/src/components/Banners/DismissableBanner/DismissableBanner.component.tsx

@@ -6,7 +6,6 @@ import {
   RenderBaseProps,
 } from "../../../types";
 import { useRenderProps } from "@hooks/useRenderProps";
-import { MaterialIcon } from "../../Icons/MaterialIcon";
 import { Banner, BannerVariants } from "../Banner";
 import { useTranslations } from "@hooks/useTranslations";
 
@@ -52,7 +51,7 @@ export const DismissableBanner = forwardRef<
 
   return (
     <Banner ref={ref} variant={variant} {...rest}>
-      {icon && <MaterialIcon icon={icon} variant={iconVariant} />}
+      {icon && <Banner.Icon icon={icon} variant={iconVariant} />}
       <Banner.Content>{renderProps.children}</Banner.Content>
       {onDismiss && (
         <Banner.IconButton