@workday/canvas-kit-react/dist/es6/button/lib/ToolbarIconButton.js

The parent module that contains all Workday Canvas Kit React components

import * as React from 'react';
import { borderRadius, colors, space } from '@workday/canvas-kit-react/tokens';
import { focusRing, useTheme, createComponent, styled, } from '@workday/canvas-kit-react/common';
import { BaseButton } from './BaseButton';
import { brand } from '@workday/canvas-tokens-web';
const StyledToolbarIconButton = styled(BaseButton)({
    ['& .wd-icon']: {
        display: 'inline-block',
        width: 20,
        height: 20,
    },
    '&:focus-visible, &.focus': {
        ...focusRing({
            width: 2,
            separation: 0,
            innerColor: 'transparent',
            outerColor: brand.common.focusOutline,
        }),
    },
});
export const ToolbarIconButton = createComponent('button')({
    displayName: 'ToolbarIconButton',
    Component: ({ 
    // TODO: Fix useTheme and make it a real hook
    // eslint-disable-next-line react-hooks/rules-of-hooks
    theme = useTheme(), onToggleChange, icon, shouldMirrorIcon = 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 (React.createElement(StyledToolbarIconButton, { ref: ref, as: Element, colors: getToolbarIconButtonColors(theme, toggled), size: 'small', fillIcon: toggled, "aria-pressed": toggled, padding: "zero", minWidth: space.l, width: space.l, height: space.l, borderRadius: borderRadius.m, ...elemProps }, icon ? React.createElement(BaseButton.Icon, { icon: icon, shouldMirrorIcon: shouldMirrorIcon }) : children));
    },
});
const getToolbarIconButtonColors = (theme, toggled) => {
    const { canvas: { palette: { primary: themePrimary }, }, } = theme;
    return {
        default: {
            icon: toggled ? themePrimary.main : colors.licorice200,
            background: toggled ? themePrimary.lightest : 'transparent',
        },
        hover: {
            icon: toggled ? themePrimary.dark : colors.licorice500,
            background: colors.soap300,
        },
        active: {
            icon: toggled ? themePrimary.dark : colors.licorice500,
            background: colors.soap500,
        },
        focus: {
            icon: toggled ? themePrimary.main : colors.licorice200,
            background: toggled ? themePrimary.lightest : 'transparent',
        },
        disabled: {
            icon: toggled ? themePrimary.light : colors.soap600,
            background: toggled ? themePrimary.lightest : 'transparent',
            opacity: '1',
        },
    };
};