@workday/canvas-kit-react 10.3.2 → 10.3.5
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/collection/lib/useCursorListModel.tsx +86 -90
- package/collection/lib/useListItemAllowChildStrings.ts +3 -3
- package/collection/lib/useListRenderItem.tsx +1 -1
- package/combobox/lib/hooks/useComboboxKeyboardTypeAhead.ts +3 -3
- package/combobox/lib/hooks/useComboboxModel.tsx +1 -2
- package/common/README.md +32 -14
- package/common/lib/styles/errorRing.ts +2 -2
- package/common/lib/styles/focusRing.ts +4 -17
- package/dist/commonjs/avatar/lib/Avatar.js +1 -1
- package/dist/commonjs/banner/lib/Banner.js +1 -1
- package/dist/commonjs/button/lib/BaseButton.js +22 -22
- 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/button/lib/ToolbarDropdownButton.js +6 -1
- package/dist/commonjs/button/lib/ToolbarIconButton.js +6 -1
- package/dist/commonjs/button/lib/deprecated_Button.js +2 -2
- package/dist/commonjs/checkbox/lib/Checkbox.js +14 -2
- package/dist/commonjs/collection/lib/useCursorListModel.d.ts.map +1 -1
- package/dist/commonjs/collection/lib/useListItemAllowChildStrings.d.ts +2 -1
- package/dist/commonjs/collection/lib/useListItemAllowChildStrings.d.ts.map +1 -1
- package/dist/commonjs/collection/lib/useListItemAllowChildStrings.js +1 -1
- package/dist/commonjs/collection/lib/useListRenderItem.js +1 -1
- package/dist/commonjs/combobox/lib/hooks/useComboboxKeyboardTypeAhead.js +2 -3
- package/dist/commonjs/combobox/lib/hooks/useComboboxModel.d.ts.map +1 -1
- package/dist/commonjs/combobox/lib/hooks/useComboboxModel.js +1 -2
- package/dist/commonjs/common/lib/AccessibleHide.js +1 -1
- package/dist/commonjs/common/lib/CanvasProvider.js +1 -1
- package/dist/commonjs/common/lib/styles/errorRing.js +2 -2
- package/dist/commonjs/common/lib/styles/focusRing.d.ts.map +1 -1
- package/dist/commonjs/common/lib/styles/focusRing.js +5 -16
- package/dist/commonjs/radio/lib/Radio.js +17 -3
- package/dist/commonjs/select/lib/Select.d.ts +2 -1
- package/dist/commonjs/select/lib/Select.d.ts.map +1 -1
- package/dist/commonjs/select/lib/Select.js +5 -3
- package/dist/commonjs/select/lib/hooks/useSelectInput.d.ts +6 -1
- package/dist/commonjs/select/lib/hooks/useSelectInput.d.ts.map +1 -1
- package/dist/commonjs/select/lib/hooks/useSelectInput.js +45 -4
- package/dist/commonjs/select/lib/hooks/useSelectModel.d.ts.map +1 -1
- package/dist/commonjs/select/lib/hooks/useSelectModel.js +1 -2
- package/dist/commonjs/switch/lib/Switch.js +2 -2
- package/dist/commonjs/tabs/lib/TabsItem.js +1 -1
- package/dist/commonjs/text-input/lib/TextInput.js +3 -3
- package/dist/es6/avatar/lib/Avatar.js +1 -1
- package/dist/es6/banner/lib/Banner.js +1 -1
- package/dist/es6/button/lib/BaseButton.js +22 -22
- 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/button/lib/ToolbarDropdownButton.js +6 -1
- package/dist/es6/button/lib/ToolbarIconButton.js +6 -1
- package/dist/es6/button/lib/deprecated_Button.js +2 -2
- package/dist/es6/checkbox/lib/Checkbox.js +14 -2
- package/dist/es6/collection/lib/useCursorListModel.d.ts.map +1 -1
- package/dist/es6/collection/lib/useListItemAllowChildStrings.d.ts +2 -1
- package/dist/es6/collection/lib/useListItemAllowChildStrings.d.ts.map +1 -1
- package/dist/es6/collection/lib/useListItemAllowChildStrings.js +1 -1
- package/dist/es6/collection/lib/useListRenderItem.js +1 -1
- package/dist/es6/combobox/lib/hooks/useComboboxKeyboardTypeAhead.js +2 -3
- package/dist/es6/combobox/lib/hooks/useComboboxModel.d.ts.map +1 -1
- package/dist/es6/combobox/lib/hooks/useComboboxModel.js +1 -2
- package/dist/es6/common/lib/AccessibleHide.js +1 -1
- package/dist/es6/common/lib/CanvasProvider.js +1 -1
- package/dist/es6/common/lib/styles/errorRing.js +2 -2
- package/dist/es6/common/lib/styles/focusRing.d.ts.map +1 -1
- package/dist/es6/common/lib/styles/focusRing.js +5 -16
- package/dist/es6/radio/lib/Radio.js +17 -3
- package/dist/es6/select/lib/Select.d.ts +2 -1
- package/dist/es6/select/lib/Select.d.ts.map +1 -1
- package/dist/es6/select/lib/Select.js +5 -3
- package/dist/es6/select/lib/hooks/useSelectInput.d.ts +6 -1
- package/dist/es6/select/lib/hooks/useSelectInput.d.ts.map +1 -1
- package/dist/es6/select/lib/hooks/useSelectInput.js +43 -5
- package/dist/es6/select/lib/hooks/useSelectModel.d.ts.map +1 -1
- package/dist/es6/select/lib/hooks/useSelectModel.js +1 -2
- package/dist/es6/switch/lib/Switch.js +2 -2
- package/dist/es6/tabs/lib/TabsItem.js +1 -1
- package/dist/es6/text-input/lib/TextInput.js +3 -3
- package/package.json +4 -4
- package/select/lib/Select.tsx +50 -4
- package/select/lib/hooks/useSelectInput.ts +86 -44
- package/select/lib/hooks/useSelectModel.tsx +1 -2
- package/text-input/lib/TextInput.tsx +3 -3
|
@@ -37,10 +37,10 @@ const StyledTextInput = common_1.styled('input')({
|
|
|
37
37
|
'&::placeholder': {
|
|
38
38
|
color: tokens_1.inputColors.placeholder,
|
|
39
39
|
},
|
|
40
|
-
'&:hover': {
|
|
40
|
+
'&:hover, &.hover': {
|
|
41
41
|
borderColor: tokens_1.inputColors.hoverBorder,
|
|
42
42
|
},
|
|
43
|
-
'&:focus:not([disabled])': {
|
|
43
|
+
'&:focus-visible:not([disabled]), &.focus:not([disabled]), &:focus:not([disabled])': {
|
|
44
44
|
borderColor: tokens_1.inputColors.focusBorder,
|
|
45
45
|
boxShadow: `inset 0 0 0 1px ${tokens_1.inputColors.focusBorder}`,
|
|
46
46
|
outline: 'none',
|
|
@@ -63,7 +63,7 @@ const StyledTextInput = common_1.styled('input')({
|
|
|
63
63
|
width: '100%',
|
|
64
64
|
}, ({ theme, error }) => {
|
|
65
65
|
return {
|
|
66
|
-
'&:focus:not([disabled])': {
|
|
66
|
+
'&:focus-visible:not([disabled]), &.focus:not([disabled])': {
|
|
67
67
|
borderColor: theme.canvas.palette.common.focusOutline,
|
|
68
68
|
boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
|
|
69
69
|
outline: 'none',
|
|
@@ -26,7 +26,7 @@ const StyledContainer = styled('button', {
|
|
|
26
26
|
'&:not([disabled])': {
|
|
27
27
|
'&:focus': {
|
|
28
28
|
outline: 'none',
|
|
29
|
-
...{
|
|
29
|
+
...focusRing({ separation: 2 }),
|
|
30
30
|
},
|
|
31
31
|
},
|
|
32
32
|
...hideMouseFocus,
|
|
@@ -13,7 +13,7 @@ const styles = {
|
|
|
13
13
|
transition: 'background-color 120ms',
|
|
14
14
|
'&:focus': {
|
|
15
15
|
outline: 'none',
|
|
16
|
-
...{
|
|
16
|
+
...focusRing({ separation: 2 }),
|
|
17
17
|
},
|
|
18
18
|
...hideMouseFocus,
|
|
19
19
|
};
|
|
@@ -9,16 +9,16 @@ import { base, brand, system } from '@workday/canvas-tokens-web';
|
|
|
9
9
|
* Temporary css variables to be used across all Buttons.
|
|
10
10
|
*/
|
|
11
11
|
export const buttonVars = {
|
|
12
|
-
default: createVars({ id: "
|
|
13
|
-
hover: createVars({ id: "
|
|
14
|
-
active: createVars({ id: "
|
|
15
|
-
focus: createVars({ id: "
|
|
16
|
-
disabled: createVars({ id: "
|
|
12
|
+
default: createVars({ id: "cnvs-button-default", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
|
|
13
|
+
hover: createVars({ id: "cnvs-button-hover", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
|
|
14
|
+
active: createVars({ id: "cnvs-button-active", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
|
|
15
|
+
focus: createVars({ id: "cnvs-button-focus", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
|
|
16
|
+
disabled: createVars({ id: "cnvs-button-disabled", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
|
|
17
17
|
};
|
|
18
18
|
/**
|
|
19
19
|
* Base styles for Buttons.
|
|
20
20
|
*/
|
|
21
|
-
const baseButtonStyles = createStyles({ name: "
|
|
21
|
+
const baseButtonStyles = createStyles({ name: "ejxkmr", 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(--cnvs-button-default-background, transparent);color:var(--cnvs-button-default-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));border-width:1px;border-style:solid;gap:var(--cnvs-sys-space-x2, calc(0.25rem * 2));border-color:var(--cnvs-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(--cnvs-button-default-borderRadius, var(--cnvs-sys-shape-round));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(--cnvs-button-disabled-opacity, 1);}& span .wd-icon-fill{transition-duration:40ms;fill:var(--cnvs-button-default-icon, var(--cnvs-base-palette-black-pepper-400));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--cnvs-button-default-icon, var(--cnvs-base-palette-black-pepper-400));}&:focus-visible, &.focus{background-color:var(--cnvs-button-focus-background, transparent);border-color:var(--cnvs-button-focus-border, transparent);color:var(--cnvs-button-focus-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));& span .wd-icon-fill{fill:var(--cnvs-button-focus-icon, var(--cnvs-base-palette-black-pepper-400));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--cnvs-button-focus-icon, var(--cnvs-base-palette-black-pepper-400));}box-shadow:0 0 0 2px var(--cnvs-button-focus-boxShadowInner, var(--cnvs-base-palette-french-vanilla-100)), 0 0 0 4px var(--cnvs-button-focus-boxShadowOuter, var(--cnvs-brand-primary-base));}&:hover, &.hover{background-color:var(--cnvs-button-hover-background, var(--cnvs-base-palette-black-pepper-500));border-color:var(--cnvs-button-hover-border, transparent);color:var(--cnvs-button-hover-label-emotion-safe, var(--cnvs-base-palette-black-pepper-500));& span .wd-icon-fill{fill:var(--cnvs-button-hover-icon, var(--cnvs-base-palette-black-pepper-500));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--cnvs-button-hover-icon, var(--cnvs-base-palette-black-pepper-500));}}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--cnvs-button-active-background, transparent);border-color:var(--cnvs-button-active-border, transparent);color:var(--cnvs-button-active-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));& span .wd-icon-fill{fill:var(--cnvs-button-active-icon, var(--cnvs-base-palette-black-pepper-400));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--cnvs-button-active-icon, var(--cnvs-base-palette-black-pepper-400));}}&:disabled, &.disabled{background-color:var(--cnvs-button-disabled-background, transparent);border-color:var(--cnvs-button-disabled-border, transparent);color:var(--cnvs-button-disabled-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));& span .wd-icon-fill{fill:var(--cnvs-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--cnvs-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400));}}" });
|
|
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: "hi4l2", 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: "1vuu82a", 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: "1tv5kp2", 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: "1bibd9a", 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: "jxl8ry", 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: "17x7zv9", styles: "padding:0;min-width:calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) * 3);" }),
|
|
37
|
+
largeStart: createStyles({ name: "6nuy87", 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: "sco5n0", 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: "184b2d3", styles: "padding:0;min-width:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" }),
|
|
40
|
+
mediumStart: createStyles({ name: "1spsu3s", 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: "aawort", 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: "4un8za", styles: "padding:0;min-width:var(--cnvs-sys-space-x8, calc(0.25rem * 8));" }),
|
|
43
|
+
smallStart: createStyles({ name: "996eys", 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: "1khaens", 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: "uyhf8a", styles: "padding:0;min-width:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
|
|
46
|
+
extraSmallStart: createStyles({ name: "1m2nnkm", 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: "11knxyn", 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: "vj7j6z", styles: "--cnvs-button-default-background:var(--cnvs-brand-error-base, rgba(222,46,33,1));--cnvs-button-default-border:transparent;--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--cnvs-button-default-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-default-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));&:hover, &.hover{--cnvs-button-hover-background:var(--cnvs-brand-error-dark, rgba(163,27,18,1));--cnvs-button-hover-border:transparent;--cnvs-button-hover-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-hover-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));}&:focus-visible, &.focus{--cnvs-button-focus-background:var(--cnvs-brand-error-base, rgba(222,46,33,1));--cnvs-button-focus-border:transparent;--cnvs-button-focus-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-focus-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:active, &.active{--cnvs-button-active-background:var(--cnvs-brand-error-darkest, rgba(128,22,14,1));--cnvs-button-active-border:transparent;--cnvs-button-active-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-active-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));}&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled{--cnvs-button-disabled-background:var(--cnvs-brand-error-light, rgba(252,201,197,1));--cnvs-button-disabled-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-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: "1pt3ej4", styles: "--cnvs-button-default-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-default-border:transparent;--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--cnvs-button-default-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-default-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-hover-background:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--cnvs-button-hover-border:transparent;--cnvs-button-hover-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-focus-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-focus-border:transparent;--cnvs-button-focus-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-focus-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--cnvs-button-active-background:var(--cnvs-brand-primary-darkest, rgba(0,67,135,1));--cnvs-button-active-border:transparent;--cnvs-button-active-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-disabled-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-disabled-border:transparent;--cnvs-button-disabled-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-disabled-opacity:0.4;--cnvs-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: "a2rvr", styles: "--cnvs-button-default-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--cnvs-button-default-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--cnvs-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--cnvs-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-disabled-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-disabled-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-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: "193160q", styles: "--cnvs-button-default-background:transparent;--cnvs-button-default-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--cnvs-button-default-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-background:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-focus-background:transparent;--cnvs-button-focus-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--cnvs-button-active-background:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-active-border:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-active-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-disabled-background:transparent;--cnvs-button-disabled-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-disabled-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-disabled-opacity:0.4;--cnvs-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: "tuwrzc", styles: "--cnvs-button-default-background:transparent;--cnvs-button-default-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-default-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-default-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--cnvs-button-hover-border:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--cnvs-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-focus-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--cnvs-button-active-border:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--cnvs-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-disabled-background:transparent;--cnvs-button-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-disabled-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-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: "fuwbd5", styles: "padding-inline:var(--cnvs-sys-space-x2, calc(0.25rem * 2));min-width:auto;text-decoration:underline;border:0px;--cnvs-button-default-background:transparent;--cnvs-button-default-border:transparent;--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-x1, 0.25rem);--cnvs-button-default-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-background:var(--cnvs-base-palette-soap-200, rgba(240,241,242,1));--cnvs-button-hover-border:transparent;--cnvs-button-hover-label-emotion-safe:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--cnvs-button-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-focus-background:transparent;--cnvs-button-focus-border:transparent;--cnvs-button-focus-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-focus-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--cnvs-button-active-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--cnvs-button-active-border:transparent;--cnvs-button-active-label-emotion-safe:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--cnvs-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-disabled-background:transparent;--cnvs-button-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-disabled-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-disabled-opacity:0.4;&:focus-visible, &.focus{box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}" });
|
|
10
10
|
export const tertiaryButtonModifiers = createModifiers({
|
|
11
11
|
isThemeable: {
|
|
12
|
-
true: createStyles({ name: "
|
|
12
|
+
true: createStyles({ name: "6a60el", styles: "--cnvs-button-default-icon:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-hover-icon:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--cnvs-button-focus-icon:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-active-icon:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--cnvs-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: "1n00uny", styles: "--cnvs-button-default-background:transparent;--cnvs-button-default-border:transparent;--cnvs-button-default-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-default-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-hover-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-hover-border:transparent;--cnvs-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-border:transparent;--cnvs-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-active-background:var(--cnvs-base-palette-soap-200, rgba(240,241,242,1));--cnvs-button-active-border:transparent;--cnvs-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-active-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-disabled-background:transparent;--cnvs-button-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-disabled-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-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), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100);}" }),
|
|
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: "xih0j4", styles: "border-radius:999px;padding:0;min-width:calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) * 3);" }),
|
|
19
|
+
largeStart: createStyles({ name: "13w6ubi", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
20
|
+
largeEnd: createStyles({ name: "1g2rd08", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
21
|
+
mediumOnly: createStyles({ name: "10i0ly8", styles: "padding:0;min-width:2.5rem;border-radius:999px;" }),
|
|
22
|
+
mediumStart: createStyles({ name: "13w6ubi", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
23
|
+
mediumEnd: createStyles({ name: "1g2rd08", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
24
|
+
smallOnly: createStyles({ name: "18m1kdv", styles: "padding:0;min-width:2rem;border-radius:999px;" }),
|
|
25
|
+
smallStart: createStyles({ name: "13w6ubi", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
26
|
+
smallEnd: createStyles({ name: "1g2rd08", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
27
|
+
extraSmallOnly: createStyles({ name: "1pnzsxn", styles: "padding:0;min-width:1.5rem;border-radius:999px;" }),
|
|
28
|
+
extraSmallStart: createStyles({ name: "1ixecau", styles: "padding-inline-start:0.25rem;padding-inline-end:0.5rem;" }),
|
|
29
|
+
extraSmallEnd: createStyles({ name: "f1t4k2", styles: "padding-inline-start:0.5rem;padding-inline-end:0.25rem;" }),
|
|
30
30
|
},
|
|
31
31
|
});
|
|
32
32
|
export const TertiaryButton = createComponent('button')({
|
|
@@ -25,7 +25,12 @@ const StyledToolbarDropdownButton = styled(BaseButton)({
|
|
|
25
25
|
width: 18, // decrease the space between a custom icon and the chevron per design
|
|
26
26
|
},
|
|
27
27
|
'&:focus-visible, &.focus': {
|
|
28
|
-
...
|
|
28
|
+
...focusRing({
|
|
29
|
+
width: 2,
|
|
30
|
+
separation: 0,
|
|
31
|
+
innerColor: 'transparent',
|
|
32
|
+
outerColor: brand.common.focusOutline,
|
|
33
|
+
}),
|
|
29
34
|
},
|
|
30
35
|
});
|
|
31
36
|
export const ToolbarDropdownButton = createComponent('button')({
|
|
@@ -10,7 +10,12 @@ const StyledToolbarIconButton = styled(BaseButton)({
|
|
|
10
10
|
height: 20,
|
|
11
11
|
},
|
|
12
12
|
'&:focus-visible, &.focus': {
|
|
13
|
-
...
|
|
13
|
+
...focusRing({
|
|
14
|
+
width: 2,
|
|
15
|
+
separation: 0,
|
|
16
|
+
innerColor: 'transparent',
|
|
17
|
+
outerColor: brand.common.focusOutline,
|
|
18
|
+
}),
|
|
14
19
|
},
|
|
15
20
|
});
|
|
16
21
|
export const ToolbarIconButton = createComponent('button')({
|
|
@@ -105,11 +105,11 @@ const Container = styled('button')({
|
|
|
105
105
|
'&:not([disabled])': {
|
|
106
106
|
'&:focus': {
|
|
107
107
|
borderColor: buttonColors.focusBorder,
|
|
108
|
-
...
|
|
108
|
+
...focusRing(),
|
|
109
109
|
},
|
|
110
110
|
'&:active': {
|
|
111
111
|
borderColor: buttonColors.activeBorder,
|
|
112
|
-
...
|
|
112
|
+
...focusRing(),
|
|
113
113
|
},
|
|
114
114
|
},
|
|
115
115
|
...mouseFocusBehavior({
|
|
@@ -76,10 +76,22 @@ const CheckboxInput = styled('input')(({ theme: { canvas: { palette: { primary:
|
|
|
76
76
|
borderColor: variant === 'inverse' ? colors.blackPepper400 : themePrimary.main,
|
|
77
77
|
borderWidth: '2px',
|
|
78
78
|
boxShadow: 'none',
|
|
79
|
-
...
|
|
79
|
+
...focusRing({
|
|
80
|
+
width: variant === 'inverse' ? 2 : 0,
|
|
81
|
+
separation: 0,
|
|
82
|
+
animate: false,
|
|
83
|
+
innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
|
|
84
|
+
outerColor: variant === 'inverse' ? colors.frenchVanilla100 : undefined,
|
|
85
|
+
}),
|
|
80
86
|
},
|
|
81
87
|
'&:checked:focus ~ div:first-of-type, &:indeterminate:focus ~ div:first-of-type': {
|
|
82
|
-
...
|
|
88
|
+
...focusRing({
|
|
89
|
+
width: 2,
|
|
90
|
+
separation: 2,
|
|
91
|
+
animate: false,
|
|
92
|
+
innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
|
|
93
|
+
outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
|
|
94
|
+
}),
|
|
83
95
|
borderColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main,
|
|
84
96
|
borderWidth: '2px',
|
|
85
97
|
'& span': {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCursorListModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useCursorListModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA0B,OAAO,EAAC,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAmB,IAAI,EAAC,MAAM,oBAAoB,CAAC;AAE1D,aAAK,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,kBAAkB,CAAC,EAAE,OAAO,CAAC,CAAC;AAE5E;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC;0CACsC;IACtC,QAAQ,EAAE,mBAAmB,CAAC;IAC9B;mCAC+B;IAC/B,OAAO,EAAE,mBAAmB,CAAC;IAC7B,0CAA0C;IAC1C,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC;IAC/D;2FACuF;IACvF,OAAO,EAAE,mBAAmB,CAAC;IAC7B;uCACmC;IACnC,UAAU,EAAE,mBAAmB,CAAC;IAChC;+FAC2F;IAC3F,WAAW,EAAE,mBAAmB,CAAC;IACjC;0CACsC;IACtC,cAAc,EAAE,mBAAmB,CAAC;IACpC;kBACc;IACd,aAAa,EAAE,mBAAmB,CAAC;IACnC;kBACc;IACd,YAAY,EAAE,mBAAmB,CAAC;IAClC;;yEAEqE;IACrE,WAAW,EAAE,mBAAmB,CAAC;IACjC;;gFAE4E;IAC5E,eAAe,EAAE,mBAAmB,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,uBAAuB,YAAa,iBAAiB,sBAAY,CAAC;AAE/E;;GAEG;AACH,oBAAY,mBAAmB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,MAAM,CAAC;AAEpF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,mBAAuC,CAAC;AAC/D;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,mBAA4D,CAAC;AAEnF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,mBAM3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,mBAU1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,mBAK7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,mBAMzB,CAAC;AAQF,eAAO,MAAM,qBAAqB,
|
|
1
|
+
{"version":3,"file":"useCursorListModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useCursorListModel.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { Item } from '@workday/canvas-kit-react/collection';
|
|
1
2
|
/**
|
|
2
3
|
* This elemProps hook allows for children values to be considered identifiers if the children are
|
|
3
4
|
* strings. This can be useful for autocomplete or select components that allow string values. This
|
|
@@ -47,7 +48,7 @@ export declare const useListItemAllowChildStrings: import("@workday/canvas-kit-r
|
|
|
47
48
|
indexRef: import("react").MutableRefObject<number>;
|
|
48
49
|
nonInteractiveIds: string[];
|
|
49
50
|
isVirtualized: boolean;
|
|
50
|
-
items:
|
|
51
|
+
items: Item<any>[];
|
|
51
52
|
};
|
|
52
53
|
events: {
|
|
53
54
|
select(data: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useListItemAllowChildStrings.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemAllowChildStrings.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useListItemAllowChildStrings.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemAllowChildStrings.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,IAAI,EAAC,MAAM,sCAAsC,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASxC,CAAC"}
|
|
@@ -27,7 +27,7 @@ import { useListModel } from '@workday/canvas-kit-react/collection';
|
|
|
27
27
|
*/
|
|
28
28
|
export const useListItemAllowChildStrings = createElemPropsHook(useListModel)((_, __, elemProps = {}) => {
|
|
29
29
|
const props = {};
|
|
30
|
-
if (!elemProps['data-id'] && typeof elemProps.children === 'string') {
|
|
30
|
+
if (!elemProps['data-id'] && !elemProps.item && typeof elemProps.children === 'string') {
|
|
31
31
|
props['data-id'] = elemProps.children;
|
|
32
32
|
}
|
|
33
33
|
return props;
|
|
@@ -46,12 +46,11 @@ export const useComboboxKeyboardTypeAhead = createElemPropsHook(useComboboxModel
|
|
|
46
46
|
}
|
|
47
47
|
return -1;
|
|
48
48
|
};
|
|
49
|
-
const
|
|
50
|
-
const cursorFocusedIndex = currentItem.index;
|
|
49
|
+
const currentItemIndex = model.state.items.length > 0 ? model.navigation.getItem(model.state.cursorId, model).index : 0;
|
|
51
50
|
const handleKeyboardTypeAhead = (key, numOptions) => {
|
|
52
51
|
// If the starting point is beyond the list of options, reset it
|
|
53
52
|
// to the beginning of the list
|
|
54
|
-
const startNumber = keySofar.current.length === 0 ?
|
|
53
|
+
const startNumber = keySofar.current.length === 0 ? currentItemIndex + 1 : currentItemIndex;
|
|
55
54
|
const start = startNumber === numOptions ? 0 : startNumber;
|
|
56
55
|
// Keeps track of the current key types and adds to it
|
|
57
56
|
// if you type `de` vs `d` for denver
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useComboboxModel.d.ts","sourceRoot":"","sources":["../../../../../combobox/lib/hooks/useComboboxModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;;;;GAMG;AACH,eAAO,MAAM,aAAa;;oBAIN,MAAM,WAAW,CAAC,gBAAgB,CAAC;;sBAAnC,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;oBAAnC,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;sBAAnC,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;EAYrD,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;oBA1BT,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"useComboboxModel.d.ts","sourceRoot":"","sources":["../../../../../combobox/lib/hooks/useComboboxModel.tsx"],"names":[],"mappings":"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"}
|
|
@@ -49,8 +49,7 @@ export const useComboboxModel = createModelHook({
|
|
|
49
49
|
const input = useInputModel(config);
|
|
50
50
|
const menu = useMenuModel(useMenuModel.mergeConfig(config, {
|
|
51
51
|
onSelect({ id }) {
|
|
52
|
-
|
|
53
|
-
dispatchInputEvent(menu.state.targetRef.current, textValue);
|
|
52
|
+
dispatchInputEvent(menu.state.targetRef.current, id);
|
|
54
53
|
},
|
|
55
54
|
}));
|
|
56
55
|
const [width, setWidth] = React.useState(0);
|
|
@@ -17,7 +17,7 @@ export const accessibleHide = {
|
|
|
17
17
|
padding: 0,
|
|
18
18
|
border: 0,
|
|
19
19
|
};
|
|
20
|
-
const accessibleHideStyles = createStyles({ name: "
|
|
20
|
+
const accessibleHideStyles = createStyles({ name: "1jqqftm", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;width:1px;margin:-1px;padding:0px;border:0px;" });
|
|
21
21
|
/**
|
|
22
22
|
* A convenient component wrapper to visually hide content, while still making it accessible to screen readers
|
|
23
23
|
*/
|
|
@@ -6,7 +6,7 @@ import { brand } from '@workday/canvas-tokens-web';
|
|
|
6
6
|
import { cache } from '@emotion/css';
|
|
7
7
|
import { createStyles } from '@workday/canvas-kit-styling';
|
|
8
8
|
// copied from brand/_variables.css
|
|
9
|
-
const defaultBranding = createStyles({ name: "
|
|
9
|
+
const defaultBranding = createStyles({ name: "192nfdp", 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',
|
|
@@ -49,10 +49,10 @@ export function errorRing(error, theme) {
|
|
|
49
49
|
borderColor: errorColors.outer,
|
|
50
50
|
transition: '100ms box-shadow',
|
|
51
51
|
boxShadow: errorBoxShadow,
|
|
52
|
-
'&:hover, &:disabled': {
|
|
52
|
+
'&:hover, &:disabled, &.hover, &.disabled': {
|
|
53
53
|
borderColor: errorColors.outer,
|
|
54
54
|
},
|
|
55
|
-
'&:focus:not([disabled])': {
|
|
55
|
+
'&:focus-visible:not([disabled]), &.focus:not([disabled])': {
|
|
56
56
|
borderColor: errorColors.outer,
|
|
57
57
|
boxShadow: `${errorBoxShadow},
|
|
58
58
|
0 0 0 2px ${colors.frenchVanilla100},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focusRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/focusRing.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"focusRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/focusRing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIhD,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA2CD;;;;;;;;;;;;;;GAcG;AAEH;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,OAAO,GAAE,gBAAqB,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,CAoBlF"}
|
|
@@ -1,16 +1,14 @@
|
|
|
1
|
-
import { keyframes } from '@emotion/react';
|
|
2
|
-
import { canvas } from '@workday/canvas-kit-react/tokens';
|
|
3
1
|
import { cssVar } from '@workday/canvas-kit-styling';
|
|
4
|
-
import {
|
|
5
|
-
function calculateFocusRing({ width, separation,
|
|
2
|
+
import { base, brand } from '@workday/canvas-tokens-web';
|
|
3
|
+
function calculateFocusRing({ width, separation, inset, innerColor, outerColor, }) {
|
|
6
4
|
let boxShadow, innerWidth, outerWidth;
|
|
7
5
|
if (innerColor && innerColor.startsWith('--')) {
|
|
8
6
|
// eslint-disable-next-line no-param-reassign
|
|
9
|
-
innerColor = innerColor;
|
|
7
|
+
innerColor = cssVar(innerColor);
|
|
10
8
|
}
|
|
11
9
|
if (outerColor && outerColor.startsWith('--')) {
|
|
12
10
|
// eslint-disable-next-line no-param-reassign
|
|
13
|
-
outerColor = outerColor;
|
|
11
|
+
outerColor = cssVar(outerColor);
|
|
14
12
|
}
|
|
15
13
|
switch (inset) {
|
|
16
14
|
case 'outer':
|
|
@@ -29,13 +27,6 @@ function calculateFocusRing({ width, separation, animate, inset, innerColor, out
|
|
|
29
27
|
boxShadow = `0 0 0 ${innerWidth}px ${innerColor}, 0 0 0 ${outerWidth}px ${outerColor}`;
|
|
30
28
|
break;
|
|
31
29
|
}
|
|
32
|
-
if (animate) {
|
|
33
|
-
const fadeIn = keyframes({
|
|
34
|
-
'0%': { boxShadow },
|
|
35
|
-
'100%': { boxShadow },
|
|
36
|
-
});
|
|
37
|
-
return { animation: `${fadeIn} 100ms`, boxShadow };
|
|
38
|
-
}
|
|
39
30
|
return { boxShadow };
|
|
40
31
|
}
|
|
41
32
|
/**
|
|
@@ -61,9 +52,7 @@ function calculateFocusRing({ width, separation, animate, inset, innerColor, out
|
|
|
61
52
|
* @returns {CSSObject} the css object for the focus ring style
|
|
62
53
|
*/
|
|
63
54
|
export function focusRing(options = {}, theme) {
|
|
64
|
-
const { width = 2, separation = 0, animate = true, innerColor =
|
|
65
|
-
? theme.canvas.palette.common.focusOutline
|
|
66
|
-
: defaultCanvasTheme.palette.common.focusOutline, inset, } = options;
|
|
55
|
+
const { width = 2, separation = 0, animate = true, innerColor = base.frenchVanilla100, outerColor = brand.common.focusOutline, inset, } = options;
|
|
67
56
|
const args = {
|
|
68
57
|
width: width,
|
|
69
58
|
separation: separation,
|