feat: adding icon bg color param (#1095)

Co-authored-by: JonnCh <[email protected]>
homebound-team · Dec 11, 2024 · d5d181a · d5d181a
1 parent 2f92c99
commit d5d181a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
@@ -8,6 +8,7 @@ export interface IconProps extends AriaAttributes, DOMProps {
   icon: IconKey;
   /** Defaults to currentColor */
   color?: Palette | "inherit" | "currentColor";
+  bgColor?: Palette;
   /** The size of the icon in increments, i.e. 1 == 8px, default is 3 == 24px. */
   inc?: number;
   /** Styles overrides */
@@ -16,7 +17,7 @@ export interface IconProps extends AriaAttributes, DOMProps {
 }
 
 export const Icon = React.memo((props: IconProps) => {
-  const { icon, inc = 3, color = "currentColor", xss, tooltip, ...other } = props;
+  const { icon, inc = 3, color = "currentColor", bgColor, xss, tooltip, ...other } = props;
   const size = increment(inc);
   return maybeTooltip({
     title: tooltip,
@@ -28,7 +29,7 @@ export const Icon = React.memo((props: IconProps) => {
         height={size}
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
-        css={{ "path, rect": Css.fill(color).$, ...xss }}
+        css={{ "path, rect": Css.fill(color).$, ...(bgColor && Css.bgColor(bgColor).$), ...xss }}
         data-icon={icon}
         {...other}
       >

diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
@@ -13,6 +13,7 @@ export interface IconButtonProps extends BeamButtonProps, BeamFocusableProps {
   /** The icon to use within the button. */
   icon: IconProps["icon"];
   color?: Palette;
+  bgColor?: Palette;
   /** The size of the icon, in increments, defaults to 3 which is 24px. */
   inc?: number;
   /** HTML attributes to apply to the button element when it is being used to trigger a menu. */
@@ -33,6 +34,7 @@ export function IconButton(props: IconButtonProps) {
     onClick: onPress,
     disabled,
     color,
+    bgColor,
     icon,
     autoFocus,
     inc,
@@ -68,6 +70,7 @@ export function IconButton(props: IconButtonProps) {
       ...(isHovered && (contrast ? iconButtonContrastStylesHover : iconButtonStylesHover)),
       ...(isFocusVisible || forceFocusStyles ? iconButtonStylesFocus : {}),
       ...(isDisabled && iconButtonStylesDisabled),
+      ...(bgColor && Css.bgColor(bgColor).$),
     }),
     // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -86,7 +89,12 @@ export function IconButton(props: IconButtonProps) {
     "aria-label": label,
   };
   const buttonContent = (
-    <Icon icon={icon} color={color || (isDisabled ? Palette.Gray400 : iconColor)} inc={compact ? 2 : inc} />
+    <Icon
+      icon={icon}
+      color={color || (isDisabled ? Palette.Gray400 : iconColor)}
+      bgColor={bgColor}
+      inc={compact ? 2 : inc}
+    />
   );
 
   // If we're disabled b/c of a non-boolean ReactNode, or the caller specified tooltip text, then show it in a tooltip