@workday/canvas-kit-react 11.0.0-alpha.767-next.0 → 11.0.0-alpha.770-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/button/lib/BaseButton.tsx +260 -204
- package/button/lib/Button.tsx +1 -4
- package/button/lib/DeleteButton.tsx +42 -38
- package/button/lib/PrimaryButton.tsx +74 -71
- package/button/lib/SecondaryButton.tsx +85 -87
- package/button/lib/TertiaryButton.tsx +214 -132
- package/dist/commonjs/button/lib/BaseButton.d.ts +70 -29
- package/dist/commonjs/button/lib/BaseButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/BaseButton.js +98 -55
- package/dist/commonjs/button/lib/Button.d.ts.map +1 -1
- package/dist/commonjs/button/lib/Button.js +1 -2
- package/dist/commonjs/button/lib/DeleteButton.d.ts +1 -1
- package/dist/commonjs/button/lib/DeleteButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/DeleteButton.js +9 -6
- package/dist/commonjs/button/lib/PrimaryButton.d.ts +0 -5
- package/dist/commonjs/button/lib/PrimaryButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/PrimaryButton.js +14 -10
- package/dist/commonjs/button/lib/SecondaryButton.d.ts +0 -5
- package/dist/commonjs/button/lib/SecondaryButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/SecondaryButton.js +13 -10
- package/dist/commonjs/button/lib/TertiaryButton.d.ts +0 -22
- package/dist/commonjs/button/lib/TertiaryButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/TertiaryButton.js +80 -35
- package/dist/es6/button/lib/BaseButton.d.ts +70 -29
- package/dist/es6/button/lib/BaseButton.d.ts.map +1 -1
- package/dist/es6/button/lib/BaseButton.js +99 -54
- package/dist/es6/button/lib/Button.d.ts.map +1 -1
- package/dist/es6/button/lib/Button.js +1 -2
- package/dist/es6/button/lib/DeleteButton.d.ts +1 -1
- package/dist/es6/button/lib/DeleteButton.d.ts.map +1 -1
- package/dist/es6/button/lib/DeleteButton.js +12 -9
- package/dist/es6/button/lib/PrimaryButton.d.ts +0 -5
- package/dist/es6/button/lib/PrimaryButton.d.ts.map +1 -1
- package/dist/es6/button/lib/PrimaryButton.js +15 -11
- package/dist/es6/button/lib/SecondaryButton.d.ts +0 -5
- package/dist/es6/button/lib/SecondaryButton.d.ts.map +1 -1
- package/dist/es6/button/lib/SecondaryButton.js +15 -12
- package/dist/es6/button/lib/TertiaryButton.d.ts +0 -22
- package/dist/es6/button/lib/TertiaryButton.d.ts.map +1 -1
- package/dist/es6/button/lib/TertiaryButton.js +82 -37
- package/package.json +4 -4
|
@@ -17,7 +17,7 @@ export interface ButtonContainerProps extends Partial<SystemIconProps>, GrowthBe
|
|
|
17
17
|
size?: ButtonSizes;
|
|
18
18
|
/**
|
|
19
19
|
* The icon of the Button.
|
|
20
|
-
* Note:
|
|
20
|
+
* Note: Not displayed at `small` size
|
|
21
21
|
*/
|
|
22
22
|
icon?: CanvasSystemIcon;
|
|
23
23
|
/**
|
|
@@ -47,47 +47,88 @@ export interface ButtonContainerProps extends Partial<SystemIconProps>, GrowthBe
|
|
|
47
47
|
export interface BaseButtonProps extends Omit<ButtonContainerProps, 'ref'> {
|
|
48
48
|
}
|
|
49
49
|
/**
|
|
50
|
-
*
|
|
50
|
+
* The purpose of this object is for the `colors` prop - to provide backwards compatibility with how we allowed color overrides in Emotion.
|
|
51
51
|
*/
|
|
52
|
-
export declare const
|
|
52
|
+
export declare const buttonColorPropVars: {
|
|
53
53
|
default: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
|
|
54
|
+
focus: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
|
|
54
55
|
hover: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
|
|
55
56
|
active: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
|
|
56
|
-
focus: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
|
|
57
57
|
disabled: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
|
|
58
58
|
};
|
|
59
59
|
/**
|
|
60
|
-
*
|
|
61
|
-
* - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
|
|
62
|
-
* - `iconPosition`: These modifiers will override the existing `Size` styles. These are specific to icon locations
|
|
63
|
-
* within a button or if there is only an icon and no text.
|
|
60
|
+
* Base styles for Buttons.
|
|
64
61
|
*/
|
|
65
|
-
export declare const
|
|
62
|
+
export declare const buttonStencil: import("@workday/canvas-kit-styling").Stencil<{
|
|
63
|
+
/**
|
|
64
|
+
* Button modifiers that will overwrite the base styles of Buttons.
|
|
65
|
+
* - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
|
|
66
|
+
* - `iconPosition`: These modifiers will override the existing `Size` styles. These are specific to icon locations
|
|
67
|
+
* within a button or if there is only an icon and no text.
|
|
68
|
+
*/
|
|
66
69
|
size: {
|
|
67
|
-
large:
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
70
|
+
large: {
|
|
71
|
+
fontWeight: "--cnvs-sys-font-weight-bold";
|
|
72
|
+
height: string;
|
|
73
|
+
paddingInline: "--cnvs-sys-space-x8";
|
|
74
|
+
minWidth: string;
|
|
75
|
+
fontFamily: "--cnvs-base-font-family-50";
|
|
76
|
+
lineHeight: "--cnvs-base-line-height-150";
|
|
77
|
+
fontSize: "--cnvs-base-font-size-100";
|
|
78
|
+
letterSpacing: "--cnvs-base-letter-spacing-200";
|
|
79
|
+
};
|
|
80
|
+
medium: {
|
|
81
|
+
fontWeight: "--cnvs-sys-font-weight-bold";
|
|
82
|
+
minWidth: string;
|
|
83
|
+
paddingInline: "--cnvs-sys-space-x6";
|
|
84
|
+
height: "--cnvs-sys-space-x10";
|
|
85
|
+
fontFamily: "--cnvs-base-font-family-50";
|
|
86
|
+
lineHeight: "--cnvs-base-line-height-100";
|
|
87
|
+
fontSize: "--cnvs-base-font-size-75";
|
|
88
|
+
letterSpacing: "--cnvs-base-letter-spacing-150";
|
|
89
|
+
};
|
|
90
|
+
small: {
|
|
91
|
+
fontWeight: "--cnvs-sys-font-weight-bold";
|
|
92
|
+
height: "--cnvs-sys-space-x8";
|
|
93
|
+
minWidth: "--cnvs-sys-space-x20";
|
|
94
|
+
paddingInline: "--cnvs-sys-space-x4";
|
|
95
|
+
gap: "--cnvs-sys-space-x1";
|
|
96
|
+
fontFamily: "--cnvs-base-font-family-50";
|
|
97
|
+
lineHeight: "--cnvs-base-line-height-100";
|
|
98
|
+
fontSize: "--cnvs-base-font-size-75";
|
|
99
|
+
letterSpacing: "--cnvs-base-letter-spacing-150";
|
|
100
|
+
};
|
|
101
|
+
extraSmall: {
|
|
102
|
+
fontWeight: "--cnvs-sys-font-weight-bold";
|
|
103
|
+
height: "--cnvs-sys-space-x6";
|
|
104
|
+
minWidth: string;
|
|
105
|
+
paddingInline: "--cnvs-sys-space-x3";
|
|
106
|
+
gap: "--cnvs-sys-space-x1";
|
|
107
|
+
fontFamily: "--cnvs-base-font-family-50";
|
|
108
|
+
lineHeight: "--cnvs-base-line-height-50";
|
|
109
|
+
fontSize: "--cnvs-base-font-size-50";
|
|
110
|
+
letterSpacing: "--cnvs-base-letter-spacing-100";
|
|
111
|
+
};
|
|
71
112
|
};
|
|
72
113
|
iconPosition: {
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
mediumEnd: string;
|
|
79
|
-
smallOnly: string;
|
|
80
|
-
smallStart: string;
|
|
81
|
-
smallEnd: string;
|
|
82
|
-
extraSmallOnly: string;
|
|
83
|
-
extraSmallStart: string;
|
|
84
|
-
extraSmallEnd: string;
|
|
114
|
+
only: {
|
|
115
|
+
padding: "--cnvs-sys-space-zero";
|
|
116
|
+
};
|
|
117
|
+
start: {};
|
|
118
|
+
end: {};
|
|
85
119
|
};
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
|
|
120
|
+
}, {
|
|
121
|
+
background: string;
|
|
122
|
+
border: string;
|
|
123
|
+
boxShadowInner: string;
|
|
124
|
+
boxShadowOuter: string;
|
|
125
|
+
label: string;
|
|
126
|
+
opacity: string;
|
|
127
|
+
borderRadius: string;
|
|
128
|
+
}, never, never>;
|
|
89
129
|
/**
|
|
90
|
-
* The base button which all
|
|
130
|
+
* The base button which which is the foundation of all Button variants (`PrimaryButton`,
|
|
131
|
+
* `SecondaryButton`, `TertiaryButton`, `DeleteButton`, `ToolbarIconButton` and `ToolbarDropdownButton`).
|
|
91
132
|
*/
|
|
92
133
|
export declare const BaseButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", ButtonContainerProps> & {
|
|
93
134
|
Icon: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("../lib/parts/ButtonLabelIcon").ButtonLabelIconProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAkB,cAAc,EAAY,MAAM,kCAAkC,CAAC;
|
|
1
|
+
{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAkB,cAAc,EAAY,MAAM,kCAAkC,CAAC;AAE5F,OAAO,EAAC,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAElF,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC,EAAE,cAAc;IACpF;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;CAAG;AAE7E;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;;;CAmD/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa;IAyHtB;;;;;OAKG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA2HL,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,UAAU;;;CAqCrB,CAAC"}
|
|
@@ -2,75 +2,120 @@ import * as React from 'react';
|
|
|
2
2
|
import { ButtonLabelIcon } from '../lib/parts/ButtonLabelIcon';
|
|
3
3
|
import { ButtonLabel } from '../lib/parts/ButtonLabel';
|
|
4
4
|
import { createComponent, focusRing } from '@workday/canvas-kit-react/common';
|
|
5
|
-
import {
|
|
6
|
-
import { createStyles, createVars, cssVar, createModifiers } from '@workday/canvas-kit-styling';
|
|
5
|
+
import { cssVar, createStencil, px2rem, createVars, calc } from '@workday/canvas-kit-styling';
|
|
7
6
|
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
|
|
8
|
-
import {
|
|
7
|
+
import { brand, system } from '@workday/canvas-tokens-web';
|
|
8
|
+
import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
10
|
+
* The purpose of this object is for the `colors` prop - to provide backwards compatibility with how we allowed color overrides in Emotion.
|
|
11
11
|
*/
|
|
12
|
-
export const
|
|
13
|
-
default: createVars({ id: "cnvs-button-default", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
disabled: createVars({ id: "cnvs-button-disabled", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
|
|
12
|
+
export const buttonColorPropVars = {
|
|
13
|
+
default: createVars({ id: "cnvs-button-color-prop-default", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
|
|
14
|
+
focus: createVars({ id: "cnvs-button-color-prop-focus", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
|
|
15
|
+
hover: createVars({ id: "cnvs-button-color-prop-hover", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
|
|
16
|
+
active: createVars({ id: "cnvs-button-color-prop-active", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
|
|
17
|
+
disabled: createVars({ id: "cnvs-button-color-prop-disabled", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
|
|
18
18
|
};
|
|
19
19
|
/**
|
|
20
20
|
* Base styles for Buttons.
|
|
21
21
|
*/
|
|
22
|
-
const
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
large: createStyles({ name: "bac76a", styles: "font-size:var(--cnvs-sys-space-x4);line-height:var(--cnvs-sys-space-x6);letter-spacing:0.01rem;height:48px;padding-inline:var(--cnvs-sys-space-x8);min-width:112px;" }),
|
|
32
|
-
medium: createStyles({ name: "384911", styles: "font-size:0.875rem;letter-spacing:0.015rem;min-width:96px;padding-inline:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x10);" }),
|
|
33
|
-
small: createStyles({ name: "d66a85", styles: "font-size:0.875rem;letter-spacing:0.015rem;height:var(--cnvs-sys-space-x8);min-width:var(--cnvs-sys-space-x20);padding-inline:var(--cnvs-sys-space-x4);gap:var(--cnvs-sys-space-x1);" }),
|
|
34
|
-
extraSmall: createStyles({ name: "6f327c", styles: "font-size:0.75rem;line-height:var(--cnvs-sys-space-x4);letter-spacing:0.02rem;height:var(--cnvs-sys-space-x6);min-width:auto;padding-inline:var(--cnvs-sys-space-x3);gap:var(--cnvs-sys-space-x1);" }),
|
|
22
|
+
export const buttonStencil = createStencil({
|
|
23
|
+
vars: {
|
|
24
|
+
background: '',
|
|
25
|
+
border: '',
|
|
26
|
+
boxShadowInner: '',
|
|
27
|
+
boxShadowOuter: '',
|
|
28
|
+
label: '',
|
|
29
|
+
opacity: '',
|
|
30
|
+
borderRadius: '',
|
|
35
31
|
},
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
32
|
+
base: { name: "6cffa3", styles: "box-sizing:border-box;font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:var(--cnvs-sys-font-weight-bold);background-color:var(--cnvs-button-color-prop-default-background, var(--cnvs-button-background, transparent));color:var(--cnvs-button-color-prop-default-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-strong)));border-width:0.0625rem;border-style:solid;gap:var(--cnvs-sys-space-x2);border-color:var(--cnvs-button-color-prop-default-border, var(--cnvs-button-border, transparent));cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;outline:0.125rem transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--cnvs-button-color-prop-default-borderRadius, var(--cnvs-button-borderRadius, var(--cnvs-sys-shape-round)));position:relative;vertical-align:middle;overflow:hidden;--cnvs-system-icon-color:var(--cnvs-button-color-prop-default-icon, var(--cnvs-sys-color-fg-strong));transition:box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear;&:disabled, &:disabled:active, &.disabled{cursor:default;box-shadow:none;opacity:var(--cnvs-button-color-prop-default-opacity, var(--cnvs-button-opacity, var(--cnvs-sys-opacity-full)));}&:focus-visible, &.focus{background-color:var(--cnvs-button-color-prop-focus-background, var(--cnvs-button-background, transparent));border-color:var(--cnvs-button-color-prop-focus-border, var(--cnvs-button-border, transparent));color:var(--cnvs-button-color-prop-focus-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-strong)));--cnvs-system-icon-color:var(--cnvs-button-color-prop-focus-icon, var(--cnvs-sys-color-fg-strong));box-shadow:0 0 0 2px var(--cnvs-button-color-prop-focus-boxShadowInner, var(--cnvs-button-boxShadowInner, var(--cnvs-sys-color-fg-inverse))), 0 0 0 4px var(--cnvs-button-color-prop-focus-boxShadowOuter, var(--cnvs-button-boxShadowOuter, var(--cnvs-brand-primary-base)));}&:hover, &.hover{background-color:var(--cnvs-button-color-prop-hover-background, var(--cnvs-button-background, var(--cnvs-sys-color-bg-contrast-strong)));border-color:var(--cnvs-button-color-prop-hover-border, var(--cnvs-button-border, transparent));color:var(--cnvs-button-color-prop-hover-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-stronger)));--cnvs-system-icon-color:var(--cnvs-button-color-prop-hover-icon, var(--cnvs-sys-color-fg-stronger));}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--cnvs-button-color-prop-active-background, var(--cnvs-button-background, transparent));border-color:var(--cnvs-button-color-prop-active-border, var(--cnvs-button-border, transparent));color:var(--cnvs-button-color-prop-active-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-strong)));--cnvs-system-icon-color:var(--cnvs-button-color-prop-active-icon, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{background-color:var(--cnvs-button-color-prop-disabled-background, var(--cnvs-button-background, transparent));border-color:var(--cnvs-button-color-prop-disabled-border, var(--cnvs-button-border, transparent));color:var(--cnvs-button-color-prop-disabled-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-strong)));--cnvs-system-icon-color:var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-sys-color-fg-strong));}" },
|
|
33
|
+
modifiers: {
|
|
34
|
+
/**
|
|
35
|
+
* Button modifiers that will overwrite the base styles of Buttons.
|
|
36
|
+
* - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
|
|
37
|
+
* - `iconPosition`: These modifiers will override the existing `Size` styles. These are specific to icon locations
|
|
38
|
+
* within a button or if there is only an icon and no text.
|
|
39
|
+
*/
|
|
40
|
+
size: {
|
|
41
|
+
large: { name: "e15324", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-base-line-height-150);font-size:var(--cnvs-base-font-size-100);letter-spacing:var(--cnvs-base-letter-spacing-200);height:3rem;padding-inline:var(--cnvs-sys-space-x8);min-width:7rem;" },
|
|
42
|
+
medium: { name: "9d7a0b", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);min-width:6rem;padding-inline:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x10);" },
|
|
43
|
+
small: { name: "19547b", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);height:var(--cnvs-sys-space-x8);min-width:var(--cnvs-sys-space-x20);padding-inline:var(--cnvs-sys-space-x4);gap:var(--cnvs-sys-space-x1);" },
|
|
44
|
+
extraSmall: { name: "9672a7", styles: "font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-base-line-height-50);font-size:var(--cnvs-base-font-size-50);letter-spacing:var(--cnvs-base-letter-spacing-100);height:var(--cnvs-sys-space-x6);min-width:auto;padding-inline:var(--cnvs-sys-space-x3);gap:var(--cnvs-sys-space-x1);" }
|
|
45
|
+
},
|
|
46
|
+
// IconPosition Styles
|
|
47
|
+
iconPosition: {
|
|
48
|
+
only: { name: "b5aed5", styles: "padding:var(--cnvs-sys-space-zero);" },
|
|
49
|
+
start: {},
|
|
50
|
+
end: {}
|
|
51
|
+
}
|
|
49
52
|
},
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
53
|
+
// Compound Modifier Styles
|
|
54
|
+
compound: [
|
|
55
|
+
{
|
|
56
|
+
modifiers: { size: 'large', iconPosition: 'only' },
|
|
57
|
+
styles: { name: "090b4c", styles: "min-width:calc(var(--cnvs-sys-space-x4) * 3);" }
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
modifiers: { size: 'large', iconPosition: 'start' },
|
|
61
|
+
styles: { name: "6cef64", styles: "padding-inline-start:var(--cnvs-sys-space-x6);padding-inline-end:var(--cnvs-sys-space-x8);" }
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
modifiers: { size: 'large', iconPosition: 'end' },
|
|
65
|
+
styles: { name: "2b278b", styles: "padding-inline-start:var(--cnvs-sys-space-x8);padding-inline-end:var(--cnvs-sys-space-x6);" }
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
modifiers: { size: 'medium', iconPosition: 'only' },
|
|
69
|
+
styles: { name: "1aa44b", styles: "min-width:var(--cnvs-sys-space-x10);" }
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
modifiers: { size: 'medium', iconPosition: 'start' },
|
|
73
|
+
styles: { name: "c82aba", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1) * 5);padding-inline-end:var(--cnvs-sys-space-x6);" }
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
modifiers: { size: 'medium', iconPosition: 'end' },
|
|
77
|
+
styles: { name: "9de09f", styles: "padding-inline-start:var(--cnvs-sys-space-x6);padding-inline-end:calc(var(--cnvs-sys-space-x1) * 5);" }
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
modifiers: { size: 'small', iconPosition: 'only' },
|
|
81
|
+
styles: { name: "da8a4f", styles: "min-width:var(--cnvs-sys-space-x8);" }
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
modifiers: { size: 'small', iconPosition: 'start' },
|
|
85
|
+
styles: { name: "959c67", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x4);" }
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
modifiers: { size: 'small', iconPosition: 'end' },
|
|
89
|
+
styles: { name: "318dce", styles: "padding-inline-start:var(--cnvs-sys-space-x4);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
modifiers: { size: 'extraSmall', iconPosition: 'only' },
|
|
93
|
+
styles: { name: "4ce1cf", styles: "min-width:var(--cnvs-sys-space-x6);" }
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
modifiers: { size: 'extraSmall', iconPosition: 'start' },
|
|
97
|
+
styles: { name: "574caa", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
modifiers: { size: 'extraSmall', iconPosition: 'end' },
|
|
101
|
+
styles: { name: "c85684", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
102
|
+
}
|
|
103
|
+
]
|
|
104
|
+
}, "cnvs-button");
|
|
57
105
|
/**
|
|
58
|
-
* The base button which all
|
|
106
|
+
* The base button which which is the foundation of all Button variants (`PrimaryButton`,
|
|
107
|
+
* `SecondaryButton`, `TertiaryButton`, `DeleteButton`, `ToolbarIconButton` and `ToolbarDropdownButton`).
|
|
59
108
|
*/
|
|
60
109
|
export const BaseButton = createComponent('button')({
|
|
61
110
|
displayName: 'BaseButton',
|
|
62
111
|
Component: ({ children, size, fillIcon, iconPosition, icon, colors, shouldMirrorIcon = false, ...elemProps }, ref, Element) => {
|
|
63
112
|
return (React.createElement(Element, Object.assign({ ref: ref, type: "button" }, mergeStyles(elemProps, [
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
}),
|
|
69
|
-
|
|
70
|
-
buttonVars.focus((colors === null || colors === void 0 ? void 0 : colors.focus) || {}),
|
|
71
|
-
buttonVars.hover((colors === null || colors === void 0 ? void 0 : colors.hover) || {}),
|
|
72
|
-
buttonVars.active((colors === null || colors === void 0 ? void 0 : colors.active) || {}),
|
|
73
|
-
buttonVars.disabled((colors === null || colors === void 0 ? void 0 : colors.disabled) || {}),
|
|
113
|
+
buttonStencil({ size, iconPosition }),
|
|
114
|
+
buttonColorPropVars.default((colors === null || colors === void 0 ? void 0 : colors.default) || {}),
|
|
115
|
+
buttonColorPropVars.focus((colors === null || colors === void 0 ? void 0 : colors.focus) || {}),
|
|
116
|
+
buttonColorPropVars.hover((colors === null || colors === void 0 ? void 0 : colors.hover) || {}),
|
|
117
|
+
buttonColorPropVars.active((colors === null || colors === void 0 ? void 0 : colors.active) || {}),
|
|
118
|
+
buttonColorPropVars.disabled((colors === null || colors === void 0 ? void 0 : colors.disabled) || {}),
|
|
74
119
|
])), children));
|
|
75
120
|
},
|
|
76
121
|
subComponents: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../button/lib/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,oBAAoB,EAAC,MAAM,cAAc,CAAC;AAG9D;;;;GAIG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;IACpE;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CAChC;AAED,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../button/lib/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,oBAAoB,EAAC,MAAM,cAAc,CAAC;AAG9D;;;;GAIG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;IACpE;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CAChC;AAED,eAAO,MAAM,MAAM,oFA4CjB,CAAC"}
|
|
@@ -14,7 +14,6 @@ export const Button = createComponent('button')({
|
|
|
14
14
|
return (React.createElement(BaseButton, Object.assign({ as: Element, ref: ref, size: size, icon: icon, colors: colors, iconPosition: baseIconPosition }, elemProps),
|
|
15
15
|
icon && baseIconPosition === 'start' && (React.createElement(BaseButton.Icon, { size: size, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
|
|
16
16
|
children && React.createElement(BaseButton.Label, null, children),
|
|
17
|
-
icon && baseIconPosition
|
|
18
|
-
icon && baseIconPosition === 'end' && (React.createElement(BaseButton.Icon, { size: size, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
|
|
17
|
+
icon && baseIconPosition && ['only', 'end'].includes(baseIconPosition) && (React.createElement(BaseButton.Icon, { size: size, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
|
|
19
18
|
},
|
|
20
19
|
});
|
|
@@ -9,7 +9,7 @@ export interface DeleteButtonProps extends ButtonProps {
|
|
|
9
9
|
/**
|
|
10
10
|
* Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
|
|
11
11
|
* have significant consequences. They commonly appear in confirmation dialogs as the final
|
|
12
|
-
* confirmation before
|
|
12
|
+
* confirmation before being deleted.
|
|
13
13
|
*/
|
|
14
14
|
export declare const DeleteButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", DeleteButtonProps>;
|
|
15
15
|
//# sourceMappingURL=DeleteButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DeleteButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/DeleteButton.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DeleteButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/DeleteButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAI7C;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;CAAG;AAwCzD;;;;GAIG;AACH,eAAO,MAAM,YAAY,0FASvB,CAAC"}
|
|
@@ -1,20 +1,23 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { buttonStencil } from './BaseButton';
|
|
3
3
|
import { createComponent } from '@workday/canvas-kit-react/common';
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import { base, brand, system } from '@workday/canvas-tokens-web';
|
|
4
|
+
import { createStencil } from '@workday/canvas-kit-styling';
|
|
5
|
+
import { brand, system } from '@workday/canvas-tokens-web';
|
|
7
6
|
import { Button } from './Button';
|
|
8
|
-
import { systemIconStencil } from '
|
|
9
|
-
|
|
7
|
+
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
|
|
8
|
+
import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
9
|
+
const deleteButtonStencil = createStencil({
|
|
10
|
+
extends: buttonStencil,
|
|
11
|
+
base: { name: "8e9d77", styles: "box-sizing:border-box;--cnvs-button-background:var(--cnvs-brand-error-base);--cnvs-button-borderRadius:var(--cnvs-sys-shape-round);--cnvs-button-label-emotion-safe:var(--cnvs-brand-error-accent);--cnvs-system-icon-color:var(--cnvs-brand-error-accent);&:focus-visible, &.focus{--cnvs-button-background:var(--cnvs-brand-error-base);--cnvs-button-label-emotion-safe:var(--cnvs-brand-error-accent);--cnvs-system-icon-color:var(--cnvs-brand-error-accent);--cnvs-button-boxShadowInner:var(--cnvs-sys-color-fg-inverse);--cnvs-button-boxShadowOuter:var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--cnvs-button-background:var(--cnvs-brand-error-dark);--cnvs-button-label-emotion-safe:var(--cnvs-brand-error-accent);--cnvs-system-icon-color:var(--cnvs-brand-error-accent);}&:active, &.active{--cnvs-button-background:var(--cnvs-brand-error-darkest);--cnvs-button-label-emotion-safe:var(--cnvs-brand-error-accent);--cnvs-system-icon-color:var(--cnvs-brand-error-accent);}&:disabled, &.disabled{--cnvs-button-background:var(--cnvs-brand-error-base);--cnvs-button-label-emotion-safe:var(--cnvs-brand-error-accent);--cnvs-system-icon-color:var(--cnvs-brand-error-accent);--cnvs-button-opacity:var(--cnvs-sys-opacity-disabled);}" }
|
|
12
|
+
}, "cnvs-delete-button");
|
|
10
13
|
/**
|
|
11
14
|
* Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
|
|
12
15
|
* have significant consequences. They commonly appear in confirmation dialogs as the final
|
|
13
|
-
* confirmation before
|
|
16
|
+
* confirmation before being deleted.
|
|
14
17
|
*/
|
|
15
18
|
export const DeleteButton = createComponent('button')({
|
|
16
19
|
displayName: 'DeleteButton',
|
|
17
|
-
Component: ({ children,
|
|
18
|
-
return (React.createElement(Button, Object.assign({ as: Element, ref: ref
|
|
20
|
+
Component: ({ children, ...elemProps }, ref, Element) => {
|
|
21
|
+
return (React.createElement(Button, Object.assign({ as: Element, ref: ref }, mergeStyles(elemProps, deleteButtonStencil())), children));
|
|
19
22
|
},
|
|
20
23
|
});
|
|
@@ -10,10 +10,5 @@ export interface PrimaryButtonProps extends ButtonProps {
|
|
|
10
10
|
*/
|
|
11
11
|
variant?: 'inverse';
|
|
12
12
|
}
|
|
13
|
-
export declare const primaryButtonModifiers: import("@workday/canvas-kit-styling").ModifierReturn<{
|
|
14
|
-
variant: {
|
|
15
|
-
inverse: string;
|
|
16
|
-
};
|
|
17
|
-
}>;
|
|
18
13
|
export declare const PrimaryButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", PrimaryButtonProps>;
|
|
19
14
|
//# sourceMappingURL=PrimaryButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAG7C;;;;GAIG;AACH,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA6ED,eAAO,MAAM,aAAa,2FASxB,CAAC"}
|
|
@@ -1,20 +1,24 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { buttonVars } from './BaseButton';
|
|
3
2
|
import { createComponent } from '@workday/canvas-kit-react/common';
|
|
4
|
-
import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
5
3
|
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
4
|
+
import { createStencil } from '@workday/canvas-kit-styling';
|
|
5
|
+
import { brand, system } from '@workday/canvas-tokens-web';
|
|
6
|
+
import { buttonStencil } from './BaseButton';
|
|
8
7
|
import { Button } from './Button';
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
8
|
+
import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
9
|
+
const primaryButtonStencil = createStencil({
|
|
10
|
+
extends: buttonStencil,
|
|
11
|
+
base: { name: "581e61", styles: "box-sizing:border-box;--cnvs-button-background:var(--cnvs-brand-primary-base);--cnvs-button-borderRadius:var(--cnvs-sys-shape-round);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);&:focus-visible, &.focus{--cnvs-button-background:var(--cnvs-brand-primary-base);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-button-boxShadowInner:var(--cnvs-sys-color-fg-inverse);--cnvs-button-boxShadowOuter:var(--cnvs-brand-common-focus-outline);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}&:hover, &.hover{--cnvs-button-background:var(--cnvs-brand-primary-dark);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}&:active, &.active{--cnvs-button-background:var(--cnvs-brand-primary-darkest);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}&:disabled, &.disabled{--cnvs-button-background:var(--cnvs-brand-primary-base);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-button-opacity:var(--cnvs-sys-opacity-disabled);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}" },
|
|
12
|
+
modifiers: {
|
|
13
|
+
variant: {
|
|
14
|
+
// Inverse Styles
|
|
15
|
+
inverse: { name: "4fd654", styles: "--cnvs-button-background:var(--cnvs-sys-color-bg-default);--cnvs-button-borderRadius:var(--cnvs-sys-shape-round);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);&:focus-visible, &.focus{--cnvs-button-background:var(--cnvs-sys-color-bg-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-button-boxShadowInner:var(--cnvs-sys-color-fg-strong);--cnvs-button-boxShadowOuter:var(--cnvs-sys-color-fg-inverse);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}&:hover, &.hover{--cnvs-button-background:var(--cnvs-sys-color-bg-alt-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-stronger);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-stronger);}&:active, &.active{--cnvs-button-background:var(--cnvs-sys-color-bg-alt-strong);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-stronger);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-stronger);}&:disabled, &.disabled{--cnvs-button-background:var(--cnvs-sys-color-bg-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}" }
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}, "cnvs-primary-button");
|
|
15
19
|
export const PrimaryButton = createComponent('button')({
|
|
16
20
|
displayName: 'PrimaryButton',
|
|
17
21
|
Component: ({ children, variant, ...elemProps }, ref, Element) => {
|
|
18
|
-
return (React.createElement(Button, Object.assign({ as: Element, ref: ref }, mergeStyles(elemProps,
|
|
22
|
+
return (React.createElement(Button, Object.assign({ as: Element, ref: ref }, mergeStyles(elemProps, primaryButtonStencil({ variant }))), children));
|
|
19
23
|
},
|
|
20
24
|
});
|
|
@@ -10,10 +10,5 @@ export interface SecondaryButtonProps extends ButtonProps {
|
|
|
10
10
|
*/
|
|
11
11
|
variant?: 'inverse';
|
|
12
12
|
}
|
|
13
|
-
export declare const secondaryButtonModifiers: import("@workday/canvas-kit-styling").ModifierReturn<{
|
|
14
|
-
variant: {
|
|
15
|
-
inverse: string;
|
|
16
|
-
};
|
|
17
|
-
}>;
|
|
18
13
|
export declare const SecondaryButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", SecondaryButtonProps>;
|
|
19
14
|
//# sourceMappingURL=SecondaryButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAI7C;;;;GAIG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAsFD,eAAO,MAAM,eAAe,6FAS1B,CAAC"}
|
|
@@ -1,20 +1,23 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { buttonStencil } from './BaseButton';
|
|
3
3
|
import { createComponent } from '@workday/canvas-kit-react/common';
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import { base, brand, system } from '@workday/canvas-tokens-web';
|
|
4
|
+
import { createStencil } from '@workday/canvas-kit-styling';
|
|
5
|
+
import { brand, system } from '@workday/canvas-tokens-web';
|
|
7
6
|
import { Button } from './Button';
|
|
8
|
-
import { systemIconStencil } from '
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
7
|
+
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
|
|
8
|
+
import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
9
|
+
const secondaryButtonStencil = createStencil({
|
|
10
|
+
extends: buttonStencil,
|
|
11
|
+
base: { name: "fa2b2a", styles: "box-sizing:border-box;--cnvs-button-background:transparent;--cnvs-button-border:var(--cnvs-sys-color-border-contrast-default);--cnvs-button-borderRadius:var(--cnvs-sys-shape-round);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);&:focus-visible, &.focus{--cnvs-button-background:transparent;--cnvs-button-border:var(--cnvs-sys-color-border-contrast-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-button-boxShadowInner:var(--cnvs-sys-color-fg-inverse);--cnvs-button-boxShadowOuter:var(--cnvs-brand-common-focus-outline);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}&:hover, &.hover{--cnvs-button-background:var(--cnvs-sys-color-bg-contrast-default);--cnvs-button-border:var(--cnvs-sys-color-border-contrast-default);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}&:active, &.active{--cnvs-button-background:var(--cnvs-sys-color-bg-contrast-strong);--cnvs-button-border:var(--cnvs-sys-color-border-contrast-strong);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-accent);--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);}&:disabled, &.disabled{--cnvs-button-background:transparent;--cnvs-button-border:var(--cnvs-sys-color-border-contrast-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-button-opacity:var(--cnvs-sys-opacity-disabled);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}" },
|
|
12
|
+
modifiers: {
|
|
13
|
+
variant: {
|
|
14
|
+
inverse: { name: "a08d25", styles: "--cnvs-button-background:transparent;--cnvs-button-border:var(--cnvs-sys-color-border-inverse);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-inverse);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-inverse);&:focus-visible, &.focus{--cnvs-button-background:var(--cnvs-sys-color-bg-default);--cnvs-button-border:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-button-boxShadowInner:var(--cnvs-sys-color-fg-strong);--cnvs-button-boxShadowOuter:var(--cnvs-sys-color-fg-inverse);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}&:hover, &.hover{--cnvs-button-background:var(--cnvs-sys-color-bg-alt-default);--cnvs-button-border:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-stronger);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-stronger);}&:active, &.active{--cnvs-button-background:var(--cnvs-sys-color-bg-alt-strong);--cnvs-button-border:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-stronger);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-stronger);}&:disabled, &.disabled{--cnvs-button-background:transparent;--cnvs-button-border:var(--cnvs-sys-color-border-inverse);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-inverse);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-inverse);}" }
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}, "cnvs-secondary-button");
|
|
15
18
|
export const SecondaryButton = createComponent('button')({
|
|
16
19
|
displayName: 'SecondaryButton',
|
|
17
20
|
Component: ({ children, variant, ...elemProps }, ref, Element) => {
|
|
18
|
-
return (React.createElement(Button, Object.assign({ as: Element, ref: ref }, mergeStyles(elemProps,
|
|
21
|
+
return (React.createElement(Button, Object.assign({ as: Element, ref: ref }, mergeStyles(elemProps, secondaryButtonStencil({ variant }))), children));
|
|
19
22
|
},
|
|
20
23
|
});
|
|
@@ -11,27 +11,5 @@ export interface TertiaryButtonProps extends ButtonProps {
|
|
|
11
11
|
variant?: 'inverse';
|
|
12
12
|
isThemeable?: boolean;
|
|
13
13
|
}
|
|
14
|
-
export declare const tertiaryButtonModifiers: import("@workday/canvas-kit-styling").ModifierReturn<{
|
|
15
|
-
isThemeable: {
|
|
16
|
-
true: string;
|
|
17
|
-
};
|
|
18
|
-
variant: {
|
|
19
|
-
inverse: string;
|
|
20
|
-
};
|
|
21
|
-
iconPosition: {
|
|
22
|
-
largeOnly: string;
|
|
23
|
-
largeStart: string;
|
|
24
|
-
largeEnd: string;
|
|
25
|
-
mediumOnly: string;
|
|
26
|
-
mediumStart: string;
|
|
27
|
-
mediumEnd: string;
|
|
28
|
-
smallOnly: string;
|
|
29
|
-
smallStart: string;
|
|
30
|
-
smallEnd: string;
|
|
31
|
-
extraSmallOnly: string;
|
|
32
|
-
extraSmallStart: string;
|
|
33
|
-
extraSmallEnd: string;
|
|
34
|
-
};
|
|
35
|
-
}>;
|
|
36
14
|
export declare const TertiaryButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", TertiaryButtonProps>;
|
|
37
15
|
//# sourceMappingURL=TertiaryButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAI7C;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAqND,eAAO,MAAM,cAAc,4FA4CzB,CAAC"}
|