@workday/canvas-kit-react 10.1.2 → 10.1.4
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/common/lib/CanvasProvider.tsx +56 -14
- package/common/lib/utils/elements.ts +10 -1
- 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.d.ts +258 -0
- package/dist/commonjs/common/lib/CanvasProvider.d.ts.map +1 -1
- package/dist/commonjs/common/lib/CanvasProvider.js +17 -8
- package/dist/commonjs/common/lib/utils/elements.d.ts +3 -1
- package/dist/commonjs/common/lib/utils/elements.d.ts.map +1 -1
- package/dist/commonjs/common/lib/utils/elements.js +6 -0
- package/dist/commonjs/popup/lib/hooks/usePopupStack.d.ts.map +1 -1
- package/dist/commonjs/popup/lib/hooks/usePopupStack.js +30 -0
- package/dist/commonjs/select/lib/Select.js +1 -1
- 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.d.ts +258 -0
- package/dist/es6/common/lib/CanvasProvider.d.ts.map +1 -1
- package/dist/es6/common/lib/CanvasProvider.js +15 -7
- package/dist/es6/common/lib/utils/elements.d.ts +3 -1
- package/dist/es6/common/lib/utils/elements.d.ts.map +1 -1
- package/dist/es6/common/lib/utils/elements.js +6 -0
- package/dist/es6/popup/lib/hooks/usePopupStack.d.ts.map +1 -1
- package/dist/es6/popup/lib/hooks/usePopupStack.js +31 -1
- package/dist/es6/select/lib/Select.js +1 -1
- package/package.json +4 -4
- package/popup/lib/hooks/usePopupStack.ts +33 -1
|
@@ -19,7 +19,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
19
19
|
return result;
|
|
20
20
|
};
|
|
21
21
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
22
|
-
exports.CanvasProvider = void 0;
|
|
22
|
+
exports.CanvasProvider = exports.useCanvasThemeToCssVars = void 0;
|
|
23
23
|
const React = __importStar(require("react"));
|
|
24
24
|
const react_1 = require("@emotion/react");
|
|
25
25
|
const InputProvider_1 = require("./InputProvider");
|
|
@@ -27,6 +27,9 @@ const theming_1 = require("./theming");
|
|
|
27
27
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
28
28
|
// eslint-disable-next-line @emotion/no-vanilla
|
|
29
29
|
const css_1 = require("@emotion/css");
|
|
30
|
+
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
31
|
+
// copied from brand/_variables.css
|
|
32
|
+
const defaultBranding = canvas_kit_styling_1.createStyles({ name: "haoi0", 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{}" });
|
|
30
33
|
const mappedKeys = {
|
|
31
34
|
lightest: 'lightest',
|
|
32
35
|
light: 'light',
|
|
@@ -37,23 +40,29 @@ const mappedKeys = {
|
|
|
37
40
|
};
|
|
38
41
|
const useCanvasThemeToCssVars = (theme, elemProps) => {
|
|
39
42
|
const filledTheme = theming_1.useTheme(theme);
|
|
43
|
+
const className = (elemProps.className || '').split(' ').concat(defaultBranding).join(' ');
|
|
44
|
+
const style = elemProps.style || {};
|
|
40
45
|
const { palette } = filledTheme.canvas;
|
|
41
|
-
|
|
46
|
+
['common', 'primary', 'error', 'alert', 'success', 'neutral'].forEach(color => {
|
|
42
47
|
if (color === 'common') {
|
|
43
48
|
// @ts-ignore
|
|
44
|
-
|
|
49
|
+
style[canvas_tokens_web_1.brand.common.focusOutline] = palette.common.focusOutline;
|
|
45
50
|
}
|
|
46
51
|
['lightest', 'light', 'main', 'dark', 'darkest', 'contrast'].forEach(key => {
|
|
52
|
+
// We only want to set custom colors if they do not match the default. The `defaultBranding` class will take care of the rest.
|
|
47
53
|
// @ts-ignore
|
|
48
|
-
|
|
54
|
+
if (palette[color][key] !== theming_1.defaultCanvasTheme.palette[color][key]) {
|
|
55
|
+
// @ts-ignore
|
|
56
|
+
style[canvas_tokens_web_1.brand[color][mappedKeys[key]]] = palette[color][key];
|
|
57
|
+
}
|
|
49
58
|
});
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
return { ...elemProps, style };
|
|
59
|
+
});
|
|
60
|
+
return { ...elemProps, className, style };
|
|
53
61
|
};
|
|
62
|
+
exports.useCanvasThemeToCssVars = useCanvasThemeToCssVars;
|
|
54
63
|
const CanvasProvider = ({ children, theme = { canvas: theming_1.defaultCanvasTheme }, ...props }) => {
|
|
55
64
|
var _a;
|
|
56
|
-
const elemProps = useCanvasThemeToCssVars(theme, props);
|
|
65
|
+
const elemProps = exports.useCanvasThemeToCssVars(theme, props);
|
|
57
66
|
return (React.createElement(react_1.CacheProvider, { value: css_1.cache },
|
|
58
67
|
React.createElement(react_1.ThemeProvider, { theme: theme },
|
|
59
68
|
React.createElement(InputProvider_1.InputProvider, null),
|
|
@@ -5,8 +5,10 @@
|
|
|
5
5
|
export declare const isFocusable: (element: Element) => boolean;
|
|
6
6
|
/**
|
|
7
7
|
* Get the first focusable element in a container.
|
|
8
|
+
*
|
|
9
|
+
* Returns an array of elements if the first focusable element is a radio group
|
|
8
10
|
*/
|
|
9
|
-
export declare const getFirstFocusableElement: (container: HTMLElement) => HTMLElement | null;
|
|
11
|
+
export declare const getFirstFocusableElement: (container: HTMLElement) => Element[] | HTMLElement | null;
|
|
10
12
|
/**
|
|
11
13
|
* Get the last focusable element in a container.
|
|
12
14
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/elements.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW,YAAa,OAAO,KAAG,OAuB9C,CAAC;AAEF
|
|
1
|
+
{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/elements.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW,YAAa,OAAO,KAAG,OAuB9C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,cACxB,WAAW,KACrB,OAAO,EAAE,GAAG,WAAW,GAAG,IAgB5B,CAAC;AAaF;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,cAAe,WAAW,KAAG,OAAO,EAAE,GAAG,OAAO,GAAG,IAgBtF,CAAC"}
|
|
@@ -27,12 +27,18 @@ const isFocusable = (element) => {
|
|
|
27
27
|
exports.isFocusable = isFocusable;
|
|
28
28
|
/**
|
|
29
29
|
* Get the first focusable element in a container.
|
|
30
|
+
*
|
|
31
|
+
* Returns an array of elements if the first focusable element is a radio group
|
|
30
32
|
*/
|
|
31
33
|
const getFirstFocusableElement = (container) => {
|
|
32
34
|
const elements = container.querySelectorAll('*');
|
|
33
35
|
for (let i = 0; i < elements.length; i++) {
|
|
34
36
|
const element = elements.item(i);
|
|
35
37
|
if (element && exports.isFocusable(element) && element.getAttribute('tabindex') !== '-1') {
|
|
38
|
+
if (isRadioInput(element)) {
|
|
39
|
+
const radioGroup = getRadioGroup(container, element);
|
|
40
|
+
return radioGroup.length > 1 ? Array.from(radioGroup) : element;
|
|
41
|
+
}
|
|
36
42
|
return element;
|
|
37
43
|
}
|
|
38
44
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePopupStack.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupStack.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"usePopupStack.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupStack.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,aAAa,8HAGvB,MAAM,SAAS,CAAC,WAAW,CA0E7B,CAAC"}
|
|
@@ -7,6 +7,7 @@ exports.usePopupStack = void 0;
|
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
8
|
const canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
|
|
9
9
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
10
|
+
const react_2 = require("@emotion/react");
|
|
10
11
|
/**
|
|
11
12
|
* **Note:** If you're using {@link Popper}, you do not need to use this hook directly.
|
|
12
13
|
*
|
|
@@ -52,6 +53,8 @@ const common_1 = require("@workday/canvas-kit-react/common");
|
|
|
52
53
|
const usePopupStack = (ref, target) => {
|
|
53
54
|
const { elementRef, localRef } = common_1.useLocalRef(ref);
|
|
54
55
|
const isRTL = common_1.useIsRTL();
|
|
56
|
+
const theme = react_1.default.useContext(react_2.ThemeContext);
|
|
57
|
+
const { className, style } = common_1.useCanvasThemeToCssVars(theme, {});
|
|
55
58
|
// useState function input ensures we only create a container once.
|
|
56
59
|
const [popupRef] = react_1.default.useState(() => {
|
|
57
60
|
const container = canvas_kit_popup_stack_1.PopupStack.createContainer();
|
|
@@ -87,6 +90,33 @@ const usePopupStack = (ref, target) => {
|
|
|
87
90
|
(_b = localRef.current) === null || _b === void 0 ? void 0 : _b.removeAttribute('dir');
|
|
88
91
|
}
|
|
89
92
|
}, [localRef, isRTL]);
|
|
93
|
+
// theming className
|
|
94
|
+
react_1.default.useLayoutEffect(() => {
|
|
95
|
+
const element = localRef.current;
|
|
96
|
+
element === null || element === void 0 ? void 0 : element.classList.add(className.trim());
|
|
97
|
+
return () => {
|
|
98
|
+
element === null || element === void 0 ? void 0 : element.classList.remove(className.trim());
|
|
99
|
+
};
|
|
100
|
+
}, [localRef, className]);
|
|
101
|
+
react_1.default.useLayoutEffect(() => {
|
|
102
|
+
const element = localRef.current;
|
|
103
|
+
if (element) {
|
|
104
|
+
// eslint-disable-next-line guard-for-in
|
|
105
|
+
for (const key in style) {
|
|
106
|
+
// @ts-ignore
|
|
107
|
+
element.style.setProperty(key, style[key]);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
return () => {
|
|
111
|
+
if (element) {
|
|
112
|
+
// eslint-disable-next-line guard-for-in
|
|
113
|
+
for (const key in style) {
|
|
114
|
+
// @ts-ignore
|
|
115
|
+
element.style.removeProperty(key, style[key]);
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
};
|
|
119
|
+
}, [localRef, style]);
|
|
90
120
|
return localRef;
|
|
91
121
|
};
|
|
92
122
|
exports.usePopupStack = usePopupStack;
|
|
@@ -15,7 +15,7 @@ const useSelectModel_1 = require("./hooks/useSelectModel");
|
|
|
15
15
|
const useSelectCard_1 = require("./hooks/useSelectCard");
|
|
16
16
|
const useSelectInput_1 = require("./hooks/useSelectInput");
|
|
17
17
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
18
|
-
const selectInputStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
18
|
+
const selectInputStyles = canvas_kit_styling_1.createStyles({ name: "haoi12", styles: "caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" });
|
|
19
19
|
exports.SelectInput = common_1.createSubcomponent(text_input_1.TextInput)({
|
|
20
20
|
modelHook: useSelectModel_1.useSelectModel,
|
|
21
21
|
elemPropsHook: useSelectInput_1.useSelectInput,
|
|
@@ -18,7 +18,7 @@ export const buttonVars = {
|
|
|
18
18
|
/**
|
|
19
19
|
* Base styles for Buttons.
|
|
20
20
|
*/
|
|
21
|
-
const baseButtonStyles = createStyles({ name: "
|
|
21
|
+
const baseButtonStyles = createStyles({ name: "xyx31", 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));}}" });
|
|
22
22
|
/**
|
|
23
23
|
* Button modifiers that will overwrite the base styles of Buttons.
|
|
24
24
|
* - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
|
|
@@ -27,24 +27,24 @@ const baseButtonStyles = createStyles({ name: "ulex0", styles: "font-family:\"Ro
|
|
|
27
27
|
*/
|
|
28
28
|
export const buttonModifiers = createModifiers({
|
|
29
29
|
size: {
|
|
30
|
-
large: createStyles({ name: "
|
|
31
|
-
medium: createStyles({ name: "
|
|
32
|
-
small: createStyles({ name: "
|
|
33
|
-
extraSmall: createStyles({ name: "
|
|
30
|
+
large: createStyles({ name: "xyx32", 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;" }),
|
|
31
|
+
medium: createStyles({ name: "xyx33", 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);" }),
|
|
32
|
+
small: createStyles({ name: "xyx34", 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);" }),
|
|
33
|
+
extraSmall: createStyles({ name: "xyx35", 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);" }),
|
|
34
34
|
},
|
|
35
35
|
iconPosition: {
|
|
36
|
-
largeOnly: createStyles({ name: "
|
|
37
|
-
largeStart: createStyles({ name: "
|
|
38
|
-
largeEnd: createStyles({ name: "
|
|
39
|
-
mediumOnly: createStyles({ name: "
|
|
40
|
-
mediumStart: createStyles({ name: "
|
|
41
|
-
mediumEnd: createStyles({ name: "
|
|
42
|
-
smallOnly: createStyles({ name: "
|
|
43
|
-
smallStart: createStyles({ name: "
|
|
44
|
-
smallEnd: createStyles({ name: "
|
|
45
|
-
extraSmallOnly: createStyles({ name: "
|
|
46
|
-
extraSmallStart: createStyles({ name: "
|
|
47
|
-
extraSmallEnd: createStyles({ name: "
|
|
36
|
+
largeOnly: createStyles({ name: "xyx36", styles: "padding:0;min-width:calc(var(--cnvs-sys-space-x4, 1rem) * 3);" }),
|
|
37
|
+
largeStart: createStyles({ name: "xyx37", styles: "padding-inline-start:var(--cnvs-sys-space-x6, 1.5rem);padding-inline-end:var(--cnvs-sys-space-x8, 2rem);" }),
|
|
38
|
+
largeEnd: createStyles({ name: "xyx38", styles: "padding-inline-start:var(--cnvs-sys-space-x8, 2rem);padding-inline-end:var(--cnvs-sys-space-x6, 1.5rem);" }),
|
|
39
|
+
mediumOnly: createStyles({ name: "xyx39", styles: "padding:0;min-width:var(--cnvs-sys-space-x10, 2.5rem);" }),
|
|
40
|
+
mediumStart: createStyles({ name: "xyx3a", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);padding-inline-end:var(--cnvs-sys-space-x6, 1.5rem);" }),
|
|
41
|
+
mediumEnd: createStyles({ name: "xyx3b", styles: "padding-inline-start:var(--cnvs-sys-space-x6, 1.5rem);padding-inline-end:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);" }),
|
|
42
|
+
smallOnly: createStyles({ name: "xyx3c", styles: "padding:0;min-width:var(--cnvs-sys-space-x8, 2rem);" }),
|
|
43
|
+
smallStart: createStyles({ name: "xyx3d", styles: "padding-inline-start:var(--cnvs-sys-space-x3, 0.75rem);padding-inline-end:var(--cnvs-sys-space-x4, 1rem);" }),
|
|
44
|
+
smallEnd: createStyles({ name: "xyx3e", styles: "padding-inline-start:var(--cnvs-sys-space-x4, 1rem);padding-inline-end:var(--cnvs-sys-space-x3, 0.75rem);" }),
|
|
45
|
+
extraSmallOnly: createStyles({ name: "xyx3f", styles: "padding:0;min-width:var(--cnvs-sys-space-x6, 1.5rem);" }),
|
|
46
|
+
extraSmallStart: createStyles({ name: "xyx3g", styles: "padding-inline-start:var(--cnvs-sys-space-x2, 0.5rem);padding-inline-end:var(--cnvs-sys-space-x3, 0.75rem);" }),
|
|
47
|
+
extraSmallEnd: createStyles({ name: "xyx3h", styles: "padding-inline-start:var(--cnvs-sys-space-x3, 0.75rem);padding-inline-end:var(--cnvs-sys-space-x2, 0.5rem);" }),
|
|
48
48
|
},
|
|
49
49
|
});
|
|
50
50
|
export function capitalize(string = '') {
|
|
@@ -5,7 +5,7 @@ import { createStyles, cssVar } from '@workday/canvas-kit-styling';
|
|
|
5
5
|
import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
6
6
|
import { base, brand, system } from '@workday/canvas-tokens-web';
|
|
7
7
|
import { Button } from './Button';
|
|
8
|
-
const deleteStyles = createStyles({ name: "
|
|
8
|
+
const deleteStyles = createStyles({ name: "xyx311", 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;}" });
|
|
9
9
|
/**
|
|
10
10
|
* Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
|
|
11
11
|
* have significant consequences. They commonly appear in confirmation dialogs as the final
|
|
@@ -5,10 +5,10 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
|
5
5
|
import { createStyles, cssVar, createModifiers } from '@workday/canvas-kit-styling';
|
|
6
6
|
import { base, brand, system } from '@workday/canvas-tokens-web';
|
|
7
7
|
import { Button } from './Button';
|
|
8
|
-
const primaryStyles = createStyles({ name: "
|
|
8
|
+
const primaryStyles = createStyles({ name: "xyx3x", 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);" });
|
|
9
9
|
export const primaryButtonModifiers = createModifiers({
|
|
10
10
|
variant: {
|
|
11
|
-
inverse: createStyles({ name: "
|
|
11
|
+
inverse: createStyles({ name: "xyx3y", 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));" }),
|
|
12
12
|
},
|
|
13
13
|
});
|
|
14
14
|
export const PrimaryButton = createComponent('button')({
|
|
@@ -5,10 +5,10 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
|
5
5
|
import { createStyles, cssVar, createModifiers } from '@workday/canvas-kit-styling';
|
|
6
6
|
import { base, brand, system } from '@workday/canvas-tokens-web';
|
|
7
7
|
import { Button } from './Button';
|
|
8
|
-
const secondaryStyles = createStyles({ name: "
|
|
8
|
+
const secondaryStyles = createStyles({ name: "xyx3z", 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));" });
|
|
9
9
|
export const secondaryButtonModifiers = createModifiers({
|
|
10
10
|
variant: {
|
|
11
|
-
inverse: createStyles({ name: "
|
|
11
|
+
inverse: createStyles({ name: "xyx310", 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));" }),
|
|
12
12
|
},
|
|
13
13
|
});
|
|
14
14
|
export const SecondaryButton = createComponent('button')({
|
|
@@ -6,27 +6,27 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
|
6
6
|
import { system, brand, base } from '@workday/canvas-tokens-web';
|
|
7
7
|
import { borderRadius, space } from '@workday/canvas-kit-react/tokens';
|
|
8
8
|
import { Button } from './Button';
|
|
9
|
-
const tertiaryStyles = createStyles({ name: "
|
|
9
|
+
const tertiaryStyles = createStyles({ name: "xyx3i", 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));}" });
|
|
10
10
|
export const tertiaryButtonModifiers = createModifiers({
|
|
11
11
|
isThemeable: {
|
|
12
|
-
true: createStyles({ name: "
|
|
12
|
+
true: createStyles({ name: "xyx3j", 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));" }),
|
|
13
13
|
},
|
|
14
14
|
variant: {
|
|
15
|
-
inverse: createStyles({ name: "
|
|
15
|
+
inverse: createStyles({ name: "xyx3k", 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));}" }),
|
|
16
16
|
},
|
|
17
17
|
iconPosition: {
|
|
18
|
-
largeOnly: createStyles({ name: "
|
|
19
|
-
largeStart: createStyles({ name: "
|
|
20
|
-
largeEnd: createStyles({ name: "
|
|
21
|
-
mediumOnly: createStyles({ name: "
|
|
22
|
-
mediumStart: createStyles({ name: "
|
|
23
|
-
mediumEnd: createStyles({ name: "
|
|
24
|
-
smallOnly: createStyles({ name: "
|
|
25
|
-
smallStart: createStyles({ name: "
|
|
26
|
-
smallEnd: createStyles({ name: "
|
|
27
|
-
extraSmallOnly: createStyles({ name: "
|
|
28
|
-
extraSmallStart: createStyles({ name: "
|
|
29
|
-
extraSmallEnd: createStyles({ name: "
|
|
18
|
+
largeOnly: createStyles({ name: "xyx3l", styles: "border-radius:999px;padding:0;min-width:calc(var(--cnvs-sys-space-x4, 1rem) * 3);" }),
|
|
19
|
+
largeStart: createStyles({ name: "xyx3m", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
20
|
+
largeEnd: createStyles({ name: "xyx3n", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
21
|
+
mediumOnly: createStyles({ name: "xyx3o", styles: "padding:0;min-width:2.5rem;border-radius:999px;" }),
|
|
22
|
+
mediumStart: createStyles({ name: "xyx3p", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
23
|
+
mediumEnd: createStyles({ name: "xyx3q", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
24
|
+
smallOnly: createStyles({ name: "xyx3r", styles: "padding:0;min-width:2rem;border-radius:999px;" }),
|
|
25
|
+
smallStart: createStyles({ name: "xyx3s", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
26
|
+
smallEnd: createStyles({ name: "xyx3t", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
27
|
+
extraSmallOnly: createStyles({ name: "xyx3u", styles: "padding:0;min-width:1.5rem;border-radius:999px;" }),
|
|
28
|
+
extraSmallStart: createStyles({ name: "xyx3v", styles: "padding-inline-start:0.25rem;padding-inline-end:0.5rem;" }),
|
|
29
|
+
extraSmallEnd: createStyles({ name: "xyx3w", styles: "padding-inline-start:0.5rem;padding-inline-end:0.25rem;" }),
|
|
30
30
|
},
|
|
31
31
|
});
|
|
32
32
|
export const TertiaryButton = createComponent('button')({
|