@homebound/beam 2.372.1 → 2.373.0

package/README.md

@@ -25,7 +25,9 @@ _To see the latest designs, check out the [Figma](https://www.figma.com/file/aWU
 
 ## Beam's API Design Approach
 
-Beam is specifically "Homebound's Design System". Given this extremely narrow purpose, we can lean into the simplicity of:
+tldr: **Consistency & Brevity** over **Power & Flexibility**.
+
+Beam is "_Homebound's_ Design System". Given this extremely narrow purpose, we can lean into the simplicity of:
 
 - We don't need to support everything for everyone
 - We can prefer API/UX consistency & simplicity over configuration & complexity

package/dist/components/Icon.d.ts

@@ -6,6 +6,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 */

package/dist/components/Icon.js

@@ -9,12 +9,12 @@ const react_1 = __importDefault(require("react"));
 const Tooltip_1 = require("./Tooltip");
 const Css_1 = require("../Css");
 exports.Icon = react_1.default.memo((props) => {
-    const { icon, inc = 3, color = "currentColor", xss, tooltip, ...other } = props;
+    const { icon, inc = 3, color = "currentColor", bgColor, xss, tooltip, ...other } = props;
     const size = (0, Css_1.increment)(inc);
     return (0, Tooltip_1.maybeTooltip)({
         title: tooltip,
         placement: "top",
-        children: ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": true, width: size, height: size, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", css: { "path, rect": Css_1.Css.fill(color).$, ...xss }, "data-icon": icon, ...other, children: exports.Icons[icon] })),
+        children: ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": true, width: size, height: size, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", css: { "path, rect": Css_1.Css.fill(color).$, ...(bgColor && Css_1.Css.bgColor(bgColor).$), ...xss }, "data-icon": icon, ...other, children: exports.Icons[icon] })),
     });
 });
 /**

package/dist/components/IconButton.d.ts

@@ -7,6 +7,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. */

package/dist/components/IconButton.js

@@ -12,7 +12,7 @@ const utils_1 = require("../utils");
 const getInteractiveElement_1 = require("../utils/getInteractiveElement");
 const useTestIds_1 = require("../utils/useTestIds");
 function IconButton(props) {
-    const { onClick: onPress, disabled, color, icon, autoFocus, inc, buttonRef, tooltip, menuTriggerProps, openInNew, compact = false, contrast = false, download = false, forceFocusStyles = false, label, } = props;
+    const { onClick: onPress, disabled, color, bgColor, icon, autoFocus, inc, buttonRef, tooltip, menuTriggerProps, openInNew, compact = false, contrast = false, download = false, forceFocusStyles = false, label, } = props;
     const isDisabled = !!disabled;
     const ariaProps = { onPress, isDisabled, autoFocus, ...menuTriggerProps };
     const ref = (0, useGetRef_1.useGetRef)(buttonRef);
@@ -30,6 +30,7 @@ function IconButton(props) {
         ...(isHovered && (contrast ? exports.iconButtonContrastStylesHover : exports.iconButtonStylesHover)),
         ...(isFocusVisible || forceFocusStyles ? iconButtonStylesFocus : {}),
         ...(isDisabled && iconButtonStylesDisabled),
+        ...(bgColor && Css_1.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
@@ -45,7 +46,7 @@ function IconButton(props) {
         css: styles,
         "aria-label": label,
     };
-    const buttonContent = ((0, jsx_runtime_1.jsx)(components_1.Icon, { icon: icon, color: color || (isDisabled ? Css_1.Palette.Gray400 : iconColor), inc: compact ? 2 : inc }));
+    const buttonContent = ((0, jsx_runtime_1.jsx)(components_1.Icon, { icon: icon, color: color || (isDisabled ? Css_1.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
     return (0, components_1.maybeTooltip)({
         title: (0, components_1.resolveTooltip)(disabled, tooltip),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.372.1",
+  "version": "2.373.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",