@workday/canvas-kit-react 11.1.15 → 11.1.16
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/DeleteButton.tsx +14 -3
- package/button/lib/PrimaryButton.tsx +14 -3
- package/button/lib/SecondaryButton.tsx +14 -3
- package/button/lib/TertiaryButton.tsx +10 -6
- package/dist/commonjs/button/lib/DeleteButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/DeleteButton.js +4 -5
- package/dist/commonjs/button/lib/PrimaryButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/PrimaryButton.js +5 -6
- package/dist/commonjs/button/lib/SecondaryButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/SecondaryButton.js +5 -6
- package/dist/commonjs/button/lib/TertiaryButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/TertiaryButton.js +30 -27
- package/dist/es6/button/lib/DeleteButton.d.ts.map +1 -1
- package/dist/es6/button/lib/DeleteButton.js +4 -5
- package/dist/es6/button/lib/PrimaryButton.d.ts.map +1 -1
- package/dist/es6/button/lib/PrimaryButton.js +5 -6
- package/dist/es6/button/lib/SecondaryButton.d.ts.map +1 -1
- package/dist/es6/button/lib/SecondaryButton.js +5 -6
- package/dist/es6/button/lib/TertiaryButton.d.ts.map +1 -1
- package/dist/es6/button/lib/TertiaryButton.js +30 -27
- package/package.json +4 -4
|
@@ -6,7 +6,6 @@ import {createStencil, cssVar} from '@workday/canvas-kit-styling';
|
|
|
6
6
|
import {brand, system} from '@workday/canvas-tokens-web';
|
|
7
7
|
import {Button, ButtonProps} from './Button';
|
|
8
8
|
import {systemIconStencil} from '@workday/canvas-kit-react/icon';
|
|
9
|
-
import {mergeStyles} from '@workday/canvas-kit-react/layout';
|
|
10
9
|
|
|
11
10
|
/**
|
|
12
11
|
* Extends all the style properties from Box to our buttons as well as props from ButtonProps.
|
|
@@ -60,9 +59,21 @@ const deleteButtonStencil = createStencil({
|
|
|
60
59
|
*/
|
|
61
60
|
export const DeleteButton = createComponent('button')({
|
|
62
61
|
displayName: 'DeleteButton',
|
|
63
|
-
Component: (
|
|
62
|
+
Component: (
|
|
63
|
+
{children, size, iconPosition, grow, cs, ...elemProps}: DeleteButtonProps,
|
|
64
|
+
ref,
|
|
65
|
+
Element
|
|
66
|
+
) => {
|
|
64
67
|
return (
|
|
65
|
-
<Button
|
|
68
|
+
<Button
|
|
69
|
+
as={Element}
|
|
70
|
+
ref={ref}
|
|
71
|
+
size={size}
|
|
72
|
+
grow={grow}
|
|
73
|
+
iconPosition={iconPosition}
|
|
74
|
+
cs={[deleteButtonStencil({size, iconPosition}), cs]}
|
|
75
|
+
{...elemProps}
|
|
76
|
+
>
|
|
66
77
|
{children}
|
|
67
78
|
</Button>
|
|
68
79
|
);
|
|
@@ -6,7 +6,6 @@ import {createStencil, cssVar} from '@workday/canvas-kit-styling';
|
|
|
6
6
|
import {brand, system} from '@workday/canvas-tokens-web';
|
|
7
7
|
import {buttonColorPropVars, buttonStencil} from './BaseButton';
|
|
8
8
|
import {Button, ButtonProps} from './Button';
|
|
9
|
-
import {mergeStyles} from '@workday/canvas-kit-react/layout';
|
|
10
9
|
|
|
11
10
|
/**
|
|
12
11
|
* Extends all the style properties from Box to our buttons as well as props from ButtonProps.
|
|
@@ -115,9 +114,21 @@ const primaryButtonStencil = createStencil({
|
|
|
115
114
|
|
|
116
115
|
export const PrimaryButton = createComponent('button')({
|
|
117
116
|
displayName: 'PrimaryButton',
|
|
118
|
-
Component: (
|
|
117
|
+
Component: (
|
|
118
|
+
{children, variant, size, iconPosition, grow, cs, ...elemProps}: PrimaryButtonProps,
|
|
119
|
+
ref,
|
|
120
|
+
Element
|
|
121
|
+
) => {
|
|
119
122
|
return (
|
|
120
|
-
<Button
|
|
123
|
+
<Button
|
|
124
|
+
as={Element}
|
|
125
|
+
ref={ref}
|
|
126
|
+
iconPosition={iconPosition}
|
|
127
|
+
size={size}
|
|
128
|
+
grow={grow}
|
|
129
|
+
cs={[primaryButtonStencil({variant, iconPosition, grow, size}), cs]}
|
|
130
|
+
{...elemProps}
|
|
131
|
+
>
|
|
121
132
|
{children}
|
|
122
133
|
</Button>
|
|
123
134
|
);
|
|
@@ -6,7 +6,6 @@ import {createStencil, cssVar} from '@workday/canvas-kit-styling';
|
|
|
6
6
|
import {brand, system} from '@workday/canvas-tokens-web';
|
|
7
7
|
import {Button, ButtonProps} from './Button';
|
|
8
8
|
import {systemIconStencil} from '@workday/canvas-kit-react/icon';
|
|
9
|
-
import {mergeStyles} from '@workday/canvas-kit-react/layout';
|
|
10
9
|
|
|
11
10
|
/**
|
|
12
11
|
* Extends all the style properties from Box to our buttons as well as props from ButtonProps.
|
|
@@ -130,9 +129,21 @@ const secondaryButtonStencil = createStencil({
|
|
|
130
129
|
|
|
131
130
|
export const SecondaryButton = createComponent('button')({
|
|
132
131
|
displayName: 'SecondaryButton',
|
|
133
|
-
Component: (
|
|
132
|
+
Component: (
|
|
133
|
+
{children, variant, size, iconPosition, grow, cs, ...elemProps}: SecondaryButtonProps,
|
|
134
|
+
ref,
|
|
135
|
+
Element
|
|
136
|
+
) => {
|
|
134
137
|
return (
|
|
135
|
-
<Button
|
|
138
|
+
<Button
|
|
139
|
+
as={Element}
|
|
140
|
+
ref={ref}
|
|
141
|
+
iconPosition={iconPosition}
|
|
142
|
+
size={size}
|
|
143
|
+
grow={grow}
|
|
144
|
+
cs={[secondaryButtonStencil({variant, iconPosition, grow, size}), cs]}
|
|
145
|
+
{...elemProps}
|
|
146
|
+
>
|
|
136
147
|
{children}
|
|
137
148
|
</Button>
|
|
138
149
|
);
|
|
@@ -6,7 +6,6 @@ import {calc, createStencil, cssVar} from '@workday/canvas-kit-styling';
|
|
|
6
6
|
import {system, brand} from '@workday/canvas-tokens-web';
|
|
7
7
|
import {Button, ButtonProps} from './Button';
|
|
8
8
|
import {systemIconStencil} from '@workday/canvas-kit-react/icon';
|
|
9
|
-
import {mergeStyles} from '@workday/canvas-kit-react/layout';
|
|
10
9
|
|
|
11
10
|
/**
|
|
12
11
|
* Extends all the style properties from Box to our buttons as well as props from ButtonProps.
|
|
@@ -291,6 +290,8 @@ export const TertiaryButton = createComponent('button')({
|
|
|
291
290
|
size = 'medium',
|
|
292
291
|
variant,
|
|
293
292
|
iconPosition,
|
|
293
|
+
grow,
|
|
294
|
+
cs,
|
|
294
295
|
...elemProps
|
|
295
296
|
}: TertiaryButtonProps,
|
|
296
297
|
ref,
|
|
@@ -311,15 +312,18 @@ export const TertiaryButton = createComponent('button')({
|
|
|
311
312
|
icon={icon}
|
|
312
313
|
size={size}
|
|
313
314
|
iconPosition={iconPosition}
|
|
314
|
-
{
|
|
315
|
-
|
|
315
|
+
grow={grow}
|
|
316
|
+
cs={[
|
|
316
317
|
tertiaryButtonStencil({
|
|
317
|
-
variant,
|
|
318
318
|
size,
|
|
319
|
+
variant,
|
|
320
|
+
grow,
|
|
319
321
|
isThemeable: (isThemeable || baseIconPosition !== 'only') as any,
|
|
320
322
|
iconPosition: baseIconPosition,
|
|
321
|
-
})
|
|
322
|
-
|
|
323
|
+
}),
|
|
324
|
+
cs,
|
|
325
|
+
]}
|
|
326
|
+
{...elemProps}
|
|
323
327
|
>
|
|
324
328
|
{children}
|
|
325
329
|
</Button>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DeleteButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/DeleteButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"DeleteButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/DeleteButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAG7C;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;CAAG;AAwCzD;;;;GAIG;AACH,eAAO,MAAM,YAAY,0FAqBvB,CAAC"}
|
|
@@ -27,11 +27,10 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
|
27
27
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
28
28
|
const Button_1 = require("./Button");
|
|
29
29
|
const icon_1 = require("@workday/canvas-kit-react/icon");
|
|
30
|
-
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
31
30
|
const deleteButtonStencil = canvas_kit_styling_1.createStencil({
|
|
32
31
|
extends: BaseButton_1.buttonStencil,
|
|
33
|
-
base: { name: "
|
|
34
|
-
}, "delete-button-
|
|
32
|
+
base: { name: "ad5763", 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-53c273: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-53c273: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-53c273: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-53c273: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-53c273:var(--icon-c34400, var(--cnvs-brand-error-accent));--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);}" }
|
|
33
|
+
}, "delete-button-880e51");
|
|
35
34
|
/**
|
|
36
35
|
* Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
|
|
37
36
|
* have significant consequences. They commonly appear in confirmation dialogs as the final
|
|
@@ -39,7 +38,7 @@ const deleteButtonStencil = canvas_kit_styling_1.createStencil({
|
|
|
39
38
|
*/
|
|
40
39
|
exports.DeleteButton = common_1.createComponent('button')({
|
|
41
40
|
displayName: 'DeleteButton',
|
|
42
|
-
Component: ({ children, ...elemProps }, ref, Element) => {
|
|
43
|
-
return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref
|
|
41
|
+
Component: ({ children, size, iconPosition, grow, cs, ...elemProps }, ref, Element) => {
|
|
42
|
+
return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref, size: size, grow: grow, iconPosition: iconPosition, cs: [deleteButtonStencil({ size, iconPosition }), cs] }, elemProps), children));
|
|
44
43
|
},
|
|
45
44
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAE7C;;;;GAIG;AACH,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA+FD,eAAO,MAAM,aAAa,2FAqBxB,CAAC"}
|
|
@@ -27,20 +27,19 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
|
27
27
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
28
28
|
const BaseButton_1 = require("./BaseButton");
|
|
29
29
|
const Button_1 = require("./Button");
|
|
30
|
-
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
31
30
|
const primaryButtonStencil = canvas_kit_styling_1.createStencil({
|
|
32
31
|
extends: BaseButton_1.buttonStencil,
|
|
33
|
-
base: { name: "
|
|
32
|
+
base: { name: "58848f", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-brand-primary-base);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-primary-accent));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-brand-primary-accent);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-primary-accent));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-brand-primary-dark);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-brand-primary-darkest);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-accent));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-brand-primary-accent);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-brand-primary-accent));}" },
|
|
34
33
|
modifiers: {
|
|
35
34
|
variant: {
|
|
36
35
|
// Inverse Styles
|
|
37
|
-
inverse: { name: "
|
|
36
|
+
inverse: { name: "a03cfe", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-65cb05:var(--cnvs-sys-color-border-inverse);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-stronger));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-stronger));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" }
|
|
38
37
|
}
|
|
39
38
|
}
|
|
40
|
-
}, "primary-button-
|
|
39
|
+
}, "primary-button-cc7f35");
|
|
41
40
|
exports.PrimaryButton = common_1.createComponent('button')({
|
|
42
41
|
displayName: 'PrimaryButton',
|
|
43
|
-
Component: ({ children, variant, ...elemProps }, ref, Element) => {
|
|
44
|
-
return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref
|
|
42
|
+
Component: ({ children, variant, size, iconPosition, grow, cs, ...elemProps }, ref, Element) => {
|
|
43
|
+
return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref, iconPosition: iconPosition, size: size, grow: grow, cs: [primaryButtonStencil({ variant, iconPosition, grow, size }), cs] }, elemProps), children));
|
|
45
44
|
},
|
|
46
45
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAG7C;;;;GAIG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA8GD,eAAO,MAAM,eAAe,6FAqB1B,CAAC"}
|
|
@@ -27,19 +27,18 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
|
27
27
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
28
28
|
const Button_1 = require("./Button");
|
|
29
29
|
const icon_1 = require("@workday/canvas-kit-react/icon");
|
|
30
|
-
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
31
30
|
const secondaryButtonStencil = canvas_kit_styling_1.createStencil({
|
|
32
31
|
extends: BaseButton_1.buttonStencil,
|
|
33
|
-
base: { name: "
|
|
32
|
+
base: { name: "843acd", styles: "box-sizing:border-box;--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-contrast-default);--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-contrast-strong);--border-button-65cb05:var(--cnvs-sys-color-border-contrast-strong);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-accent));}&:disabled, &.disabled{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
|
|
34
33
|
modifiers: {
|
|
35
34
|
variant: {
|
|
36
|
-
inverse: { name: "
|
|
35
|
+
inverse: { name: "79e673", styles: "--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-inverse);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-65cb05:var(--cnvs-sys-color-border-inverse);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-stronger));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-stronger));}&:disabled, &.disabled{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-inverse);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-inverse));}" }
|
|
37
36
|
}
|
|
38
37
|
}
|
|
39
|
-
}, "secondary-button-
|
|
38
|
+
}, "secondary-button-e11131");
|
|
40
39
|
exports.SecondaryButton = common_1.createComponent('button')({
|
|
41
40
|
displayName: 'SecondaryButton',
|
|
42
|
-
Component: ({ children, variant, ...elemProps }, ref, Element) => {
|
|
43
|
-
return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref
|
|
41
|
+
Component: ({ children, variant, size, iconPosition, grow, cs, ...elemProps }, ref, Element) => {
|
|
42
|
+
return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref, iconPosition: iconPosition, size: size, grow: grow, cs: [secondaryButtonStencil({ variant, iconPosition, grow, size }), cs] }, elemProps), children));
|
|
44
43
|
},
|
|
45
44
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAG7C;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAsQD,eAAO,MAAM,cAAc,4FAiDzB,CAAC"}
|
|
@@ -27,81 +27,80 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
|
27
27
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
28
28
|
const Button_1 = require("./Button");
|
|
29
29
|
const icon_1 = require("@workday/canvas-kit-react/icon");
|
|
30
|
-
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
31
30
|
const tertiaryButtonStencil = canvas_kit_styling_1.createStencil({
|
|
32
31
|
extends: BaseButton_1.buttonStencil,
|
|
33
32
|
// Base Styles
|
|
34
|
-
base: { name: "
|
|
33
|
+
base: { name: "35d89c", 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-53c273: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-53c273: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-53c273: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-53c273: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-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-base));}" },
|
|
35
34
|
modifiers: {
|
|
36
35
|
// IconPosition Styles
|
|
37
36
|
iconPosition: {
|
|
38
|
-
only: { name: "
|
|
39
|
-
start: { name: "
|
|
40
|
-
end: { name: "
|
|
37
|
+
only: { name: "edc98d", styles: "padding:0;border-radius:var(--cnvs-sys-shape-round);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
|
|
38
|
+
start: { name: "ae3305", styles: "" },
|
|
39
|
+
end: { name: "bc73ca", styles: "" }
|
|
41
40
|
},
|
|
42
41
|
isThemeable: {
|
|
43
|
-
true: { name: "
|
|
42
|
+
true: { name: "44a76b", styles: "--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-primary-base));&:focus-visible, &.focus{--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-primary-base));}&:hover, &.hover{--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-dark));}&:active, &.active{--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-darkest));}&:disabled, &.disabled{--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-brand-primary-base));}" }
|
|
44
43
|
},
|
|
45
44
|
variant: {
|
|
46
45
|
// Inverse Styles
|
|
47
|
-
inverse: { name: "
|
|
46
|
+
inverse: { name: "9bce42", styles: "--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273: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-53c273: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-53c273: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-53c273: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-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-inverse));}" }
|
|
48
47
|
}
|
|
49
48
|
},
|
|
50
49
|
// Compound Modifier Styles
|
|
51
50
|
compound: [
|
|
52
51
|
{
|
|
53
52
|
modifiers: { size: 'large', iconPosition: 'only' },
|
|
54
|
-
styles: { name: "
|
|
53
|
+
styles: { name: "c2436d", styles: "min-width:calc(var(--cnvs-sys-space-x4) * 3);" }
|
|
55
54
|
},
|
|
56
55
|
{
|
|
57
56
|
modifiers: { size: 'large', iconPosition: 'start' },
|
|
58
|
-
styles: { name: "
|
|
57
|
+
styles: { name: "6113cf", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
59
58
|
},
|
|
60
59
|
{
|
|
61
60
|
modifiers: { size: 'large', iconPosition: 'end' },
|
|
62
|
-
styles: { name: "
|
|
61
|
+
styles: { name: "94c90d", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
63
62
|
},
|
|
64
63
|
{
|
|
65
64
|
modifiers: { size: 'medium', iconPosition: 'only' },
|
|
66
|
-
styles: { name: "
|
|
65
|
+
styles: { name: "91d174", styles: "min-width:var(--cnvs-sys-space-x10);" }
|
|
67
66
|
},
|
|
68
67
|
{
|
|
69
68
|
modifiers: { size: 'medium', iconPosition: 'start' },
|
|
70
|
-
styles: { name: "
|
|
69
|
+
styles: { name: "ee0a1d", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
71
70
|
},
|
|
72
71
|
{
|
|
73
72
|
modifiers: { size: 'medium', iconPosition: 'end' },
|
|
74
|
-
styles: { name: "
|
|
73
|
+
styles: { name: "0564c4", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
75
74
|
},
|
|
76
75
|
{
|
|
77
76
|
modifiers: { size: 'small', iconPosition: 'only' },
|
|
78
|
-
styles: { name: "
|
|
77
|
+
styles: { name: "0578ae", styles: "min-width:var(--cnvs-sys-space-x8);" }
|
|
79
78
|
},
|
|
80
79
|
{
|
|
81
80
|
modifiers: { size: 'small', iconPosition: 'start' },
|
|
82
|
-
styles: { name: "
|
|
81
|
+
styles: { name: "945899", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
83
82
|
},
|
|
84
83
|
{
|
|
85
84
|
modifiers: { size: 'small', iconPosition: 'end' },
|
|
86
|
-
styles: { name: "
|
|
85
|
+
styles: { name: "31aee3", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
87
86
|
},
|
|
88
87
|
{
|
|
89
88
|
modifiers: { size: 'extraSmall', iconPosition: 'only' },
|
|
90
|
-
styles: { name: "
|
|
89
|
+
styles: { name: "7606d0", styles: "min-width:var(--cnvs-sys-space-x6);" }
|
|
91
90
|
},
|
|
92
91
|
{
|
|
93
92
|
modifiers: { size: 'extraSmall', iconPosition: 'start' },
|
|
94
|
-
styles: { name: "
|
|
93
|
+
styles: { name: "fb2eb9", styles: "padding-inline-start:var(--cnvs-sys-space-x1);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
95
94
|
},
|
|
96
95
|
{
|
|
97
96
|
modifiers: { size: 'extraSmall', iconPosition: 'end' },
|
|
98
|
-
styles: { name: "
|
|
97
|
+
styles: { name: "837cd0", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x1);" }
|
|
99
98
|
}
|
|
100
99
|
]
|
|
101
|
-
}, "tertiary-button-
|
|
100
|
+
}, "tertiary-button-4896ac");
|
|
102
101
|
exports.TertiaryButton = common_1.createComponent('button')({
|
|
103
102
|
displayName: 'TertiaryButton',
|
|
104
|
-
Component: ({ children, icon, isThemeable, size = 'medium', variant, iconPosition, ...elemProps }, ref, Element) => {
|
|
103
|
+
Component: ({ children, icon, isThemeable, size = 'medium', variant, iconPosition, grow, cs, ...elemProps }, ref, Element) => {
|
|
105
104
|
const baseIconPosition = iconPosition
|
|
106
105
|
? iconPosition
|
|
107
106
|
: icon
|
|
@@ -109,11 +108,15 @@ exports.TertiaryButton = common_1.createComponent('button')({
|
|
|
109
108
|
? 'start'
|
|
110
109
|
: 'only'
|
|
111
110
|
: undefined;
|
|
112
|
-
return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref, icon: icon, size: size, iconPosition: iconPosition
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
111
|
+
return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref, icon: icon, size: size, iconPosition: iconPosition, grow: grow, cs: [
|
|
112
|
+
tertiaryButtonStencil({
|
|
113
|
+
size,
|
|
114
|
+
variant,
|
|
115
|
+
grow,
|
|
116
|
+
isThemeable: (isThemeable || baseIconPosition !== 'only'),
|
|
117
|
+
iconPosition: baseIconPosition,
|
|
118
|
+
}),
|
|
119
|
+
cs,
|
|
120
|
+
] }, elemProps), children));
|
|
118
121
|
},
|
|
119
122
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DeleteButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/DeleteButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"DeleteButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/DeleteButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAG7C;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;CAAG;AAwCzD;;;;GAIG;AACH,eAAO,MAAM,YAAY,0FAqBvB,CAAC"}
|
|
@@ -5,11 +5,10 @@ import { createStencil, cssVar } from '@workday/canvas-kit-styling';
|
|
|
5
5
|
import { brand, system } from '@workday/canvas-tokens-web';
|
|
6
6
|
import { Button } from './Button';
|
|
7
7
|
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
|
|
8
|
-
import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
9
8
|
const deleteButtonStencil = createStencil({
|
|
10
9
|
extends: buttonStencil,
|
|
11
|
-
base: { name: "
|
|
12
|
-
}, "delete-button-
|
|
10
|
+
base: { name: "ad5763", 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-53c273: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-53c273: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-53c273: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-53c273: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-53c273:var(--icon-c34400, var(--cnvs-brand-error-accent));--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);}" }
|
|
11
|
+
}, "delete-button-880e51");
|
|
13
12
|
/**
|
|
14
13
|
* Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
|
|
15
14
|
* have significant consequences. They commonly appear in confirmation dialogs as the final
|
|
@@ -17,7 +16,7 @@ const deleteButtonStencil = createStencil({
|
|
|
17
16
|
*/
|
|
18
17
|
export const DeleteButton = createComponent('button')({
|
|
19
18
|
displayName: 'DeleteButton',
|
|
20
|
-
Component: ({ children, ...elemProps }, ref, Element) => {
|
|
21
|
-
return (React.createElement(Button, Object.assign({ as: Element, ref: ref
|
|
19
|
+
Component: ({ children, size, iconPosition, grow, cs, ...elemProps }, ref, Element) => {
|
|
20
|
+
return (React.createElement(Button, Object.assign({ as: Element, ref: ref, size: size, grow: grow, iconPosition: iconPosition, cs: [deleteButtonStencil({ size, iconPosition }), cs] }, elemProps), children));
|
|
22
21
|
},
|
|
23
22
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAE7C;;;;GAIG;AACH,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA+FD,eAAO,MAAM,aAAa,2FAqBxB,CAAC"}
|
|
@@ -5,20 +5,19 @@ import { createStencil, cssVar } from '@workday/canvas-kit-styling';
|
|
|
5
5
|
import { brand, system } from '@workday/canvas-tokens-web';
|
|
6
6
|
import { buttonColorPropVars, buttonStencil } from './BaseButton';
|
|
7
7
|
import { Button } from './Button';
|
|
8
|
-
import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
9
8
|
const primaryButtonStencil = createStencil({
|
|
10
9
|
extends: buttonStencil,
|
|
11
|
-
base: { name: "
|
|
10
|
+
base: { name: "58848f", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-brand-primary-base);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-primary-accent));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-brand-primary-accent);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-primary-accent));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-brand-primary-dark);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-brand-primary-darkest);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-accent));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-brand-primary-accent);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-brand-primary-accent));}" },
|
|
12
11
|
modifiers: {
|
|
13
12
|
variant: {
|
|
14
13
|
// Inverse Styles
|
|
15
|
-
inverse: { name: "
|
|
14
|
+
inverse: { name: "a03cfe", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-65cb05:var(--cnvs-sys-color-border-inverse);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-stronger));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-stronger));}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" }
|
|
16
15
|
}
|
|
17
16
|
}
|
|
18
|
-
}, "primary-button-
|
|
17
|
+
}, "primary-button-cc7f35");
|
|
19
18
|
export const PrimaryButton = createComponent('button')({
|
|
20
19
|
displayName: 'PrimaryButton',
|
|
21
|
-
Component: ({ children, variant, ...elemProps }, ref, Element) => {
|
|
22
|
-
return (React.createElement(Button, Object.assign({ as: Element, ref: ref
|
|
20
|
+
Component: ({ children, variant, size, iconPosition, grow, cs, ...elemProps }, ref, Element) => {
|
|
21
|
+
return (React.createElement(Button, Object.assign({ as: Element, ref: ref, iconPosition: iconPosition, size: size, grow: grow, cs: [primaryButtonStencil({ variant, iconPosition, grow, size }), cs] }, elemProps), children));
|
|
23
22
|
},
|
|
24
23
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAG7C;;;;GAIG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA8GD,eAAO,MAAM,eAAe,6FAqB1B,CAAC"}
|
|
@@ -5,19 +5,18 @@ import { createStencil, cssVar } from '@workday/canvas-kit-styling';
|
|
|
5
5
|
import { brand, system } from '@workday/canvas-tokens-web';
|
|
6
6
|
import { Button } from './Button';
|
|
7
7
|
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
|
|
8
|
-
import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
9
8
|
const secondaryButtonStencil = createStencil({
|
|
10
9
|
extends: buttonStencil,
|
|
11
|
-
base: { name: "
|
|
10
|
+
base: { name: "843acd", styles: "box-sizing:border-box;--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--borderRadius-button-65cb05:var(--cnvs-sys-shape-round);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-contrast-default);--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-accent));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-contrast-strong);--border-button-65cb05:var(--cnvs-sys-color-border-contrast-strong);--label-button-65cb05:var(--cnvs-brand-primary-accent);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-accent));}&:disabled, &.disabled{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--opacity-button-65cb05:var(--cnvs-sys-opacity-disabled);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
|
|
12
11
|
modifiers: {
|
|
13
12
|
variant: {
|
|
14
|
-
inverse: { name: "
|
|
13
|
+
inverse: { name: "79e673", styles: "--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-inverse);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-65cb05:var(--cnvs-sys-color-border-inverse);--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-stronger));}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--border-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-stronger);--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-stronger));}&:disabled, &.disabled{--background-button-65cb05:transparent;--border-button-65cb05:var(--cnvs-sys-color-border-inverse);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-inverse));}" }
|
|
15
14
|
}
|
|
16
15
|
}
|
|
17
|
-
}, "secondary-button-
|
|
16
|
+
}, "secondary-button-e11131");
|
|
18
17
|
export const SecondaryButton = createComponent('button')({
|
|
19
18
|
displayName: 'SecondaryButton',
|
|
20
|
-
Component: ({ children, variant, ...elemProps }, ref, Element) => {
|
|
21
|
-
return (React.createElement(Button, Object.assign({ as: Element, ref: ref
|
|
19
|
+
Component: ({ children, variant, size, iconPosition, grow, cs, ...elemProps }, ref, Element) => {
|
|
20
|
+
return (React.createElement(Button, Object.assign({ as: Element, ref: ref, iconPosition: iconPosition, size: size, grow: grow, cs: [secondaryButtonStencil({ variant, iconPosition, grow, size }), cs] }, elemProps), children));
|
|
22
21
|
},
|
|
23
22
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAG7C;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAsQD,eAAO,MAAM,cAAc,4FAiDzB,CAAC"}
|
|
@@ -5,81 +5,80 @@ import { calc, createStencil, cssVar } from '@workday/canvas-kit-styling';
|
|
|
5
5
|
import { system, brand } from '@workday/canvas-tokens-web';
|
|
6
6
|
import { Button } from './Button';
|
|
7
7
|
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
|
|
8
|
-
import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
9
8
|
const tertiaryButtonStencil = createStencil({
|
|
10
9
|
extends: buttonStencil,
|
|
11
10
|
// Base Styles
|
|
12
|
-
base: { name: "
|
|
11
|
+
base: { name: "35d89c", 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-53c273: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-53c273: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-53c273: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-53c273: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-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-base));}" },
|
|
13
12
|
modifiers: {
|
|
14
13
|
// IconPosition Styles
|
|
15
14
|
iconPosition: {
|
|
16
|
-
only: { name: "
|
|
17
|
-
start: { name: "
|
|
18
|
-
end: { name: "
|
|
15
|
+
only: { name: "edc98d", styles: "padding:0;border-radius:var(--cnvs-sys-shape-round);--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-sys-color-fg-strong));&:focus-visible, &.focus{--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-strong));}" },
|
|
16
|
+
start: { name: "ae3305", styles: "" },
|
|
17
|
+
end: { name: "bc73ca", styles: "" }
|
|
19
18
|
},
|
|
20
19
|
isThemeable: {
|
|
21
|
-
true: { name: "
|
|
20
|
+
true: { name: "44a76b", styles: "--color-system-icon-53c273:var(--icon-b5fb58, var(--cnvs-brand-primary-base));&:focus-visible, &.focus{--color-system-icon-53c273:var(--icon-2ae7b1, var(--cnvs-brand-primary-base));}&:hover, &.hover{--color-system-icon-53c273:var(--icon-c4b8f8, var(--cnvs-brand-primary-dark));}&:active, &.active{--color-system-icon-53c273:var(--icon-93b1ce, var(--cnvs-brand-primary-darkest));}&:disabled, &.disabled{--color-system-icon-53c273:var(--icon-c34400, var(--cnvs-brand-primary-base));}" }
|
|
22
21
|
},
|
|
23
22
|
variant: {
|
|
24
23
|
// Inverse Styles
|
|
25
|
-
inverse: { name: "
|
|
24
|
+
inverse: { name: "9bce42", styles: "--background-button-65cb05:transparent;--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);--color-system-icon-53c273: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-53c273: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-53c273: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-53c273: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-53c273:var(--icon-c34400, var(--cnvs-sys-color-fg-inverse));}" }
|
|
26
25
|
}
|
|
27
26
|
},
|
|
28
27
|
// Compound Modifier Styles
|
|
29
28
|
compound: [
|
|
30
29
|
{
|
|
31
30
|
modifiers: { size: 'large', iconPosition: 'only' },
|
|
32
|
-
styles: { name: "
|
|
31
|
+
styles: { name: "c2436d", styles: "min-width:calc(var(--cnvs-sys-space-x4) * 3);" }
|
|
33
32
|
},
|
|
34
33
|
{
|
|
35
34
|
modifiers: { size: 'large', iconPosition: 'start' },
|
|
36
|
-
styles: { name: "
|
|
35
|
+
styles: { name: "6113cf", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
37
36
|
},
|
|
38
37
|
{
|
|
39
38
|
modifiers: { size: 'large', iconPosition: 'end' },
|
|
40
|
-
styles: { name: "
|
|
39
|
+
styles: { name: "94c90d", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
41
40
|
},
|
|
42
41
|
{
|
|
43
42
|
modifiers: { size: 'medium', iconPosition: 'only' },
|
|
44
|
-
styles: { name: "
|
|
43
|
+
styles: { name: "91d174", styles: "min-width:var(--cnvs-sys-space-x10);" }
|
|
45
44
|
},
|
|
46
45
|
{
|
|
47
46
|
modifiers: { size: 'medium', iconPosition: 'start' },
|
|
48
|
-
styles: { name: "
|
|
47
|
+
styles: { name: "ee0a1d", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
49
48
|
},
|
|
50
49
|
{
|
|
51
50
|
modifiers: { size: 'medium', iconPosition: 'end' },
|
|
52
|
-
styles: { name: "
|
|
51
|
+
styles: { name: "0564c4", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
53
52
|
},
|
|
54
53
|
{
|
|
55
54
|
modifiers: { size: 'small', iconPosition: 'only' },
|
|
56
|
-
styles: { name: "
|
|
55
|
+
styles: { name: "0578ae", styles: "min-width:var(--cnvs-sys-space-x8);" }
|
|
57
56
|
},
|
|
58
57
|
{
|
|
59
58
|
modifiers: { size: 'small', iconPosition: 'start' },
|
|
60
|
-
styles: { name: "
|
|
59
|
+
styles: { name: "945899", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
|
|
61
60
|
},
|
|
62
61
|
{
|
|
63
62
|
modifiers: { size: 'small', iconPosition: 'end' },
|
|
64
|
-
styles: { name: "
|
|
63
|
+
styles: { name: "31aee3", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
65
64
|
},
|
|
66
65
|
{
|
|
67
66
|
modifiers: { size: 'extraSmall', iconPosition: 'only' },
|
|
68
|
-
styles: { name: "
|
|
67
|
+
styles: { name: "7606d0", styles: "min-width:var(--cnvs-sys-space-x6);" }
|
|
69
68
|
},
|
|
70
69
|
{
|
|
71
70
|
modifiers: { size: 'extraSmall', iconPosition: 'start' },
|
|
72
|
-
styles: { name: "
|
|
71
|
+
styles: { name: "fb2eb9", styles: "padding-inline-start:var(--cnvs-sys-space-x1);padding-inline-end:var(--cnvs-sys-space-x2);" }
|
|
73
72
|
},
|
|
74
73
|
{
|
|
75
74
|
modifiers: { size: 'extraSmall', iconPosition: 'end' },
|
|
76
|
-
styles: { name: "
|
|
75
|
+
styles: { name: "837cd0", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x1);" }
|
|
77
76
|
}
|
|
78
77
|
]
|
|
79
|
-
}, "tertiary-button-
|
|
78
|
+
}, "tertiary-button-4896ac");
|
|
80
79
|
export const TertiaryButton = createComponent('button')({
|
|
81
80
|
displayName: 'TertiaryButton',
|
|
82
|
-
Component: ({ children, icon, isThemeable, size = 'medium', variant, iconPosition, ...elemProps }, ref, Element) => {
|
|
81
|
+
Component: ({ children, icon, isThemeable, size = 'medium', variant, iconPosition, grow, cs, ...elemProps }, ref, Element) => {
|
|
83
82
|
const baseIconPosition = iconPosition
|
|
84
83
|
? iconPosition
|
|
85
84
|
: icon
|
|
@@ -87,11 +86,15 @@ export const TertiaryButton = createComponent('button')({
|
|
|
87
86
|
? 'start'
|
|
88
87
|
: 'only'
|
|
89
88
|
: undefined;
|
|
90
|
-
return (React.createElement(Button, Object.assign({ as: Element, ref: ref, icon: icon, size: size, iconPosition: iconPosition
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
89
|
+
return (React.createElement(Button, Object.assign({ as: Element, ref: ref, icon: icon, size: size, iconPosition: iconPosition, grow: grow, cs: [
|
|
90
|
+
tertiaryButtonStencil({
|
|
91
|
+
size,
|
|
92
|
+
variant,
|
|
93
|
+
grow,
|
|
94
|
+
isThemeable: (isThemeable || baseIconPosition !== 'only'),
|
|
95
|
+
iconPosition: baseIconPosition,
|
|
96
|
+
}),
|
|
97
|
+
cs,
|
|
98
|
+
] }, elemProps), children));
|
|
96
99
|
},
|
|
97
100
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-react",
|
|
3
|
-
"version": "11.1.
|
|
3
|
+
"version": "11.1.16",
|
|
4
4
|
"description": "The parent module that contains all Workday Canvas Kit React components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -49,8 +49,8 @@
|
|
|
49
49
|
"@emotion/styled": "^11.6.0",
|
|
50
50
|
"@popperjs/core": "^2.5.4",
|
|
51
51
|
"@workday/canvas-colors-web": "^2.0.0",
|
|
52
|
-
"@workday/canvas-kit-popup-stack": "^11.1.
|
|
53
|
-
"@workday/canvas-kit-styling": "^11.1.
|
|
52
|
+
"@workday/canvas-kit-popup-stack": "^11.1.16",
|
|
53
|
+
"@workday/canvas-kit-styling": "^11.1.16",
|
|
54
54
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
55
55
|
"@workday/canvas-tokens-web": "^2.0.0",
|
|
56
56
|
"@workday/design-assets-types": "^0.2.8",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"@workday/canvas-accent-icons-web": "^3.0.0",
|
|
68
68
|
"@workday/canvas-applet-icons-web": "^2.0.0"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "471bb231c188ab23de9c11f5950b0d1e893d426d"
|
|
71
71
|
}
|