@homebound/beam 2.110.0 → 2.111.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -12,6 +12,8 @@ export interface IconButtonProps extends BeamButtonProps, BeamFocusableProps {
|
|
|
12
12
|
/** HTML attributes to apply to the button element when it is being used to trigger a menu. */
|
|
13
13
|
menuTriggerProps?: AriaButtonProps;
|
|
14
14
|
buttonRef?: RefObject<HTMLButtonElement>;
|
|
15
|
+
/** Whether to show a 16x16px version of the IconButton */
|
|
16
|
+
compact?: boolean;
|
|
15
17
|
}
|
|
16
18
|
export declare function IconButton(props: IconButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
17
19
|
export declare const iconButtonStylesHover: {
|
|
@@ -10,7 +10,7 @@ const Css_1 = require("../Css");
|
|
|
10
10
|
const utils_1 = require("../utils");
|
|
11
11
|
const useTestIds_1 = require("../utils/useTestIds");
|
|
12
12
|
function IconButton(props) {
|
|
13
|
-
const { onClick: onPress, disabled, color, icon, autoFocus, inc, buttonRef, tooltip, menuTriggerProps, openInNew, } = props;
|
|
13
|
+
const { onClick: onPress, disabled, color, icon, autoFocus, inc, buttonRef, tooltip, menuTriggerProps, openInNew, compact = false, } = props;
|
|
14
14
|
const isDisabled = !!disabled;
|
|
15
15
|
const ariaProps = { onPress, isDisabled, autoFocus, ...menuTriggerProps };
|
|
16
16
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
@@ -25,12 +25,13 @@ function IconButton(props) {
|
|
|
25
25
|
const testIds = (0, useTestIds_1.useTestIds)(props, icon);
|
|
26
26
|
const styles = (0, react_1.useMemo)(() => ({
|
|
27
27
|
...iconButtonStylesReset,
|
|
28
|
+
...(compact ? iconButtonCompact : iconButtonNormal),
|
|
28
29
|
...(isHovered && exports.iconButtonStylesHover),
|
|
29
30
|
...(isFocusVisible && iconButtonStylesFocus),
|
|
30
31
|
...(isDisabled && iconButtonStylesDisabled),
|
|
31
|
-
}), [isHovered, isFocusVisible, isDisabled]);
|
|
32
|
+
}), [isHovered, isFocusVisible, isDisabled, compact]);
|
|
32
33
|
const buttonAttrs = { ...testIds, ...buttonProps, ...focusProps, ...hoverProps, ref: ref, css: styles };
|
|
33
|
-
const buttonContent = ((0, jsx_runtime_1.jsx)(components_1.Icon, { icon: icon, color: color || (isDisabled ? Css_1.Palette.Gray400 : Css_1.Palette.Gray900), inc: inc }, void 0));
|
|
34
|
+
const buttonContent = ((0, jsx_runtime_1.jsx)(components_1.Icon, { icon: icon, color: color || (isDisabled ? Css_1.Palette.Gray400 : Css_1.Palette.Gray900), inc: compact ? 2 : inc }, void 0));
|
|
34
35
|
const button = typeof onPress === "string" ? ((0, utils_1.isAbsoluteUrl)(onPress) || openInNew ? ((0, jsx_runtime_1.jsx)("a", Object.assign({}, buttonAttrs, { href: onPress, className: components_1.navLink, target: "_blank", rel: "noreferrer noopener" }, { children: buttonContent }), void 0)) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({}, buttonAttrs, { to: onPress, className: components_1.navLink }, { children: buttonContent }), void 0))) : ((0, jsx_runtime_1.jsx)("button", Object.assign({}, buttonAttrs, { children: buttonContent }), void 0));
|
|
35
36
|
// If we're disabled b/c of a non-boolean ReactNode, or the caller specified tooltip text, then show it in a tooltip
|
|
36
37
|
return (0, components_1.maybeTooltip)({
|
|
@@ -40,7 +41,9 @@ function IconButton(props) {
|
|
|
40
41
|
});
|
|
41
42
|
}
|
|
42
43
|
exports.IconButton = IconButton;
|
|
43
|
-
const iconButtonStylesReset = Css_1.Css.
|
|
44
|
+
const iconButtonStylesReset = Css_1.Css.bTransparent.bsSolid.bgTransparent.cursorPointer.outline0.dif.aic.jcc.transition.$;
|
|
45
|
+
const iconButtonNormal = Css_1.Css.hPx(28).wPx(28).br8.bw2.$;
|
|
46
|
+
const iconButtonCompact = Css_1.Css.hPx(18).wPx(18).br4.bw1.$;
|
|
44
47
|
exports.iconButtonStylesHover = Css_1.Css.bgGray200.$;
|
|
45
48
|
const iconButtonStylesFocus = Css_1.Css.bLightBlue700.$;
|
|
46
49
|
const iconButtonStylesDisabled = Css_1.Css.cursorNotAllowed.$;
|