diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index b5f6bde15..328ea2a94 100644 --- 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 index 6f4f61840..d84466b57 100644 --- 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 = ( - + ); // If we're disabled b/c of a non-boolean ReactNode, or the caller specified tooltip text, then show it in a tooltip