@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
33 lines (32 loc) • 3.7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToolbarDropdownButton = exports.toolbarDropdownButtonStencil = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
const common_1 = require("@workday/canvas-kit-react/common");
const icon_1 = require("@workday/canvas-kit-react/icon");
const BaseButton_1 = require("./BaseButton");
exports.toolbarDropdownButtonStencil = (0, canvas_kit_styling_1.createStencil)({
extends: BaseButton_1.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");
exports.ToolbarDropdownButton = (0, common_1.createComponent)('button')({
displayName: 'ToolbarDropdownButton',
Component: ({ icon, shouldMirrorIcon = false, shouldMirrorIconInRTL = false, children, ...elemProps }, ref, Element) => {
return ((0, jsx_runtime_1.jsxs)(BaseButton_1.BaseButton, { ref: ref, as: Element, size: "small", ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.toolbarDropdownButtonStencil)({ shouldMirrorIcon, shouldMirrorIconInRTL })), children: [icon ? ((0, jsx_runtime_1.jsx)(BaseButton_1.BaseButton.Icon, { className: "wdc-toolbar-dropdown-btn-custom-icon", icon: icon, shouldMirrorIcon: shouldMirrorIcon, shouldMirrorIconInRTL: shouldMirrorIconInRTL, ...exports.toolbarDropdownButtonStencil.parts.customIcon })) : (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, shouldMirrorIconInRTL: shouldMirrorIconInRTL, ...exports.toolbarDropdownButtonStencil.parts.chevron })] }));
},
});