@workday/canvas-kit-react 11.0.0-alpha.662-next.0 → 11.0.0-alpha.664-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/commonjs/badge/lib/CountBadge.js +3 -3
- package/dist/commonjs/button/lib/BaseButton.js +17 -17
- package/dist/commonjs/button/lib/DeleteButton.js +1 -1
- package/dist/commonjs/button/lib/PrimaryButton.js +2 -2
- package/dist/commonjs/button/lib/SecondaryButton.js +2 -2
- package/dist/commonjs/button/lib/TertiaryButton.js +15 -15
- package/dist/commonjs/card/lib/Card.js +1 -1
- package/dist/commonjs/card/lib/CardHeading.js +1 -1
- package/dist/commonjs/common/lib/AccessibleHide.js +1 -1
- package/dist/commonjs/common/lib/CanvasProvider.js +1 -1
- package/dist/commonjs/form-field/lib/FormField.d.ts +2 -2
- package/dist/commonjs/form-field/lib/FormField.js +1 -1
- package/dist/commonjs/form-field/lib/Hint.d.ts +2 -2
- package/dist/commonjs/form-field/lib/Hint.js +1 -1
- package/dist/commonjs/form-field/lib/Label.d.ts +2 -2
- package/dist/commonjs/form-field/lib/Label.js +1 -1
- package/dist/commonjs/form-field/lib/types.d.ts +2 -2
- package/dist/commonjs/form-field/lib/types.js +1 -1
- package/dist/commonjs/select/lib/Select.js +2 -2
- package/dist/commonjs/text/lib/LabelText.js +18 -18
- package/dist/commonjs/text/lib/Text.js +15 -15
- package/dist/es6/badge/lib/CountBadge.js +3 -3
- package/dist/es6/button/lib/BaseButton.js +17 -17
- package/dist/es6/button/lib/DeleteButton.js +1 -1
- package/dist/es6/button/lib/PrimaryButton.js +2 -2
- package/dist/es6/button/lib/SecondaryButton.js +2 -2
- package/dist/es6/button/lib/TertiaryButton.js +15 -15
- package/dist/es6/card/lib/Card.js +1 -1
- package/dist/es6/card/lib/CardHeading.js +1 -1
- package/dist/es6/common/lib/AccessibleHide.js +1 -1
- package/dist/es6/common/lib/CanvasProvider.js +1 -1
- package/dist/es6/form-field/lib/FormField.d.ts +2 -2
- package/dist/es6/form-field/lib/FormField.js +1 -1
- package/dist/es6/form-field/lib/Hint.d.ts +2 -2
- package/dist/es6/form-field/lib/Hint.js +1 -1
- package/dist/es6/form-field/lib/Label.d.ts +2 -2
- package/dist/es6/form-field/lib/Label.js +1 -1
- package/dist/es6/form-field/lib/types.d.ts +2 -2
- package/dist/es6/form-field/lib/types.js +1 -1
- package/dist/es6/select/lib/Select.js +2 -2
- package/dist/es6/text/lib/LabelText.js +18 -18
- package/dist/es6/text/lib/Text.js +15 -15
- package/form-field/lib/FormField.tsx +2 -2
- package/form-field/lib/Hint.tsx +2 -2
- package/form-field/lib/Label.tsx +2 -2
- package/form-field/lib/types.ts +2 -2
- package/package.json +4 -4
- package/select/lib/Select.tsx +1 -1
|
@@ -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: "vi9h11", styles: "font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:bold;background-color:var(--css-button-default-background, transparent);color:var(--css-button-default-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));border-width:1px;border-style:solid;gap:var(--cnvs-sys-space-x2, calc(0.25rem * 2));border-color:var(--css-button-default-border, transparent);cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;box-sizing:border-box;outline:2px transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--css-button-default-borderRadius, var(--cnvs-sys-shape-round, calc(0.25rem * 250)));position:relative;vertical-align:middle;overflow:hidden;transition:box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear;&:disabled, &:disabled:active, &.disabled{cursor:default;box-shadow:none;opacity:var(--css-button-disabled-opacity, 1);}& span .wd-icon-fill{transition-duration:40ms;fill:var(--css-button-default-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-default-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}&:focus-visible, &.focus{background-color:var(--css-button-focus-background, transparent);border-color:var(--css-button-focus-border, transparent);color:var(--css-button-focus-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill{fill:var(--css-button-focus-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-focus-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}box-shadow:0 0 0 2px var(--css-button-focus-boxShadowInner, var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1))), 0 0 0 calc(2px + 2px) var(--css-button-focus-boxShadowOuter, var(--cnvs-brand-primary-base, rgba(8,117,225,1)));}&:hover, &.hover{background-color:var(--css-button-hover-background, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));border-color:var(--css-button-hover-border, transparent);color:var(--css-button-hover-label-emotion-safe, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));& span .wd-icon-fill{fill:var(--css-button-hover-icon, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-hover-icon, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));}}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--css-button-active-background, transparent);border-color:var(--css-button-active-border, transparent);color:var(--css-button-active-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill{fill:var(--css-button-active-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-active-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}}&:disabled, &.disabled{background-color:var(--css-button-disabled-background, transparent);border-color:var(--css-button-disabled-border, transparent);color:var(--css-button-disabled-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill{fill:var(--css-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}}" });
|
|
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: "ruj811", styles: "font-family:\"R
|
|
|
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: "vi9h12", styles: "font-size:var(--cnvs-sys-space-x4, calc(0.25rem * 4));line-height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));letter-spacing:0.01rem;height:48px;padding-inline:var(--cnvs-sys-space-x8, calc(0.25rem * 8));min-width:112px;" }),
|
|
31
|
+
medium: createStyles({ name: "vi9h13", styles: "font-size:0.875rem;letter-spacing:0.015rem;min-width:96px;padding-inline:var(--cnvs-sys-space-x6, calc(0.25rem * 6));height:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" }),
|
|
32
|
+
small: createStyles({ name: "vi9h14", styles: "font-size:0.875rem;letter-spacing:0.015rem;height:var(--cnvs-sys-space-x8, calc(0.25rem * 8));min-width:var(--cnvs-sys-space-x20, calc(0.25rem * 20));padding-inline:var(--cnvs-sys-space-x4, calc(0.25rem * 4));gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
|
|
33
|
+
extraSmall: createStyles({ name: "vi9h15", styles: "font-size:0.75rem;line-height:var(--cnvs-sys-space-x4, calc(0.25rem * 4));letter-spacing:0.02rem;height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));min-width:auto;padding-inline:var(--cnvs-sys-space-x3, calc(0.25rem * 3));gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
|
|
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: "vi9h16", styles: "padding:0;min-width:calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) * 3);" }),
|
|
37
|
+
largeStart: createStyles({ name: "vi9h17", styles: "padding-inline-start:var(--cnvs-sys-space-x6, calc(0.25rem * 6));padding-inline-end:var(--cnvs-sys-space-x8, calc(0.25rem * 8));" }),
|
|
38
|
+
largeEnd: createStyles({ name: "vi9h18", styles: "padding-inline-start:var(--cnvs-sys-space-x8, calc(0.25rem * 8));padding-inline-end:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
|
|
39
|
+
mediumOnly: createStyles({ name: "vi9h19", styles: "padding:0;min-width:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" }),
|
|
40
|
+
mediumStart: createStyles({ name: "vi9h1a", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);padding-inline-end:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
|
|
41
|
+
mediumEnd: createStyles({ name: "vi9h1b", styles: "padding-inline-start:var(--cnvs-sys-space-x6, calc(0.25rem * 6));padding-inline-end:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);" }),
|
|
42
|
+
smallOnly: createStyles({ name: "vi9h1c", styles: "padding:0;min-width:var(--cnvs-sys-space-x8, calc(0.25rem * 8));" }),
|
|
43
|
+
smallStart: createStyles({ name: "vi9h1d", styles: "padding-inline-start:var(--cnvs-sys-space-x3, calc(0.25rem * 3));padding-inline-end:var(--cnvs-sys-space-x4, calc(0.25rem * 4));" }),
|
|
44
|
+
smallEnd: createStyles({ name: "vi9h1e", styles: "padding-inline-start:var(--cnvs-sys-space-x4, calc(0.25rem * 4));padding-inline-end:var(--cnvs-sys-space-x3, calc(0.25rem * 3));" }),
|
|
45
|
+
extraSmallOnly: createStyles({ name: "vi9h1f", styles: "padding:0;min-width:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
|
|
46
|
+
extraSmallStart: createStyles({ name: "vi9h1g", styles: "padding-inline-start:var(--cnvs-sys-space-x2, calc(0.25rem * 2));padding-inline-end:var(--cnvs-sys-space-x3, calc(0.25rem * 3));" }),
|
|
47
|
+
extraSmallEnd: createStyles({ name: "vi9h1h", styles: "padding-inline-start:var(--cnvs-sys-space-x3, calc(0.25rem * 3));padding-inline-end:var(--cnvs-sys-space-x2, calc(0.25rem * 2));" }),
|
|
48
48
|
},
|
|
49
49
|
});
|
|
50
50
|
export function capitalize(string = '') {
|
|
@@ -5,7 +5,7 @@ import { createStyles } 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: "vi9h21", styles: "--css-button-default-background:var(--cnvs-brand-error-base, rgba(222,46,33,1));--css-button-default-border:transparent;--css-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--css-button-default-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-default-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));&:hover, &.hover{--css-button-hover-background:var(--cnvs-brand-error-dark, rgba(163,27,18,1));--css-button-hover-border:transparent;--css-button-hover-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-hover-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));}&:focus-visible, &.focus{--css-button-focus-background:var(--cnvs-brand-error-base, rgba(222,46,33,1));--css-button-focus-border:transparent;--css-button-focus-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-focus-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:active, &.active{--css-button-active-background:var(--cnvs-brand-error-darkest, rgba(128,22,14,1));--css-button-active-border:transparent;--css-button-active-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-active-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));}&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled{--css-button-disabled-background:var(--cnvs-brand-error-base, rgba(222,46,33,1));--css-button-disabled-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-disabled-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-disabled-opacity:0.4;}" });
|
|
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, 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: "vi9h1x", styles: "--css-button-default-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-default-border:transparent;--css-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--css-button-default-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-default-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-hover-background:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--css-button-hover-border:transparent;--css-button-hover-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-focus-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-focus-border:transparent;--css-button-focus-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-focus-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--css-button-active-background:var(--cnvs-brand-primary-darkest, rgba(0,67,135,1));--css-button-active-border:transparent;--css-button-active-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-disabled-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-disabled-border:transparent;--css-button-disabled-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-disabled-opacity:0.4;--css-button-disabled-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));" });
|
|
9
9
|
export const primaryButtonModifiers = createModifiers({
|
|
10
10
|
variant: {
|
|
11
|
-
inverse: createStyles({ name: "
|
|
11
|
+
inverse: createStyles({ name: "vi9h1y", styles: "--css-button-default-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--css-button-default-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--css-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-disabled-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-disabled-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
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, 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: "vi9h1z", styles: "--css-button-default-background:transparent;--css-button-default-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--css-button-default-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-background:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-focus-background:transparent;--css-button-focus-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--css-button-active-background:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-active-border:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-active-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-disabled-background:transparent;--css-button-disabled-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-disabled-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-disabled-opacity:0.4;--css-button-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" });
|
|
9
9
|
export const secondaryButtonModifiers = createModifiers({
|
|
10
10
|
variant: {
|
|
11
|
-
inverse: createStyles({ name: "
|
|
11
|
+
inverse: createStyles({ name: "vi9h20", styles: "--css-button-default-background:transparent;--css-button-default-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-default-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-default-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-hover-border:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--css-button-active-border:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--css-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-disabled-background:transparent;--css-button-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-disabled-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }),
|
|
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: "vi9h1i", styles: "padding-inline:var(--cnvs-sys-space-x2, calc(0.25rem * 2));min-width:auto;text-decoration:underline;border:0px;--css-button-default-background:transparent;--css-button-default-border:transparent;--css-button-default-borderRadius:var(--cnvs-sys-shape-x1, 0.25rem);--css-button-default-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-hover-border:transparent;--css-button-hover-label-emotion-safe:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--css-button-hover-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-background:transparent;--css-button-focus-border:transparent;--css-button-focus-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-boxShadowInner:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--css-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--css-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--css-button-active-border:transparent;--css-button-active-label-emotion-safe:var(--cnvs-brand-primary-darkest, rgba(0,67,135,1));--css-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-disabled-background:transparent;--css-button-disabled-border:transparent;--css-button-disabled-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-disabled-opacity:0.4;&:focus-visible, &.focus{box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 calc(2px + 0px) var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" });
|
|
10
10
|
export const tertiaryButtonModifiers = createModifiers({
|
|
11
11
|
isThemeable: {
|
|
12
|
-
true: createStyles({ name: "
|
|
12
|
+
true: createStyles({ name: "vi9h1j", styles: "--css-button-default-icon:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-hover-icon:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--css-button-focus-icon:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-active-icon:var(--cnvs-brand-primary-darkest, rgba(0,67,135,1));--css-button-disabled-icon:var(--cnvs-brand-primary-base, rgba(8,117,225,1));" }),
|
|
13
13
|
},
|
|
14
14
|
variant: {
|
|
15
|
-
inverse: createStyles({ name: "
|
|
15
|
+
inverse: createStyles({ name: "vi9h1k", styles: "--css-button-default-background:transparent;--css-button-default-border:transparent;--css-button-default-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-default-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-hover-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-hover-border:transparent;--css-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-border:transparent;--css-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-active-background:var(--cnvs-base-palette-soap-200, rgba(240,241,242,1));--css-button-active-border:transparent;--css-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-active-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-disabled-background:transparent;--css-button-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-disabled-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));&:focus-visible, &.focus{box-shadow:inset 0 0 0 2px var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));}" }),
|
|
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: "vi9h1l", styles: "border-radius:999px;padding:0;min-width:calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) * 3);" }),
|
|
19
|
+
largeStart: createStyles({ name: "vi9h1m", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
20
|
+
largeEnd: createStyles({ name: "vi9h1n", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
21
|
+
mediumOnly: createStyles({ name: "vi9h1o", styles: "padding:0;min-width:2.5rem;border-radius:999px;" }),
|
|
22
|
+
mediumStart: createStyles({ name: "vi9h1p", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
23
|
+
mediumEnd: createStyles({ name: "vi9h1q", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
24
|
+
smallOnly: createStyles({ name: "vi9h1r", styles: "padding:0;min-width:2rem;border-radius:999px;" }),
|
|
25
|
+
smallStart: createStyles({ name: "vi9h1s", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
26
|
+
smallEnd: createStyles({ name: "vi9h1t", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
27
|
+
extraSmallOnly: createStyles({ name: "vi9h1u", styles: "padding:0;min-width:1.5rem;border-radius:999px;" }),
|
|
28
|
+
extraSmallStart: createStyles({ name: "vi9h1v", styles: "padding-inline-start:0.25rem;padding-inline-end:0.5rem;" }),
|
|
29
|
+
extraSmallEnd: createStyles({ name: "vi9h1w", styles: "padding-inline-start:0.5rem;padding-inline-end:0.25rem;" }),
|
|
30
30
|
},
|
|
31
31
|
});
|
|
32
32
|
export const TertiaryButton = createComponent('button')({
|
|
@@ -5,7 +5,7 @@ import { createStyles } from '@workday/canvas-kit-styling';
|
|
|
5
5
|
import { base, system } from '@workday/canvas-tokens-web';
|
|
6
6
|
import { CardHeading } from './CardHeading';
|
|
7
7
|
import { CardBody } from './CardBody';
|
|
8
|
-
const cardBaseStyles = createStyles({ name: "
|
|
8
|
+
const cardBaseStyles = createStyles({ name: "vi9h10", styles: "box-shadow:var(--cnvs-sys-depth-1, 0 0.0625rem 0.25rem 0 rgba(31,38,46,0.12),0 0.125rem 0.5rem 0 rgba(31,38,46,0.08));padding:var(--cnvs-sys-space-x8, calc(0.25rem * 8));background-color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));border:0.0625rem solid var(--cnvs-base-palette-soap-500, rgba(206,211,217,1));border-radius:var(--cnvs-sys-shape-x2, calc(0.25rem * 2));" });
|
|
9
9
|
/**
|
|
10
10
|
* `Card` is a container component that holds a {@link CardBody Card.Body} and an optional
|
|
11
11
|
* {@link CardHeading Card.Heading}. `Card` wraps a non-semantic `div` element. The element can be
|
|
@@ -4,7 +4,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
|
4
4
|
import { BodyText } from '@workday/canvas-kit-react/text';
|
|
5
5
|
import { createStyles } from '@workday/canvas-kit-styling';
|
|
6
6
|
import { system } from '@workday/canvas-tokens-web';
|
|
7
|
-
const cardHeadingBaseStyles = createStyles({ name: "
|
|
7
|
+
const cardHeadingBaseStyles = createStyles({ name: "vi9hz", styles: "font-weight:var(--cnvs-sys-font-weight-bold, 700);margin-bottom:var(--cnvs-sys-space-x6, calc(0.25rem * 6));margin-top:0px;" });
|
|
8
8
|
export const CardHeading = createComponent('h3')({
|
|
9
9
|
displayName: 'Card.Heading',
|
|
10
10
|
Component: ({ children, ...elemProps }, ref, Element) => {
|
|
@@ -17,7 +17,7 @@ export const accessibleHide = {
|
|
|
17
17
|
padding: 0,
|
|
18
18
|
border: 0,
|
|
19
19
|
};
|
|
20
|
-
const accessibleHideStyles = createStyles({ name: "
|
|
20
|
+
const accessibleHideStyles = createStyles({ name: "vi9h0", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;width:1px;margin:-1px;padding:0px;border:0px;" });
|
|
21
21
|
/**
|
|
22
22
|
* A convenient component wrapper to visually hide content, while still making it accessible to screen readers
|
|
23
23
|
*/
|
|
@@ -6,7 +6,7 @@ import { brand } from '@workday/canvas-tokens-web';
|
|
|
6
6
|
import { cache } from '@emotion/css';
|
|
7
7
|
import { createStyles } from '@workday/canvas-kit-styling';
|
|
8
8
|
// copied from brand/_variables.css
|
|
9
|
-
const defaultBranding = createStyles({ name: "
|
|
9
|
+
const defaultBranding = createStyles({ name: "vi9h1", styles: "--cnvs-brand-error-darkest:rgba(128,22,14,1);--cnvs-brand-common-alert-inner:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-common-error-inner:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-common-focus-outline:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-neutral-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-neutral-darkest:var(--cnvs-base-palette-licorice-400);--cnvs-brand-neutral-dark:var(--cnvs-base-palette-licorice-300);--cnvs-brand-neutral-base:var(--cnvs-base-palette-soap-600);--cnvs-brand-neutral-light:var(--cnvs-base-palette-soap-300);--cnvs-brand-neutral-lightest:var(--cnvs-base-palette-soap-200);--cnvs-brand-success-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-success-darkest:var(--cnvs-base-palette-green-apple-600);--cnvs-brand-success-dark:var(--cnvs-base-palette-green-apple-500);--cnvs-brand-success-base:var(--cnvs-base-palette-green-apple-400);--cnvs-brand-success-light:var(--cnvs-base-palette-green-apple-300);--cnvs-brand-success-lightest:var(--cnvs-base-palette-green-apple-100);--cnvs-brand-error-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-error-dark:var(--cnvs-base-palette-cinnamon-600);--cnvs-brand-error-base:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-error-light:var(--cnvs-base-palette-cinnamon-200);--cnvs-brand-error-lightest:var(--cnvs-base-palette-cinnamon-100);--cnvs-brand-alert-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-alert-darkest:var(--cnvs-base-palette-cantaloupe-600);--cnvs-brand-alert-dark:var(--cnvs-base-palette-cantaloupe-500);--cnvs-brand-alert-base:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-alert-light:var(--cnvs-base-palette-cantaloupe-200);--cnvs-brand-alert-lightest:var(--cnvs-base-palette-cantaloupe-100);--cnvs-brand-primary-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-primary-darkest:var(--cnvs-base-palette-blueberry-600);--cnvs-brand-primary-dark:var(--cnvs-base-palette-blueberry-500);--cnvs-brand-primary-base:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-primary-light:var(--cnvs-base-palette-blueberry-200);--cnvs-brand-primary-lightest:var(--cnvs-base-palette-blueberry-100);--cnvs-brand-gradient-primary:linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);" });
|
|
10
10
|
const mappedKeys = {
|
|
11
11
|
lightest: 'lightest',
|
|
12
12
|
light: 'light',
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { GrowthBehavior, ErrorType, Themeable } from '@workday/canvas-kit-react/common';
|
|
3
3
|
import { FormFieldLabelPosition } from './types';
|
|
4
4
|
/**
|
|
5
|
-
* @deprecated ⚠️ `FormFieldProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
5
|
+
* @deprecated ⚠️ `FormFieldProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
6
6
|
*/
|
|
7
7
|
export interface FormFieldProps extends Themeable, React.HTMLAttributes<HTMLDivElement>, GrowthBehavior {
|
|
8
8
|
/**
|
|
@@ -59,7 +59,7 @@ export interface FormFieldErrorBehavior {
|
|
|
59
59
|
error?: ErrorType;
|
|
60
60
|
}
|
|
61
61
|
/**
|
|
62
|
-
* @deprecated ⚠️ `FormField` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
62
|
+
* @deprecated ⚠️ `FormField` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
63
63
|
*/
|
|
64
64
|
export declare class FormField extends React.Component<React.PropsWithChildren<FormFieldProps>> {
|
|
65
65
|
static LabelPosition: typeof FormFieldLabelPosition;
|
|
@@ -56,7 +56,7 @@ const FormFieldInputContainer = styled('div')(({ grow, labelPosition }) => {
|
|
|
56
56
|
};
|
|
57
57
|
});
|
|
58
58
|
/**
|
|
59
|
-
* @deprecated ⚠️ `FormField` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
59
|
+
* @deprecated ⚠️ `FormField` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
60
60
|
*/
|
|
61
61
|
export class FormField extends React.Component {
|
|
62
62
|
constructor() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { ErrorType, Themeable } from '@workday/canvas-kit-react/common';
|
|
3
3
|
/**
|
|
4
|
-
* @deprecated ⚠️ `HintProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
4
|
+
* @deprecated ⚠️ `HintProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
5
5
|
*/
|
|
6
6
|
export interface HintProps extends Themeable, React.HTMLAttributes<HTMLParagraphElement> {
|
|
7
7
|
/**
|
|
@@ -20,7 +20,7 @@ export interface HintProps extends Themeable, React.HTMLAttributes<HTMLParagraph
|
|
|
20
20
|
alertLabel?: string;
|
|
21
21
|
}
|
|
22
22
|
/**
|
|
23
|
-
* @deprecated ⚠️ `Hint` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
23
|
+
* @deprecated ⚠️ `Hint` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
24
24
|
*/
|
|
25
25
|
declare class Hint extends React.Component<HintProps> {
|
|
26
26
|
static ErrorType: typeof ErrorType;
|
|
@@ -4,7 +4,7 @@ import { space } from '@workday/canvas-kit-react/tokens';
|
|
|
4
4
|
import { Subtext, Text } from '@workday/canvas-kit-react/text';
|
|
5
5
|
const Message = styled(Subtext)(({ error, theme }) => error === ErrorType.Error && { color: theme.canvas.palette.error.main });
|
|
6
6
|
/**
|
|
7
|
-
* @deprecated ⚠️ `Hint` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
7
|
+
* @deprecated ⚠️ `Hint` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
8
8
|
*/
|
|
9
9
|
class Hint extends React.Component {
|
|
10
10
|
render() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { FormFieldLabelPosition, FormFieldLabelPositionBehavior } from './types';
|
|
3
3
|
/**
|
|
4
|
-
* @deprecated ⚠️ `LabelProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
4
|
+
* @deprecated ⚠️ `LabelProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
5
5
|
*/
|
|
6
6
|
export interface LabelProps extends FormFieldLabelPositionBehavior {
|
|
7
7
|
/**
|
|
@@ -36,7 +36,7 @@ export interface LabelProps extends FormFieldLabelPositionBehavior {
|
|
|
36
36
|
accessibleHide?: boolean;
|
|
37
37
|
}
|
|
38
38
|
/**
|
|
39
|
-
* @deprecated ⚠️ `Label` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
39
|
+
* @deprecated ⚠️ `Label` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
40
40
|
*/
|
|
41
41
|
declare class Label extends React.Component<React.PropsWithChildren<LabelProps>> {
|
|
42
42
|
static Position: typeof FormFieldLabelPosition;
|
|
@@ -50,7 +50,7 @@ const LegendComponent = styled('legend')(...labelStyles, ({ labelPosition }) =>
|
|
|
50
50
|
});
|
|
51
51
|
const LabelComponent = styled('label')(...labelStyles);
|
|
52
52
|
/**
|
|
53
|
-
* @deprecated ⚠️ `Label` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
53
|
+
* @deprecated ⚠️ `Label` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
54
54
|
*/
|
|
55
55
|
class Label extends React.Component {
|
|
56
56
|
render() {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
*
|
|
3
3
|
* The position of the FormField label (Top vs Left vs Hidden).
|
|
4
4
|
*
|
|
5
|
-
* @deprecated ⚠️ `FormFieldLabelPosition` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
5
|
+
* @deprecated ⚠️ `FormFieldLabelPosition` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
6
6
|
*/
|
|
7
7
|
export declare enum FormFieldLabelPosition {
|
|
8
8
|
Top = 0,
|
|
@@ -10,7 +10,7 @@ export declare enum FormFieldLabelPosition {
|
|
|
10
10
|
Hidden = 2
|
|
11
11
|
}
|
|
12
12
|
/**
|
|
13
|
-
* @deprecated ⚠️ `FormFieldLabelPositionBehavior` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
13
|
+
* @deprecated ⚠️ `FormFieldLabelPositionBehavior` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
14
14
|
*/
|
|
15
15
|
export interface FormFieldLabelPositionBehavior {
|
|
16
16
|
labelPosition?: FormFieldLabelPosition;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
*
|
|
3
3
|
* The position of the FormField label (Top vs Left vs Hidden).
|
|
4
4
|
*
|
|
5
|
-
* @deprecated ⚠️ `FormFieldLabelPosition` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
5
|
+
* @deprecated ⚠️ `FormFieldLabelPosition` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
6
6
|
*/
|
|
7
7
|
export var FormFieldLabelPosition;
|
|
8
8
|
(function (FormFieldLabelPosition) {
|
|
@@ -9,12 +9,12 @@ 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: "vi9h25", 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,
|
|
16
16
|
})(({ placeholder = 'Choose an option', inputStartIcon, width, ...elemProps }, Element, model) => {
|
|
17
|
-
return (React.createElement(InputGroup, { width: width },
|
|
17
|
+
return (React.createElement(InputGroup, { width: width, "data-width": "ck-formfield-width" },
|
|
18
18
|
inputStartIcon && model.state.selectedIds.length > 0 && (React.createElement(InputGroup.InnerStart, { pointerEvents: "none" },
|
|
19
19
|
React.createElement(SystemIcon, { icon: inputStartIcon }))),
|
|
20
20
|
React.createElement(InputGroup.Input, Object.assign({ as: Element, placeholder: placeholder }, mergeStyles(elemProps, [selectInputStyles]))),
|
|
@@ -4,39 +4,39 @@ import { base, system } from '@workday/canvas-tokens-web';
|
|
|
4
4
|
import { createStencil } from '@workday/canvas-kit-styling';
|
|
5
5
|
import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
6
6
|
const labelTextStencil = createStencil({
|
|
7
|
-
base: { name: "
|
|
7
|
+
base: { name: "vi9hh", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-100;font-size:--cnvs-base-font-size-75;letter-spacing:--cnvs-base-letter-spacing-150;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
|
|
8
8
|
modifiers: {
|
|
9
9
|
typeLevel: {
|
|
10
10
|
// Title level styles
|
|
11
|
-
'title.large': { name: "
|
|
12
|
-
'title.medium': { name: "
|
|
13
|
-
'title.small': { name: "
|
|
11
|
+
'title.large': { name: "vi9hi", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-600;font-size:--cnvs-base-font-size-600;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
|
|
12
|
+
'title.medium': { name: "vi9hj", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-500;font-size:--cnvs-base-font-size-500;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
|
|
13
|
+
'title.small': { name: "vi9hk", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-400;font-size:--cnvs-base-font-size-400;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
|
|
14
14
|
// Heading level styles
|
|
15
|
-
'heading.large': { name: "
|
|
16
|
-
'heading.medium': { name: "
|
|
17
|
-
'heading.small': { name: "
|
|
15
|
+
'heading.large': { name: "vi9hl", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-350;font-size:--cnvs-base-font-size-300;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
|
|
16
|
+
'heading.medium': { name: "vi9hm", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-300;font-size:--cnvs-base-font-size-250;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
|
|
17
|
+
'heading.small': { name: "vi9hn", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-250;font-size:--cnvs-base-font-size-200;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
|
|
18
18
|
// Body level styles
|
|
19
|
-
'body.large': { name: "
|
|
20
|
-
'body.medium': { name: "
|
|
21
|
-
'body.small': { name: "
|
|
19
|
+
'body.large': { name: "vi9ho", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-200;font-size:--cnvs-base-font-size-150;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
|
|
20
|
+
'body.medium': { name: "vi9hp", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-200;font-size:--cnvs-base-font-size-125;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
|
|
21
|
+
'body.small': { name: "vi9hq", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-150;font-size:--cnvs-base-font-size-100;letter-spacing:--cnvs-base-letter-spacing-200;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
|
|
22
22
|
// Subtext level styles
|
|
23
|
-
'subtext.large': { name: "
|
|
24
|
-
'subtext.medium': { name: "
|
|
25
|
-
'subtext.small': { name: "
|
|
23
|
+
'subtext.large': { name: "vi9hr", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-100;font-size:--cnvs-base-font-size-75;letter-spacing:--cnvs-base-letter-spacing-150;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
|
|
24
|
+
'subtext.medium': { name: "vi9hs", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-50;font-size:--cnvs-base-font-size-50;letter-spacing:--cnvs-base-letter-spacing-100;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
|
|
25
|
+
'subtext.small': { name: "vi9ht", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-50;font-size:--cnvs-base-font-size-25;letter-spacing:--cnvs-base-letter-spacing-50;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
|
|
26
26
|
},
|
|
27
27
|
variant: {
|
|
28
|
-
error: { name: "
|
|
29
|
-
hint: { name: "
|
|
30
|
-
inverse: { name: "
|
|
28
|
+
error: { name: "vi9hu", styles: "color:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));" },
|
|
29
|
+
hint: { name: "vi9hv", styles: "color:var(--cnvs-base-palette-licorice-300, rgba(94,106,117,1));" },
|
|
30
|
+
inverse: { name: "vi9hw", styles: "color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" },
|
|
31
31
|
},
|
|
32
32
|
disabled: {
|
|
33
|
-
true: { name: "
|
|
33
|
+
true: { name: "vi9hx", styles: "cursor:default;color:var(--cnvs-base-palette-licorice-100, rgba(161,170,179,1));" },
|
|
34
34
|
},
|
|
35
35
|
},
|
|
36
36
|
compound: [
|
|
37
37
|
{
|
|
38
38
|
modifiers: { variant: 'inverse', disabled: true },
|
|
39
|
-
styles: { name: "
|
|
39
|
+
styles: { name: "vi9hy", styles: "opacity:var(--cnvs-sys-opacity-disabled, 0.4);color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" },
|
|
40
40
|
},
|
|
41
41
|
],
|
|
42
42
|
}, "label-text");
|
|
@@ -6,26 +6,26 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
|
6
6
|
const textModifiers = createModifiers({
|
|
7
7
|
typeLevel: {
|
|
8
8
|
// Title level styles
|
|
9
|
-
'title.large': createStyles({ name: "
|
|
10
|
-
'title.medium': createStyles({ name: "
|
|
11
|
-
'title.small': createStyles({ name: "
|
|
9
|
+
'title.large': createStyles({ name: "vi9h2", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-600;font-size:--cnvs-base-font-size-600;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
10
|
+
'title.medium': createStyles({ name: "vi9h3", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-500;font-size:--cnvs-base-font-size-500;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
11
|
+
'title.small': createStyles({ name: "vi9h4", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-400;font-size:--cnvs-base-font-size-400;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
12
12
|
// Heading level styles
|
|
13
|
-
'heading.large': createStyles({ name: "
|
|
14
|
-
'heading.medium': createStyles({ name: "
|
|
15
|
-
'heading.small': createStyles({ name: "
|
|
13
|
+
'heading.large': createStyles({ name: "vi9h5", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-350;font-size:--cnvs-base-font-size-300;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
14
|
+
'heading.medium': createStyles({ name: "vi9h6", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-300;font-size:--cnvs-base-font-size-250;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
15
|
+
'heading.small': createStyles({ name: "vi9h7", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-250;font-size:--cnvs-base-font-size-200;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
16
16
|
// Body level styles
|
|
17
|
-
'body.large': createStyles({ name: "
|
|
18
|
-
'body.medium': createStyles({ name: "
|
|
19
|
-
'body.small': createStyles({ name: "
|
|
17
|
+
'body.large': createStyles({ name: "vi9h8", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-200;font-size:--cnvs-base-font-size-150;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
|
|
18
|
+
'body.medium': createStyles({ name: "vi9h9", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-200;font-size:--cnvs-base-font-size-125;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
|
|
19
|
+
'body.small': createStyles({ name: "vi9ha", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-150;font-size:--cnvs-base-font-size-100;letter-spacing:--cnvs-base-letter-spacing-200;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
|
|
20
20
|
// Subtext level styles
|
|
21
|
-
'subtext.large': createStyles({ name: "
|
|
22
|
-
'subtext.medium': createStyles({ name: "
|
|
23
|
-
'subtext.small': createStyles({ name: "
|
|
21
|
+
'subtext.large': createStyles({ name: "vi9hb", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-100;font-size:--cnvs-base-font-size-75;letter-spacing:--cnvs-base-letter-spacing-150;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
|
|
22
|
+
'subtext.medium': createStyles({ name: "vi9hc", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-50;font-size:--cnvs-base-font-size-50;letter-spacing:--cnvs-base-letter-spacing-100;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
|
|
23
|
+
'subtext.small': createStyles({ name: "vi9hd", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-50;font-size:--cnvs-base-font-size-25;letter-spacing:--cnvs-base-letter-spacing-50;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
|
|
24
24
|
},
|
|
25
25
|
variant: {
|
|
26
|
-
error: createStyles({ name: "
|
|
27
|
-
hint: createStyles({ name: "
|
|
28
|
-
inverse: createStyles({ name: "
|
|
26
|
+
error: createStyles({ name: "vi9he", styles: "color:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));" }),
|
|
27
|
+
hint: createStyles({ name: "vi9hf", styles: "color:var(--cnvs-base-palette-licorice-300, rgba(94,106,117,1));" }),
|
|
28
|
+
inverse: createStyles({ name: "vi9hg", styles: "color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }),
|
|
29
29
|
},
|
|
30
30
|
});
|
|
31
31
|
/**
|
|
@@ -11,7 +11,7 @@ import {Hint} from './Hint';
|
|
|
11
11
|
import {Label} from './Label';
|
|
12
12
|
import {FormFieldLabelPosition, FormFieldLabelPositionBehavior} from './types';
|
|
13
13
|
/**
|
|
14
|
-
* @deprecated ⚠️ `FormFieldProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
14
|
+
* @deprecated ⚠️ `FormFieldProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
15
15
|
*/
|
|
16
16
|
export interface FormFieldProps
|
|
17
17
|
extends Themeable,
|
|
@@ -139,7 +139,7 @@ const FormFieldInputContainer = styled('div')<GrowthBehavior & FormFieldLabelPos
|
|
|
139
139
|
}
|
|
140
140
|
);
|
|
141
141
|
/**
|
|
142
|
-
* @deprecated ⚠️ `FormField` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
142
|
+
* @deprecated ⚠️ `FormField` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
143
143
|
*/
|
|
144
144
|
export class FormField extends React.Component<React.PropsWithChildren<FormFieldProps>> {
|
|
145
145
|
static LabelPosition = FormFieldLabelPosition;
|
package/form-field/lib/Hint.tsx
CHANGED
|
@@ -3,7 +3,7 @@ import {ErrorType, Themeable, styled} from '@workday/canvas-kit-react/common';
|
|
|
3
3
|
import {space} from '@workday/canvas-kit-react/tokens';
|
|
4
4
|
import {Subtext, Text} from '@workday/canvas-kit-react/text';
|
|
5
5
|
/**
|
|
6
|
-
* @deprecated ⚠️ `HintProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
6
|
+
* @deprecated ⚠️ `HintProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
7
7
|
*/
|
|
8
8
|
export interface HintProps extends Themeable, React.HTMLAttributes<HTMLParagraphElement> {
|
|
9
9
|
/**
|
|
@@ -26,7 +26,7 @@ const Message = styled(Subtext)<Pick<HintProps, 'error'>>(
|
|
|
26
26
|
({error, theme}) => error === ErrorType.Error && {color: theme.canvas.palette.error.main}
|
|
27
27
|
);
|
|
28
28
|
/**
|
|
29
|
-
* @deprecated ⚠️ `Hint` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
29
|
+
* @deprecated ⚠️ `Hint` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
30
30
|
*/
|
|
31
31
|
class Hint extends React.Component<HintProps> {
|
|
32
32
|
static ErrorType = ErrorType;
|