@workday/canvas-kit-react 10.0.19 → 10.0.21
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/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/layout/lib/utils/mergeStyles.d.ts +13 -56
- package/dist/commonjs/layout/lib/utils/mergeStyles.d.ts.map +1 -1
- package/dist/commonjs/layout/lib/utils/mergeStyles.js +16 -93
- 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/layout/lib/utils/mergeStyles.d.ts +13 -56
- package/dist/es6/layout/lib/utils/mergeStyles.d.ts.map +1 -1
- package/dist/es6/layout/lib/utils/mergeStyles.js +18 -95
- package/dist/es6/menu/lib/MenuItem.d.ts +1 -1
- package/dist/es6/select/lib/Select.js +1 -1
- package/dist/es6/tabs/lib/TabsItem.d.ts +1 -1
- package/layout/lib/utils/mergeStyles.ts +16 -103
- package/package.json +4 -5
|
@@ -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: "elvt0", 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, 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{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, 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, 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, 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{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, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-disabled-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-disabled-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}}" });
|
|
44
44
|
/**
|
|
45
45
|
* Button modifiers that will overwrite the base styles of Buttons.
|
|
46
46
|
* - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
|
|
@@ -49,24 +49,24 @@ const baseButtonStyles = canvas_kit_styling_1.createStyles({ name: "fytb0", styl
|
|
|
49
49
|
*/
|
|
50
50
|
exports.buttonModifiers = canvas_kit_styling_1.createModifiers({
|
|
51
51
|
size: {
|
|
52
|
-
large: canvas_kit_styling_1.createStyles({ name: "
|
|
53
|
-
medium: canvas_kit_styling_1.createStyles({ name: "
|
|
54
|
-
small: canvas_kit_styling_1.createStyles({ name: "
|
|
55
|
-
extraSmall: canvas_kit_styling_1.createStyles({ name: "
|
|
52
|
+
large: canvas_kit_styling_1.createStyles({ name: "elvt1", styles: "font-size:var(--cnvs-sys-space-x4, 1rem);line-height:var(--cnvs-sys-space-x6, 1.5rem);letter-spacing:0.01rem;height:48px;padding-inline:var(--cnvs-sys-space-x8, 2rem);min-width:112px;" }),
|
|
53
|
+
medium: canvas_kit_styling_1.createStyles({ name: "elvt2", styles: "font-size:0.875rem;letter-spacing:0.015rem;min-width:96px;padding-inline:var(--cnvs-sys-space-x6, 1.5rem);height:var(--cnvs-sys-space-x10, 2.5rem);" }),
|
|
54
|
+
small: canvas_kit_styling_1.createStyles({ name: "elvt3", styles: "font-size:0.875rem;letter-spacing:0.015rem;height:var(--cnvs-sys-space-x8, 2rem);min-width:var(--cnvs-sys-space-x20, 5rem);padding-inline:var(--cnvs-sys-space-x4, 1rem);gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
|
|
55
|
+
extraSmall: canvas_kit_styling_1.createStyles({ name: "elvt4", styles: "font-size:0.75rem;line-height:var(--cnvs-sys-space-x4, 1rem);letter-spacing:0.02rem;height:var(--cnvs-sys-space-x6, 1.5rem);min-width:auto;padding-inline:var(--cnvs-sys-space-x3, 0.75rem);gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
|
|
56
56
|
},
|
|
57
57
|
iconPosition: {
|
|
58
|
-
largeOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
59
|
-
largeStart: canvas_kit_styling_1.createStyles({ name: "
|
|
60
|
-
largeEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
61
|
-
mediumOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
62
|
-
mediumStart: canvas_kit_styling_1.createStyles({ name: "
|
|
63
|
-
mediumEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
64
|
-
smallOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
65
|
-
smallStart: canvas_kit_styling_1.createStyles({ name: "
|
|
66
|
-
smallEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
67
|
-
extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
68
|
-
extraSmallStart: canvas_kit_styling_1.createStyles({ name: "
|
|
69
|
-
extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
58
|
+
largeOnly: canvas_kit_styling_1.createStyles({ name: "elvt5", styles: "padding:0;min-width:calc(var(--cnvs-sys-space-x4, 1rem) * 3);" }),
|
|
59
|
+
largeStart: canvas_kit_styling_1.createStyles({ name: "elvt6", styles: "padding-inline-start:var(--cnvs-sys-space-x6, 1.5rem);padding-inline-end:var(--cnvs-sys-space-x8, 2rem);" }),
|
|
60
|
+
largeEnd: canvas_kit_styling_1.createStyles({ name: "elvt7", styles: "padding-inline-start:var(--cnvs-sys-space-x8, 2rem);padding-inline-end:var(--cnvs-sys-space-x6, 1.5rem);" }),
|
|
61
|
+
mediumOnly: canvas_kit_styling_1.createStyles({ name: "elvt8", styles: "padding:0;min-width:var(--cnvs-sys-space-x10, 2.5rem);" }),
|
|
62
|
+
mediumStart: canvas_kit_styling_1.createStyles({ name: "elvt9", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);padding-inline-end:var(--cnvs-sys-space-x6, 1.5rem);" }),
|
|
63
|
+
mediumEnd: canvas_kit_styling_1.createStyles({ name: "elvta", styles: "padding-inline-start:var(--cnvs-sys-space-x6, 1.5rem);padding-inline-end:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);" }),
|
|
64
|
+
smallOnly: canvas_kit_styling_1.createStyles({ name: "elvtb", styles: "padding:0;min-width:var(--cnvs-sys-space-x8, 2rem);" }),
|
|
65
|
+
smallStart: canvas_kit_styling_1.createStyles({ name: "elvtc", styles: "padding-inline-start:var(--cnvs-sys-space-x3, 0.75rem);padding-inline-end:var(--cnvs-sys-space-x4, 1rem);" }),
|
|
66
|
+
smallEnd: canvas_kit_styling_1.createStyles({ name: "elvtd", styles: "padding-inline-start:var(--cnvs-sys-space-x4, 1rem);padding-inline-end:var(--cnvs-sys-space-x3, 0.75rem);" }),
|
|
67
|
+
extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "elvte", styles: "padding:0;min-width:var(--cnvs-sys-space-x6, 1.5rem);" }),
|
|
68
|
+
extraSmallStart: canvas_kit_styling_1.createStyles({ name: "elvtf", styles: "padding-inline-start:var(--cnvs-sys-space-x2, 0.5rem);padding-inline-end:var(--cnvs-sys-space-x3, 0.75rem);" }),
|
|
69
|
+
extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "elvtg", styles: "padding-inline-start:var(--cnvs-sys-space-x3, 0.75rem);padding-inline-end:var(--cnvs-sys-space-x2, 0.5rem);" }),
|
|
70
70
|
},
|
|
71
71
|
});
|
|
72
72
|
function capitalize(string = '') {
|
|
@@ -27,7 +27,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
|
27
27
|
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
28
28
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
29
29
|
const Button_1 = require("./Button");
|
|
30
|
-
const deleteStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
30
|
+
const deleteStyles = canvas_kit_styling_1.createStyles({ name: "elvt10", 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: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: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: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: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:var(--cnvs-brand-error-accent, #ffffff);opacity:1px;}" });
|
|
31
31
|
/**
|
|
32
32
|
* Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
|
|
33
33
|
* have significant consequences. They commonly appear in confirmation dialogs as the final
|
|
@@ -27,10 +27,10 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
|
27
27
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
28
28
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
29
29
|
const Button_1 = require("./Button");
|
|
30
|
-
const primaryStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
30
|
+
const primaryStyles = canvas_kit_styling_1.createStyles({ name: "elvtw", 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: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: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: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: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:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-disabled-opacity:0.4;--css-button-vars-disabled-icon:var(--cnvs-brand-primary-accent, #ffffff);" });
|
|
31
31
|
exports.primaryButtonModifiers = canvas_kit_styling_1.createModifiers({
|
|
32
32
|
variant: {
|
|
33
|
-
inverse: canvas_kit_styling_1.createStyles({ name: "
|
|
33
|
+
inverse: canvas_kit_styling_1.createStyles({ name: "elvtx", 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: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: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: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: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:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
34
34
|
},
|
|
35
35
|
});
|
|
36
36
|
exports.PrimaryButton = common_1.createComponent('button')({
|
|
@@ -27,10 +27,10 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
|
27
27
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
28
28
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
29
29
|
const Button_1 = require("./Button");
|
|
30
|
-
const secondaryStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
30
|
+
const secondaryStyles = canvas_kit_styling_1.createStyles({ name: "elvty", 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: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: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: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: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:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-disabled-opacity:0.4;--css-button-vars-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" });
|
|
31
31
|
exports.secondaryButtonModifiers = canvas_kit_styling_1.createModifiers({
|
|
32
32
|
variant: {
|
|
33
|
-
inverse: canvas_kit_styling_1.createStyles({ name: "
|
|
33
|
+
inverse: canvas_kit_styling_1.createStyles({ name: "elvtz", 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: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: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: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: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:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }),
|
|
34
34
|
},
|
|
35
35
|
});
|
|
36
36
|
exports.SecondaryButton = common_1.createComponent('button')({
|
|
@@ -28,27 +28,27 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
|
28
28
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
29
29
|
const tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
30
30
|
const Button_1 = require("./Button");
|
|
31
|
-
const tertiaryStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
31
|
+
const tertiaryStyles = canvas_kit_styling_1.createStyles({ name: "elvth", 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: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: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: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: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:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-disabled-opacity:0.4;&:focus-visible, &.focus{box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100, var(--css-button-vars-focus-boxShadowInner)), 0 0 0 calc(2px + 0px) var(--cnvs-brand-common-focus-outline, var(--css-button-vars-focus-boxShadowOuter));}" });
|
|
32
32
|
exports.tertiaryButtonModifiers = canvas_kit_styling_1.createModifiers({
|
|
33
33
|
isThemeable: {
|
|
34
|
-
true: canvas_kit_styling_1.createStyles({ name: "
|
|
34
|
+
true: canvas_kit_styling_1.createStyles({ name: "elvti", styles: "--css-button-vars-default-icon:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-hover-icon:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-focus-icon:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-active-icon:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-disabled-icon:var(--cnvs-brand-primary-base, rgba(8,117,226,1));" }),
|
|
35
35
|
},
|
|
36
36
|
variant: {
|
|
37
|
-
inverse: canvas_kit_styling_1.createStyles({ name: "
|
|
37
|
+
inverse: canvas_kit_styling_1.createStyles({ name: "elvtj", styles: "--css-button-vars-default-background:transparent;--css-button-vars-default-border:transparent;--css-button-vars-default-label: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: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: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: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:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, #fff);&:focus-visible, &.focus{box-shadow:inset 0 0 0 2px var(--cnvs-base-palette-black-pepper-400, var(--css-button-vars-focus-boxShadowInner)), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, var(--css-button-vars-focus-boxShadowOuter));}" }),
|
|
38
38
|
},
|
|
39
39
|
iconPosition: {
|
|
40
|
-
largeOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
41
|
-
largeStart: canvas_kit_styling_1.createStyles({ name: "
|
|
42
|
-
largeEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
43
|
-
mediumOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
44
|
-
mediumStart: canvas_kit_styling_1.createStyles({ name: "
|
|
45
|
-
mediumEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
46
|
-
smallOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
47
|
-
smallStart: canvas_kit_styling_1.createStyles({ name: "
|
|
48
|
-
smallEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
49
|
-
extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
50
|
-
extraSmallStart: canvas_kit_styling_1.createStyles({ name: "
|
|
51
|
-
extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
40
|
+
largeOnly: canvas_kit_styling_1.createStyles({ name: "elvtk", styles: "border-radius:999px;padding:0;min-width:calc(var(--cnvs-sys-space-x4, 1rem) * 3);" }),
|
|
41
|
+
largeStart: canvas_kit_styling_1.createStyles({ name: "elvtl", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
42
|
+
largeEnd: canvas_kit_styling_1.createStyles({ name: "elvtm", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
43
|
+
mediumOnly: canvas_kit_styling_1.createStyles({ name: "elvtn", styles: "padding:0;min-width:2.5rem;border-radius:999px;" }),
|
|
44
|
+
mediumStart: canvas_kit_styling_1.createStyles({ name: "elvto", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
45
|
+
mediumEnd: canvas_kit_styling_1.createStyles({ name: "elvtp", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
46
|
+
smallOnly: canvas_kit_styling_1.createStyles({ name: "elvtq", styles: "padding:0;min-width:2rem;border-radius:999px;" }),
|
|
47
|
+
smallStart: canvas_kit_styling_1.createStyles({ name: "elvtr", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
48
|
+
smallEnd: canvas_kit_styling_1.createStyles({ name: "elvts", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
49
|
+
extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "elvtt", styles: "padding:0;min-width:1.5rem;border-radius:999px;" }),
|
|
50
|
+
extraSmallStart: canvas_kit_styling_1.createStyles({ name: "elvtu", styles: "padding-inline-start:0.25rem;padding-inline-end:0.5rem;" }),
|
|
51
|
+
extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "elvtv", styles: "padding-inline-start:0.5rem;padding-inline-end:0.25rem;" }),
|
|
52
52
|
},
|
|
53
53
|
});
|
|
54
54
|
exports.TertiaryButton = common_1.createComponent('button')({
|
|
@@ -1,61 +1,18 @@
|
|
|
1
1
|
import { CSToPropsInput } from '@workday/canvas-kit-styling';
|
|
2
2
|
import { CommonStyleProps } from './styleProps';
|
|
3
3
|
/**
|
|
4
|
-
* This
|
|
5
|
-
*
|
|
6
|
-
* prop](https://emotion.sh/docs/css-prop). It will also handle style props for as long as those are
|
|
7
|
-
* supported. `mergeStyles` is exported from the layout package since it supports style props
|
|
8
|
-
* defined in the layout packages.
|
|
9
|
-
*
|
|
10
|
-
* It works by detecting styles added via Emotion's runtime APIs and forcing styling merging if use
|
|
11
|
-
* of runtime APIs have been detected. If only `createStyles` were used to style a component, the
|
|
12
|
-
* faster non-runtime styling will be used.
|
|
13
|
-
*
|
|
14
|
-
* You can use `mergeStyles` if you wish to use {@link createStyles} on your own components and want
|
|
15
|
-
* your components to be compatible with Emotion's runtime styling APIs.
|
|
16
|
-
*
|
|
17
|
-
* ```tsx
|
|
18
|
-
* import {createStyles, CSProps} from '@workday/canvas-kit-styling';
|
|
19
|
-
* import {mergeStyles} from '@workday/canvas-kit-react/layout';
|
|
20
|
-
*
|
|
21
|
-
* interface MyComponentProps extends CSProps {
|
|
22
|
-
* // other props
|
|
23
|
-
* }
|
|
24
|
-
*
|
|
25
|
-
* const myStyles = createStyles({
|
|
26
|
-
* background: 'green',
|
|
27
|
-
* height: 40,
|
|
28
|
-
* width: 40
|
|
29
|
-
* })
|
|
30
|
-
*
|
|
31
|
-
* const MyComponent = ({children, ...elemProps}: MyComponentProps) => {
|
|
32
|
-
* return (
|
|
33
|
-
* <div
|
|
34
|
-
* {...mergeStyles(elemProps, [myStyles])}
|
|
35
|
-
* >
|
|
36
|
-
* {children}
|
|
37
|
-
* </div>
|
|
38
|
-
* )
|
|
39
|
-
* }
|
|
40
|
-
*
|
|
41
|
-
* const StyledMyComponent(MyComponent)({
|
|
42
|
-
* background: 'red'
|
|
43
|
-
* })
|
|
44
|
-
*
|
|
45
|
-
* const myOverridingStyles = createStyles({
|
|
46
|
-
* background: 'blue'
|
|
47
|
-
* })
|
|
48
|
-
*
|
|
49
|
-
* // now everything works. Without `mergeStyles`, the last component would be a red box
|
|
50
|
-
* export default () => (
|
|
51
|
-
* <>
|
|
52
|
-
* <MyComponent>Green box</MyComponent>
|
|
53
|
-
* <StyledMyComponent>Red box</StyledMyComponent>
|
|
54
|
-
* <StyledMyComponent cs={myOverridingStyles}>Blue box</StyledMyComponent>
|
|
55
|
-
* </>
|
|
56
|
-
* )
|
|
57
|
-
* ```
|
|
58
|
-
*
|
|
4
|
+
* This function has the same signature as {@link handleCsProp} and also calls `handleCsProps`, but
|
|
5
|
+
* adds support for style props. It can be used as a drop-in replacement for `handleCsProps`.
|
|
59
6
|
*/
|
|
60
|
-
export declare function mergeStyles<T extends {}>(
|
|
7
|
+
export declare function mergeStyles<T extends {}>(
|
|
8
|
+
/**
|
|
9
|
+
* All the props to be spread onto an element. The `cs` prop will be removed an reduced to
|
|
10
|
+
* `className` and `style` props which should be safe on every element.
|
|
11
|
+
*/
|
|
12
|
+
allProps: T,
|
|
13
|
+
/**
|
|
14
|
+
* Optional local style created by `createStyles`. Using this parameter, you can style your
|
|
15
|
+
* element while supporting proper style merging order.
|
|
16
|
+
*/
|
|
17
|
+
localCs?: CSToPropsInput): Omit<T, 'cs' | keyof CommonStyleProps>;
|
|
61
18
|
//# sourceMappingURL=mergeStyles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mergeStyles.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/mergeStyles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"mergeStyles.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/mergeStyles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,cAAc,EAAe,MAAM,6BAA6B,CAAC;AAYzE,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AA0B9C;;;GAGG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,EAAE;AACtC;;;GAGG;AACH,QAAQ,EAAE,CAAC;AACX;;;GAGG;AACH,OAAO,CAAC,EAAE,cAAc,GACvB,IAAI,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,gBAAgB,CAAC,CAmCxC"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.mergeStyles = void 0;
|
|
4
|
-
const utils_1 = require("@emotion/utils");
|
|
5
4
|
// eslint-disable-next-line @emotion/no-vanilla
|
|
6
5
|
const css_1 = require("@emotion/css");
|
|
7
6
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
@@ -39,68 +38,22 @@ function isStyleProps(prop) {
|
|
|
39
38
|
return stylePropHash[prop] || false;
|
|
40
39
|
}
|
|
41
40
|
/**
|
|
42
|
-
* This
|
|
43
|
-
*
|
|
44
|
-
* prop](https://emotion.sh/docs/css-prop). It will also handle style props for as long as those are
|
|
45
|
-
* supported. `mergeStyles` is exported from the layout package since it supports style props
|
|
46
|
-
* defined in the layout packages.
|
|
47
|
-
*
|
|
48
|
-
* It works by detecting styles added via Emotion's runtime APIs and forcing styling merging if use
|
|
49
|
-
* of runtime APIs have been detected. If only `createStyles` were used to style a component, the
|
|
50
|
-
* faster non-runtime styling will be used.
|
|
51
|
-
*
|
|
52
|
-
* You can use `mergeStyles` if you wish to use {@link createStyles} on your own components and want
|
|
53
|
-
* your components to be compatible with Emotion's runtime styling APIs.
|
|
54
|
-
*
|
|
55
|
-
* ```tsx
|
|
56
|
-
* import {createStyles, CSProps} from '@workday/canvas-kit-styling';
|
|
57
|
-
* import {mergeStyles} from '@workday/canvas-kit-react/layout';
|
|
58
|
-
*
|
|
59
|
-
* interface MyComponentProps extends CSProps {
|
|
60
|
-
* // other props
|
|
61
|
-
* }
|
|
62
|
-
*
|
|
63
|
-
* const myStyles = createStyles({
|
|
64
|
-
* background: 'green',
|
|
65
|
-
* height: 40,
|
|
66
|
-
* width: 40
|
|
67
|
-
* })
|
|
68
|
-
*
|
|
69
|
-
* const MyComponent = ({children, ...elemProps}: MyComponentProps) => {
|
|
70
|
-
* return (
|
|
71
|
-
* <div
|
|
72
|
-
* {...mergeStyles(elemProps, [myStyles])}
|
|
73
|
-
* >
|
|
74
|
-
* {children}
|
|
75
|
-
* </div>
|
|
76
|
-
* )
|
|
77
|
-
* }
|
|
78
|
-
*
|
|
79
|
-
* const StyledMyComponent(MyComponent)({
|
|
80
|
-
* background: 'red'
|
|
81
|
-
* })
|
|
82
|
-
*
|
|
83
|
-
* const myOverridingStyles = createStyles({
|
|
84
|
-
* background: 'blue'
|
|
85
|
-
* })
|
|
86
|
-
*
|
|
87
|
-
* // now everything works. Without `mergeStyles`, the last component would be a red box
|
|
88
|
-
* export default () => (
|
|
89
|
-
* <>
|
|
90
|
-
* <MyComponent>Green box</MyComponent>
|
|
91
|
-
* <StyledMyComponent>Red box</StyledMyComponent>
|
|
92
|
-
* <StyledMyComponent cs={myOverridingStyles}>Blue box</StyledMyComponent>
|
|
93
|
-
* </>
|
|
94
|
-
* )
|
|
95
|
-
* ```
|
|
96
|
-
*
|
|
41
|
+
* This function has the same signature as {@link handleCsProp} and also calls `handleCsProps`, but
|
|
42
|
+
* adds support for style props. It can be used as a drop-in replacement for `handleCsProps`.
|
|
97
43
|
*/
|
|
98
|
-
function mergeStyles(
|
|
44
|
+
function mergeStyles(
|
|
45
|
+
/**
|
|
46
|
+
* All the props to be spread onto an element. The `cs` prop will be removed an reduced to
|
|
47
|
+
* `className` and `style` props which should be safe on every element.
|
|
48
|
+
*/
|
|
49
|
+
allProps,
|
|
50
|
+
/**
|
|
51
|
+
* Optional local style created by `createStyles`. Using this parameter, you can style your
|
|
52
|
+
* element while supporting proper style merging order.
|
|
53
|
+
*/
|
|
54
|
+
localCs) {
|
|
99
55
|
const styleProps = {};
|
|
100
56
|
let shouldRuntimeMergeStyles = false;
|
|
101
|
-
// TypeScript can't handle a type where I declare T extends `{className?: string}` for some
|
|
102
|
-
// reason, so we'll do a `as any` any time we check for possible props on `allProps`
|
|
103
|
-
let className = allProps.className || '';
|
|
104
57
|
// separate style props from all other props. `cs` is special and should be forwarded to the
|
|
105
58
|
// `handleCsProp` function.
|
|
106
59
|
const elemProps = Object.keys(allProps).reduce((result, prop) => {
|
|
@@ -110,10 +63,8 @@ function mergeStyles(allProps, cs) {
|
|
|
110
63
|
styleProps[prop] = allProps[prop];
|
|
111
64
|
}
|
|
112
65
|
else {
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
result[prop] = allProps[prop];
|
|
116
|
-
}
|
|
66
|
+
// @ts-ignore
|
|
67
|
+
result[prop] = allProps[prop];
|
|
117
68
|
}
|
|
118
69
|
return result;
|
|
119
70
|
}, {});
|
|
@@ -127,34 +78,6 @@ function mergeStyles(allProps, cs) {
|
|
|
127
78
|
const styles = Box_1.boxStyleFn(styleProps);
|
|
128
79
|
stylePropsClassName = css_1.css(styles);
|
|
129
80
|
}
|
|
130
|
-
|
|
131
|
-
cs,
|
|
132
|
-
stylePropsClassName,
|
|
133
|
-
className,
|
|
134
|
-
allProps.cs,
|
|
135
|
-
allProps.style, // doesn't matter if `style` is undefined. csToProps will handle undefined. Thanks anyways, TypeScript
|
|
136
|
-
]);
|
|
137
|
-
// see if we need to do style merging based off use of Emotion runtime APIs. We do this by testing
|
|
138
|
-
// the Emotion cache for a match to any class names we find, filtering out those created via
|
|
139
|
-
// `createStyles`. If only `createStyles` is detected, there is no reason to merge styles
|
|
140
|
-
(returnProps.className || '').split(' ').forEach(name => {
|
|
141
|
-
if (!canvas_kit_styling_1.createStylesCache[name] && css_1.cache.registered[name]) {
|
|
142
|
-
shouldRuntimeMergeStyles = true;
|
|
143
|
-
}
|
|
144
|
-
});
|
|
145
|
-
if (shouldRuntimeMergeStyles) {
|
|
146
|
-
const registeredStyles = [];
|
|
147
|
-
// We are using the raw `css` instead of `createStyles` because `css` uses style hashing and
|
|
148
|
-
// `createStyles` generates a new ID every time. We could use `createStyles` here, but it
|
|
149
|
-
// would be more wasteful and new styles would be generated each React render cycle. `css` is
|
|
150
|
-
// safe to use inside a render function while `createStyles` should always be used outside the
|
|
151
|
-
// React render cycle.
|
|
152
|
-
className = utils_1.getRegisteredStyles(css_1.cache.registered, registeredStyles, returnProps.className || '');
|
|
153
|
-
className += css_1.css(registeredStyles);
|
|
154
|
-
}
|
|
155
|
-
else {
|
|
156
|
-
className = returnProps.className;
|
|
157
|
-
}
|
|
158
|
-
return { ...elemProps, ...returnProps, ...{ className } };
|
|
81
|
+
return canvas_kit_styling_1.handleCsProp(elemProps, [localCs, stylePropsClassName]);
|
|
159
82
|
}
|
|
160
83
|
exports.mergeStyles = mergeStyles;
|
|
@@ -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: "elvt11", 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: "zvvj0", 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, 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{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, 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, 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, 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{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, 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: "pa5h0", 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: "zvvj1", 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: "zvvj2", 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: "zvvj3", 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: "zvvj4", 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: "zvvj5", styles: "padding:0;min-width:calc(var(--cnvs-sys-space-x4, 1rem) * 3);" }),
|
|
37
|
+
largeStart: createStyles({ name: "zvvj6", styles: "padding-inline-start:var(--cnvs-sys-space-x6, 1.5rem);padding-inline-end:var(--cnvs-sys-space-x8, 2rem);" }),
|
|
38
|
+
largeEnd: createStyles({ name: "zvvj7", styles: "padding-inline-start:var(--cnvs-sys-space-x8, 2rem);padding-inline-end:var(--cnvs-sys-space-x6, 1.5rem);" }),
|
|
39
|
+
mediumOnly: createStyles({ name: "zvvj8", styles: "padding:0;min-width:var(--cnvs-sys-space-x10, 2.5rem);" }),
|
|
40
|
+
mediumStart: createStyles({ name: "zvvj9", 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: "zvvja", 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: "zvvjb", styles: "padding:0;min-width:var(--cnvs-sys-space-x8, 2rem);" }),
|
|
43
|
+
smallStart: createStyles({ name: "zvvjc", styles: "padding-inline-start:var(--cnvs-sys-space-x3, 0.75rem);padding-inline-end:var(--cnvs-sys-space-x4, 1rem);" }),
|
|
44
|
+
smallEnd: createStyles({ name: "zvvjd", styles: "padding-inline-start:var(--cnvs-sys-space-x4, 1rem);padding-inline-end:var(--cnvs-sys-space-x3, 0.75rem);" }),
|
|
45
|
+
extraSmallOnly: createStyles({ name: "zvvje", styles: "padding:0;min-width:var(--cnvs-sys-space-x6, 1.5rem);" }),
|
|
46
|
+
extraSmallStart: createStyles({ name: "zvvjf", 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: "zvvjg", 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: "zvvj10", 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: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: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: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: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: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: "zvvjw", 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: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: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: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: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: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: "zvvjx", 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: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: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: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: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: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: "zvvjy", 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: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: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: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: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: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: "zvvjz", 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: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: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: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: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: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: "zvvjh", 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: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: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: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: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: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: "zvvji", 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: "zvvjj", styles: "--css-button-vars-default-background:transparent;--css-button-vars-default-border:transparent;--css-button-vars-default-label: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: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: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: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: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: "zvvjk", styles: "border-radius:999px;padding:0;min-width:calc(var(--cnvs-sys-space-x4, 1rem) * 3);" }),
|
|
19
|
+
largeStart: createStyles({ name: "zvvjl", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
20
|
+
largeEnd: createStyles({ name: "zvvjm", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
21
|
+
mediumOnly: createStyles({ name: "zvvjn", styles: "padding:0;min-width:2.5rem;border-radius:999px;" }),
|
|
22
|
+
mediumStart: createStyles({ name: "zvvjo", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
23
|
+
mediumEnd: createStyles({ name: "zvvjp", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
24
|
+
smallOnly: createStyles({ name: "zvvjq", styles: "padding:0;min-width:2rem;border-radius:999px;" }),
|
|
25
|
+
smallStart: createStyles({ name: "zvvjr", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
26
|
+
smallEnd: createStyles({ name: "zvvjs", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
27
|
+
extraSmallOnly: createStyles({ name: "zvvjt", styles: "padding:0;min-width:1.5rem;border-radius:999px;" }),
|
|
28
|
+
extraSmallStart: createStyles({ name: "zvvju", styles: "padding-inline-start:0.25rem;padding-inline-end:0.5rem;" }),
|
|
29
|
+
extraSmallEnd: createStyles({ name: "zvvjv", styles: "padding-inline-start:0.5rem;padding-inline-end:0.25rem;" }),
|
|
30
30
|
},
|
|
31
31
|
});
|
|
32
32
|
export const TertiaryButton = createComponent('button')({
|
|
@@ -1,61 +1,18 @@
|
|
|
1
1
|
import { CSToPropsInput } from '@workday/canvas-kit-styling';
|
|
2
2
|
import { CommonStyleProps } from './styleProps';
|
|
3
3
|
/**
|
|
4
|
-
* This
|
|
5
|
-
*
|
|
6
|
-
* prop](https://emotion.sh/docs/css-prop). It will also handle style props for as long as those are
|
|
7
|
-
* supported. `mergeStyles` is exported from the layout package since it supports style props
|
|
8
|
-
* defined in the layout packages.
|
|
9
|
-
*
|
|
10
|
-
* It works by detecting styles added via Emotion's runtime APIs and forcing styling merging if use
|
|
11
|
-
* of runtime APIs have been detected. If only `createStyles` were used to style a component, the
|
|
12
|
-
* faster non-runtime styling will be used.
|
|
13
|
-
*
|
|
14
|
-
* You can use `mergeStyles` if you wish to use {@link createStyles} on your own components and want
|
|
15
|
-
* your components to be compatible with Emotion's runtime styling APIs.
|
|
16
|
-
*
|
|
17
|
-
* ```tsx
|
|
18
|
-
* import {createStyles, CSProps} from '@workday/canvas-kit-styling';
|
|
19
|
-
* import {mergeStyles} from '@workday/canvas-kit-react/layout';
|
|
20
|
-
*
|
|
21
|
-
* interface MyComponentProps extends CSProps {
|
|
22
|
-
* // other props
|
|
23
|
-
* }
|
|
24
|
-
*
|
|
25
|
-
* const myStyles = createStyles({
|
|
26
|
-
* background: 'green',
|
|
27
|
-
* height: 40,
|
|
28
|
-
* width: 40
|
|
29
|
-
* })
|
|
30
|
-
*
|
|
31
|
-
* const MyComponent = ({children, ...elemProps}: MyComponentProps) => {
|
|
32
|
-
* return (
|
|
33
|
-
* <div
|
|
34
|
-
* {...mergeStyles(elemProps, [myStyles])}
|
|
35
|
-
* >
|
|
36
|
-
* {children}
|
|
37
|
-
* </div>
|
|
38
|
-
* )
|
|
39
|
-
* }
|
|
40
|
-
*
|
|
41
|
-
* const StyledMyComponent(MyComponent)({
|
|
42
|
-
* background: 'red'
|
|
43
|
-
* })
|
|
44
|
-
*
|
|
45
|
-
* const myOverridingStyles = createStyles({
|
|
46
|
-
* background: 'blue'
|
|
47
|
-
* })
|
|
48
|
-
*
|
|
49
|
-
* // now everything works. Without `mergeStyles`, the last component would be a red box
|
|
50
|
-
* export default () => (
|
|
51
|
-
* <>
|
|
52
|
-
* <MyComponent>Green box</MyComponent>
|
|
53
|
-
* <StyledMyComponent>Red box</StyledMyComponent>
|
|
54
|
-
* <StyledMyComponent cs={myOverridingStyles}>Blue box</StyledMyComponent>
|
|
55
|
-
* </>
|
|
56
|
-
* )
|
|
57
|
-
* ```
|
|
58
|
-
*
|
|
4
|
+
* This function has the same signature as {@link handleCsProp} and also calls `handleCsProps`, but
|
|
5
|
+
* adds support for style props. It can be used as a drop-in replacement for `handleCsProps`.
|
|
59
6
|
*/
|
|
60
|
-
export declare function mergeStyles<T extends {}>(
|
|
7
|
+
export declare function mergeStyles<T extends {}>(
|
|
8
|
+
/**
|
|
9
|
+
* All the props to be spread onto an element. The `cs` prop will be removed an reduced to
|
|
10
|
+
* `className` and `style` props which should be safe on every element.
|
|
11
|
+
*/
|
|
12
|
+
allProps: T,
|
|
13
|
+
/**
|
|
14
|
+
* Optional local style created by `createStyles`. Using this parameter, you can style your
|
|
15
|
+
* element while supporting proper style merging order.
|
|
16
|
+
*/
|
|
17
|
+
localCs?: CSToPropsInput): Omit<T, 'cs' | keyof CommonStyleProps>;
|
|
61
18
|
//# sourceMappingURL=mergeStyles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mergeStyles.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/mergeStyles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"mergeStyles.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/mergeStyles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,cAAc,EAAe,MAAM,6BAA6B,CAAC;AAYzE,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AA0B9C;;;GAGG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,EAAE;AACtC;;;GAGG;AACH,QAAQ,EAAE,CAAC;AACX;;;GAGG;AACH,OAAO,CAAC,EAAE,cAAc,GACvB,IAAI,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,gBAAgB,CAAC,CAmCxC"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import { getRegisteredStyles } from '@emotion/utils';
|
|
2
1
|
// eslint-disable-next-line @emotion/no-vanilla
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
2
|
+
import { css } from '@emotion/css';
|
|
3
|
+
import { handleCsProp } from '@workday/canvas-kit-styling';
|
|
5
4
|
import { boxStyleFn } from '../Box';
|
|
6
5
|
import { backgroundStyleFnConfigs } from './background';
|
|
7
6
|
import { borderStyleFnConfigs } from './border';
|
|
@@ -36,68 +35,22 @@ function isStyleProps(prop) {
|
|
|
36
35
|
return stylePropHash[prop] || false;
|
|
37
36
|
}
|
|
38
37
|
/**
|
|
39
|
-
* This
|
|
40
|
-
*
|
|
41
|
-
* prop](https://emotion.sh/docs/css-prop). It will also handle style props for as long as those are
|
|
42
|
-
* supported. `mergeStyles` is exported from the layout package since it supports style props
|
|
43
|
-
* defined in the layout packages.
|
|
44
|
-
*
|
|
45
|
-
* It works by detecting styles added via Emotion's runtime APIs and forcing styling merging if use
|
|
46
|
-
* of runtime APIs have been detected. If only `createStyles` were used to style a component, the
|
|
47
|
-
* faster non-runtime styling will be used.
|
|
48
|
-
*
|
|
49
|
-
* You can use `mergeStyles` if you wish to use {@link createStyles} on your own components and want
|
|
50
|
-
* your components to be compatible with Emotion's runtime styling APIs.
|
|
51
|
-
*
|
|
52
|
-
* ```tsx
|
|
53
|
-
* import {createStyles, CSProps} from '@workday/canvas-kit-styling';
|
|
54
|
-
* import {mergeStyles} from '@workday/canvas-kit-react/layout';
|
|
55
|
-
*
|
|
56
|
-
* interface MyComponentProps extends CSProps {
|
|
57
|
-
* // other props
|
|
58
|
-
* }
|
|
59
|
-
*
|
|
60
|
-
* const myStyles = createStyles({
|
|
61
|
-
* background: 'green',
|
|
62
|
-
* height: 40,
|
|
63
|
-
* width: 40
|
|
64
|
-
* })
|
|
65
|
-
*
|
|
66
|
-
* const MyComponent = ({children, ...elemProps}: MyComponentProps) => {
|
|
67
|
-
* return (
|
|
68
|
-
* <div
|
|
69
|
-
* {...mergeStyles(elemProps, [myStyles])}
|
|
70
|
-
* >
|
|
71
|
-
* {children}
|
|
72
|
-
* </div>
|
|
73
|
-
* )
|
|
74
|
-
* }
|
|
75
|
-
*
|
|
76
|
-
* const StyledMyComponent(MyComponent)({
|
|
77
|
-
* background: 'red'
|
|
78
|
-
* })
|
|
79
|
-
*
|
|
80
|
-
* const myOverridingStyles = createStyles({
|
|
81
|
-
* background: 'blue'
|
|
82
|
-
* })
|
|
83
|
-
*
|
|
84
|
-
* // now everything works. Without `mergeStyles`, the last component would be a red box
|
|
85
|
-
* export default () => (
|
|
86
|
-
* <>
|
|
87
|
-
* <MyComponent>Green box</MyComponent>
|
|
88
|
-
* <StyledMyComponent>Red box</StyledMyComponent>
|
|
89
|
-
* <StyledMyComponent cs={myOverridingStyles}>Blue box</StyledMyComponent>
|
|
90
|
-
* </>
|
|
91
|
-
* )
|
|
92
|
-
* ```
|
|
93
|
-
*
|
|
38
|
+
* This function has the same signature as {@link handleCsProp} and also calls `handleCsProps`, but
|
|
39
|
+
* adds support for style props. It can be used as a drop-in replacement for `handleCsProps`.
|
|
94
40
|
*/
|
|
95
|
-
export function mergeStyles(
|
|
41
|
+
export function mergeStyles(
|
|
42
|
+
/**
|
|
43
|
+
* All the props to be spread onto an element. The `cs` prop will be removed an reduced to
|
|
44
|
+
* `className` and `style` props which should be safe on every element.
|
|
45
|
+
*/
|
|
46
|
+
allProps,
|
|
47
|
+
/**
|
|
48
|
+
* Optional local style created by `createStyles`. Using this parameter, you can style your
|
|
49
|
+
* element while supporting proper style merging order.
|
|
50
|
+
*/
|
|
51
|
+
localCs) {
|
|
96
52
|
const styleProps = {};
|
|
97
53
|
let shouldRuntimeMergeStyles = false;
|
|
98
|
-
// TypeScript can't handle a type where I declare T extends `{className?: string}` for some
|
|
99
|
-
// reason, so we'll do a `as any` any time we check for possible props on `allProps`
|
|
100
|
-
let className = allProps.className || '';
|
|
101
54
|
// separate style props from all other props. `cs` is special and should be forwarded to the
|
|
102
55
|
// `handleCsProp` function.
|
|
103
56
|
const elemProps = Object.keys(allProps).reduce((result, prop) => {
|
|
@@ -107,10 +60,8 @@ export function mergeStyles(allProps, cs) {
|
|
|
107
60
|
styleProps[prop] = allProps[prop];
|
|
108
61
|
}
|
|
109
62
|
else {
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
result[prop] = allProps[prop];
|
|
113
|
-
}
|
|
63
|
+
// @ts-ignore
|
|
64
|
+
result[prop] = allProps[prop];
|
|
114
65
|
}
|
|
115
66
|
return result;
|
|
116
67
|
}, {});
|
|
@@ -124,33 +75,5 @@ export function mergeStyles(allProps, cs) {
|
|
|
124
75
|
const styles = boxStyleFn(styleProps);
|
|
125
76
|
stylePropsClassName = css(styles);
|
|
126
77
|
}
|
|
127
|
-
|
|
128
|
-
cs,
|
|
129
|
-
stylePropsClassName,
|
|
130
|
-
className,
|
|
131
|
-
allProps.cs,
|
|
132
|
-
allProps.style, // doesn't matter if `style` is undefined. csToProps will handle undefined. Thanks anyways, TypeScript
|
|
133
|
-
]);
|
|
134
|
-
// see if we need to do style merging based off use of Emotion runtime APIs. We do this by testing
|
|
135
|
-
// the Emotion cache for a match to any class names we find, filtering out those created via
|
|
136
|
-
// `createStyles`. If only `createStyles` is detected, there is no reason to merge styles
|
|
137
|
-
(returnProps.className || '').split(' ').forEach(name => {
|
|
138
|
-
if (!createStylesCache[name] && cache.registered[name]) {
|
|
139
|
-
shouldRuntimeMergeStyles = true;
|
|
140
|
-
}
|
|
141
|
-
});
|
|
142
|
-
if (shouldRuntimeMergeStyles) {
|
|
143
|
-
const registeredStyles = [];
|
|
144
|
-
// We are using the raw `css` instead of `createStyles` because `css` uses style hashing and
|
|
145
|
-
// `createStyles` generates a new ID every time. We could use `createStyles` here, but it
|
|
146
|
-
// would be more wasteful and new styles would be generated each React render cycle. `css` is
|
|
147
|
-
// safe to use inside a render function while `createStyles` should always be used outside the
|
|
148
|
-
// React render cycle.
|
|
149
|
-
className = getRegisteredStyles(cache.registered, registeredStyles, returnProps.className || '');
|
|
150
|
-
className += css(registeredStyles);
|
|
151
|
-
}
|
|
152
|
-
else {
|
|
153
|
-
className = returnProps.className;
|
|
154
|
-
}
|
|
155
|
-
return { ...elemProps, ...returnProps, ...{ className } };
|
|
78
|
+
return handleCsProp(elemProps, [localCs, stylePropsClassName]);
|
|
156
79
|
}
|
|
@@ -26,7 +26,7 @@ interface StyledMenuProps {
|
|
|
26
26
|
*/
|
|
27
27
|
isDisabled?: boolean;
|
|
28
28
|
}
|
|
29
|
-
export declare const StyledMenuItem: import("@emotion/styled").StyledComponent<import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-styling").CSProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "left" | "right" | "top" | "bottom" | "fill" | "as" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "inset" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "scrollMargin" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY"
|
|
29
|
+
export declare const StyledMenuItem: import("@emotion/styled").StyledComponent<import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-styling").CSProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "left" | "right" | "top" | "bottom" | "fill" | "as" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "inset" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "scrollMargin" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "cs" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY"> & {
|
|
30
30
|
ref?: React.Ref<HTMLButtonElement> | undefined;
|
|
31
31
|
} & {
|
|
32
32
|
theme?: import("@emotion/react").Theme | undefined;
|
|
@@ -9,7 +9,7 @@ import { useSelectModel } from './hooks/useSelectModel';
|
|
|
9
9
|
import { useSelectCard } from './hooks/useSelectCard';
|
|
10
10
|
import { useSelectInput } from './hooks/useSelectInput';
|
|
11
11
|
import { createStyles } from '@workday/canvas-kit-styling';
|
|
12
|
-
const selectInputStyles = createStyles({ name: "
|
|
12
|
+
const selectInputStyles = createStyles({ name: "zvvj11", styles: "caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" });
|
|
13
13
|
export const SelectInput = createSubcomponent(TextInput)({
|
|
14
14
|
modelHook: useSelectModel,
|
|
15
15
|
elemPropsHook: useSelectInput,
|
|
@@ -53,7 +53,7 @@ export interface TabsItemProps extends ExtractProps<typeof Box, never>, Partial<
|
|
|
53
53
|
*/
|
|
54
54
|
tabIndex?: number;
|
|
55
55
|
}
|
|
56
|
-
export declare const StyledTabItem: import("@emotion/styled").StyledComponent<import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-styling").CSProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "left" | "right" | "top" | "bottom" | "fill" | "as" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "inset" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "scrollMargin" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY"
|
|
56
|
+
export declare const StyledTabItem: import("@emotion/styled").StyledComponent<import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-styling").CSProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "left" | "right" | "top" | "bottom" | "fill" | "as" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "inset" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "scrollMargin" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "cs" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY"> & {
|
|
57
57
|
ref?: React.Ref<HTMLButtonElement> | undefined;
|
|
58
58
|
} & {
|
|
59
59
|
theme?: import("@emotion/react").Theme | undefined;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import {getRegisteredStyles} from '@emotion/utils';
|
|
2
1
|
// eslint-disable-next-line @emotion/no-vanilla
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
2
|
+
import {css} from '@emotion/css';
|
|
3
|
+
import {CSToPropsInput, handleCsProp} from '@workday/canvas-kit-styling';
|
|
5
4
|
import {boxStyleFn} from '../Box';
|
|
6
5
|
import {backgroundStyleFnConfigs} from './background';
|
|
7
6
|
import {borderStyleFnConfigs} from './border';
|
|
@@ -40,71 +39,23 @@ function isStyleProps(prop: string): boolean {
|
|
|
40
39
|
}
|
|
41
40
|
|
|
42
41
|
/**
|
|
43
|
-
* This
|
|
44
|
-
*
|
|
45
|
-
* prop](https://emotion.sh/docs/css-prop). It will also handle style props for as long as those are
|
|
46
|
-
* supported. `mergeStyles` is exported from the layout package since it supports style props
|
|
47
|
-
* defined in the layout packages.
|
|
48
|
-
*
|
|
49
|
-
* It works by detecting styles added via Emotion's runtime APIs and forcing styling merging if use
|
|
50
|
-
* of runtime APIs have been detected. If only `createStyles` were used to style a component, the
|
|
51
|
-
* faster non-runtime styling will be used.
|
|
52
|
-
*
|
|
53
|
-
* You can use `mergeStyles` if you wish to use {@link createStyles} on your own components and want
|
|
54
|
-
* your components to be compatible with Emotion's runtime styling APIs.
|
|
55
|
-
*
|
|
56
|
-
* ```tsx
|
|
57
|
-
* import {createStyles, CSProps} from '@workday/canvas-kit-styling';
|
|
58
|
-
* import {mergeStyles} from '@workday/canvas-kit-react/layout';
|
|
59
|
-
*
|
|
60
|
-
* interface MyComponentProps extends CSProps {
|
|
61
|
-
* // other props
|
|
62
|
-
* }
|
|
63
|
-
*
|
|
64
|
-
* const myStyles = createStyles({
|
|
65
|
-
* background: 'green',
|
|
66
|
-
* height: 40,
|
|
67
|
-
* width: 40
|
|
68
|
-
* })
|
|
69
|
-
*
|
|
70
|
-
* const MyComponent = ({children, ...elemProps}: MyComponentProps) => {
|
|
71
|
-
* return (
|
|
72
|
-
* <div
|
|
73
|
-
* {...mergeStyles(elemProps, [myStyles])}
|
|
74
|
-
* >
|
|
75
|
-
* {children}
|
|
76
|
-
* </div>
|
|
77
|
-
* )
|
|
78
|
-
* }
|
|
79
|
-
*
|
|
80
|
-
* const StyledMyComponent(MyComponent)({
|
|
81
|
-
* background: 'red'
|
|
82
|
-
* })
|
|
83
|
-
*
|
|
84
|
-
* const myOverridingStyles = createStyles({
|
|
85
|
-
* background: 'blue'
|
|
86
|
-
* })
|
|
87
|
-
*
|
|
88
|
-
* // now everything works. Without `mergeStyles`, the last component would be a red box
|
|
89
|
-
* export default () => (
|
|
90
|
-
* <>
|
|
91
|
-
* <MyComponent>Green box</MyComponent>
|
|
92
|
-
* <StyledMyComponent>Red box</StyledMyComponent>
|
|
93
|
-
* <StyledMyComponent cs={myOverridingStyles}>Blue box</StyledMyComponent>
|
|
94
|
-
* </>
|
|
95
|
-
* )
|
|
96
|
-
* ```
|
|
97
|
-
*
|
|
42
|
+
* This function has the same signature as {@link handleCsProp} and also calls `handleCsProps`, but
|
|
43
|
+
* adds support for style props. It can be used as a drop-in replacement for `handleCsProps`.
|
|
98
44
|
*/
|
|
99
45
|
export function mergeStyles<T extends {}>(
|
|
46
|
+
/**
|
|
47
|
+
* All the props to be spread onto an element. The `cs` prop will be removed an reduced to
|
|
48
|
+
* `className` and `style` props which should be safe on every element.
|
|
49
|
+
*/
|
|
100
50
|
allProps: T,
|
|
101
|
-
|
|
51
|
+
/**
|
|
52
|
+
* Optional local style created by `createStyles`. Using this parameter, you can style your
|
|
53
|
+
* element while supporting proper style merging order.
|
|
54
|
+
*/
|
|
55
|
+
localCs?: CSToPropsInput
|
|
102
56
|
): Omit<T, 'cs' | keyof CommonStyleProps> {
|
|
103
57
|
const styleProps = {};
|
|
104
58
|
let shouldRuntimeMergeStyles = false;
|
|
105
|
-
// TypeScript can't handle a type where I declare T extends `{className?: string}` for some
|
|
106
|
-
// reason, so we'll do a `as any` any time we check for possible props on `allProps`
|
|
107
|
-
let className = (allProps as any).className || '';
|
|
108
59
|
|
|
109
60
|
// separate style props from all other props. `cs` is special and should be forwarded to the
|
|
110
61
|
// `handleCsProp` function.
|
|
@@ -114,10 +65,8 @@ export function mergeStyles<T extends {}>(
|
|
|
114
65
|
// @ts-ignore
|
|
115
66
|
styleProps[prop] = allProps[prop];
|
|
116
67
|
} else {
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
result[prop] = allProps[prop];
|
|
120
|
-
}
|
|
68
|
+
// @ts-ignore
|
|
69
|
+
result[prop] = allProps[prop];
|
|
121
70
|
}
|
|
122
71
|
|
|
123
72
|
return result;
|
|
@@ -135,43 +84,7 @@ export function mergeStyles<T extends {}>(
|
|
|
135
84
|
stylePropsClassName = css(styles);
|
|
136
85
|
}
|
|
137
86
|
|
|
138
|
-
|
|
139
|
-
cs,
|
|
140
|
-
stylePropsClassName, // if style props are not defined, this will be an empty string, which is fine
|
|
141
|
-
className, // This will come from `styled` components or the `css` prop or if a user manually sets the `className` prop
|
|
142
|
-
(allProps as any).cs, // doesn't matter if `cs` is undefined. csToProps will handle undefined. Thanks anyways, TypeScript
|
|
143
|
-
(allProps as any).style, // doesn't matter if `style` is undefined. csToProps will handle undefined. Thanks anyways, TypeScript
|
|
144
|
-
]);
|
|
145
|
-
|
|
146
|
-
// see if we need to do style merging based off use of Emotion runtime APIs. We do this by testing
|
|
147
|
-
// the Emotion cache for a match to any class names we find, filtering out those created via
|
|
148
|
-
// `createStyles`. If only `createStyles` is detected, there is no reason to merge styles
|
|
149
|
-
(returnProps.className || '').split(' ').forEach(name => {
|
|
150
|
-
if (!createStylesCache[name] && cache.registered[name]) {
|
|
151
|
-
shouldRuntimeMergeStyles = true;
|
|
152
|
-
}
|
|
153
|
-
});
|
|
154
|
-
|
|
155
|
-
if (shouldRuntimeMergeStyles) {
|
|
156
|
-
const registeredStyles: string[] = [];
|
|
157
|
-
|
|
158
|
-
// We are using the raw `css` instead of `createStyles` because `css` uses style hashing and
|
|
159
|
-
// `createStyles` generates a new ID every time. We could use `createStyles` here, but it
|
|
160
|
-
// would be more wasteful and new styles would be generated each React render cycle. `css` is
|
|
161
|
-
// safe to use inside a render function while `createStyles` should always be used outside the
|
|
162
|
-
// React render cycle.
|
|
163
|
-
className = getRegisteredStyles(
|
|
164
|
-
cache.registered,
|
|
165
|
-
registeredStyles,
|
|
166
|
-
returnProps.className || ''
|
|
167
|
-
);
|
|
168
|
-
|
|
169
|
-
className += css(registeredStyles);
|
|
170
|
-
} else {
|
|
171
|
-
className = returnProps.className;
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
return {...elemProps, ...returnProps, ...{className}} as any as Omit<
|
|
87
|
+
return handleCsProp(elemProps, [localCs, stylePropsClassName]) as Omit<
|
|
175
88
|
T,
|
|
176
89
|
'cs' | keyof CommonStyleProps
|
|
177
90
|
>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-react",
|
|
3
|
-
"version": "10.0.
|
|
3
|
+
"version": "10.0.21",
|
|
4
4
|
"description": "The parent module that contains all Workday Canvas Kit React components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -48,11 +48,10 @@
|
|
|
48
48
|
"@emotion/is-prop-valid": "^1.1.1",
|
|
49
49
|
"@emotion/react": "^11.7.1",
|
|
50
50
|
"@emotion/styled": "^11.6.0",
|
|
51
|
-
"@emotion/utils": "^1.0.0",
|
|
52
51
|
"@popperjs/core": "^2.5.4",
|
|
53
52
|
"@workday/canvas-colors-web": "^2.0.0",
|
|
54
|
-
"@workday/canvas-kit-popup-stack": "^10.0.
|
|
55
|
-
"@workday/canvas-kit-styling": "^10.0.
|
|
53
|
+
"@workday/canvas-kit-popup-stack": "^10.0.21",
|
|
54
|
+
"@workday/canvas-kit-styling": "^10.0.21",
|
|
56
55
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
57
56
|
"@workday/canvas-tokens-web": "^1.0.0",
|
|
58
57
|
"@workday/design-assets-types": "^0.2.8",
|
|
@@ -70,5 +69,5 @@
|
|
|
70
69
|
"@workday/canvas-accent-icons-web": "^3.0.0",
|
|
71
70
|
"@workday/canvas-applet-icons-web": "^2.0.0"
|
|
72
71
|
},
|
|
73
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "14b620aee6c2726f5950af1948b698556526e9c0"
|
|
74
73
|
}
|