@workday/canvas-kit-react 11.0.0-alpha.662-next.0 → 11.0.0-alpha.667-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/dist/commonjs/badge/lib/CountBadge.js +3 -3
- 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/card/lib/Card.js +1 -1
- package/dist/commonjs/card/lib/CardHeading.js +1 -1
- package/dist/commonjs/common/lib/AccessibleHide.js +1 -1
- package/dist/commonjs/common/lib/CanvasProvider.js +1 -1
- package/dist/commonjs/form-field/lib/FormField.d.ts +2 -2
- package/dist/commonjs/form-field/lib/FormField.js +1 -1
- package/dist/commonjs/form-field/lib/Hint.d.ts +2 -2
- package/dist/commonjs/form-field/lib/Hint.js +1 -1
- package/dist/commonjs/form-field/lib/Label.d.ts +2 -2
- package/dist/commonjs/form-field/lib/Label.js +1 -1
- package/dist/commonjs/form-field/lib/types.d.ts +2 -2
- package/dist/commonjs/form-field/lib/types.js +1 -1
- package/dist/commonjs/loading-dots/lib/LoadingDots.d.ts +2 -2
- package/dist/commonjs/loading-dots/lib/LoadingDots.d.ts.map +1 -1
- package/dist/commonjs/loading-dots/lib/LoadingDots.js +19 -42
- package/dist/commonjs/popup/lib/hooks/useCloseOnOutsideClick.d.ts.map +1 -1
- package/dist/commonjs/popup/lib/hooks/useCloseOnOutsideClick.js +2 -0
- package/dist/commonjs/select/lib/Select.js +2 -2
- package/dist/commonjs/text/lib/LabelText.js +18 -18
- package/dist/commonjs/text/lib/Text.js +15 -15
- package/dist/es6/badge/lib/CountBadge.js +3 -3
- 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/card/lib/Card.js +1 -1
- package/dist/es6/card/lib/CardHeading.js +1 -1
- package/dist/es6/common/lib/AccessibleHide.js +1 -1
- package/dist/es6/common/lib/CanvasProvider.js +1 -1
- package/dist/es6/form-field/lib/FormField.d.ts +2 -2
- package/dist/es6/form-field/lib/FormField.js +1 -1
- package/dist/es6/form-field/lib/Hint.d.ts +2 -2
- package/dist/es6/form-field/lib/Hint.js +1 -1
- package/dist/es6/form-field/lib/Label.d.ts +2 -2
- package/dist/es6/form-field/lib/Label.js +1 -1
- package/dist/es6/form-field/lib/types.d.ts +2 -2
- package/dist/es6/form-field/lib/types.js +1 -1
- package/dist/es6/loading-dots/lib/LoadingDots.d.ts +2 -2
- package/dist/es6/loading-dots/lib/LoadingDots.d.ts.map +1 -1
- package/dist/es6/loading-dots/lib/LoadingDots.js +20 -42
- package/dist/es6/popup/lib/hooks/useCloseOnOutsideClick.d.ts.map +1 -1
- package/dist/es6/popup/lib/hooks/useCloseOnOutsideClick.js +2 -0
- package/dist/es6/select/lib/Select.js +2 -2
- package/dist/es6/text/lib/LabelText.js +18 -18
- package/dist/es6/text/lib/Text.js +15 -15
- package/form-field/lib/FormField.tsx +2 -2
- package/form-field/lib/Hint.tsx +2 -2
- package/form-field/lib/Label.tsx +2 -2
- package/form-field/lib/types.ts +2 -2
- package/loading-dots/lib/LoadingDots.tsx +55 -54
- package/package.json +4 -4
- package/popup/lib/hooks/useCloseOnOutsideClick.ts +2 -0
- package/select/lib/Select.tsx +1 -1
|
@@ -26,11 +26,11 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
|
26
26
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
27
27
|
const grow = keyframes({ name: "b0dw69", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
|
|
28
28
|
const countBadgeStencil = canvas_kit_styling_1.createStencil({
|
|
29
|
-
base: { name: "
|
|
29
|
+
base: { name: "yxo522", styles: "align-items:center;animation:animation-b0dw69 0.2s ease;border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));box-sizing:border-box;display:inline-flex;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-size:var(--cnvs-sys-font-size-subtext-medium, 0.75rem);font-weight:var(--cnvs-sys-font-weight-bold, 700);height:1.25rem;justify-content:center;line-height:1.25rem;min-width:1.25rem;padding:0 0.40625rem;" },
|
|
30
30
|
modifiers: {
|
|
31
31
|
variant: {
|
|
32
|
-
default: { name: "
|
|
33
|
-
inverse: { name: "
|
|
32
|
+
default: { name: "yxo523", styles: "background:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));text-shadow:0 0 0.0625rem rgba(0,0,0, 0.35);" },
|
|
33
|
+
inverse: { name: "yxo524", styles: "background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));box-shadow:0 0.0625rem 0.125rem rgba(0,0,0, 0.25);color:var(--cnvs-base-palette-blueberry-400, rgba(8,117,225,1));" },
|
|
34
34
|
},
|
|
35
35
|
},
|
|
36
36
|
}, "");
|
|
@@ -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: "yxo511", 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-default-background, transparent);color:var(--css-button-default-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));border-width:1px;border-style:solid;gap:var(--cnvs-sys-space-x2, calc(0.25rem * 2));border-color:var(--css-button-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-default-borderRadius, var(--cnvs-sys-shape-round, calc(0.25rem * 250)));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-disabled-opacity, 1);}& span .wd-icon-fill{transition-duration:40ms;fill:var(--css-button-default-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-default-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}&:focus-visible, &.focus{background-color:var(--css-button-focus-background, transparent);border-color:var(--css-button-focus-border, transparent);color:var(--css-button-focus-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill{fill:var(--css-button-focus-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-focus-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}box-shadow:0 0 0 2px var(--css-button-focus-boxShadowInner, var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1))), 0 0 0 calc(2px + 2px) var(--css-button-focus-boxShadowOuter, var(--cnvs-brand-primary-base, rgba(8,117,225,1)));}&:hover, &.hover{background-color:var(--css-button-hover-background, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));border-color:var(--css-button-hover-border, transparent);color:var(--css-button-hover-label-emotion-safe, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));& span .wd-icon-fill{fill:var(--css-button-hover-icon, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-hover-icon, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));}}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--css-button-active-background, transparent);border-color:var(--css-button-active-border, transparent);color:var(--css-button-active-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill{fill:var(--css-button-active-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-active-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}}&:disabled, &.disabled{background-color:var(--css-button-disabled-background, transparent);border-color:var(--css-button-disabled-border, transparent);color:var(--css-button-disabled-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill{fill:var(--css-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}}" });
|
|
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: "yzfy11", sty
|
|
|
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: "yxo512", styles: "font-size:var(--cnvs-sys-space-x4, calc(0.25rem * 4));line-height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));letter-spacing:0.01rem;height:48px;padding-inline:var(--cnvs-sys-space-x8, calc(0.25rem * 8));min-width:112px;" }),
|
|
53
|
+
medium: canvas_kit_styling_1.createStyles({ name: "yxo513", styles: "font-size:0.875rem;letter-spacing:0.015rem;min-width:96px;padding-inline:var(--cnvs-sys-space-x6, calc(0.25rem * 6));height:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" }),
|
|
54
|
+
small: canvas_kit_styling_1.createStyles({ name: "yxo514", styles: "font-size:0.875rem;letter-spacing:0.015rem;height:var(--cnvs-sys-space-x8, calc(0.25rem * 8));min-width:var(--cnvs-sys-space-x20, calc(0.25rem * 20));padding-inline:var(--cnvs-sys-space-x4, calc(0.25rem * 4));gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
|
|
55
|
+
extraSmall: canvas_kit_styling_1.createStyles({ name: "yxo515", styles: "font-size:0.75rem;line-height:var(--cnvs-sys-space-x4, calc(0.25rem * 4));letter-spacing:0.02rem;height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));min-width:auto;padding-inline:var(--cnvs-sys-space-x3, calc(0.25rem * 3));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: "yxo516", styles: "padding:0;min-width:calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) * 3);" }),
|
|
59
|
+
largeStart: canvas_kit_styling_1.createStyles({ name: "yxo517", styles: "padding-inline-start:var(--cnvs-sys-space-x6, calc(0.25rem * 6));padding-inline-end:var(--cnvs-sys-space-x8, calc(0.25rem * 8));" }),
|
|
60
|
+
largeEnd: canvas_kit_styling_1.createStyles({ name: "yxo518", styles: "padding-inline-start:var(--cnvs-sys-space-x8, calc(0.25rem * 8));padding-inline-end:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
|
|
61
|
+
mediumOnly: canvas_kit_styling_1.createStyles({ name: "yxo519", styles: "padding:0;min-width:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" }),
|
|
62
|
+
mediumStart: canvas_kit_styling_1.createStyles({ name: "yxo51a", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);padding-inline-end:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
|
|
63
|
+
mediumEnd: canvas_kit_styling_1.createStyles({ name: "yxo51b", styles: "padding-inline-start:var(--cnvs-sys-space-x6, calc(0.25rem * 6));padding-inline-end:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);" }),
|
|
64
|
+
smallOnly: canvas_kit_styling_1.createStyles({ name: "yxo51c", styles: "padding:0;min-width:var(--cnvs-sys-space-x8, calc(0.25rem * 8));" }),
|
|
65
|
+
smallStart: canvas_kit_styling_1.createStyles({ name: "yxo51d", styles: "padding-inline-start:var(--cnvs-sys-space-x3, calc(0.25rem * 3));padding-inline-end:var(--cnvs-sys-space-x4, calc(0.25rem * 4));" }),
|
|
66
|
+
smallEnd: canvas_kit_styling_1.createStyles({ name: "yxo51e", styles: "padding-inline-start:var(--cnvs-sys-space-x4, calc(0.25rem * 4));padding-inline-end:var(--cnvs-sys-space-x3, calc(0.25rem * 3));" }),
|
|
67
|
+
extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "yxo51f", styles: "padding:0;min-width:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
|
|
68
|
+
extraSmallStart: canvas_kit_styling_1.createStyles({ name: "yxo51g", styles: "padding-inline-start:var(--cnvs-sys-space-x2, calc(0.25rem * 2));padding-inline-end:var(--cnvs-sys-space-x3, calc(0.25rem * 3));" }),
|
|
69
|
+
extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "yxo51h", styles: "padding-inline-start:var(--cnvs-sys-space-x3, calc(0.25rem * 3));padding-inline-end:var(--cnvs-sys-space-x2, calc(0.25rem * 2));" }),
|
|
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: "yxo521", styles: "--css-button-default-background:var(--cnvs-brand-error-base, rgba(222,46,33,1));--css-button-default-border:transparent;--css-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--css-button-default-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-default-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));&:hover, &.hover{--css-button-hover-background:var(--cnvs-brand-error-dark, rgba(163,27,18,1));--css-button-hover-border:transparent;--css-button-hover-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-hover-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));}&:focus-visible, &.focus{--css-button-focus-background:var(--cnvs-brand-error-base, rgba(222,46,33,1));--css-button-focus-border:transparent;--css-button-focus-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-focus-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:active, &.active{--css-button-active-background:var(--cnvs-brand-error-darkest, rgba(128,22,14,1));--css-button-active-border:transparent;--css-button-active-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-active-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));}&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled{--css-button-disabled-background:var(--cnvs-brand-error-base, rgba(222,46,33,1));--css-button-disabled-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-disabled-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-disabled-opacity:0.4;}" });
|
|
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: "yxo51x", styles: "--css-button-default-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-default-border:transparent;--css-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--css-button-default-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-default-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-hover-background:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--css-button-hover-border:transparent;--css-button-hover-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-focus-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-focus-border:transparent;--css-button-focus-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-focus-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--css-button-active-background:var(--cnvs-brand-primary-darkest, rgba(0,67,135,1));--css-button-active-border:transparent;--css-button-active-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-disabled-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-disabled-border:transparent;--css-button-disabled-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-disabled-opacity:0.4;--css-button-disabled-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));" });
|
|
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: "yxo51y", styles: "--css-button-default-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--css-button-default-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--css-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-disabled-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-disabled-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-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: "yxo51z", styles: "--css-button-default-background:transparent;--css-button-default-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--css-button-default-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-background:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-focus-background:transparent;--css-button-focus-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--css-button-active-background:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-active-border:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-active-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-disabled-background:transparent;--css-button-disabled-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-disabled-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-disabled-opacity:0.4;--css-button-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: "yxo520", styles: "--css-button-default-background:transparent;--css-button-default-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-default-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-default-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-hover-border:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--css-button-active-border:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--css-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-disabled-background:transparent;--css-button-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-disabled-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-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: "yxo51i", styles: "padding-inline:var(--cnvs-sys-space-x2, calc(0.25rem * 2));min-width:auto;text-decoration:underline;border:0px;--css-button-default-background:transparent;--css-button-default-border:transparent;--css-button-default-borderRadius:var(--cnvs-sys-shape-x1, 0.25rem);--css-button-default-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-hover-border:transparent;--css-button-hover-label-emotion-safe:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--css-button-hover-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-background:transparent;--css-button-focus-border:transparent;--css-button-focus-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-boxShadowInner:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--css-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--css-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--css-button-active-border:transparent;--css-button-active-label-emotion-safe:var(--cnvs-brand-primary-darkest, rgba(0,67,135,1));--css-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-disabled-background:transparent;--css-button-disabled-border:transparent;--css-button-disabled-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-disabled-opacity:0.4;&:focus-visible, &.focus{box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 calc(2px + 0px) var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" });
|
|
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: "yxo51j", styles: "--css-button-default-icon:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-hover-icon:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--css-button-focus-icon:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-active-icon:var(--cnvs-brand-primary-darkest, rgba(0,67,135,1));--css-button-disabled-icon:var(--cnvs-brand-primary-base, rgba(8,117,225,1));" }),
|
|
35
35
|
},
|
|
36
36
|
variant: {
|
|
37
|
-
inverse: canvas_kit_styling_1.createStyles({ name: "
|
|
37
|
+
inverse: canvas_kit_styling_1.createStyles({ name: "yxo51k", styles: "--css-button-default-background:transparent;--css-button-default-border:transparent;--css-button-default-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-default-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-hover-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-hover-border:transparent;--css-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-border:transparent;--css-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-active-background:var(--cnvs-base-palette-soap-200, rgba(240,241,242,1));--css-button-active-border:transparent;--css-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-active-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-disabled-background:transparent;--css-button-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-disabled-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));&:focus-visible, &.focus{box-shadow:inset 0 0 0 2px var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));}" }),
|
|
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: "yxo51l", styles: "border-radius:999px;padding:0;min-width:calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) * 3);" }),
|
|
41
|
+
largeStart: canvas_kit_styling_1.createStyles({ name: "yxo51m", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
42
|
+
largeEnd: canvas_kit_styling_1.createStyles({ name: "yxo51n", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
43
|
+
mediumOnly: canvas_kit_styling_1.createStyles({ name: "yxo51o", styles: "padding:0;min-width:2.5rem;border-radius:999px;" }),
|
|
44
|
+
mediumStart: canvas_kit_styling_1.createStyles({ name: "yxo51p", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
45
|
+
mediumEnd: canvas_kit_styling_1.createStyles({ name: "yxo51q", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
46
|
+
smallOnly: canvas_kit_styling_1.createStyles({ name: "yxo51r", styles: "padding:0;min-width:2rem;border-radius:999px;" }),
|
|
47
|
+
smallStart: canvas_kit_styling_1.createStyles({ name: "yxo51s", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
48
|
+
smallEnd: canvas_kit_styling_1.createStyles({ name: "yxo51t", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
49
|
+
extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "yxo51u", styles: "padding:0;min-width:1.5rem;border-radius:999px;" }),
|
|
50
|
+
extraSmallStart: canvas_kit_styling_1.createStyles({ name: "yxo51v", styles: "padding-inline-start:0.25rem;padding-inline-end:0.5rem;" }),
|
|
51
|
+
extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "yxo51w", styles: "padding-inline-start:0.5rem;padding-inline-end:0.25rem;" }),
|
|
52
52
|
},
|
|
53
53
|
});
|
|
54
54
|
exports.TertiaryButton = common_1.createComponent('button')({
|
|
@@ -27,7 +27,7 @@ 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 CardHeading_1 = require("./CardHeading");
|
|
29
29
|
const CardBody_1 = require("./CardBody");
|
|
30
|
-
const cardBaseStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
30
|
+
const cardBaseStyles = canvas_kit_styling_1.createStyles({ name: "yxo510", styles: "box-shadow:var(--cnvs-sys-depth-1, 0 0.0625rem 0.25rem 0 rgba(31,38,46,0.12),0 0.125rem 0.5rem 0 rgba(31,38,46,0.08));padding:var(--cnvs-sys-space-x8, calc(0.25rem * 8));background-color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));border:0.0625rem solid var(--cnvs-base-palette-soap-500, rgba(206,211,217,1));border-radius:var(--cnvs-sys-shape-x2, calc(0.25rem * 2));" });
|
|
31
31
|
/**
|
|
32
32
|
* `Card` is a container component that holds a {@link CardBody Card.Body} and an optional
|
|
33
33
|
* {@link CardHeading Card.Heading}. `Card` wraps a non-semantic `div` element. The element can be
|
|
@@ -26,7 +26,7 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
|
26
26
|
const text_1 = require("@workday/canvas-kit-react/text");
|
|
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
|
-
const cardHeadingBaseStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
29
|
+
const cardHeadingBaseStyles = canvas_kit_styling_1.createStyles({ name: "yxo5z", styles: "font-weight:var(--cnvs-sys-font-weight-bold, 700);margin-bottom:var(--cnvs-sys-space-x6, calc(0.25rem * 6));margin-top:0px;" });
|
|
30
30
|
exports.CardHeading = common_1.createComponent('h3')({
|
|
31
31
|
displayName: 'Card.Heading',
|
|
32
32
|
Component: ({ children, ...elemProps }, ref, Element) => {
|
|
@@ -39,7 +39,7 @@ exports.accessibleHide = {
|
|
|
39
39
|
padding: 0,
|
|
40
40
|
border: 0,
|
|
41
41
|
};
|
|
42
|
-
const accessibleHideStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
42
|
+
const accessibleHideStyles = canvas_kit_styling_1.createStyles({ name: "yxo50", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;width:1px;margin:-1px;padding:0px;border:0px;" });
|
|
43
43
|
/**
|
|
44
44
|
* A convenient component wrapper to visually hide content, while still making it accessible to screen readers
|
|
45
45
|
*/
|
|
@@ -28,7 +28,7 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
|
28
28
|
const css_1 = require("@emotion/css");
|
|
29
29
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
30
30
|
// copied from brand/_variables.css
|
|
31
|
-
const defaultBranding = canvas_kit_styling_1.createStyles({ name: "
|
|
31
|
+
const defaultBranding = canvas_kit_styling_1.createStyles({ name: "yxo51", styles: "--cnvs-brand-error-darkest:rgba(128,22,14,1);--cnvs-brand-common-alert-inner:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-common-error-inner:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-common-focus-outline:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-neutral-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-neutral-darkest:var(--cnvs-base-palette-licorice-400);--cnvs-brand-neutral-dark:var(--cnvs-base-palette-licorice-300);--cnvs-brand-neutral-base:var(--cnvs-base-palette-soap-600);--cnvs-brand-neutral-light:var(--cnvs-base-palette-soap-300);--cnvs-brand-neutral-lightest:var(--cnvs-base-palette-soap-200);--cnvs-brand-success-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-success-darkest:var(--cnvs-base-palette-green-apple-600);--cnvs-brand-success-dark:var(--cnvs-base-palette-green-apple-500);--cnvs-brand-success-base:var(--cnvs-base-palette-green-apple-400);--cnvs-brand-success-light:var(--cnvs-base-palette-green-apple-300);--cnvs-brand-success-lightest:var(--cnvs-base-palette-green-apple-100);--cnvs-brand-error-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-error-dark:var(--cnvs-base-palette-cinnamon-600);--cnvs-brand-error-base:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-error-light:var(--cnvs-base-palette-cinnamon-200);--cnvs-brand-error-lightest:var(--cnvs-base-palette-cinnamon-100);--cnvs-brand-alert-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-alert-darkest:var(--cnvs-base-palette-cantaloupe-600);--cnvs-brand-alert-dark:var(--cnvs-base-palette-cantaloupe-500);--cnvs-brand-alert-base:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-alert-light:var(--cnvs-base-palette-cantaloupe-200);--cnvs-brand-alert-lightest:var(--cnvs-base-palette-cantaloupe-100);--cnvs-brand-primary-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-primary-darkest:var(--cnvs-base-palette-blueberry-600);--cnvs-brand-primary-dark:var(--cnvs-base-palette-blueberry-500);--cnvs-brand-primary-base:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-primary-light:var(--cnvs-base-palette-blueberry-200);--cnvs-brand-primary-lightest:var(--cnvs-base-palette-blueberry-100);--cnvs-brand-gradient-primary:linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);" });
|
|
32
32
|
const mappedKeys = {
|
|
33
33
|
lightest: 'lightest',
|
|
34
34
|
light: 'light',
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { GrowthBehavior, ErrorType, Themeable } from '@workday/canvas-kit-react/common';
|
|
3
3
|
import { FormFieldLabelPosition } from './types';
|
|
4
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--
|
|
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--basic) instead.
|
|
6
6
|
*/
|
|
7
7
|
export interface FormFieldProps extends Themeable, React.HTMLAttributes<HTMLDivElement>, GrowthBehavior {
|
|
8
8
|
/**
|
|
@@ -59,7 +59,7 @@ export interface FormFieldErrorBehavior {
|
|
|
59
59
|
error?: ErrorType;
|
|
60
60
|
}
|
|
61
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--
|
|
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--basic) instead.
|
|
63
63
|
*/
|
|
64
64
|
export declare class FormField extends React.Component<React.PropsWithChildren<FormFieldProps>> {
|
|
65
65
|
static LabelPosition: typeof FormFieldLabelPosition;
|
|
@@ -78,7 +78,7 @@ const FormFieldInputContainer = common_1.styled('div')(({ grow, labelPosition })
|
|
|
78
78
|
};
|
|
79
79
|
});
|
|
80
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--
|
|
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--basic) instead.
|
|
82
82
|
*/
|
|
83
83
|
class FormField extends React.Component {
|
|
84
84
|
constructor() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { ErrorType, Themeable } from '@workday/canvas-kit-react/common';
|
|
3
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--
|
|
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--basic) instead.
|
|
5
5
|
*/
|
|
6
6
|
export interface HintProps extends Themeable, React.HTMLAttributes<HTMLParagraphElement> {
|
|
7
7
|
/**
|
|
@@ -20,7 +20,7 @@ export interface HintProps extends Themeable, React.HTMLAttributes<HTMLParagraph
|
|
|
20
20
|
alertLabel?: string;
|
|
21
21
|
}
|
|
22
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--
|
|
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--basic) instead.
|
|
24
24
|
*/
|
|
25
25
|
declare class Hint extends React.Component<HintProps> {
|
|
26
26
|
static ErrorType: typeof ErrorType;
|
|
@@ -26,7 +26,7 @@ const tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
|
26
26
|
const text_1 = require("@workday/canvas-kit-react/text");
|
|
27
27
|
const Message = common_1.styled(text_1.Subtext)(({ error, theme }) => error === common_1.ErrorType.Error && { color: theme.canvas.palette.error.main });
|
|
28
28
|
/**
|
|
29
|
-
* @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--
|
|
29
|
+
* @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--basic) instead.
|
|
30
30
|
*/
|
|
31
31
|
class Hint extends React.Component {
|
|
32
32
|
render() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { FormFieldLabelPosition, FormFieldLabelPositionBehavior } from './types';
|
|
3
3
|
/**
|
|
4
|
-
* @deprecated ⚠️ `LabelProps` 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--
|
|
4
|
+
* @deprecated ⚠️ `LabelProps` 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--basic) instead.
|
|
5
5
|
*/
|
|
6
6
|
export interface LabelProps extends FormFieldLabelPositionBehavior {
|
|
7
7
|
/**
|
|
@@ -36,7 +36,7 @@ export interface LabelProps extends FormFieldLabelPositionBehavior {
|
|
|
36
36
|
accessibleHide?: boolean;
|
|
37
37
|
}
|
|
38
38
|
/**
|
|
39
|
-
* @deprecated ⚠️ `Label` 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--
|
|
39
|
+
* @deprecated ⚠️ `Label` 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--basic) instead.
|
|
40
40
|
*/
|
|
41
41
|
declare class Label extends React.Component<React.PropsWithChildren<LabelProps>> {
|
|
42
42
|
static Position: typeof FormFieldLabelPosition;
|
|
@@ -72,7 +72,7 @@ const LegendComponent = common_1.styled('legend')(...labelStyles, ({ labelPositi
|
|
|
72
72
|
});
|
|
73
73
|
const LabelComponent = common_1.styled('label')(...labelStyles);
|
|
74
74
|
/**
|
|
75
|
-
* @deprecated ⚠️ `Label` 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--
|
|
75
|
+
* @deprecated ⚠️ `Label` 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--basic) instead.
|
|
76
76
|
*/
|
|
77
77
|
class Label extends React.Component {
|
|
78
78
|
render() {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
*
|
|
3
3
|
* The position of the FormField label (Top vs Left vs Hidden).
|
|
4
4
|
*
|
|
5
|
-
* @deprecated ⚠️ `FormFieldLabelPosition` 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--
|
|
5
|
+
* @deprecated ⚠️ `FormFieldLabelPosition` 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--basic) instead.
|
|
6
6
|
*/
|
|
7
7
|
export declare enum FormFieldLabelPosition {
|
|
8
8
|
Top = 0,
|
|
@@ -10,7 +10,7 @@ export declare enum FormFieldLabelPosition {
|
|
|
10
10
|
Hidden = 2
|
|
11
11
|
}
|
|
12
12
|
/**
|
|
13
|
-
* @deprecated ⚠️ `FormFieldLabelPositionBehavior` 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--
|
|
13
|
+
* @deprecated ⚠️ `FormFieldLabelPositionBehavior` 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--basic) instead.
|
|
14
14
|
*/
|
|
15
15
|
export interface FormFieldLabelPositionBehavior {
|
|
16
16
|
labelPosition?: FormFieldLabelPosition;
|
|
@@ -5,7 +5,7 @@ exports.FormFieldLabelPosition = void 0;
|
|
|
5
5
|
*
|
|
6
6
|
* The position of the FormField label (Top vs Left vs Hidden).
|
|
7
7
|
*
|
|
8
|
-
* @deprecated ⚠️ `FormFieldLabelPosition` 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--
|
|
8
|
+
* @deprecated ⚠️ `FormFieldLabelPosition` 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--basic) instead.
|
|
9
9
|
*/
|
|
10
10
|
var FormFieldLabelPosition;
|
|
11
11
|
(function (FormFieldLabelPosition) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { CSProps } from '@workday/canvas-kit-styling';
|
|
2
2
|
/**
|
|
3
3
|
* A simple component that displays three horizontal dots, to be used when some data is loading.
|
|
4
4
|
*/
|
|
5
|
-
export declare
|
|
5
|
+
export declare const LoadingDots: import("@workday/canvas-kit-react/common").ElementComponent<"div", CSProps>;
|
|
6
6
|
//# sourceMappingURL=LoadingDots.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingDots.d.ts","sourceRoot":"","sources":["../../../../loading-dots/lib/LoadingDots.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"LoadingDots.d.ts","sourceRoot":"","sources":["../../../../loading-dots/lib/LoadingDots.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAwC,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAwD3F;;GAEG;AACH,eAAO,MAAM,WAAW,6EAWtB,CAAC"}
|
|
@@ -21,58 +21,35 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
21
21
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
22
22
|
exports.LoadingDots = void 0;
|
|
23
23
|
const React = __importStar(require("react"));
|
|
24
|
-
const
|
|
25
|
-
const tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
24
|
+
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
26
25
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
26
|
+
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
27
|
+
/**
|
|
28
|
+
* Duration of the sparkle dots loading (in ms).
|
|
29
|
+
*/
|
|
30
|
+
const ANIMATION_DURATION_MS = '1400';
|
|
27
31
|
/**
|
|
28
32
|
* Keyframe for the dots loading animation.
|
|
29
33
|
*/
|
|
30
|
-
const keyframesLoading =
|
|
31
|
-
|
|
32
|
-
80%,
|
|
33
|
-
100% {
|
|
34
|
-
transform: scale(0);
|
|
35
|
-
}
|
|
36
|
-
40% {
|
|
37
|
-
transform: scale(1);
|
|
38
|
-
}`;
|
|
34
|
+
const keyframesLoading = keyframes({ name: "zl77bl", styles: "0%, 80%, 100%{transform:scale(0);}40%{transform:scale(1);}" });
|
|
35
|
+
const loadingDotStyles = canvas_kit_styling_1.createStyles({ name: "yxo525", styles: "background-color:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));width:var(--cnvs-sys-space-x4, calc(0.25rem * 4));height:var(--cnvs-sys-space-x4, calc(0.25rem * 4));font-size:var(--cnvs-sys-space-zero, 0);border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));transform:scale(0);display:inline-block;animation-name:animation-zl77bl;animation-duration:1400ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-fill-mode:both;&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(1400ms * (4/35));}&:nth-child(3){animation-delay:calc(1400ms * (8/35));}" });
|
|
39
36
|
/**
|
|
40
37
|
* The actual loading dot div.
|
|
41
38
|
*/
|
|
42
|
-
const LoadingAnimationDot =
|
|
43
|
-
backgroundColor: tokens_1.canvas.colors.soap400,
|
|
44
|
-
width: tokens_1.canvas.space.s,
|
|
45
|
-
height: tokens_1.canvas.space.s,
|
|
46
|
-
fontSize: '0px',
|
|
47
|
-
borderRadius: tokens_1.borderRadius.circle,
|
|
48
|
-
transform: 'scale(0)',
|
|
49
|
-
display: 'inline-block',
|
|
50
|
-
marginRight: tokens_1.canvas.space.xxs,
|
|
51
|
-
animationName: keyframesLoading,
|
|
52
|
-
animationDuration: '1400ms',
|
|
53
|
-
animationIterationCount: 'infinite',
|
|
54
|
-
animationTimingFunction: 'ease-in-out',
|
|
55
|
-
animationFillMode: 'both',
|
|
56
|
-
'&:last-child': {
|
|
57
|
-
marginRight: 0,
|
|
58
|
-
},
|
|
59
|
-
}, ({ animationDelay }) => ({
|
|
60
|
-
animationDelay: animationDelay + 'ms',
|
|
61
|
-
}));
|
|
39
|
+
const LoadingAnimationDot = () => React.createElement("div", { className: `${loadingDotStyles}` });
|
|
62
40
|
/**
|
|
63
41
|
* A simple container for the loading dots.
|
|
64
42
|
*/
|
|
65
|
-
const
|
|
66
|
-
display: 'inline-block',
|
|
67
|
-
});
|
|
43
|
+
const containerStyles = canvas_kit_styling_1.createStyles({ name: "yxo526", styles: "display:inline-flex;gap:var(--cnvs-sys-space-x2, calc(0.25rem * 2));" });
|
|
68
44
|
/**
|
|
69
45
|
* A simple component that displays three horizontal dots, to be used when some data is loading.
|
|
70
46
|
*/
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
React.createElement(
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
47
|
+
exports.LoadingDots = common_1.createComponent('div')({
|
|
48
|
+
displayName: 'LoadingDots',
|
|
49
|
+
Component: (elemProps, ref, Element) => {
|
|
50
|
+
return (React.createElement(Element, Object.assign({ ref: ref }, canvas_kit_styling_1.handleCsProp(elemProps, containerStyles)),
|
|
51
|
+
React.createElement(LoadingAnimationDot, null),
|
|
52
|
+
React.createElement(LoadingAnimationDot, null),
|
|
53
|
+
React.createElement(LoadingAnimationDot, null)));
|
|
54
|
+
},
|
|
55
|
+
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCloseOnOutsideClick.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useCloseOnOutsideClick.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B;;;;;;;;;GASG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"useCloseOnOutsideClick.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useCloseOnOutsideClick.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B;;;;;;;;;GASG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;MAwCjC,CAAC"}
|
|
@@ -28,6 +28,8 @@ exports.useCloseOnOutsideClick = common_1.createElemPropsHook(usePopupModel_1.us
|
|
|
28
28
|
.sort((a, b) => Number(a.style.zIndex) - Number(b.style.zIndex));
|
|
29
29
|
if (elements.length &&
|
|
30
30
|
elements[elements.length - 1] === model.state.stackRef.current &&
|
|
31
|
+
// Only consider event targets that are currently in the DOM as valid
|
|
32
|
+
document.contains(event.target) &&
|
|
31
33
|
// Use `PopupStack.contains` instead of `ref.current.contains` so that the application can
|
|
32
34
|
// decide if clicking the target should toggle the popup rather than it toggling implicitly
|
|
33
35
|
// because the target is outside `ref.current`
|
|
@@ -15,12 +15,12 @@ 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: "yxo527", 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,
|
|
22
22
|
})(({ placeholder = 'Choose an option', inputStartIcon, width, ...elemProps }, Element, model) => {
|
|
23
|
-
return (react_1.default.createElement(text_input_1.InputGroup, { width: width },
|
|
23
|
+
return (react_1.default.createElement(text_input_1.InputGroup, { width: width, "data-width": "ck-formfield-width" },
|
|
24
24
|
inputStartIcon && model.state.selectedIds.length > 0 && (react_1.default.createElement(text_input_1.InputGroup.InnerStart, { pointerEvents: "none" },
|
|
25
25
|
react_1.default.createElement(icon_1.SystemIcon, { icon: inputStartIcon }))),
|
|
26
26
|
react_1.default.createElement(text_input_1.InputGroup.Input, Object.assign({ as: Element, placeholder: placeholder }, layout_1.mergeStyles(elemProps, [selectInputStyles]))),
|