@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
143 lines • 6.36 kB
TypeScript
import * as React from 'react';
import { GrowthBehavior } from '@workday/canvas-kit-react/common';
import { SystemIconProps } from '@workday/canvas-kit-react/icon';
import { ButtonColors, ButtonSizes, IconPositions } from './types';
import { CanvasSystemIcon } from '@workday/design-assets-types';
export interface ButtonContainerProps extends Partial<SystemIconProps>, GrowthBehavior {
/**
* Override default colors of a button. The default will depend on the button type
*/
colors?: ButtonColors;
/**
* There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
* If no size is provided, it will default to `medium`.
*
* @default 'medium
*/
size?: ButtonSizes;
/**
* The icon of the Button.
* Note: Not displayed at `small` size
*/
icon?: CanvasSystemIcon;
/**
* Whether the icon should received filled (colored background layer) or regular styles.
* Corresponds to `toggled` in ToolbarIconButton
*/
fillIcon?: boolean;
/**
* Button icon positions can either be `start` or `end`.
* If no value is provided, it defaults to `start`.
*
* @default 'start'
*/
iconPosition?: IconPositions;
/**
* If set to `true`, transform the icon's x-axis to mirror the graphic
* @default false
*/
shouldMirrorIcon?: boolean;
children?: React.ReactNode;
}
/**
* Extends all the style properties from Box to our buttons as well as props from ButtonContainerProps.
* We omit `ref` since all of our buttons use `createComponent` and already give access to `ref`.
* Use this type to extend and customize any one off buttons that you want full control over styling.
*/
export interface BaseButtonProps extends Omit<ButtonContainerProps, 'ref'> {
}
/**
* The purpose of this object is for the `colors` prop - to provide backwards compatibility with how we allowed color overrides in Emotion.
*/
export declare const buttonColorPropVars: {
default: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
focus: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
hover: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
active: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
disabled: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
};
/**
* Base styles for Buttons.
*/
export declare const buttonStencil: import("@workday/canvas-kit-styling").Stencil<{
/**
* Button modifiers that will overwrite the base styles of Buttons.
* - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
* - `iconPosition`: These modifiers will override the existing `Size` styles. These are specific to icon locations
* within a button or if there is only an icon and no text.
*/
size: {
large: {
fontWeight: "--cnvs-sys-font-weight-bold";
height: string;
paddingInline: "--cnvs-sys-space-x8";
minWidth: string;
fontFamily: "--cnvs-sys-font-family-default";
lineHeight: "--cnvs-sys-line-height-body-small";
fontSize: "--cnvs-sys-font-size-body-small";
letterSpacing: "--cnvs-base-letter-spacing-200";
};
medium: {
fontWeight: "--cnvs-sys-font-weight-bold";
minWidth: string;
paddingInline: "--cnvs-sys-space-x6";
height: "--cnvs-sys-space-x10";
fontFamily: "--cnvs-sys-font-family-default";
lineHeight: "--cnvs-sys-line-height-subtext-large";
fontSize: "--cnvs-sys-font-size-subtext-large";
letterSpacing: "--cnvs-base-letter-spacing-150";
};
small: {
fontWeight: "--cnvs-sys-font-weight-bold";
height: "--cnvs-sys-space-x8";
minWidth: "--cnvs-sys-space-x20";
paddingInline: "--cnvs-sys-space-x4";
gap: "--cnvs-sys-space-x1";
fontFamily: "--cnvs-sys-font-family-default";
lineHeight: "--cnvs-sys-line-height-subtext-large";
fontSize: "--cnvs-sys-font-size-subtext-large";
letterSpacing: "--cnvs-base-letter-spacing-150";
};
extraSmall: {
fontWeight: "--cnvs-sys-font-weight-bold";
height: "--cnvs-sys-space-x6";
minWidth: string;
paddingInline: "--cnvs-sys-space-x3";
gap: "--cnvs-sys-space-x1";
fontFamily: "--cnvs-sys-font-family-default";
lineHeight: "--cnvs-sys-line-height-subtext-medium";
fontSize: "--cnvs-sys-font-size-subtext-medium";
letterSpacing: "--cnvs-base-letter-spacing-100";
};
};
grow: {
true: {
width: string;
maxWidth: string;
};
};
iconPosition: {
only: {
padding: "--cnvs-sys-space-zero";
};
start: {};
end: {};
};
}, {}, {
background: string;
border: string;
boxShadowInner: string;
boxShadowOuter: string;
label: string;
opacity: string;
borderRadius: string;
}, never, never>;
/**
* The base button which which is the foundation of all Button variants (`PrimaryButton`,
* `SecondaryButton`, `TertiaryButton`, `DeleteButton`, `ToolbarIconButton` and `ToolbarDropdownButton`).
*/
export declare const BaseButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", ButtonContainerProps> & {
Icon: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("../lib/parts/ButtonLabelIcon").ButtonLabelIconProps>;
Label: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("../lib/parts/ButtonLabel").ButtonLabelProps>;
};
//# sourceMappingURL=BaseButton.d.ts.map