UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

23 lines (22 loc) 2.47 kB
import * as React from 'react'; import { buttonColorPropVars, buttonStencil } from './BaseButton'; import { createComponent } from '@workday/canvas-kit-react/common'; import { createStencil, cssVar } from '@workday/canvas-kit-styling'; import { brand, system } from '@workday/canvas-tokens-web'; import { Button } from './Button'; import { systemIconStencil } from '@workday/canvas-kit-react/icon'; const deleteButtonStencil = createStencil({ extends: buttonStencil, base: { name: "d5h42k", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-brand-error-base);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-212f69:var(--icon-b5fb58, var(--cnvs-brand-error-accent));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-error-base);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-212f69:var(--icon-2ae7b1, var(--cnvs-brand-error-accent));--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-brand-error-dark);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-212f69:var(--icon-c4b8f8, var(--cnvs-brand-error-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-brand-error-darkest);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-212f69:var(--icon-93b1ce, var(--cnvs-brand-error-accent));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-brand-error-base);--label-button-65cb05:var(--cnvs-brand-error-accent);--color-system-icon-212f69:var(--icon-c34400, var(--cnvs-brand-error-accent));--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);}" } }, "delete-button-880e51"); /** * Use sparingly for destructive actions that will result in data loss, can’t be undone, or will * have significant consequences. They commonly appear in confirmation dialogs as the final * confirmation before being deleted. */ export const DeleteButton = createComponent('button')({ displayName: 'DeleteButton', Component: ({ children, size, iconPosition, grow, cs, ...elemProps }, ref, Element) => { return (React.createElement(Button, { as: Element, ref: ref, size: size, grow: grow, iconPosition: iconPosition, cs: [deleteButtonStencil({ size, iconPosition }), cs], ...elemProps }, children)); }, });