@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
30 lines (29 loc) • 3.99 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { createComponent, focusRing } from '@workday/canvas-kit-react/common';
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
import { calc, createStencil, cssVar, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
import { chevronDownSmallIcon } from '@workday/canvas-system-icons-web';
import { system } from '@workday/canvas-tokens-web';
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: "z3vod", styles: "box-sizing:border-box;padding:0;min-width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));gap:0;--borderRadius-button-a19f67:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));--color-system-icon-c9acc3:var(--icon-2f7547, var(--cnvs-sys-color-fg-default));--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--color-system-icon-c9acc3:var(--icon-5e7d9c, var(--cnvs-sys-color-fg-strong));box-shadow:0 0 0 0px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))), 0 0 0 2px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&:hover, &.hover{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));--color-system-icon-c9acc3:var(--icon-60f068, var(--cnvs-sys-color-fg-default));}&:active, &.active{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));--color-system-icon-c9acc3:var(--icon-76d965, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--color-system-icon-c9acc3:var(--icon-4fc0b7, var(--cnvs-sys-color-fg-default));}[data-part=\"toolbar-dropdown-btn-custom-icon\"]{margin-inline-start:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));margin-inline-end:calc(0.125rem * -1);}[data-part=\"toolbar-dropdown-btn-arrow\"]{margin:0;margin-inline-end:0.125rem;}" },
modifiers: {
shouldMirrorIcon: {
true: { name: "1khlli", styles: "[data-part=\"toolbar-dropdown-btn-custom-icon\"]{margin-inline-end:0;margin-inline-start:0.125rem;}" }
},
shouldMirrorIconInRTL: {
true: { name: "pq9nm", styles: "&:dir(rtl) [data-part=\"toolbar-dropdown-btn-custom-icon\"]{margin-inline-end:0;margin-inline-start:0.125rem;}" }
}
}
}, "toolbar-dropdown-button-71fd2f");
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 })] }));
},
});