@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
30 lines (29 loc) • 3.42 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { brand, system } from '@workday/canvas-tokens-web';
import { calc, createStencil, handleCsProp, px2rem, cssVar } from '@workday/canvas-kit-styling';
import { chevronDownSmallIcon } from '@workday/canvas-system-icons-web';
import { focusRing, createComponent } from '@workday/canvas-kit-react/common';
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
import { BaseButton, buttonColorPropVars, buttonStencil } from './BaseButton';
export const toolbarDropdownButtonStencil = createStencil({
extends: buttonStencil,
parts: {
chevron: 'toolbar-dropdown-btn-arrow',
customIcon: 'toolbar-dropdown-btn-custom-icon',
},
base: { name: "zf9jf", styles: "box-sizing:border-box;padding:var(--cnvs-sys-space-zero);min-width:var(--cnvs-sys-space-x8);gap:var(--cnvs-sys-space-zero);--borderRadius-button-85bf0e:var(--cnvs-sys-shape-x1);--color-system-icon-3a4847:var(--icon-a1b49d, var(--cnvs-sys-color-fg-muted-soft));&:focus-visible, &.focus{--background-button-85bf0e:var(--cnvs-sys-color-bg-transparent-default);--color-system-icon-3a4847:var(--icon-553b51, var(--cnvs-sys-color-fg-muted-soft));box-shadow:0 0 0 0px var(--cnvs-sys-color-border-transparent), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--icon-846e8f, var(--cnvs-sys-color-fg-muted-stronger));}&:active, &.active{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-stronger);--color-system-icon-3a4847:var(--icon-3abb65, var(--cnvs-sys-color-fg-muted-stronger));}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-transparent-default);--color-system-icon-3a4847:var(--icon-74b26e, var(--cnvs-sys-color-fg-disabled));}[data-part=\"toolbar-dropdown-btn-custom-icon\"]{margin-inline-start:var(--cnvs-sys-space-x1);margin-inline-end:calc(0.125rem * -1);}[data-part=\"toolbar-dropdown-btn-arrow\"]{margin:0;margin-inline-end:0.125rem;}" },
modifiers: {
shouldMirrorIcon: {
true: { name: "2m88af", styles: "[data-part=\"toolbar-dropdown-btn-custom-icon\"]{margin-inline-end:0;margin-inline-start:0.125rem;}" }
},
shouldMirrorIconInRTL: {
true: { name: "vudks", styles: "&:dir(rtl) [data-part=\"toolbar-dropdown-btn-custom-icon\"]{margin-inline-end:0;margin-inline-start:0.125rem;}" }
}
}
}, "toolbar-dropdown-button-b3c13c");
export const ToolbarDropdownButton = createComponent('button')({
displayName: 'ToolbarDropdownButton',
Component: ({ icon, shouldMirrorIcon = false, shouldMirrorIconInRTL = false, children, ...elemProps }, ref, Element) => {
return (_jsxs(BaseButton, { ref: ref, as: Element, size: "small", ...handleCsProp(elemProps, toolbarDropdownButtonStencil({ shouldMirrorIcon, shouldMirrorIconInRTL })), children: [icon ? (_jsx(BaseButton.Icon, { className: "wdc-toolbar-dropdown-btn-custom-icon", icon: icon, shouldMirrorIcon: shouldMirrorIcon, shouldMirrorIconInRTL: shouldMirrorIconInRTL, ...toolbarDropdownButtonStencil.parts.customIcon })) : (children), _jsx(BaseButton.Icon, { className: "wdc-toolbar-dropdown-btn-arrow", icon: chevronDownSmallIcon, shouldMirrorIcon: shouldMirrorIcon, shouldMirrorIconInRTL: shouldMirrorIconInRTL, ...toolbarDropdownButtonStencil.parts.chevron })] }));
},
});