@homebound/beam 2.395.0 → 2.397.0

package/README.md

@@ -47,6 +47,16 @@ For them, a MUI application in Company A shouldn't have to look & behave exactly
 
 But for Beam at Homebound, we specifically _want_ a component that behaves in our App A to look & behave the same as it does in our App B.
 
+## Adding Props Checklist
+
+When designers have new Figmas, or give UX feedback, that would require adding new stylistic props to Beam components (i.e. props to change color, size, layout, etc), we should:
+
+- Let them know their change doesn't match the existing Beam style, and confirm they really meant for this to be a non-standard change (discouraged).
+
+- Ask them if they want this change to be rolled out app-wide, which would be fine & means we can avoid adding the per-page props (preferred).
+
+- If they insist this is both a necessary change, but not app-wide, can we describe this ask as a "variant" or "style" or other "high-level knob", that is not making pages pick individual, low-level pixels and color values (fine now & then).
+
 ## Beam and Open Source
 
 As we open source Beam, this vision of "as few props as possible", "components must look _the same_ in every app" doesn't seem like something that other companies/projects would adopt (i.e. surely they want different colors, slightly different behavior to suit their user base, etc.).

package/dist/index.cjs

@@ -4543,7 +4543,7 @@ function pluralize(count, noun, pluralNoun) {
 // src/components/Tooltip.tsx
 var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
 function Tooltip(props) {
-  const { placement, children, title, disabled, delay = 0, bgColor } = props;
+  const { placement, children, title, disabled, delay = 0, bgColor, xss } = props;
   const state = (0, import_react_stately.useTooltipTriggerState)({ delay, isDisabled: disabled });
   const triggerRef = (0, import_react3.useRef)(null);
   const { triggerProps, tooltipProps: _tooltipProps } = (0, import_react_aria.useTooltipTrigger)({ isDisabled: disabled }, state, triggerRef);
@@ -4570,12 +4570,13 @@ function Tooltip(props) {
         triggerRef,
         content: title,
         placement,
-        bgColor
+        bgColor,
+        xss
       }
     )
   ] });
 }
-function Popper({ triggerRef, content, placement = "auto", bgColor = "rgba(36, 36, 36, 1)" /* Gray900 */ }) {
+function Popper({ triggerRef, content, placement = "auto", xss, bgColor = "rgba(36, 36, 36, 1)" /* Gray900 */ }) {
   const popperRef = (0, import_react3.useRef)(null);
   const [arrowRef, setArrowRef] = (0, import_react3.useState)(null);
   const targetElement = triggerRef.current ? triggerRef.current.children[0] ?? triggerRef.current.parentElement : null;
@@ -4593,7 +4594,10 @@ function Popper({ triggerRef, content, placement = "auto", bgColor = "rgba(36, 3
         ref: popperRef,
         style: styles.popper,
         ...attributes.popper,
-        css: Css.maxw("320px").bgColor(bgColor).bshBasic.white.px1.py("4px").br4.xs.add("zIndex", 999999).$,
+        css: {
+          ...Css.maxw("320px").bgColor(bgColor).bshBasic.white.px1.py("4px").br4.xs.z(999999).$,
+          ...xss
+        },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: setArrowRef, style: { ...styles.arrow }, id: "arrow" }),
           content
@@ -5747,7 +5751,7 @@ function IconButton(props) {
     }
   );
   return maybeTooltip({
-    title: resolveTooltip(disabled, tooltip),
+    title: resolveTooltip(disabled ?? label, tooltip),
     placement: "top",
     children: getButtonOrLink(buttonContent, onPress, buttonAttrs, openInNew, download)
   });