@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
72 lines (71 loc) • 2.97 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToolbarDropdownButton = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const tokens_1 = require("@workday/canvas-kit-react/tokens");
const common_1 = require("@workday/canvas-kit-react/common");
const BaseButton_1 = require("./BaseButton");
const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const StyledToolbarDropdownButton = (0, common_1.styled)(BaseButton_1.BaseButton)({
padding: tokens_1.space.zero,
minWidth: tokens_1.space.l,
width: 'auto',
height: tokens_1.space.l,
borderRadius: tokens_1.borderRadius.m,
gap: tokens_1.space.zero,
'& .wd-icon': {
display: 'inline-block',
width: 20,
height: 20,
},
'& .wdc-toolbar-dropdown-btn-arrow': {
margin: '0 2px 0 0',
},
'& .wdc-toolbar-dropdown-btn-custom-icon': {
marginLeft: `${tokens_1.space.xxxs}`,
marginRight: 0,
width: 18, // decrease the space between a custom icon and the chevron per design
},
'&:focus-visible, &.focus': {
...(0, common_1.focusRing)({
width: 2,
separation: 0,
innerColor: 'transparent',
outerColor: canvas_tokens_web_1.brand.common.focusOutline,
}),
},
});
exports.ToolbarDropdownButton = (0, common_1.createComponent)('button')({
displayName: 'ToolbarDropdownButton',
Component: ({
// TODO: Fix useTheme and make it a real hook
// eslint-disable-next-line react-hooks/rules-of-hooks
theme = (0, common_1.useTheme)(), icon, shouldMirrorIcon = false, children, ...elemProps }, ref, Element) => {
return ((0, jsx_runtime_1.jsxs)(StyledToolbarDropdownButton, { ref: ref, as: Element, colors: getToolbarDropdownButtonColors(theme), ...elemProps, children: [icon ? ((0, jsx_runtime_1.jsx)(BaseButton_1.BaseButton.Icon, { className: 'wdc-toolbar-dropdown-btn-custom-icon', icon: icon, shouldMirrorIcon: shouldMirrorIcon })) : (children), (0, jsx_runtime_1.jsx)(BaseButton_1.BaseButton.Icon, { className: 'wdc-toolbar-dropdown-btn-arrow', icon: canvas_system_icons_web_1.chevronDownSmallIcon, shouldMirrorIcon: shouldMirrorIcon })] }));
},
});
const getToolbarDropdownButtonColors = (theme) => {
return {
default: {
icon: tokens_1.colors.licorice200,
},
hover: {
icon: tokens_1.colors.licorice500,
background: tokens_1.colors.soap300,
},
active: {
icon: tokens_1.colors.licorice500,
background: tokens_1.colors.soap500,
},
focus: {
icon: tokens_1.colors.licorice200,
background: 'transparent',
},
disabled: {
icon: tokens_1.colors.soap600,
background: 'transparent',
opacity: '1',
},
};
};