@workday/canvas-kit-react 10.3.0-655-next.0 → 10.3.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/common/index.ts +2 -0
- package/common/lib/AccessibleHide.tsx +32 -0
- package/common/lib/AriaLiveRegion.tsx +48 -0
- package/common/lib/styles/index.ts +0 -1
- package/dist/commonjs/button/lib/BaseButton.js +17 -17
- package/dist/commonjs/button/lib/DeleteButton.js +1 -1
- package/dist/commonjs/button/lib/PrimaryButton.js +2 -2
- package/dist/commonjs/button/lib/SecondaryButton.js +2 -2
- package/dist/commonjs/button/lib/TertiaryButton.js +15 -15
- package/dist/commonjs/common/index.d.ts +2 -0
- package/dist/commonjs/common/index.d.ts.map +1 -1
- package/dist/commonjs/common/index.js +2 -0
- package/dist/commonjs/common/lib/AccessibleHide.d.ts +22 -0
- package/dist/commonjs/common/lib/AccessibleHide.d.ts.map +1 -0
- package/dist/commonjs/common/lib/AccessibleHide.js +51 -0
- package/dist/commonjs/common/lib/AriaLiveRegion.d.ts +23 -0
- package/dist/commonjs/common/lib/AriaLiveRegion.d.ts.map +1 -0
- package/dist/commonjs/common/lib/AriaLiveRegion.js +34 -0
- package/dist/commonjs/common/lib/CanvasProvider.d.ts +1 -1
- package/dist/commonjs/common/lib/CanvasProvider.js +1 -1
- package/dist/commonjs/common/lib/styles/index.d.ts +0 -1
- package/dist/commonjs/common/lib/styles/index.d.ts.map +1 -1
- package/dist/commonjs/common/lib/styles/index.js +0 -1
- package/dist/commonjs/select/lib/Select.js +1 -1
- package/dist/es6/button/lib/BaseButton.js +17 -17
- package/dist/es6/button/lib/DeleteButton.js +1 -1
- package/dist/es6/button/lib/PrimaryButton.js +2 -2
- package/dist/es6/button/lib/SecondaryButton.js +2 -2
- package/dist/es6/button/lib/TertiaryButton.js +15 -15
- package/dist/es6/common/index.d.ts +2 -0
- package/dist/es6/common/index.d.ts.map +1 -1
- package/dist/es6/common/index.js +2 -0
- package/dist/es6/common/lib/AccessibleHide.d.ts +22 -0
- package/dist/es6/common/lib/AccessibleHide.d.ts.map +1 -0
- package/dist/es6/common/lib/AccessibleHide.js +29 -0
- package/dist/es6/common/lib/AriaLiveRegion.d.ts +23 -0
- package/dist/es6/common/lib/AriaLiveRegion.d.ts.map +1 -0
- package/dist/es6/common/lib/AriaLiveRegion.js +12 -0
- package/dist/es6/common/lib/CanvasProvider.d.ts +1 -1
- package/dist/es6/common/lib/CanvasProvider.js +1 -1
- package/dist/es6/common/lib/styles/index.d.ts +0 -1
- package/dist/es6/common/lib/styles/index.d.ts.map +1 -1
- package/dist/es6/common/lib/styles/index.js +0 -1
- package/dist/es6/select/lib/Select.js +1 -1
- package/package.json +4 -4
- package/common/lib/styles/accessibleHide.ts +0 -18
- package/dist/commonjs/common/lib/styles/accessibleHide.d.ts +0 -7
- package/dist/commonjs/common/lib/styles/accessibleHide.d.ts.map +0 -1
- package/dist/commonjs/common/lib/styles/accessibleHide.js +0 -19
- package/dist/es6/common/lib/styles/accessibleHide.d.ts +0 -7
- package/dist/es6/common/lib/styles/accessibleHide.d.ts.map +0 -1
- package/dist/es6/common/lib/styles/accessibleHide.js +0 -16
package/common/index.ts
CHANGED
|
@@ -4,6 +4,8 @@ export * from './lib/genericStyles';
|
|
|
4
4
|
export * from './lib/theming';
|
|
5
5
|
export * from './lib/styles';
|
|
6
6
|
export * from './lib/utils';
|
|
7
|
+
export * from './lib/AccessibleHide';
|
|
8
|
+
export * from './lib/AriaLiveRegion';
|
|
7
9
|
export * from './lib/CanvasProvider';
|
|
8
10
|
export * from './lib/InputProvider';
|
|
9
11
|
export * from './lib/EllipsisText';
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import {createStyles, CSProps, handleCsProp} from '@workday/canvas-kit-styling';
|
|
3
|
+
import {createComponent} from './utils/components';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* A utility to visually hide content, while still making accessible to screen readers
|
|
7
|
+
* See https://a11y-101.com/development/skip-link
|
|
8
|
+
*/
|
|
9
|
+
export const accessibleHide = {
|
|
10
|
+
clip: 'rect(1px, 1px, 1px, 1px)', // Deprecated but still used by most browsers, clip-path will be taking its place soon.
|
|
11
|
+
clipPath: 'polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px)',
|
|
12
|
+
position: 'absolute',
|
|
13
|
+
overflow: 'hidden',
|
|
14
|
+
whiteSpace: 'nowrap',
|
|
15
|
+
height: '1px',
|
|
16
|
+
width: '1px',
|
|
17
|
+
margin: '-1px',
|
|
18
|
+
padding: 0,
|
|
19
|
+
border: 0,
|
|
20
|
+
} as const;
|
|
21
|
+
|
|
22
|
+
const accessibleHideStyles = createStyles(accessibleHide);
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* A convenient component wrapper to visually hide content, while still making it accessible to screen readers
|
|
26
|
+
*/
|
|
27
|
+
export const AccessibleHide = createComponent('div')({
|
|
28
|
+
displayName: 'AccessibleHide',
|
|
29
|
+
Component: (elemProps: CSProps, ref, Element) => {
|
|
30
|
+
return <Element ref={ref} {...handleCsProp(elemProps, accessibleHideStyles)} />;
|
|
31
|
+
},
|
|
32
|
+
});
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import {createComponent} from './utils/components';
|
|
3
|
+
import {handleCsProp, CSProps} from '@workday/canvas-kit-styling';
|
|
4
|
+
|
|
5
|
+
export interface AriaLiveRegionProps extends CSProps {
|
|
6
|
+
/**
|
|
7
|
+
* set the [aria-atomic](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-atomic) attribute
|
|
8
|
+
* @default true
|
|
9
|
+
*/
|
|
10
|
+
'aria-atomic'?: true | false | 'true' | 'false';
|
|
11
|
+
/**
|
|
12
|
+
* set the [aria-live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live) attribute
|
|
13
|
+
* @default 'polite'
|
|
14
|
+
*/
|
|
15
|
+
'aria-live'?: 'polite' | 'assertive' | 'off';
|
|
16
|
+
/**
|
|
17
|
+
* set the live region's [aria role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role)
|
|
18
|
+
* @default 'status'
|
|
19
|
+
*/
|
|
20
|
+
role?: 'status' | 'alert' | 'log';
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* A convenient wrapper for creating an [aria-live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)
|
|
25
|
+
*/
|
|
26
|
+
export const AriaLiveRegion = createComponent('div')({
|
|
27
|
+
displayName: 'AriaLiveRegion',
|
|
28
|
+
Component: (
|
|
29
|
+
{
|
|
30
|
+
'aria-atomic': ariaAtomic = true,
|
|
31
|
+
'aria-live': ariaLive = 'polite',
|
|
32
|
+
role = 'status',
|
|
33
|
+
...elemProps
|
|
34
|
+
}: AriaLiveRegionProps,
|
|
35
|
+
ref,
|
|
36
|
+
Element
|
|
37
|
+
) => {
|
|
38
|
+
return (
|
|
39
|
+
<Element
|
|
40
|
+
ref={ref}
|
|
41
|
+
aria-atomic={ariaAtomic}
|
|
42
|
+
aria-live={ariaLive}
|
|
43
|
+
role={role}
|
|
44
|
+
{...handleCsProp(elemProps)}
|
|
45
|
+
/>
|
|
46
|
+
);
|
|
47
|
+
},
|
|
48
|
+
});
|
|
@@ -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: "b7l82", styles: "font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:bold;background-color:var(--css-button-default-background, transparent);color:var(--css-button-default-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));border-width:1px;border-style:solid;gap:var(--cnvs-sys-space-x2, calc(0.25rem * 2));border-color:var(--css-button-default-border, transparent);cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;box-sizing:border-box;outline:2px transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--css-button-default-borderRadius, var(--cnvs-sys-shape-round, calc(0.25rem * 250)));position:relative;vertical-align:middle;overflow:hidden;transition:box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear;&:disabled, &:disabled:active, &.disabled{cursor:default;box-shadow:none;opacity:var(--css-button-disabled-opacity, 1);}& span .wd-icon-fill{transition-duration:40ms;fill:var(--css-button-default-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-default-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}&:focus-visible, &.focus{background-color:var(--css-button-focus-background, transparent);border-color:var(--css-button-focus-border, transparent);color:var(--css-button-focus-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill{fill:var(--css-button-focus-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-focus-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}box-shadow:0 0 0 2px var(--css-button-focus-boxShadowInner, var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1))), 0 0 0 calc(2px + 2px) var(--css-button-focus-boxShadowOuter, var(--cnvs-brand-primary-base, rgba(8,117,225,1)));}&:hover, &.hover{background-color:var(--css-button-hover-background, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));border-color:var(--css-button-hover-border, transparent);color:var(--css-button-hover-label-emotion-safe, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));& span .wd-icon-fill{fill:var(--css-button-hover-icon, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-hover-icon, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));}}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--css-button-active-background, transparent);border-color:var(--css-button-active-border, transparent);color:var(--css-button-active-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill{fill:var(--css-button-active-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-active-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}}&:disabled, &.disabled{background-color:var(--css-button-disabled-background, transparent);border-color:var(--css-button-disabled-border, transparent);color:var(--css-button-disabled-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill{fill:var(--css-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}}" });
|
|
44
44
|
/**
|
|
45
45
|
* Button modifiers that will overwrite the base styles of Buttons.
|
|
46
46
|
* - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
|
|
@@ -49,24 +49,24 @@ const baseButtonStyles = canvas_kit_styling_1.createStyles({ name: "c0sg1", 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: "b7l83", styles: "font-size:var(--cnvs-sys-space-x4, calc(0.25rem * 4));line-height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));letter-spacing:0.01rem;height:48px;padding-inline:var(--cnvs-sys-space-x8, calc(0.25rem * 8));min-width:112px;" }),
|
|
53
|
+
medium: canvas_kit_styling_1.createStyles({ name: "b7l84", styles: "font-size:0.875rem;letter-spacing:0.015rem;min-width:96px;padding-inline:var(--cnvs-sys-space-x6, calc(0.25rem * 6));height:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" }),
|
|
54
|
+
small: canvas_kit_styling_1.createStyles({ name: "b7l85", styles: "font-size:0.875rem;letter-spacing:0.015rem;height:var(--cnvs-sys-space-x8, calc(0.25rem * 8));min-width:var(--cnvs-sys-space-x20, calc(0.25rem * 20));padding-inline:var(--cnvs-sys-space-x4, calc(0.25rem * 4));gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
|
|
55
|
+
extraSmall: canvas_kit_styling_1.createStyles({ name: "b7l86", styles: "font-size:0.75rem;line-height:var(--cnvs-sys-space-x4, calc(0.25rem * 4));letter-spacing:0.02rem;height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));min-width:auto;padding-inline:var(--cnvs-sys-space-x3, calc(0.25rem * 3));gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
|
|
56
56
|
},
|
|
57
57
|
iconPosition: {
|
|
58
|
-
largeOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
59
|
-
largeStart: canvas_kit_styling_1.createStyles({ name: "
|
|
60
|
-
largeEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
61
|
-
mediumOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
62
|
-
mediumStart: canvas_kit_styling_1.createStyles({ name: "
|
|
63
|
-
mediumEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
64
|
-
smallOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
65
|
-
smallStart: canvas_kit_styling_1.createStyles({ name: "
|
|
66
|
-
smallEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
67
|
-
extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
68
|
-
extraSmallStart: canvas_kit_styling_1.createStyles({ name: "
|
|
69
|
-
extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
58
|
+
largeOnly: canvas_kit_styling_1.createStyles({ name: "b7l87", styles: "padding:0;min-width:calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) * 3);" }),
|
|
59
|
+
largeStart: canvas_kit_styling_1.createStyles({ name: "b7l88", styles: "padding-inline-start:var(--cnvs-sys-space-x6, calc(0.25rem * 6));padding-inline-end:var(--cnvs-sys-space-x8, calc(0.25rem * 8));" }),
|
|
60
|
+
largeEnd: canvas_kit_styling_1.createStyles({ name: "b7l89", styles: "padding-inline-start:var(--cnvs-sys-space-x8, calc(0.25rem * 8));padding-inline-end:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
|
|
61
|
+
mediumOnly: canvas_kit_styling_1.createStyles({ name: "b7l8a", styles: "padding:0;min-width:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" }),
|
|
62
|
+
mediumStart: canvas_kit_styling_1.createStyles({ name: "b7l8b", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);padding-inline-end:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
|
|
63
|
+
mediumEnd: canvas_kit_styling_1.createStyles({ name: "b7l8c", styles: "padding-inline-start:var(--cnvs-sys-space-x6, calc(0.25rem * 6));padding-inline-end:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);" }),
|
|
64
|
+
smallOnly: canvas_kit_styling_1.createStyles({ name: "b7l8d", styles: "padding:0;min-width:var(--cnvs-sys-space-x8, calc(0.25rem * 8));" }),
|
|
65
|
+
smallStart: canvas_kit_styling_1.createStyles({ name: "b7l8e", styles: "padding-inline-start:var(--cnvs-sys-space-x3, calc(0.25rem * 3));padding-inline-end:var(--cnvs-sys-space-x4, calc(0.25rem * 4));" }),
|
|
66
|
+
smallEnd: canvas_kit_styling_1.createStyles({ name: "b7l8f", styles: "padding-inline-start:var(--cnvs-sys-space-x4, calc(0.25rem * 4));padding-inline-end:var(--cnvs-sys-space-x3, calc(0.25rem * 3));" }),
|
|
67
|
+
extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "b7l8g", styles: "padding:0;min-width:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
|
|
68
|
+
extraSmallStart: canvas_kit_styling_1.createStyles({ name: "b7l8h", styles: "padding-inline-start:var(--cnvs-sys-space-x2, calc(0.25rem * 2));padding-inline-end:var(--cnvs-sys-space-x3, calc(0.25rem * 3));" }),
|
|
69
|
+
extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "b7l8i", styles: "padding-inline-start:var(--cnvs-sys-space-x3, calc(0.25rem * 3));padding-inline-end:var(--cnvs-sys-space-x2, calc(0.25rem * 2));" }),
|
|
70
70
|
},
|
|
71
71
|
});
|
|
72
72
|
function capitalize(string = '') {
|
|
@@ -27,7 +27,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
|
27
27
|
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
28
28
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
29
29
|
const Button_1 = require("./Button");
|
|
30
|
-
const deleteStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
30
|
+
const deleteStyles = canvas_kit_styling_1.createStyles({ name: "b7l812", 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-light, rgba(252,201,197,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));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: "b7l8y", styles: "--css-button-default-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-default-border:transparent;--css-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--css-button-default-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-default-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-hover-background:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--css-button-hover-border:transparent;--css-button-hover-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-focus-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-focus-border:transparent;--css-button-focus-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-focus-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--css-button-active-background:var(--cnvs-brand-primary-darkest, rgba(0,67,135,1));--css-button-active-border:transparent;--css-button-active-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-disabled-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-disabled-border:transparent;--css-button-disabled-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-disabled-opacity:0.4;--css-button-disabled-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));" });
|
|
31
31
|
exports.primaryButtonModifiers = canvas_kit_styling_1.createModifiers({
|
|
32
32
|
variant: {
|
|
33
|
-
inverse: canvas_kit_styling_1.createStyles({ name: "
|
|
33
|
+
inverse: canvas_kit_styling_1.createStyles({ name: "b7l8z", styles: "--css-button-default-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--css-button-default-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--css-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-disabled-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-disabled-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
34
34
|
},
|
|
35
35
|
});
|
|
36
36
|
exports.PrimaryButton = common_1.createComponent('button')({
|
|
@@ -27,10 +27,10 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
|
27
27
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
28
28
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
29
29
|
const Button_1 = require("./Button");
|
|
30
|
-
const secondaryStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
30
|
+
const secondaryStyles = canvas_kit_styling_1.createStyles({ name: "b7l810", styles: "--css-button-default-background:transparent;--css-button-default-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--css-button-default-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-background:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-focus-background:transparent;--css-button-focus-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--css-button-active-background:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-active-border:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-active-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-disabled-background:transparent;--css-button-disabled-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-disabled-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-disabled-opacity:0.4;--css-button-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" });
|
|
31
31
|
exports.secondaryButtonModifiers = canvas_kit_styling_1.createModifiers({
|
|
32
32
|
variant: {
|
|
33
|
-
inverse: canvas_kit_styling_1.createStyles({ name: "
|
|
33
|
+
inverse: canvas_kit_styling_1.createStyles({ name: "b7l811", 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-500, rgba(30,30,30,1));--css-button-focus-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--css-button-active-border:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--css-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-disabled-background:transparent;--css-button-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-disabled-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }),
|
|
34
34
|
},
|
|
35
35
|
});
|
|
36
36
|
exports.SecondaryButton = common_1.createComponent('button')({
|
|
@@ -28,27 +28,27 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
|
28
28
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
29
29
|
const tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
30
30
|
const Button_1 = require("./Button");
|
|
31
|
-
const tertiaryStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
31
|
+
const tertiaryStyles = canvas_kit_styling_1.createStyles({ name: "b7l8j", 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-200, rgba(240,241,242,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-500, rgba(30,30,30,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-500, rgba(30,30,30,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-300, rgba(232,235,237,1));--css-button-active-border:transparent;--css-button-active-label-emotion-safe:var(--cnvs-brand-primary-dark, rgba(0,92,185,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-brand-primary-base, rgba(8,117,225,1));--css-button-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-disabled-opacity:0.4;&:focus-visible, &.focus{box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 calc(2px + 0px) var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" });
|
|
32
32
|
exports.tertiaryButtonModifiers = canvas_kit_styling_1.createModifiers({
|
|
33
33
|
isThemeable: {
|
|
34
|
-
true: canvas_kit_styling_1.createStyles({ name: "
|
|
34
|
+
true: canvas_kit_styling_1.createStyles({ name: "b7l8k", 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-dark, rgba(0,92,185,1));--css-button-disabled-icon:var(--cnvs-brand-primary-base, rgba(8,117,225,1));" }),
|
|
35
35
|
},
|
|
36
36
|
variant: {
|
|
37
|
-
inverse: canvas_kit_styling_1.createStyles({ name: "
|
|
37
|
+
inverse: canvas_kit_styling_1.createStyles({ name: "b7l8l", styles: "--css-button-default-background:transparent;--css-button-default-border:transparent;--css-button-default-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-default-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-hover-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-hover-border:transparent;--css-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-border:transparent;--css-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-active-background:var(--cnvs-base-palette-soap-200, rgba(240,241,242,1));--css-button-active-border:transparent;--css-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-active-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-disabled-background:transparent;--css-button-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-disabled-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));&:focus-visible, &.focus{box-shadow:inset 0 0 0 2px var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));}" }),
|
|
38
38
|
},
|
|
39
39
|
iconPosition: {
|
|
40
|
-
largeOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
41
|
-
largeStart: canvas_kit_styling_1.createStyles({ name: "
|
|
42
|
-
largeEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
43
|
-
mediumOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
44
|
-
mediumStart: canvas_kit_styling_1.createStyles({ name: "
|
|
45
|
-
mediumEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
46
|
-
smallOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
47
|
-
smallStart: canvas_kit_styling_1.createStyles({ name: "
|
|
48
|
-
smallEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
49
|
-
extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
50
|
-
extraSmallStart: canvas_kit_styling_1.createStyles({ name: "
|
|
51
|
-
extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
40
|
+
largeOnly: canvas_kit_styling_1.createStyles({ name: "b7l8m", styles: "border-radius:999px;padding:0;min-width:calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) * 3);" }),
|
|
41
|
+
largeStart: canvas_kit_styling_1.createStyles({ name: "b7l8n", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
42
|
+
largeEnd: canvas_kit_styling_1.createStyles({ name: "b7l8o", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
43
|
+
mediumOnly: canvas_kit_styling_1.createStyles({ name: "b7l8p", styles: "padding:0;min-width:2.5rem;border-radius:999px;" }),
|
|
44
|
+
mediumStart: canvas_kit_styling_1.createStyles({ name: "b7l8q", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
45
|
+
mediumEnd: canvas_kit_styling_1.createStyles({ name: "b7l8r", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
46
|
+
smallOnly: canvas_kit_styling_1.createStyles({ name: "b7l8s", styles: "padding:0;min-width:2rem;border-radius:999px;" }),
|
|
47
|
+
smallStart: canvas_kit_styling_1.createStyles({ name: "b7l8t", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
48
|
+
smallEnd: canvas_kit_styling_1.createStyles({ name: "b7l8u", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
49
|
+
extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "b7l8v", styles: "padding:0;min-width:1.5rem;border-radius:999px;" }),
|
|
50
|
+
extraSmallStart: canvas_kit_styling_1.createStyles({ name: "b7l8w", styles: "padding-inline-start:0.25rem;padding-inline-end:0.5rem;" }),
|
|
51
|
+
extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "b7l8x", styles: "padding-inline-start:0.5rem;padding-inline-end:0.25rem;" }),
|
|
52
52
|
},
|
|
53
53
|
});
|
|
54
54
|
exports.TertiaryButton = common_1.createComponent('button')({
|
|
@@ -4,6 +4,8 @@ export * from './lib/genericStyles';
|
|
|
4
4
|
export * from './lib/theming';
|
|
5
5
|
export * from './lib/styles';
|
|
6
6
|
export * from './lib/utils';
|
|
7
|
+
export * from './lib/AccessibleHide';
|
|
8
|
+
export * from './lib/AriaLiveRegion';
|
|
7
9
|
export * from './lib/CanvasProvider';
|
|
8
10
|
export * from './lib/InputProvider';
|
|
9
11
|
export * from './lib/EllipsisText';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../common/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,+CAA+C,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../common/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,+CAA+C,CAAC"}
|
|
@@ -16,6 +16,8 @@ __exportStar(require("./lib/genericStyles"), exports);
|
|
|
16
16
|
__exportStar(require("./lib/theming"), exports);
|
|
17
17
|
__exportStar(require("./lib/styles"), exports);
|
|
18
18
|
__exportStar(require("./lib/utils"), exports);
|
|
19
|
+
__exportStar(require("./lib/AccessibleHide"), exports);
|
|
20
|
+
__exportStar(require("./lib/AriaLiveRegion"), exports);
|
|
19
21
|
__exportStar(require("./lib/CanvasProvider"), exports);
|
|
20
22
|
__exportStar(require("./lib/InputProvider"), exports);
|
|
21
23
|
__exportStar(require("./lib/EllipsisText"), exports);
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { CSProps } from '@workday/canvas-kit-styling';
|
|
2
|
+
/**
|
|
3
|
+
* A utility to visually hide content, while still making accessible to screen readers
|
|
4
|
+
* See https://a11y-101.com/development/skip-link
|
|
5
|
+
*/
|
|
6
|
+
export declare const accessibleHide: {
|
|
7
|
+
readonly clip: "rect(1px, 1px, 1px, 1px)";
|
|
8
|
+
readonly clipPath: "polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px)";
|
|
9
|
+
readonly position: "absolute";
|
|
10
|
+
readonly overflow: "hidden";
|
|
11
|
+
readonly whiteSpace: "nowrap";
|
|
12
|
+
readonly height: "1px";
|
|
13
|
+
readonly width: "1px";
|
|
14
|
+
readonly margin: "-1px";
|
|
15
|
+
readonly padding: 0;
|
|
16
|
+
readonly border: 0;
|
|
17
|
+
};
|
|
18
|
+
/**
|
|
19
|
+
* A convenient component wrapper to visually hide content, while still making it accessible to screen readers
|
|
20
|
+
*/
|
|
21
|
+
export declare const AccessibleHide: import("./utils/components").ElementComponent<"div", CSProps>;
|
|
22
|
+
//# sourceMappingURL=AccessibleHide.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AccessibleHide.d.ts","sourceRoot":"","sources":["../../../../common/lib/AccessibleHide.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,OAAO,EAAe,MAAM,6BAA6B,CAAC;AAGhF;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;CAWjB,CAAC;AAIX;;GAEG;AACH,eAAO,MAAM,cAAc,+DAKzB,CAAC"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
8
|
+
}));
|
|
9
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
10
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
11
|
+
}) : function(o, v) {
|
|
12
|
+
o["default"] = v;
|
|
13
|
+
});
|
|
14
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
15
|
+
if (mod && mod.__esModule) return mod;
|
|
16
|
+
var result = {};
|
|
17
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
18
|
+
__setModuleDefault(result, mod);
|
|
19
|
+
return result;
|
|
20
|
+
};
|
|
21
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
22
|
+
exports.AccessibleHide = exports.accessibleHide = void 0;
|
|
23
|
+
const React = __importStar(require("react"));
|
|
24
|
+
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
25
|
+
const components_1 = require("./utils/components");
|
|
26
|
+
/**
|
|
27
|
+
* A utility to visually hide content, while still making accessible to screen readers
|
|
28
|
+
* See https://a11y-101.com/development/skip-link
|
|
29
|
+
*/
|
|
30
|
+
exports.accessibleHide = {
|
|
31
|
+
clip: 'rect(1px, 1px, 1px, 1px)',
|
|
32
|
+
clipPath: 'polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px)',
|
|
33
|
+
position: 'absolute',
|
|
34
|
+
overflow: 'hidden',
|
|
35
|
+
whiteSpace: 'nowrap',
|
|
36
|
+
height: '1px',
|
|
37
|
+
width: '1px',
|
|
38
|
+
margin: '-1px',
|
|
39
|
+
padding: 0,
|
|
40
|
+
border: 0,
|
|
41
|
+
};
|
|
42
|
+
const accessibleHideStyles = canvas_kit_styling_1.createStyles({ name: "b7l80", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;width:1px;margin:-1px;padding:0px;border:0px;" });
|
|
43
|
+
/**
|
|
44
|
+
* A convenient component wrapper to visually hide content, while still making it accessible to screen readers
|
|
45
|
+
*/
|
|
46
|
+
exports.AccessibleHide = components_1.createComponent('div')({
|
|
47
|
+
displayName: 'AccessibleHide',
|
|
48
|
+
Component: (elemProps, ref, Element) => {
|
|
49
|
+
return React.createElement(Element, Object.assign({ ref: ref }, canvas_kit_styling_1.handleCsProp(elemProps, accessibleHideStyles)));
|
|
50
|
+
},
|
|
51
|
+
});
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { CSProps } from '@workday/canvas-kit-styling';
|
|
2
|
+
export interface AriaLiveRegionProps extends CSProps {
|
|
3
|
+
/**
|
|
4
|
+
* set the [aria-atomic](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-atomic) attribute
|
|
5
|
+
* @default true
|
|
6
|
+
*/
|
|
7
|
+
'aria-atomic'?: true | false | 'true' | 'false';
|
|
8
|
+
/**
|
|
9
|
+
* set the [aria-live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live) attribute
|
|
10
|
+
* @default 'polite'
|
|
11
|
+
*/
|
|
12
|
+
'aria-live'?: 'polite' | 'assertive' | 'off';
|
|
13
|
+
/**
|
|
14
|
+
* set the live region's [aria role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role)
|
|
15
|
+
* @default 'status'
|
|
16
|
+
*/
|
|
17
|
+
role?: 'status' | 'alert' | 'log';
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* A convenient wrapper for creating an [aria-live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)
|
|
21
|
+
*/
|
|
22
|
+
export declare const AriaLiveRegion: import("./utils/components").ElementComponent<"div", AriaLiveRegionProps>;
|
|
23
|
+
//# sourceMappingURL=AriaLiveRegion.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AriaLiveRegion.d.ts","sourceRoot":"","sources":["../../../../common/lib/AriaLiveRegion.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAElE,MAAM,WAAW,mBAAoB,SAAQ,OAAO;IAClD;;;OAGG;IACH,aAAa,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;IAChD;;;OAGG;IACH,WAAW,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAC;IAC7C;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;CACnC;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,2EAsBzB,CAAC"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
8
|
+
}));
|
|
9
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
10
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
11
|
+
}) : function(o, v) {
|
|
12
|
+
o["default"] = v;
|
|
13
|
+
});
|
|
14
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
15
|
+
if (mod && mod.__esModule) return mod;
|
|
16
|
+
var result = {};
|
|
17
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
18
|
+
__setModuleDefault(result, mod);
|
|
19
|
+
return result;
|
|
20
|
+
};
|
|
21
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
22
|
+
exports.AriaLiveRegion = void 0;
|
|
23
|
+
const React = __importStar(require("react"));
|
|
24
|
+
const components_1 = require("./utils/components");
|
|
25
|
+
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
26
|
+
/**
|
|
27
|
+
* A convenient wrapper for creating an [aria-live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)
|
|
28
|
+
*/
|
|
29
|
+
exports.AriaLiveRegion = components_1.createComponent('div')({
|
|
30
|
+
displayName: 'AriaLiveRegion',
|
|
31
|
+
Component: ({ 'aria-atomic': ariaAtomic = true, 'aria-live': ariaLive = 'polite', role = 'status', ...elemProps }, ref, Element) => {
|
|
32
|
+
return (React.createElement(Element, Object.assign({ ref: ref, "aria-atomic": ariaAtomic, "aria-live": ariaLive, role: role }, canvas_kit_styling_1.handleCsProp(elemProps))));
|
|
33
|
+
},
|
|
34
|
+
});
|
|
@@ -73,7 +73,7 @@ export declare const useCanvasThemeToCssVars: (theme: PartialEmotionCanvasTheme
|
|
|
73
73
|
'aria-label'?: string | undefined;
|
|
74
74
|
'aria-labelledby'?: string | undefined;
|
|
75
75
|
'aria-level'?: number | undefined;
|
|
76
|
-
'aria-live'?: "off" | "
|
|
76
|
+
'aria-live'?: "off" | "polite" | "assertive" | undefined;
|
|
77
77
|
'aria-modal'?: (boolean | "true" | "false") | undefined;
|
|
78
78
|
'aria-multiline'?: (boolean | "true" | "false") | undefined;
|
|
79
79
|
'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
|
|
@@ -28,7 +28,7 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
|
28
28
|
const css_1 = require("@emotion/css");
|
|
29
29
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
30
30
|
// copied from brand/_variables.css
|
|
31
|
-
const defaultBranding = canvas_kit_styling_1.createStyles({ name: "
|
|
31
|
+
const defaultBranding = canvas_kit_styling_1.createStyles({ name: "b7l81", styles: "--cnvs-brand-error-darkest:rgba(128,22,14,1);--cnvs-brand-common-alert-inner:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-common-error-inner:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-common-focus-outline:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-neutral-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-neutral-darkest:var(--cnvs-base-palette-licorice-400);--cnvs-brand-neutral-dark:var(--cnvs-base-palette-licorice-300);--cnvs-brand-neutral-base:var(--cnvs-base-palette-soap-600);--cnvs-brand-neutral-light:var(--cnvs-base-palette-soap-300);--cnvs-brand-neutral-lightest:var(--cnvs-base-palette-soap-200);--cnvs-brand-success-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-success-darkest:var(--cnvs-base-palette-green-apple-600);--cnvs-brand-success-dark:var(--cnvs-base-palette-green-apple-500);--cnvs-brand-success-base:var(--cnvs-base-palette-green-apple-400);--cnvs-brand-success-light:var(--cnvs-base-palette-green-apple-300);--cnvs-brand-success-lightest:var(--cnvs-base-palette-green-apple-100);--cnvs-brand-error-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-error-dark:var(--cnvs-base-palette-cinnamon-600);--cnvs-brand-error-base:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-error-light:var(--cnvs-base-palette-cinnamon-200);--cnvs-brand-error-lightest:var(--cnvs-base-palette-cinnamon-100);--cnvs-brand-alert-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-alert-darkest:var(--cnvs-base-palette-cantaloupe-600);--cnvs-brand-alert-dark:var(--cnvs-base-palette-cantaloupe-500);--cnvs-brand-alert-base:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-alert-light:var(--cnvs-base-palette-cantaloupe-200);--cnvs-brand-alert-lightest:var(--cnvs-base-palette-cantaloupe-100);--cnvs-brand-primary-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-primary-darkest:var(--cnvs-base-palette-blueberry-600);--cnvs-brand-primary-dark:var(--cnvs-base-palette-blueberry-500);--cnvs-brand-primary-base:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-primary-light:var(--cnvs-base-palette-blueberry-200);--cnvs-brand-primary-lightest:var(--cnvs-base-palette-blueberry-100);--cnvs-brand-gradient-primary:linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);" });
|
|
32
32
|
const mappedKeys = {
|
|
33
33
|
lightest: 'lightest',
|
|
34
34
|
light: 'light',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC"}
|
|
@@ -10,7 +10,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
10
10
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
11
|
};
|
|
12
12
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
|
-
__exportStar(require("./accessibleHide"), exports);
|
|
14
13
|
__exportStar(require("./errorRing"), exports);
|
|
15
14
|
__exportStar(require("./focusRing"), exports);
|
|
16
15
|
__exportStar(require("./hideMouseFocus"), exports);
|
|
@@ -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: "b7l813", 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: "ydb52", 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: "sbj01", 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: "ydb53", 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: "ydb54", 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: "ydb55", 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: "ydb56", 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: "ydb57", styles: "padding:0;min-width:calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) * 3);" }),
|
|
37
|
+
largeStart: createStyles({ name: "ydb58", 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: "ydb59", 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: "ydb5a", styles: "padding:0;min-width:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" }),
|
|
40
|
+
mediumStart: createStyles({ name: "ydb5b", 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: "ydb5c", 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: "ydb5d", styles: "padding:0;min-width:var(--cnvs-sys-space-x8, calc(0.25rem * 8));" }),
|
|
43
|
+
smallStart: createStyles({ name: "ydb5e", 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: "ydb5f", 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: "ydb5g", styles: "padding:0;min-width:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
|
|
46
|
+
extraSmallStart: createStyles({ name: "ydb5h", 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: "ydb5i", 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: "ydb512", 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-light, rgba(252,201,197,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));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, 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: "ydb5y", 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: "ydb5z", 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: "ydb510", 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: "ydb511", 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-500, rgba(30,30,30,1));--css-button-focus-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,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: "ydb5j", 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-200, rgba(240,241,242,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-500, rgba(30,30,30,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-500, rgba(30,30,30,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-300, rgba(232,235,237,1));--css-button-active-border:transparent;--css-button-active-label-emotion-safe:var(--cnvs-brand-primary-dark, rgba(0,92,185,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-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: "ydb5k", 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-dark, rgba(0,92,185,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: "ydb5l", 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: "ydb5m", styles: "border-radius:999px;padding:0;min-width:calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) * 3);" }),
|
|
19
|
+
largeStart: createStyles({ name: "ydb5n", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
20
|
+
largeEnd: createStyles({ name: "ydb5o", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
21
|
+
mediumOnly: createStyles({ name: "ydb5p", styles: "padding:0;min-width:2.5rem;border-radius:999px;" }),
|
|
22
|
+
mediumStart: createStyles({ name: "ydb5q", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
23
|
+
mediumEnd: createStyles({ name: "ydb5r", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
24
|
+
smallOnly: createStyles({ name: "ydb5s", styles: "padding:0;min-width:2rem;border-radius:999px;" }),
|
|
25
|
+
smallStart: createStyles({ name: "ydb5t", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
26
|
+
smallEnd: createStyles({ name: "ydb5u", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
27
|
+
extraSmallOnly: createStyles({ name: "ydb5v", styles: "padding:0;min-width:1.5rem;border-radius:999px;" }),
|
|
28
|
+
extraSmallStart: createStyles({ name: "ydb5w", styles: "padding-inline-start:0.25rem;padding-inline-end:0.5rem;" }),
|
|
29
|
+
extraSmallEnd: createStyles({ name: "ydb5x", styles: "padding-inline-start:0.5rem;padding-inline-end:0.25rem;" }),
|
|
30
30
|
},
|
|
31
31
|
});
|
|
32
32
|
export const TertiaryButton = createComponent('button')({
|
|
@@ -4,6 +4,8 @@ export * from './lib/genericStyles';
|
|
|
4
4
|
export * from './lib/theming';
|
|
5
5
|
export * from './lib/styles';
|
|
6
6
|
export * from './lib/utils';
|
|
7
|
+
export * from './lib/AccessibleHide';
|
|
8
|
+
export * from './lib/AriaLiveRegion';
|
|
7
9
|
export * from './lib/CanvasProvider';
|
|
8
10
|
export * from './lib/InputProvider';
|
|
9
11
|
export * from './lib/EllipsisText';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../common/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,+CAA+C,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../common/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,+CAA+C,CAAC"}
|
package/dist/es6/common/index.js
CHANGED
|
@@ -4,6 +4,8 @@ export * from './lib/genericStyles';
|
|
|
4
4
|
export * from './lib/theming';
|
|
5
5
|
export * from './lib/styles';
|
|
6
6
|
export * from './lib/utils';
|
|
7
|
+
export * from './lib/AccessibleHide';
|
|
8
|
+
export * from './lib/AriaLiveRegion';
|
|
7
9
|
export * from './lib/CanvasProvider';
|
|
8
10
|
export * from './lib/InputProvider';
|
|
9
11
|
export * from './lib/EllipsisText';
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { CSProps } from '@workday/canvas-kit-styling';
|
|
2
|
+
/**
|
|
3
|
+
* A utility to visually hide content, while still making accessible to screen readers
|
|
4
|
+
* See https://a11y-101.com/development/skip-link
|
|
5
|
+
*/
|
|
6
|
+
export declare const accessibleHide: {
|
|
7
|
+
readonly clip: "rect(1px, 1px, 1px, 1px)";
|
|
8
|
+
readonly clipPath: "polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px)";
|
|
9
|
+
readonly position: "absolute";
|
|
10
|
+
readonly overflow: "hidden";
|
|
11
|
+
readonly whiteSpace: "nowrap";
|
|
12
|
+
readonly height: "1px";
|
|
13
|
+
readonly width: "1px";
|
|
14
|
+
readonly margin: "-1px";
|
|
15
|
+
readonly padding: 0;
|
|
16
|
+
readonly border: 0;
|
|
17
|
+
};
|
|
18
|
+
/**
|
|
19
|
+
* A convenient component wrapper to visually hide content, while still making it accessible to screen readers
|
|
20
|
+
*/
|
|
21
|
+
export declare const AccessibleHide: import("./utils/components").ElementComponent<"div", CSProps>;
|
|
22
|
+
//# sourceMappingURL=AccessibleHide.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AccessibleHide.d.ts","sourceRoot":"","sources":["../../../../common/lib/AccessibleHide.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,OAAO,EAAe,MAAM,6BAA6B,CAAC;AAGhF;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;CAWjB,CAAC;AAIX;;GAEG;AACH,eAAO,MAAM,cAAc,+DAKzB,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { createStyles, handleCsProp } from '@workday/canvas-kit-styling';
|
|
3
|
+
import { createComponent } from './utils/components';
|
|
4
|
+
/**
|
|
5
|
+
* A utility to visually hide content, while still making accessible to screen readers
|
|
6
|
+
* See https://a11y-101.com/development/skip-link
|
|
7
|
+
*/
|
|
8
|
+
export const accessibleHide = {
|
|
9
|
+
clip: 'rect(1px, 1px, 1px, 1px)',
|
|
10
|
+
clipPath: 'polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px)',
|
|
11
|
+
position: 'absolute',
|
|
12
|
+
overflow: 'hidden',
|
|
13
|
+
whiteSpace: 'nowrap',
|
|
14
|
+
height: '1px',
|
|
15
|
+
width: '1px',
|
|
16
|
+
margin: '-1px',
|
|
17
|
+
padding: 0,
|
|
18
|
+
border: 0,
|
|
19
|
+
};
|
|
20
|
+
const accessibleHideStyles = createStyles({ name: "ydb50", 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
|
+
/**
|
|
22
|
+
* A convenient component wrapper to visually hide content, while still making it accessible to screen readers
|
|
23
|
+
*/
|
|
24
|
+
export const AccessibleHide = createComponent('div')({
|
|
25
|
+
displayName: 'AccessibleHide',
|
|
26
|
+
Component: (elemProps, ref, Element) => {
|
|
27
|
+
return React.createElement(Element, Object.assign({ ref: ref }, handleCsProp(elemProps, accessibleHideStyles)));
|
|
28
|
+
},
|
|
29
|
+
});
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { CSProps } from '@workday/canvas-kit-styling';
|
|
2
|
+
export interface AriaLiveRegionProps extends CSProps {
|
|
3
|
+
/**
|
|
4
|
+
* set the [aria-atomic](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-atomic) attribute
|
|
5
|
+
* @default true
|
|
6
|
+
*/
|
|
7
|
+
'aria-atomic'?: true | false | 'true' | 'false';
|
|
8
|
+
/**
|
|
9
|
+
* set the [aria-live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live) attribute
|
|
10
|
+
* @default 'polite'
|
|
11
|
+
*/
|
|
12
|
+
'aria-live'?: 'polite' | 'assertive' | 'off';
|
|
13
|
+
/**
|
|
14
|
+
* set the live region's [aria role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role)
|
|
15
|
+
* @default 'status'
|
|
16
|
+
*/
|
|
17
|
+
role?: 'status' | 'alert' | 'log';
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* A convenient wrapper for creating an [aria-live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)
|
|
21
|
+
*/
|
|
22
|
+
export declare const AriaLiveRegion: import("./utils/components").ElementComponent<"div", AriaLiveRegionProps>;
|
|
23
|
+
//# sourceMappingURL=AriaLiveRegion.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AriaLiveRegion.d.ts","sourceRoot":"","sources":["../../../../common/lib/AriaLiveRegion.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAElE,MAAM,WAAW,mBAAoB,SAAQ,OAAO;IAClD;;;OAGG;IACH,aAAa,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;IAChD;;;OAGG;IACH,WAAW,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAC;IAC7C;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;CACnC;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,2EAsBzB,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { createComponent } from './utils/components';
|
|
3
|
+
import { handleCsProp } from '@workday/canvas-kit-styling';
|
|
4
|
+
/**
|
|
5
|
+
* A convenient wrapper for creating an [aria-live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)
|
|
6
|
+
*/
|
|
7
|
+
export const AriaLiveRegion = createComponent('div')({
|
|
8
|
+
displayName: 'AriaLiveRegion',
|
|
9
|
+
Component: ({ 'aria-atomic': ariaAtomic = true, 'aria-live': ariaLive = 'polite', role = 'status', ...elemProps }, ref, Element) => {
|
|
10
|
+
return (React.createElement(Element, Object.assign({ ref: ref, "aria-atomic": ariaAtomic, "aria-live": ariaLive, role: role }, handleCsProp(elemProps))));
|
|
11
|
+
},
|
|
12
|
+
});
|
|
@@ -73,7 +73,7 @@ export declare const useCanvasThemeToCssVars: (theme: PartialEmotionCanvasTheme
|
|
|
73
73
|
'aria-label'?: string | undefined;
|
|
74
74
|
'aria-labelledby'?: string | undefined;
|
|
75
75
|
'aria-level'?: number | undefined;
|
|
76
|
-
'aria-live'?: "off" | "
|
|
76
|
+
'aria-live'?: "off" | "polite" | "assertive" | undefined;
|
|
77
77
|
'aria-modal'?: (boolean | "true" | "false") | undefined;
|
|
78
78
|
'aria-multiline'?: (boolean | "true" | "false") | undefined;
|
|
79
79
|
'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
|
|
@@ -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: "ydb51", 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',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC"}
|
|
@@ -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: "ydb513", 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,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-react",
|
|
3
|
-
"version": "10.3.0
|
|
3
|
+
"version": "10.3.0",
|
|
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",
|
|
@@ -50,8 +50,8 @@
|
|
|
50
50
|
"@emotion/styled": "^11.6.0",
|
|
51
51
|
"@popperjs/core": "^2.5.4",
|
|
52
52
|
"@workday/canvas-colors-web": "^2.0.0",
|
|
53
|
-
"@workday/canvas-kit-popup-stack": "^10.3.0
|
|
54
|
-
"@workday/canvas-kit-styling": "^10.3.0
|
|
53
|
+
"@workday/canvas-kit-popup-stack": "^10.3.0",
|
|
54
|
+
"@workday/canvas-kit-styling": "^10.3.0",
|
|
55
55
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
56
56
|
"@workday/canvas-tokens-web": "^1.0.0",
|
|
57
57
|
"@workday/design-assets-types": "^0.2.8",
|
|
@@ -69,5 +69,5 @@
|
|
|
69
69
|
"@workday/canvas-accent-icons-web": "^3.0.0",
|
|
70
70
|
"@workday/canvas-applet-icons-web": "^2.0.0"
|
|
71
71
|
},
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "af4086d39a7ba9fede94f63ef08d01b9b731dd93"
|
|
73
73
|
}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import {CSSProperties} from '@workday/canvas-kit-react/tokens';
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* A utility to visually hide content, while still making accessible to screenreaders
|
|
5
|
-
* See https://a11y-101.com/development/skip-link
|
|
6
|
-
*/
|
|
7
|
-
export const accessibleHide: CSSProperties = {
|
|
8
|
-
clip: 'rect(1px, 1px, 1px, 1px)', // Deprecated but still used by most browsers, clip-path will be taking its place soon.
|
|
9
|
-
clipPath: 'polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px)',
|
|
10
|
-
position: 'absolute',
|
|
11
|
-
overflow: 'hidden',
|
|
12
|
-
whiteSpace: 'nowrap',
|
|
13
|
-
height: '1px',
|
|
14
|
-
width: '1px',
|
|
15
|
-
margin: '-1px',
|
|
16
|
-
padding: 0,
|
|
17
|
-
border: 0,
|
|
18
|
-
};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { CSSProperties } from '@workday/canvas-kit-react/tokens';
|
|
2
|
-
/**
|
|
3
|
-
* A utility to visually hide content, while still making accessible to screenreaders
|
|
4
|
-
* See https://a11y-101.com/development/skip-link
|
|
5
|
-
*/
|
|
6
|
-
export declare const accessibleHide: CSSProperties;
|
|
7
|
-
//# sourceMappingURL=accessibleHide.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"accessibleHide.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/accessibleHide.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAE/D;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,aAW5B,CAAC"}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.accessibleHide = void 0;
|
|
4
|
-
/**
|
|
5
|
-
* A utility to visually hide content, while still making accessible to screenreaders
|
|
6
|
-
* See https://a11y-101.com/development/skip-link
|
|
7
|
-
*/
|
|
8
|
-
exports.accessibleHide = {
|
|
9
|
-
clip: 'rect(1px, 1px, 1px, 1px)',
|
|
10
|
-
clipPath: 'polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px)',
|
|
11
|
-
position: 'absolute',
|
|
12
|
-
overflow: 'hidden',
|
|
13
|
-
whiteSpace: 'nowrap',
|
|
14
|
-
height: '1px',
|
|
15
|
-
width: '1px',
|
|
16
|
-
margin: '-1px',
|
|
17
|
-
padding: 0,
|
|
18
|
-
border: 0,
|
|
19
|
-
};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { CSSProperties } from '@workday/canvas-kit-react/tokens';
|
|
2
|
-
/**
|
|
3
|
-
* A utility to visually hide content, while still making accessible to screenreaders
|
|
4
|
-
* See https://a11y-101.com/development/skip-link
|
|
5
|
-
*/
|
|
6
|
-
export declare const accessibleHide: CSSProperties;
|
|
7
|
-
//# sourceMappingURL=accessibleHide.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"accessibleHide.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/accessibleHide.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAE/D;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,aAW5B,CAAC"}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* A utility to visually hide content, while still making accessible to screenreaders
|
|
3
|
-
* See https://a11y-101.com/development/skip-link
|
|
4
|
-
*/
|
|
5
|
-
export const accessibleHide = {
|
|
6
|
-
clip: 'rect(1px, 1px, 1px, 1px)',
|
|
7
|
-
clipPath: 'polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px)',
|
|
8
|
-
position: 'absolute',
|
|
9
|
-
overflow: 'hidden',
|
|
10
|
-
whiteSpace: 'nowrap',
|
|
11
|
-
height: '1px',
|
|
12
|
-
width: '1px',
|
|
13
|
-
margin: '-1px',
|
|
14
|
-
padding: 0,
|
|
15
|
-
border: 0,
|
|
16
|
-
};
|