@workday/canvas-kit-react 11.0.0-alpha.631-next.0 → 11.0.0-alpha.635-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/badge/lib/CountBadge.tsx +71 -46
- package/common/lib/types.ts +2 -2
- package/dist/commonjs/badge/lib/CountBadge.d.ts +22 -3
- package/dist/commonjs/badge/lib/CountBadge.d.ts.map +1 -1
- package/dist/commonjs/badge/lib/CountBadge.js +48 -42
- package/dist/commonjs/button/lib/BaseButton.js +17 -17
- package/dist/commonjs/button/lib/DeleteButton.js +1 -1
- package/dist/commonjs/button/lib/PrimaryButton.js +2 -2
- package/dist/commonjs/button/lib/SecondaryButton.js +2 -2
- package/dist/commonjs/button/lib/TertiaryButton.js +15 -15
- package/dist/commonjs/common/lib/CanvasProvider.js +1 -1
- package/dist/commonjs/common/lib/types.d.ts +2 -2
- package/dist/commonjs/common/lib/types.d.ts.map +1 -1
- package/dist/commonjs/common/lib/types.js +2 -2
- package/dist/commonjs/form-field/lib/FormField.d.ts +6 -0
- package/dist/commonjs/form-field/lib/FormField.d.ts.map +1 -1
- package/dist/commonjs/form-field/lib/FormField.js +3 -0
- package/dist/commonjs/form-field/lib/Hint.d.ts +6 -0
- package/dist/commonjs/form-field/lib/Hint.d.ts.map +1 -1
- package/dist/commonjs/form-field/lib/Hint.js +3 -0
- package/dist/commonjs/form-field/lib/Label.d.ts +6 -0
- package/dist/commonjs/form-field/lib/Label.d.ts.map +1 -1
- package/dist/commonjs/form-field/lib/Label.js +3 -0
- package/dist/commonjs/form-field/lib/types.d.ts +6 -0
- package/dist/commonjs/form-field/lib/types.d.ts.map +1 -1
- package/dist/commonjs/form-field/lib/types.js +3 -0
- package/dist/commonjs/select/lib/Select.js +3 -3
- package/dist/es6/badge/lib/CountBadge.d.ts +22 -3
- package/dist/es6/badge/lib/CountBadge.d.ts.map +1 -1
- package/dist/es6/badge/lib/CountBadge.js +47 -37
- package/dist/es6/button/lib/BaseButton.js +17 -17
- package/dist/es6/button/lib/DeleteButton.js +1 -1
- package/dist/es6/button/lib/PrimaryButton.js +2 -2
- package/dist/es6/button/lib/SecondaryButton.js +2 -2
- package/dist/es6/button/lib/TertiaryButton.js +15 -15
- package/dist/es6/common/lib/CanvasProvider.js +1 -1
- package/dist/es6/common/lib/types.d.ts +2 -2
- package/dist/es6/common/lib/types.d.ts.map +1 -1
- package/dist/es6/common/lib/types.js +2 -2
- package/dist/es6/form-field/lib/FormField.d.ts +6 -0
- package/dist/es6/form-field/lib/FormField.d.ts.map +1 -1
- package/dist/es6/form-field/lib/FormField.js +3 -0
- package/dist/es6/form-field/lib/Hint.d.ts +6 -0
- package/dist/es6/form-field/lib/Hint.d.ts.map +1 -1
- package/dist/es6/form-field/lib/Hint.js +3 -0
- package/dist/es6/form-field/lib/Label.d.ts +6 -0
- package/dist/es6/form-field/lib/Label.d.ts.map +1 -1
- package/dist/es6/form-field/lib/Label.js +3 -0
- package/dist/es6/form-field/lib/types.d.ts +6 -0
- package/dist/es6/form-field/lib/types.d.ts.map +1 -1
- package/dist/es6/form-field/lib/types.js +3 -0
- package/dist/es6/select/lib/Select.js +3 -3
- package/form-field/lib/FormField.tsx +6 -2
- package/form-field/lib/Hint.tsx +6 -2
- package/form-field/lib/Label.tsx +6 -2
- package/form-field/lib/types.ts +6 -1
- package/package.json +4 -4
- package/select/lib/Select.tsx +2 -2
package/badge/lib/CountBadge.tsx
CHANGED
|
@@ -1,26 +1,9 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
count?: number;
|
|
8
|
-
limit?: number;
|
|
9
|
-
variant?: 'default' | 'inverse';
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
const variants = {
|
|
13
|
-
default: {
|
|
14
|
-
background: colors.cinnamon500,
|
|
15
|
-
color: colors.frenchVanilla100,
|
|
16
|
-
textShadow: '0 0 1px rgba(0,0,0, 0.35)',
|
|
17
|
-
},
|
|
18
|
-
inverse: {
|
|
19
|
-
background: colors.frenchVanilla100,
|
|
20
|
-
boxShadow: '0 1px 2px rgba(0,0,0, 0.25)',
|
|
21
|
-
color: colors.blueberry400,
|
|
22
|
-
},
|
|
23
|
-
};
|
|
2
|
+
// eslint-disable-next-line @emotion/no-vanilla
|
|
3
|
+
import {keyframes} from '@emotion/css';
|
|
4
|
+
import {createComponent} from '@workday/canvas-kit-react/common';
|
|
5
|
+
import {handleCsProp, CSProps, createStencil, px2rem} from '@workday/canvas-kit-styling';
|
|
6
|
+
import {base, system} from '@workday/canvas-tokens-web';
|
|
24
7
|
|
|
25
8
|
const grow = keyframes`
|
|
26
9
|
from {
|
|
@@ -32,35 +15,77 @@ const grow = keyframes`
|
|
|
32
15
|
}
|
|
33
16
|
`;
|
|
34
17
|
|
|
35
|
-
|
|
36
|
-
|
|
18
|
+
export interface CountBadgeProps extends CSProps {
|
|
19
|
+
/**
|
|
20
|
+
* Sets the count displayed in the badge
|
|
21
|
+
*
|
|
22
|
+
* @default 0
|
|
23
|
+
*/
|
|
24
|
+
count?: number;
|
|
25
|
+
/**
|
|
26
|
+
* Sets the maximum count to display before formatting the number.
|
|
27
|
+
* E.g. Given a count of `100` and a limit of `100`, the badge would display `99+`.
|
|
28
|
+
*
|
|
29
|
+
* @default 1000
|
|
30
|
+
*/
|
|
31
|
+
limit?: number;
|
|
32
|
+
/**
|
|
33
|
+
* Sets the variant of the Count Badge
|
|
34
|
+
*
|
|
35
|
+
* @default 'default'
|
|
36
|
+
*/
|
|
37
|
+
variant?: 'default' | 'inverse';
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
const countBadgeStencil = createStencil({
|
|
41
|
+
base: {
|
|
37
42
|
alignItems: 'center',
|
|
38
43
|
animation: `${grow} 0.2s ease`,
|
|
39
|
-
borderRadius:
|
|
44
|
+
borderRadius: system.shape.round,
|
|
40
45
|
boxSizing: 'border-box',
|
|
41
46
|
display: 'inline-flex',
|
|
42
|
-
fontFamily,
|
|
43
|
-
fontSize:
|
|
44
|
-
|
|
45
|
-
|
|
47
|
+
fontFamily: system.fontFamily.default,
|
|
48
|
+
fontSize: system.fontSize.subtext.medium,
|
|
49
|
+
//@ts-ignore
|
|
50
|
+
fontWeight: system.fontWeight.bold,
|
|
51
|
+
height: px2rem(20),
|
|
46
52
|
justifyContent: 'center',
|
|
47
|
-
lineHeight:
|
|
48
|
-
minWidth:
|
|
49
|
-
padding:
|
|
53
|
+
lineHeight: px2rem(20),
|
|
54
|
+
minWidth: px2rem(20),
|
|
55
|
+
padding: `0 ${px2rem(6.5)}`,
|
|
50
56
|
},
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
57
|
+
modifiers: {
|
|
58
|
+
variant: {
|
|
59
|
+
default: {
|
|
60
|
+
background: base.cinnamon500,
|
|
61
|
+
color: base.frenchVanilla100,
|
|
62
|
+
textShadow: `0 0 ${px2rem(1)} rgba(0,0,0, 0.35)`,
|
|
63
|
+
},
|
|
64
|
+
inverse: {
|
|
65
|
+
background: base.frenchVanilla100,
|
|
66
|
+
boxShadow: `0 ${px2rem(1)} ${px2rem(2)} rgba(0,0,0, 0.25)`,
|
|
67
|
+
color: base.blueberry400,
|
|
68
|
+
},
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
});
|
|
58
72
|
|
|
59
|
-
|
|
73
|
+
/**
|
|
74
|
+
* `CountBadge` provides a quantity-based summary with dynamic values.
|
|
75
|
+
*/
|
|
76
|
+
export const CountBadge = createComponent('span')({
|
|
77
|
+
displayName: 'NewCountBadge',
|
|
78
|
+
Component: (
|
|
79
|
+
{count = 0, limit = 1000, variant = 'default', ...elemProps}: CountBadgeProps,
|
|
80
|
+
ref,
|
|
81
|
+
Element
|
|
82
|
+
) => {
|
|
83
|
+
const formattedCount = count < limit ? `${count}` : `${limit - 1}+`;
|
|
60
84
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
}
|
|
85
|
+
return (
|
|
86
|
+
<Element ref={ref} {...handleCsProp(elemProps, [countBadgeStencil({variant})])}>
|
|
87
|
+
{formattedCount}
|
|
88
|
+
</Element>
|
|
89
|
+
);
|
|
90
|
+
},
|
|
91
|
+
});
|
package/common/lib/types.ts
CHANGED
|
@@ -1,8 +1,27 @@
|
|
|
1
|
-
import
|
|
2
|
-
export interface CountBadgeProps extends
|
|
1
|
+
import { CSProps } from '@workday/canvas-kit-styling';
|
|
2
|
+
export interface CountBadgeProps extends CSProps {
|
|
3
|
+
/**
|
|
4
|
+
* Sets the count displayed in the badge
|
|
5
|
+
*
|
|
6
|
+
* @default 0
|
|
7
|
+
*/
|
|
3
8
|
count?: number;
|
|
9
|
+
/**
|
|
10
|
+
* Sets the maximum count to display before formatting the number.
|
|
11
|
+
* E.g. Given a count of `100` and a limit of `100`, the badge would display `99+`.
|
|
12
|
+
*
|
|
13
|
+
* @default 1000
|
|
14
|
+
*/
|
|
4
15
|
limit?: number;
|
|
16
|
+
/**
|
|
17
|
+
* Sets the variant of the Count Badge
|
|
18
|
+
*
|
|
19
|
+
* @default 'default'
|
|
20
|
+
*/
|
|
5
21
|
variant?: 'default' | 'inverse';
|
|
6
22
|
}
|
|
7
|
-
|
|
23
|
+
/**
|
|
24
|
+
* `CountBadge` provides a quantity-based summary with dynamic values.
|
|
25
|
+
*/
|
|
26
|
+
export declare const CountBadge: import("@workday/canvas-kit-react/common").ElementComponent<"span", CountBadgeProps>;
|
|
8
27
|
//# sourceMappingURL=CountBadge.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CountBadge.d.ts","sourceRoot":"","sources":["../../../../badge/lib/CountBadge.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CountBadge.d.ts","sourceRoot":"","sources":["../../../../badge/lib/CountBadge.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAe,OAAO,EAAwB,MAAM,6BAA6B,CAAC;AAazF,MAAM,WAAW,eAAgB,SAAQ,OAAO;IAC9C;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAmCD;;GAEG;AACH,eAAO,MAAM,UAAU,sFAerB,CAAC"}
|
|
@@ -18,28 +18,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
18
18
|
__setModuleDefault(result, mod);
|
|
19
19
|
return result;
|
|
20
20
|
};
|
|
21
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
22
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
23
|
-
};
|
|
24
21
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
22
|
exports.CountBadge = void 0;
|
|
26
23
|
const React = __importStar(require("react"));
|
|
27
|
-
|
|
28
|
-
const
|
|
29
|
-
const
|
|
30
|
-
const
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
color: tokens_1.colors.frenchVanilla100,
|
|
34
|
-
textShadow: '0 0 1px rgba(0,0,0, 0.35)',
|
|
35
|
-
},
|
|
36
|
-
inverse: {
|
|
37
|
-
background: tokens_1.colors.frenchVanilla100,
|
|
38
|
-
boxShadow: '0 1px 2px rgba(0,0,0, 0.25)',
|
|
39
|
-
color: tokens_1.colors.blueberry400,
|
|
40
|
-
},
|
|
41
|
-
};
|
|
42
|
-
const grow = react_1.keyframes `
|
|
24
|
+
// eslint-disable-next-line @emotion/no-vanilla
|
|
25
|
+
const css_1 = require("@emotion/css");
|
|
26
|
+
const common_1 = require("@workday/canvas-kit-react/common");
|
|
27
|
+
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
28
|
+
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
29
|
+
const grow = css_1.keyframes `
|
|
43
30
|
from {
|
|
44
31
|
transform: scale(0.85);
|
|
45
32
|
}
|
|
@@ -48,26 +35,45 @@ const grow = react_1.keyframes `
|
|
|
48
35
|
transform: scale(1.0);
|
|
49
36
|
}
|
|
50
37
|
`;
|
|
51
|
-
const
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
38
|
+
const countBadgeStencil = canvas_kit_styling_1.createStencil({
|
|
39
|
+
base: {
|
|
40
|
+
alignItems: 'center',
|
|
41
|
+
animation: `${grow} 0.2s ease`,
|
|
42
|
+
borderRadius: canvas_tokens_web_1.system.shape.round,
|
|
43
|
+
boxSizing: 'border-box',
|
|
44
|
+
display: 'inline-flex',
|
|
45
|
+
fontFamily: canvas_tokens_web_1.system.fontFamily.default,
|
|
46
|
+
fontSize: canvas_tokens_web_1.system.fontSize.subtext.medium,
|
|
47
|
+
//@ts-ignore
|
|
48
|
+
fontWeight: canvas_tokens_web_1.system.fontWeight.bold,
|
|
49
|
+
height: canvas_kit_styling_1.px2rem(20),
|
|
50
|
+
justifyContent: 'center',
|
|
51
|
+
lineHeight: canvas_kit_styling_1.px2rem(20),
|
|
52
|
+
minWidth: canvas_kit_styling_1.px2rem(20),
|
|
53
|
+
padding: `0 ${canvas_kit_styling_1.px2rem(6.5)}`,
|
|
54
|
+
},
|
|
55
|
+
modifiers: {
|
|
56
|
+
variant: {
|
|
57
|
+
default: {
|
|
58
|
+
background: canvas_tokens_web_1.base.cinnamon500,
|
|
59
|
+
color: canvas_tokens_web_1.base.frenchVanilla100,
|
|
60
|
+
textShadow: `0 0 ${canvas_kit_styling_1.px2rem(1)} rgba(0,0,0, 0.35)`,
|
|
61
|
+
},
|
|
62
|
+
inverse: {
|
|
63
|
+
background: canvas_tokens_web_1.base.frenchVanilla100,
|
|
64
|
+
boxShadow: `0 ${canvas_kit_styling_1.px2rem(1)} ${canvas_kit_styling_1.px2rem(2)} rgba(0,0,0, 0.25)`,
|
|
65
|
+
color: canvas_tokens_web_1.base.blueberry400,
|
|
66
|
+
},
|
|
67
|
+
},
|
|
68
|
+
},
|
|
69
|
+
});
|
|
70
|
+
/**
|
|
71
|
+
* `CountBadge` provides a quantity-based summary with dynamic values.
|
|
72
|
+
*/
|
|
73
|
+
exports.CountBadge = common_1.createComponent('span')({
|
|
74
|
+
displayName: 'NewCountBadge',
|
|
75
|
+
Component: ({ count = 0, limit = 1000, variant = 'default', ...elemProps }, ref, Element) => {
|
|
76
|
+
const formattedCount = count < limit ? `${count}` : `${limit - 1}+`;
|
|
77
|
+
return (React.createElement(Element, Object.assign({ ref: ref }, canvas_kit_styling_1.handleCsProp(elemProps, [countBadgeStencil({ variant })])), formattedCount));
|
|
78
|
+
},
|
|
79
|
+
});
|
|
@@ -40,7 +40,7 @@ exports.buttonVars = {
|
|
|
40
40
|
/**
|
|
41
41
|
* Base styles for Buttons.
|
|
42
42
|
*/
|
|
43
|
-
const baseButtonStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
43
|
+
const baseButtonStyles = canvas_kit_styling_1.createStyles({ name: "uoh81", styles: "font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:bold;background-color:var(--css-button-vars-default-background, transparent);color:var(--css-button-vars-default-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, #333333));border-width:1px;border-style:solid;gap:var(--cnvs-sys-space-x2, 0.5rem);border-color:var(--css-button-vars-default-border, transparent);cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;box-sizing:border-box;outline:2px transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--css-button-vars-default-borderRadius, var(--cnvs-sys-shape-round, 62.5rem));position:relative;vertical-align:middle;overflow:hidden;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(--css-button-vars-disabled-opacity, 1);}& span .wd-icon-fill{transition-duration:40ms;fill:var(--css-button-vars-default-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-default-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}&:focus-visible, &.focus{background-color:var(--css-button-vars-focus-background, transparent);border-color:var(--css-button-vars-focus-border, transparent);color:var(--css-button-vars-focus-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-focus-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-focus-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}box-shadow:0 0 0 2px var(--css-button-vars-focus-boxShadowInner, var(--cnvs-base-palette-french-vanilla-100, #fff)), 0 0 0 calc(2px + 2px) var(--css-button-vars-focus-boxShadowOuter, var(--cnvs-brand-primary-base, rgba(0,92,184,1)));}&:hover, &.hover{background-color:var(--css-button-vars-hover-background, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));border-color:var(--css-button-vars-hover-border, transparent);color:var(--css-button-vars-hover-label-emotion-safe, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));& span .wd-icon-fill{fill:var(--css-button-vars-hover-icon, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-hover-icon, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));}}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--css-button-vars-active-background, transparent);border-color:var(--css-button-vars-active-border, transparent);color:var(--css-button-vars-active-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-active-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-active-icon);}}&:disabled, &.disabled{background-color:var(--css-button-vars-disabled-background, transparent);border-color:var(--css-button-vars-disabled-border, transparent);color:var(--css-button-vars-disabled-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-disabled-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-disabled-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}}" });
|
|
44
44
|
/**
|
|
45
45
|
* Button modifiers that will overwrite the base styles of Buttons.
|
|
46
46
|
* - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
|
|
@@ -49,24 +49,24 @@ const baseButtonStyles = canvas_kit_styling_1.createStyles({ name: "diuu1", styl
|
|
|
49
49
|
*/
|
|
50
50
|
exports.buttonModifiers = canvas_kit_styling_1.createModifiers({
|
|
51
51
|
size: {
|
|
52
|
-
large: canvas_kit_styling_1.createStyles({ name: "
|
|
53
|
-
medium: canvas_kit_styling_1.createStyles({ name: "
|
|
54
|
-
small: canvas_kit_styling_1.createStyles({ name: "
|
|
55
|
-
extraSmall: canvas_kit_styling_1.createStyles({ name: "
|
|
52
|
+
large: canvas_kit_styling_1.createStyles({ name: "uoh82", styles: "font-size:var(--cnvs-sys-space-x4, 1rem);line-height:var(--cnvs-sys-space-x6, 1.5rem);letter-spacing:0.01rem;height:48px;padding-inline:var(--cnvs-sys-space-x8, 2rem);min-width:112px;" }),
|
|
53
|
+
medium: canvas_kit_styling_1.createStyles({ name: "uoh83", styles: "font-size:0.875rem;letter-spacing:0.015rem;min-width:96px;padding-inline:var(--cnvs-sys-space-x6, 1.5rem);height:var(--cnvs-sys-space-x10, 2.5rem);" }),
|
|
54
|
+
small: canvas_kit_styling_1.createStyles({ name: "uoh84", styles: "font-size:0.875rem;letter-spacing:0.015rem;height:var(--cnvs-sys-space-x8, 2rem);min-width:var(--cnvs-sys-space-x20, 5rem);padding-inline:var(--cnvs-sys-space-x4, 1rem);gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
|
|
55
|
+
extraSmall: canvas_kit_styling_1.createStyles({ name: "uoh85", styles: "font-size:0.75rem;line-height:var(--cnvs-sys-space-x4, 1rem);letter-spacing:0.02rem;height:var(--cnvs-sys-space-x6, 1.5rem);min-width:auto;padding-inline:var(--cnvs-sys-space-x3, 0.75rem);gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
|
|
56
56
|
},
|
|
57
57
|
iconPosition: {
|
|
58
|
-
largeOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
59
|
-
largeStart: canvas_kit_styling_1.createStyles({ name: "
|
|
60
|
-
largeEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
61
|
-
mediumOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
62
|
-
mediumStart: canvas_kit_styling_1.createStyles({ name: "
|
|
63
|
-
mediumEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
64
|
-
smallOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
65
|
-
smallStart: canvas_kit_styling_1.createStyles({ name: "
|
|
66
|
-
smallEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
67
|
-
extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
68
|
-
extraSmallStart: canvas_kit_styling_1.createStyles({ name: "
|
|
69
|
-
extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
58
|
+
largeOnly: canvas_kit_styling_1.createStyles({ name: "uoh86", styles: "padding:0;min-width:calc(var(--cnvs-sys-space-x4, 1rem) * 3);" }),
|
|
59
|
+
largeStart: canvas_kit_styling_1.createStyles({ name: "uoh87", styles: "padding-inline-start:var(--cnvs-sys-space-x6, 1.5rem);padding-inline-end:var(--cnvs-sys-space-x8, 2rem);" }),
|
|
60
|
+
largeEnd: canvas_kit_styling_1.createStyles({ name: "uoh88", styles: "padding-inline-start:var(--cnvs-sys-space-x8, 2rem);padding-inline-end:var(--cnvs-sys-space-x6, 1.5rem);" }),
|
|
61
|
+
mediumOnly: canvas_kit_styling_1.createStyles({ name: "uoh89", styles: "padding:0;min-width:var(--cnvs-sys-space-x10, 2.5rem);" }),
|
|
62
|
+
mediumStart: canvas_kit_styling_1.createStyles({ name: "uoh8a", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);padding-inline-end:var(--cnvs-sys-space-x6, 1.5rem);" }),
|
|
63
|
+
mediumEnd: canvas_kit_styling_1.createStyles({ name: "uoh8b", styles: "padding-inline-start:var(--cnvs-sys-space-x6, 1.5rem);padding-inline-end:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);" }),
|
|
64
|
+
smallOnly: canvas_kit_styling_1.createStyles({ name: "uoh8c", styles: "padding:0;min-width:var(--cnvs-sys-space-x8, 2rem);" }),
|
|
65
|
+
smallStart: canvas_kit_styling_1.createStyles({ name: "uoh8d", styles: "padding-inline-start:var(--cnvs-sys-space-x3, 0.75rem);padding-inline-end:var(--cnvs-sys-space-x4, 1rem);" }),
|
|
66
|
+
smallEnd: canvas_kit_styling_1.createStyles({ name: "uoh8e", styles: "padding-inline-start:var(--cnvs-sys-space-x4, 1rem);padding-inline-end:var(--cnvs-sys-space-x3, 0.75rem);" }),
|
|
67
|
+
extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "uoh8f", styles: "padding:0;min-width:var(--cnvs-sys-space-x6, 1.5rem);" }),
|
|
68
|
+
extraSmallStart: canvas_kit_styling_1.createStyles({ name: "uoh8g", styles: "padding-inline-start:var(--cnvs-sys-space-x2, 0.5rem);padding-inline-end:var(--cnvs-sys-space-x3, 0.75rem);" }),
|
|
69
|
+
extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "uoh8h", styles: "padding-inline-start:var(--cnvs-sys-space-x3, 0.75rem);padding-inline-end:var(--cnvs-sys-space-x2, 0.5rem);" }),
|
|
70
70
|
},
|
|
71
71
|
});
|
|
72
72
|
function capitalize(string = '') {
|
|
@@ -27,7 +27,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
|
27
27
|
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
28
28
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
29
29
|
const Button_1 = require("./Button");
|
|
30
|
-
const deleteStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
30
|
+
const deleteStyles = canvas_kit_styling_1.createStyles({ name: "uoh811", styles: "--css-button-vars-default-background:var(--cnvs-brand-error-base, #de2e21);--css-button-vars-default-border:transparent;--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-round, 62.5rem);--css-button-vars-default-label-emotion-safe:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-default-icon:var(--cnvs-brand-error-accent, #ffffff);&:hover, &.hover{--css-button-vars-hover-background:var(--cnvs-brand-error-dark, #a31b12);--css-button-vars-hover-border:transparent;--css-button-vars-hover-label-emotion-safe:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-hover-icon:var(--cnvs-brand-error-accent, #ffffff);}&:focus-visible, &.focus{--css-button-vars-focus-background:var(--cnvs-brand-error-base, #de2e21);--css-button-vars-focus-border:transparent;--css-button-vars-focus-label-emotion-safe:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-focus-icon:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, #0875e1);}&:active, &.active{--css-button-vars-active-background:var(--cnvs-brand-error-darkest, rgba(128,22,14,1));--css-button-vars-active-border:transparent;--css-button-vars-active-label-emotion-safe:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-active-icon:var(--cnvs-brand-error-accent, #ffffff);}&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled{--css-button-vars-disabled-background:var(--cnvs-brand-error-light, #fcc9c5);--css-button-vars-disabled-label-emotion-safe:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-disabled-icon:var(--cnvs-brand-error-accent, #ffffff);opacity:1px;}" });
|
|
31
31
|
/**
|
|
32
32
|
* Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
|
|
33
33
|
* have significant consequences. They commonly appear in confirmation dialogs as the final
|
|
@@ -27,10 +27,10 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
|
27
27
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
28
28
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
29
29
|
const Button_1 = require("./Button");
|
|
30
|
-
const primaryStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
30
|
+
const primaryStyles = canvas_kit_styling_1.createStyles({ name: "uoh8x", styles: "--css-button-vars-default-background:var(--cnvs-brand-primary-base, var(--cnvs-base-palette-blueberry-400, #0875e1));--css-button-vars-default-border:transparent;--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-round, 62.5rem);--css-button-vars-default-label-emotion-safe:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-default-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-hover-background:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-hover-border:transparent;--css-button-vars-hover-label-emotion-safe:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-hover-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-focus-background:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-focus-border:transparent;--css-button-vars-focus-label-emotion-safe:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-focus-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,226,1));--css-button-vars-active-background:var(--cnvs-brand-primary-darkest, rgba(0,66,133,1));--css-button-vars-active-border:transparent;--css-button-vars-active-label-emotion-safe:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-active-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-disabled-background:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-disabled-border:transparent;--css-button-vars-disabled-label-emotion-safe:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-disabled-opacity:0.4;--css-button-vars-disabled-icon:var(--cnvs-brand-primary-accent, #ffffff);" });
|
|
31
31
|
exports.primaryButtonModifiers = canvas_kit_styling_1.createModifiers({
|
|
32
32
|
variant: {
|
|
33
|
-
inverse: canvas_kit_styling_1.createStyles({ name: "
|
|
33
|
+
inverse: canvas_kit_styling_1.createStyles({ name: "uoh8y", styles: "--css-button-vars-default-background:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-round, 62.5rem);--css-button-vars-default-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-vars-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-background:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-active-background:var(--cnvs-base-palette-soap-400, rgba(224,227,230,1));--css-button-vars-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-disabled-background:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-disabled-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
34
34
|
},
|
|
35
35
|
});
|
|
36
36
|
exports.PrimaryButton = common_1.createComponent('button')({
|
|
@@ -27,10 +27,10 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
|
27
27
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
28
28
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
29
29
|
const Button_1 = require("./Button");
|
|
30
|
-
const secondaryStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
30
|
+
const secondaryStyles = canvas_kit_styling_1.createStyles({ name: "uoh8z", styles: "--css-button-vars-default-background:transparent;--css-button-vars-default-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-round, 62.5rem);--css-button-vars-default-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-hover-background:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-hover-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-hover-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-focus-background:transparent;--css-button-vars-focus-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,226,1));--css-button-vars-active-background:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-border:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-disabled-background:transparent;--css-button-vars-disabled-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-disabled-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-disabled-opacity:0.4;--css-button-vars-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" });
|
|
31
31
|
exports.secondaryButtonModifiers = canvas_kit_styling_1.createModifiers({
|
|
32
32
|
variant: {
|
|
33
|
-
inverse: canvas_kit_styling_1.createStyles({ name: "
|
|
33
|
+
inverse: canvas_kit_styling_1.createStyles({ name: "uoh810", styles: "--css-button-vars-default-background:transparent;--css-button-vars-default-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-default-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-default-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-vars-hover-border:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-vars-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-focus-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-active-background:var(--cnvs-base-palette-soap-400, rgba(224,227,230,1));--css-button-vars-active-border:var(--cnvs-base-palette-soap-400, rgba(224,227,230,1));--css-button-vars-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-disabled-background:transparent;--css-button-vars-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-disabled-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }),
|
|
34
34
|
},
|
|
35
35
|
});
|
|
36
36
|
exports.SecondaryButton = common_1.createComponent('button')({
|
|
@@ -28,27 +28,27 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
|
28
28
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
29
29
|
const tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
30
30
|
const Button_1 = require("./Button");
|
|
31
|
-
const tertiaryStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
31
|
+
const tertiaryStyles = canvas_kit_styling_1.createStyles({ name: "uoh8i", styles: "padding-inline:var(--cnvs-sys-space-x2, 0.5rem);min-width:auto;text-decoration:underline;border:0px;--css-button-vars-default-background:transparent;--css-button-vars-default-border:transparent;--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-x1, 0.25rem);--css-button-vars-default-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-hover-background:var(--cnvs-base-palette-soap-200, rgba(241, 242, 243, 1));--css-button-vars-hover-border:transparent;--css-button-vars-hover-label-emotion-safe:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-background:transparent;--css-button-vars-focus-border:transparent;--css-button-vars-focus-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-boxShadowInner:var(--cnvs-brand-common-focus-outline, rgba(8,117,226,1));--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,226,1));--css-button-vars-active-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-vars-active-border:transparent;--css-button-vars-active-label-emotion-safe:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-disabled-background:transparent;--css-button-vars-disabled-border:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-disabled-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-disabled-opacity:0.4;&:focus-visible, &.focus{box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100, var(--css-button-vars-focus-boxShadowInner)), 0 0 0 calc(2px + 0px) var(--cnvs-brand-common-focus-outline, var(--css-button-vars-focus-boxShadowOuter));}" });
|
|
32
32
|
exports.tertiaryButtonModifiers = canvas_kit_styling_1.createModifiers({
|
|
33
33
|
isThemeable: {
|
|
34
|
-
true: canvas_kit_styling_1.createStyles({ name: "
|
|
34
|
+
true: canvas_kit_styling_1.createStyles({ name: "uoh8j", styles: "--css-button-vars-default-icon:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-hover-icon:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-focus-icon:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-active-icon:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-disabled-icon:var(--cnvs-brand-primary-base, rgba(8,117,226,1));" }),
|
|
35
35
|
},
|
|
36
36
|
variant: {
|
|
37
|
-
inverse: canvas_kit_styling_1.createStyles({ name: "
|
|
37
|
+
inverse: canvas_kit_styling_1.createStyles({ name: "uoh8k", styles: "--css-button-vars-default-background:transparent;--css-button-vars-default-border:transparent;--css-button-vars-default-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-default-icon:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-hover-background:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-hover-border:transparent;--css-button-vars-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-focus-background:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-focus-border:transparent;--css-button-vars-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-active-background:var(--cnvs-base-palette-soap-200, rgba(241, 242, 243, 1));--css-button-vars-active-border:transparent;--css-button-vars-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-active-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-disabled-background:transparent;--css-button-vars-disabled-border:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-disabled-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, #fff);&:focus-visible, &.focus{box-shadow:inset 0 0 0 2px var(--cnvs-base-palette-black-pepper-400, var(--css-button-vars-focus-boxShadowInner)), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, var(--css-button-vars-focus-boxShadowOuter));}" }),
|
|
38
38
|
},
|
|
39
39
|
iconPosition: {
|
|
40
|
-
largeOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
41
|
-
largeStart: canvas_kit_styling_1.createStyles({ name: "
|
|
42
|
-
largeEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
43
|
-
mediumOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
44
|
-
mediumStart: canvas_kit_styling_1.createStyles({ name: "
|
|
45
|
-
mediumEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
46
|
-
smallOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
47
|
-
smallStart: canvas_kit_styling_1.createStyles({ name: "
|
|
48
|
-
smallEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
49
|
-
extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
50
|
-
extraSmallStart: canvas_kit_styling_1.createStyles({ name: "
|
|
51
|
-
extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
40
|
+
largeOnly: canvas_kit_styling_1.createStyles({ name: "uoh8l", styles: "border-radius:999px;padding:0;min-width:calc(var(--cnvs-sys-space-x4, 1rem) * 3);" }),
|
|
41
|
+
largeStart: canvas_kit_styling_1.createStyles({ name: "uoh8m", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
42
|
+
largeEnd: canvas_kit_styling_1.createStyles({ name: "uoh8n", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
43
|
+
mediumOnly: canvas_kit_styling_1.createStyles({ name: "uoh8o", styles: "padding:0;min-width:2.5rem;border-radius:999px;" }),
|
|
44
|
+
mediumStart: canvas_kit_styling_1.createStyles({ name: "uoh8p", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
45
|
+
mediumEnd: canvas_kit_styling_1.createStyles({ name: "uoh8q", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
46
|
+
smallOnly: canvas_kit_styling_1.createStyles({ name: "uoh8r", styles: "padding:0;min-width:2rem;border-radius:999px;" }),
|
|
47
|
+
smallStart: canvas_kit_styling_1.createStyles({ name: "uoh8s", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
48
|
+
smallEnd: canvas_kit_styling_1.createStyles({ name: "uoh8t", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
49
|
+
extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "uoh8u", styles: "padding:0;min-width:1.5rem;border-radius:999px;" }),
|
|
50
|
+
extraSmallStart: canvas_kit_styling_1.createStyles({ name: "uoh8v", styles: "padding-inline-start:0.25rem;padding-inline-end:0.5rem;" }),
|
|
51
|
+
extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "uoh8w", styles: "padding-inline-start:0.5rem;padding-inline-end:0.25rem;" }),
|
|
52
52
|
},
|
|
53
53
|
});
|
|
54
54
|
exports.TertiaryButton = common_1.createComponent('button')({
|
|
@@ -29,7 +29,7 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
|
29
29
|
const css_1 = require("@emotion/css");
|
|
30
30
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
31
31
|
// copied from brand/_variables.css
|
|
32
|
-
const defaultBranding = canvas_kit_styling_1.createStyles({ name: "
|
|
32
|
+
const defaultBranding = canvas_kit_styling_1.createStyles({ name: "uoh80", styles: "--cnvs-brand-error-darkest{}--cnvs-brand-common-alert-inner{}--cnvs-brand-common-error-inner{}--cnvs-brand-common-focus-outline{}--cnvs-brand-neutral-accent{}--cnvs-brand-neutral-darkest{}--cnvs-brand-neutral-dark{}--cnvs-brand-neutral-base{}--cnvs-brand-neutral-light{}--cnvs-brand-neutral-lightest{}--cnvs-brand-success-accent{}--cnvs-brand-success-darkest{}--cnvs-brand-success-dark{}--cnvs-brand-success-base{}--cnvs-brand-success-light{}--cnvs-brand-success-lightest{}--cnvs-brand-error-accent{}--cnvs-brand-error-dark{}--cnvs-brand-error-base{}--cnvs-brand-error-light{}--cnvs-brand-error-lightest{}--cnvs-brand-alert-accent{}--cnvs-brand-alert-darkest{}--cnvs-brand-alert-dark{}--cnvs-brand-alert-base{}--cnvs-brand-alert-light{}--cnvs-brand-alert-lightest{}--cnvs-brand-primary-accent{}--cnvs-brand-primary-darkest{}--cnvs-brand-primary-dark{}--cnvs-brand-primary-base{}--cnvs-brand-primary-light{}--cnvs-brand-primary-lightest{}--cnvs-brand-gradient-primary{}" });
|
|
33
33
|
const mappedKeys = {
|
|
34
34
|
lightest: 'lightest',
|
|
35
35
|
light: 'light',
|
|
@@ -18,8 +18,8 @@ export interface TransformOrigin {
|
|
|
18
18
|
* Error types
|
|
19
19
|
*/
|
|
20
20
|
export declare enum ErrorType {
|
|
21
|
-
Error =
|
|
22
|
-
Alert =
|
|
21
|
+
Error = "error",
|
|
22
|
+
Alert = "alert"
|
|
23
23
|
}
|
|
24
24
|
/**
|
|
25
25
|
* Type to Pick props from an interface, making some required and leaving others as is
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../common/lib/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxC,QAAQ,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;CACvC;AAED;;GAEG;AACH,oBAAY,SAAS;IACnB,KAAK,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../common/lib/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxC,QAAQ,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;CACvC;AAED;;GAEG;AACH,oBAAY,SAAS;IACnB,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED;;GAEG;AACH,oBAAY,YAAY,CAAC,CAAC,EAAE,GAAG,SAAS,MAAM,CAAC,EAAE,IAAI,SAAS,MAAM,CAAC,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,GAC7F,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC"}
|
|
@@ -6,6 +6,6 @@ exports.ErrorType = void 0;
|
|
|
6
6
|
*/
|
|
7
7
|
var ErrorType;
|
|
8
8
|
(function (ErrorType) {
|
|
9
|
-
ErrorType[
|
|
10
|
-
ErrorType[
|
|
9
|
+
ErrorType["Error"] = "error";
|
|
10
|
+
ErrorType["Alert"] = "alert";
|
|
11
11
|
})(ErrorType = exports.ErrorType || (exports.ErrorType = {}));
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { GrowthBehavior, ErrorType, Themeable } from '@workday/canvas-kit-react/common';
|
|
3
3
|
import { FormFieldLabelPosition } from './types';
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated ⚠️ `FormFieldProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--custom) instead.
|
|
6
|
+
*/
|
|
4
7
|
export interface FormFieldProps extends Themeable, React.HTMLAttributes<HTMLDivElement>, GrowthBehavior {
|
|
5
8
|
/**
|
|
6
9
|
* The position of the FormField label.
|
|
@@ -55,6 +58,9 @@ export interface FormFieldProps extends Themeable, React.HTMLAttributes<HTMLDivE
|
|
|
55
58
|
export interface FormFieldErrorBehavior {
|
|
56
59
|
error?: ErrorType;
|
|
57
60
|
}
|
|
61
|
+
/**
|
|
62
|
+
* @deprecated ⚠️ `FormField` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--custom) instead.
|
|
63
|
+
*/
|
|
58
64
|
export declare class FormField extends React.Component<React.PropsWithChildren<FormFieldProps>> {
|
|
59
65
|
static LabelPosition: typeof FormFieldLabelPosition;
|
|
60
66
|
static ErrorType: typeof ErrorType;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,cAAc,EACd,SAAS,EAET,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,sBAAsB,EAAiC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,cAAc,EACd,SAAS,EAET,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,sBAAsB,EAAiC,MAAM,SAAS,CAAC;AAC/E;;GAEG;AACH,MAAM,WAAW,cACf,SAAQ,SAAS,EACf,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,cAAc;IAChB;;;OAGG;IACH,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAoED;;GAEG;AACH,qBAAa,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACrF,MAAM,CAAC,aAAa,gCAA0B;IAC9C,MAAM,CAAC,SAAS,mBAAa;IAE7B,OAAO,CAAC,OAAO,CAAoD;IAEnE,OAAO,CAAC,cAAc,CAkCpB;IAEF,MAAM;CAgEP"}
|
|
@@ -77,6 +77,9 @@ const FormFieldInputContainer = common_1.styled('div')(({ grow, labelPosition })
|
|
|
77
77
|
display: 'inline-block',
|
|
78
78
|
};
|
|
79
79
|
});
|
|
80
|
+
/**
|
|
81
|
+
* @deprecated ⚠️ `FormField` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--custom) instead.
|
|
82
|
+
*/
|
|
80
83
|
class FormField extends React.Component {
|
|
81
84
|
constructor() {
|
|
82
85
|
super(...arguments);
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { ErrorType, Themeable } from '@workday/canvas-kit-react/common';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated ⚠️ `HintProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--custom) instead.
|
|
5
|
+
*/
|
|
3
6
|
export interface HintProps extends Themeable, React.HTMLAttributes<HTMLParagraphElement> {
|
|
4
7
|
/**
|
|
5
8
|
* The type of error associated with the Hint (if applicable).
|
|
@@ -16,6 +19,9 @@ export interface HintProps extends Themeable, React.HTMLAttributes<HTMLParagraph
|
|
|
16
19
|
*/
|
|
17
20
|
alertLabel?: string;
|
|
18
21
|
}
|
|
22
|
+
/**
|
|
23
|
+
* @deprecated ⚠️ `Hint` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--custom) instead.
|
|
24
|
+
*/
|
|
19
25
|
declare class Hint extends React.Component<HintProps> {
|
|
20
26
|
static ErrorType: typeof ErrorType;
|
|
21
27
|
render(): JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Hint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/Hint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,SAAS,EAAE,SAAS,EAAS,MAAM,kCAAkC,CAAC;
|
|
1
|
+
{"version":3,"file":"Hint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/Hint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,SAAS,EAAE,SAAS,EAAS,MAAM,kCAAkC,CAAC;AAG9E;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IACtF;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAKD;;GAEG;AACH,cAAM,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC;IAC3C,MAAM,CAAC,SAAS,mBAAa;IAEtB,MAAM;CAsBd;AAID,OAAO,EAAC,IAAI,EAAC,CAAC"}
|