@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
69 lines (68 loc) • 2.59 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { colors, space, borderRadius } from '@workday/canvas-kit-react/tokens';
import { focusRing, useTheme, createComponent, styled, } from '@workday/canvas-kit-react/common';
import { BaseButton } from './BaseButton';
import { chevronDownSmallIcon } from '@workday/canvas-system-icons-web';
import { brand } from '@workday/canvas-tokens-web';
const StyledToolbarDropdownButton = styled(BaseButton)({
padding: space.zero,
minWidth: space.l,
width: 'auto',
height: space.l,
borderRadius: borderRadius.m,
gap: 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: `${space.xxxs}`,
marginRight: 0,
width: 18, // decrease the space between a custom icon and the chevron per design
},
'&:focus-visible, &.focus': {
...focusRing({
width: 2,
separation: 0,
innerColor: 'transparent',
outerColor: brand.common.focusOutline,
}),
},
});
export const ToolbarDropdownButton = createComponent('button')({
displayName: 'ToolbarDropdownButton',
Component: ({
// TODO: Fix useTheme and make it a real hook
// eslint-disable-next-line react-hooks/rules-of-hooks
theme = useTheme(), icon, shouldMirrorIcon = false, children, ...elemProps }, ref, Element) => {
return (_jsxs(StyledToolbarDropdownButton, { ref: ref, as: Element, colors: getToolbarDropdownButtonColors(theme), ...elemProps, children: [icon ? (_jsx(BaseButton.Icon, { className: 'wdc-toolbar-dropdown-btn-custom-icon', icon: icon, shouldMirrorIcon: shouldMirrorIcon })) : (children), _jsx(BaseButton.Icon, { className: 'wdc-toolbar-dropdown-btn-arrow', icon: chevronDownSmallIcon, shouldMirrorIcon: shouldMirrorIcon })] }));
},
});
const getToolbarDropdownButtonColors = (theme) => {
return {
default: {
icon: colors.licorice200,
},
hover: {
icon: colors.licorice500,
background: colors.soap300,
},
active: {
icon: colors.licorice500,
background: colors.soap500,
},
focus: {
icon: colors.licorice200,
background: 'transparent',
},
disabled: {
icon: colors.soap600,
background: 'transparent',
opacity: '1',
},
};
};