@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
77 lines (76 loc) • 3.14 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToolbarDropdownButton = void 0;
const react_1 = __importDefault(require("react"));
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 (react_1.default.createElement(StyledToolbarDropdownButton, { ref: ref, as: Element, colors: getToolbarDropdownButtonColors(theme), ...elemProps },
icon ? (react_1.default.createElement(BaseButton_1.BaseButton.Icon, { className: 'wdc-toolbar-dropdown-btn-custom-icon', icon: icon, shouldMirrorIcon: shouldMirrorIcon })) : (children),
react_1.default.createElement(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',
},
};
};