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

The parent module that contains all Workday Canvas Kit React components

import * as React from 'react';
import { canvas, borderRadius, type } from '@workday/canvas-kit-react/tokens';
import { focusRing, mouseFocusBehavior, createComponent, } from '@workday/canvas-kit-react/common';
import styled from '@emotion/styled';
const Container = styled('button')({
    fontFamily: type.properties.fontFamilies.default,
    fontSize: 14,
    fontWeight: 500,
    boxSizing: 'border-box',
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: borderRadius.circle,
    border: '1px solid transparent',
    boxShadow: 'none',
    position: 'relative',
    cursor: 'pointer',
    outline: 'none',
    transition: 'box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear',
    // Makes the "down" state of the button happens faster than the hover state, so it animates in correctly.
    '&:hover:active': { transitionDuration: '40ms' },
    '&:disabled, &:disabled:active': { cursor: 'default', boxShadow: 'none' },
}, ({ size }) => {
    switch (size) {
        case 'large':
            return {
                height: '40px',
                padding: `0 ${canvas.space.l}`,
                minWidth: '112px',
                maxWidth: '288px',
            };
        case 'medium':
        default:
            return {
                height: '24px',
                padding: `0 ${canvas.space.m}`,
                minWidth: '80px',
                maxWidth: '200px',
                fontSize: 13, // hardcoded value to prevent shifting from type changes
            };
        case 'small':
            return {
                height: '18px',
                padding: `0 ${canvas.space.xxs}`,
                minWidth: '56px',
                maxWidth: '120px',
                fontSize: 10,
                lineHeight: 'normal',
            };
    }
}, ({ grow }) => grow && { width: '100%', maxWidth: '100%' }, ({ variant }) => {
    let buttonColors;
    switch (variant) {
        case 'primary':
            buttonColors = canvas.buttonColors.primary;
            break;
        case 'secondary':
        default:
            buttonColors = canvas.buttonColors.secondary;
            break;
        case 'delete':
            buttonColors = {
                ...canvas.buttonColors.delete,
                focusBorder: canvas.colors.cinnamon500,
                activeBorder: canvas.colors.cinnamon500,
            };
            break;
    }
    if (!buttonColors) {
        return {};
    }
    const baseStyles = {
        backgroundColor: buttonColors.background,
        borderColor: buttonColors.border,
        color: buttonColors.text,
    };
    const hoverStyles = {
        ':hover': {
            backgroundColor: buttonColors.hoverBackground,
            borderColor: buttonColors.hoverBorder,
            color: buttonColors.hoverText,
        },
    };
    const activeStyles = {
        ':active, :focus:active, :hover:active': {
            backgroundColor: buttonColors.activeBackground,
            borderColor: buttonColors.activeBorder,
            color: buttonColors.activeText,
        },
    };
    return {
        ...baseStyles,
        ':focus': {
            backgroundColor: buttonColors.focusBackground,
            borderColor: buttonColors.focusBorder,
            color: buttonColors.focusText,
        },
        ...activeStyles,
        ...hoverStyles,
        ':disabled, :active:disabled, :focus:disabled, :hover:disabled': {
            backgroundColor: buttonColors.disabledBackground,
            borderColor: buttonColors.disabledBorder,
            color: buttonColors.disabledText,
        },
        '&:not([disabled])': {
            '&:focus': {
                borderColor: buttonColors.focusBorder,
                ...focusRing(),
            },
            '&:active': {
                borderColor: buttonColors.activeBorder,
                ...focusRing(),
            },
        },
        ...mouseFocusBehavior({
            '&:focus': {
                ...baseStyles,
                outline: 'none',
                boxShadow: 'none',
                animation: 'none',
                ...hoverStyles,
                ...activeStyles,
            },
        }),
    };
});
export const DeprecatedButton = createComponent('button')({
    displayName: 'DeprecatedButton',
    Component: ({ variant = 'secondary', size = 'large', children, ...elemProps }, ref, Element) => {
        React.useEffect(() => {
            console.warn('This component is now deprecated, consider using the new Button component');
        }, []);
        return (React.createElement(Container, { ref: ref, as: Element, variant: variant, size: size, ...elemProps }, children));
    },
});