@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
28 lines (27 loc) • 3 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import { focusRing, createComponent } from '@workday/canvas-kit-react/common';
import { BaseButton, buttonStencil } from './BaseButton';
import { brand, system } from '@workday/canvas-tokens-web';
import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
export const toolbarIconButtonStencil = createStencil({
extends: buttonStencil,
base: { name: "3xsyht", styles: "box-sizing:border-box;min-width:var(--cnvs-sys-space-x8);padding:var(--cnvs-sys-space-zero);height:var(--cnvs-sys-space-x8);--borderRadius-button-85bf0e:var(--cnvs-sys-shape-x1);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-soft);&:focus-visible, &.focus{--color-system-icon-3a4847: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(--cnvs-sys-color-fg-muted-stronger);}&:active, &.active{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-transparent-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);}&[aria-pressed='true']{--color-system-icon-3a4847:var(--cnvs-brand-primary-base);--background-button-85bf0e:var(--cnvs-brand-primary-lightest);&:hover, &.hover{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-brand-primary-dark);}&:active, &.active{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-stronger);--color-system-icon-3a4847:var(--cnvs-brand-primary-dark);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-brand-primary-lightest);--color-system-icon-3a4847:var(--cnvs-brand-primary-light);}}" }
}, "toolbar-icon-button-5efdf6");
export const ToolbarIconButton = createComponent('button')({
displayName: 'ToolbarIconButton',
Component: ({ onToggleChange, icon, shouldMirrorIcon = false, shouldMirrorIconInRTL = false, toggled, children, ...elemProps }, ref, Element) => {
const isInitialMount = React.useRef(true);
// Only call onToggleChange on update - not on first mount
React.useEffect(() => {
if (isInitialMount.current) {
isInitialMount.current = false;
}
else if (toggled && typeof onToggleChange === 'function') {
onToggleChange(toggled);
}
}, [toggled, onToggleChange]);
return (_jsx(BaseButton, { ref: ref, as: Element, size: "small", fillIcon: toggled, "aria-pressed": toggled, ...handleCsProp(elemProps, toolbarIconButtonStencil()), children: icon ? (_jsx(BaseButton.Icon, { icon: icon, shouldMirrorIcon: shouldMirrorIcon, shouldMirrorIconInRTL: shouldMirrorIconInRTL })) : (children) }));
},
});