@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
101 lines (100 loc) • 8.15 kB
JavaScript
import * as React from 'react';
import { buttonColorPropVars, buttonStencil } from './BaseButton';
import { createComponent, focusRing } from '@workday/canvas-kit-react/common';
import { calc, createStencil, cssVar } from '@workday/canvas-kit-styling';
import { system, brand } from '@workday/canvas-tokens-web';
import { Button } from './Button';
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
const tertiaryButtonStencil = createStencil({
extends: buttonStencil,
// Base Styles
base: { name: "d5h41w", styles: "box-sizing:border-box;padding-inline:var(--cnvs-sys-space-x2);min-width:auto;text-decoration:underline;border:var(--cnvs-sys-space-zero);--background-button-65cb05:transparent;--borderRadius-button-65cb05:var(--cnvs-sys-shape-x1);--label-button-65cb05:var(--cnvs-brand-primary-base);--color-system-icon-212f69:var(--icon-b5fb58, var(--cnvs-brand-primary-base));&:focus-visible, &.focus{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-brand-primary-base);--boxShadowInner-button-65cb05:var(--cnvs-brand-common-focus-outline);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-212f69:var(--icon-2ae7b1, var(--cnvs-brand-primary-base));box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--label-button-65cb05:var(--cnvs-brand-primary-dark);--color-system-icon-212f69:var(--icon-c4b8f8, var(--cnvs-brand-primary-dark));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-brand-primary-darkest);--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-brand-primary-darkest));}&:disabled, &.disabled{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-brand-primary-base);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-brand-primary-base));}" },
modifiers: {
// IconPosition Styles
iconPosition: {
only: { name: "d5h41x", styles: "padding:0;border-radius:var(--cnvs-sys-shape-round);--color-system-icon-212f69:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--color-system-icon-212f69:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--color-system-icon-212f69:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--color-system-icon-212f69:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
start: { name: "d5h41y", styles: "" },
end: { name: "d5h41z", styles: "" }
},
isThemeable: {
true: { name: "d5h420", styles: "--color-system-icon-212f69:var(--icon-b5fb58, var(--cnvs-brand-primary-base));&:focus-visible, &.focus{--color-system-icon-212f69:var(--icon-2ae7b1, var(--cnvs-brand-primary-base));}&:hover, &.hover{--color-system-icon-212f69:var(--icon-c4b8f8, var(--cnvs-brand-primary-dark));}&:active, &.active{--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-brand-primary-darkest));}&:disabled, &.disabled{--color-system-icon-212f69:var(--icon-c34400, var(--cnvs-brand-primary-base));}" }
},
variant: {
// Inverse Styles
inverse: { name: "d5h421", styles: "--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-212f69:var(--icon-b5fb58, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-212f69:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));box-shadow:inset 0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-212f69:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-212f69:var(--icon-c34400, var(--cnvs-sys-color-fg-inverse));}" }
}
},
// Compound Modifier Styles
compound: [
{
modifiers: { size: 'large', iconPosition: 'only' },
styles: { name: "d5h422", styles: "min-width:calc(var(--cnvs-sys-space-x4) * 3);" }
},
{
modifiers: { size: 'large', iconPosition: 'start' },
styles: { name: "d5h423", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
},
{
modifiers: { size: 'large', iconPosition: 'end' },
styles: { name: "d5h424", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
},
{
modifiers: { size: 'medium', iconPosition: 'only' },
styles: { name: "d5h425", styles: "min-width:var(--cnvs-sys-space-x10);" }
},
{
modifiers: { size: 'medium', iconPosition: 'start' },
styles: { name: "d5h426", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
},
{
modifiers: { size: 'medium', iconPosition: 'end' },
styles: { name: "d5h427", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
},
{
modifiers: { size: 'small', iconPosition: 'only' },
styles: { name: "d5h428", styles: "min-width:var(--cnvs-sys-space-x8);" }
},
{
modifiers: { size: 'small', iconPosition: 'start' },
styles: { name: "d5h429", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
},
{
modifiers: { size: 'small', iconPosition: 'end' },
styles: { name: "d5h42a", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
},
{
modifiers: { size: 'extraSmall', iconPosition: 'only' },
styles: { name: "d5h42b", styles: "min-width:var(--cnvs-sys-space-x6);" }
},
{
modifiers: { size: 'extraSmall', iconPosition: 'start' },
styles: { name: "d5h42c", styles: "padding-inline-start:var(--cnvs-sys-space-x1);padding-inline-end:var(--cnvs-sys-space-x2);" }
},
{
modifiers: { size: 'extraSmall', iconPosition: 'end' },
styles: { name: "d5h42d", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x1);" }
}
]
}, "tertiary-button-4896ac");
export const TertiaryButton = createComponent('button')({
displayName: 'TertiaryButton',
Component: ({ children, icon, isThemeable, size = 'medium', variant, iconPosition, grow, cs, ...elemProps }, ref, Element) => {
const baseIconPosition = iconPosition
? iconPosition
: icon
? children
? 'start'
: 'only'
: undefined;
return (React.createElement(Button, { as: Element, ref: ref, icon: icon, size: size, iconPosition: iconPosition, grow: grow, cs: [
tertiaryButtonStencil({
size,
variant,
grow,
isThemeable: (isThemeable || baseIconPosition !== 'only'),
iconPosition: baseIconPosition,
}),
cs,
], ...elemProps }, children));
},
});