@workday/canvas-kit-react 11.0.0-alpha.671-next.0 → 11.0.0-alpha.693-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/checkbox/lib/CheckBackground.tsx +48 -0
- package/checkbox/lib/Checkbox.tsx +18 -355
- package/checkbox/lib/CheckboxCheck.tsx +81 -0
- package/checkbox/lib/CheckboxContainer.tsx +58 -0
- package/checkbox/lib/CheckboxInput.tsx +279 -0
- package/checkbox/lib/CheckboxRipple.tsx +21 -0
- 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/useComboboxInput.ts +1 -0
- 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/badge/lib/CountBadge.js +8 -8
- 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/card/lib/Card.js +1 -1
- package/dist/commonjs/card/lib/CardHeading.js +1 -1
- package/dist/commonjs/checkbox/lib/CheckBackground.d.ts +10 -0
- package/dist/commonjs/checkbox/lib/CheckBackground.d.ts.map +1 -0
- package/dist/commonjs/checkbox/lib/CheckBackground.js +42 -0
- package/dist/commonjs/checkbox/lib/Checkbox.d.ts +3 -45
- package/dist/commonjs/checkbox/lib/Checkbox.d.ts.map +1 -1
- package/dist/commonjs/checkbox/lib/Checkbox.js +10 -204
- package/dist/commonjs/checkbox/lib/CheckboxCheck.d.ts +10 -0
- package/dist/commonjs/checkbox/lib/CheckboxCheck.d.ts.map +1 -0
- package/dist/commonjs/checkbox/lib/CheckboxCheck.js +51 -0
- package/dist/commonjs/checkbox/lib/CheckboxContainer.d.ts +13 -0
- package/dist/commonjs/checkbox/lib/CheckboxContainer.d.ts.map +1 -0
- package/dist/commonjs/checkbox/lib/CheckboxContainer.js +37 -0
- package/dist/commonjs/checkbox/lib/CheckboxInput.d.ts +48 -0
- package/dist/commonjs/checkbox/lib/CheckboxInput.d.ts.map +1 -0
- package/dist/commonjs/checkbox/lib/CheckboxInput.js +59 -0
- package/dist/commonjs/checkbox/lib/CheckboxRipple.d.ts +2 -0
- package/dist/commonjs/checkbox/lib/CheckboxRipple.d.ts.map +1 -0
- package/dist/commonjs/checkbox/lib/CheckboxRipple.js +33 -0
- 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/useComboboxInput.d.ts +1 -0
- package/dist/commonjs/combobox/lib/hooks/useComboboxInput.d.ts.map +1 -1
- package/dist/commonjs/combobox/lib/hooks/useComboboxInput.js +1 -0
- 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/form-field/lib/Label.js +3 -7
- package/dist/commonjs/loading-dots/lib/LoadingDots.js +3 -3
- 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 +7 -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/lib/LabelText.js +24 -24
- package/dist/commonjs/text/lib/Text.js +15 -15
- package/dist/commonjs/text-input/lib/TextInput.js +3 -3
- package/dist/commonjs/tooltip/lib/OverflowTooltip.d.ts.map +1 -1
- package/dist/commonjs/tooltip/lib/OverflowTooltip.js +3 -2
- package/dist/es6/avatar/lib/Avatar.js +1 -1
- package/dist/es6/badge/lib/CountBadge.js +7 -7
- 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/card/lib/Card.js +1 -1
- package/dist/es6/card/lib/CardHeading.js +1 -1
- package/dist/es6/checkbox/lib/CheckBackground.d.ts +10 -0
- package/dist/es6/checkbox/lib/CheckBackground.d.ts.map +1 -0
- package/dist/es6/checkbox/lib/CheckBackground.js +20 -0
- package/dist/es6/checkbox/lib/Checkbox.d.ts +3 -45
- package/dist/es6/checkbox/lib/Checkbox.d.ts.map +1 -1
- package/dist/es6/checkbox/lib/Checkbox.js +11 -205
- package/dist/es6/checkbox/lib/CheckboxCheck.d.ts +10 -0
- package/dist/es6/checkbox/lib/CheckboxCheck.d.ts.map +1 -0
- package/dist/es6/checkbox/lib/CheckboxCheck.js +29 -0
- package/dist/es6/checkbox/lib/CheckboxContainer.d.ts +13 -0
- package/dist/es6/checkbox/lib/CheckboxContainer.d.ts.map +1 -0
- package/dist/es6/checkbox/lib/CheckboxContainer.js +15 -0
- package/dist/es6/checkbox/lib/CheckboxInput.d.ts +48 -0
- package/dist/es6/checkbox/lib/CheckboxInput.d.ts.map +1 -0
- package/dist/es6/checkbox/lib/CheckboxInput.js +37 -0
- package/dist/es6/checkbox/lib/CheckboxRipple.d.ts +2 -0
- package/dist/es6/checkbox/lib/CheckboxRipple.d.ts.map +1 -0
- package/dist/es6/checkbox/lib/CheckboxRipple.js +11 -0
- 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/useComboboxInput.d.ts +1 -0
- package/dist/es6/combobox/lib/hooks/useComboboxInput.d.ts.map +1 -1
- package/dist/es6/combobox/lib/hooks/useComboboxInput.js +1 -0
- 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/form-field/lib/Label.js +3 -7
- package/dist/es6/loading-dots/lib/LoadingDots.js +2 -2
- 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 +7 -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/lib/LabelText.js +24 -24
- package/dist/es6/text/lib/Text.js +15 -15
- package/dist/es6/text-input/lib/TextInput.js +3 -3
- package/dist/es6/tooltip/lib/OverflowTooltip.d.ts.map +1 -1
- package/dist/es6/tooltip/lib/OverflowTooltip.js +3 -2
- package/form-field/lib/Label.tsx +10 -10
- package/package.json +4 -4
- package/select/lib/Select.tsx +51 -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
- package/tooltip/lib/OverflowTooltip.tsx +3 -2
|
@@ -72,8 +72,9 @@ exports.findEllipsisElement = findEllipsisElement;
|
|
|
72
72
|
const isOverflowed = (element) => {
|
|
73
73
|
const overflowElement = exports.findEllipsisElement(element) || exports.findOverflowElement(element);
|
|
74
74
|
if (overflowElement) {
|
|
75
|
-
|
|
76
|
-
|
|
75
|
+
const clientRect = overflowElement.getBoundingClientRect();
|
|
76
|
+
return (overflowElement.scrollWidth > clientRect.width ||
|
|
77
|
+
overflowElement.scrollHeight > clientRect.height);
|
|
77
78
|
}
|
|
78
79
|
return false;
|
|
79
80
|
};
|
|
@@ -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,
|
|
@@ -4,14 +4,14 @@ import { handleCsProp, createStencil, px2rem, keyframes } from '@workday/canvas-
|
|
|
4
4
|
import { base, system } from '@workday/canvas-tokens-web';
|
|
5
5
|
const grow = keyframes({ name: "b0dw69", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
|
|
6
6
|
const countBadgeStencil = createStencil({
|
|
7
|
-
base: { name: "
|
|
7
|
+
base: { name: "n9a3hm", styles: "align-items:center;animation:animation-b0dw69 0.2s ease;border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));box-sizing:border-box;display:inline-flex;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-size:var(--cnvs-sys-font-size-subtext-medium, 0.75rem);font-weight:var(--cnvs-sys-font-weight-bold, 700);height:1.25rem;justify-content:center;line-height:1.25rem;min-width:1.25rem;padding:0 0.375rem;" },
|
|
8
8
|
modifiers: {
|
|
9
|
-
|
|
10
|
-
default: { name: "
|
|
11
|
-
inverse: { name: "
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
}, "");
|
|
9
|
+
modifiers: {
|
|
10
|
+
default: { name: "ls097g", styles: "background:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));text-shadow:0 0 0.0625rem rgba(0,0,0, 0.35);" },
|
|
11
|
+
inverse: { name: "lr1pbf", styles: "background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));box-shadow:0 0.0625rem 0.125rem rgba(0,0,0, 0.25);color:var(--cnvs-base-palette-blueberry-400, rgba(8,117,225,1));" }
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}, "count-badge");
|
|
15
15
|
/**
|
|
16
16
|
* `CountBadge` provides a quantity-based summary with dynamic values.
|
|
17
17
|
*/
|
|
@@ -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: "i8ri11", styles: "font-family:\"R
|
|
|
27
27
|
*/
|
|
28
28
|
export const buttonModifiers = createModifiers({
|
|
29
29
|
size: {
|
|
30
|
-
large: createStyles({ name: "
|
|
31
|
-
medium: createStyles({ name: "
|
|
32
|
-
small: createStyles({ name: "
|
|
33
|
-
extraSmall: createStyles({ name: "
|
|
30
|
+
large: createStyles({ name: "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: "1qtsx01", 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-base, rgba(222,46,33,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));--cnvs-button-disabled-opacity:0.4;}" });
|
|
9
9
|
/**
|
|
10
10
|
* Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
|
|
11
11
|
* have significant consequences. They commonly appear in confirmation dialogs as the final
|
|
@@ -5,10 +5,10 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
|
5
5
|
import { createStyles, createModifiers } from '@workday/canvas-kit-styling';
|
|
6
6
|
import { base, brand, system } from '@workday/canvas-tokens-web';
|
|
7
7
|
import { Button } from './Button';
|
|
8
|
-
const primaryStyles = createStyles({ name: "
|
|
8
|
+
const primaryStyles = createStyles({ name: "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: "1ukv7d0", 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-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-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: "o529iz", 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-300, rgba(232,235,237,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-400, rgba(51,51,51,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-400, rgba(51,51,51,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-400, rgba(223,226,230,1));--cnvs-button-active-border:transparent;--cnvs-button-active-label-emotion-safe:var(--cnvs-brand-primary-darkest, rgba(0,67,135,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:transparent;--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: "1t7d7ry", 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-darkest, rgba(0,67,135,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({
|
|
@@ -5,7 +5,7 @@ import { createStyles } from '@workday/canvas-kit-styling';
|
|
|
5
5
|
import { base, system } from '@workday/canvas-tokens-web';
|
|
6
6
|
import { CardHeading } from './CardHeading';
|
|
7
7
|
import { CardBody } from './CardBody';
|
|
8
|
-
const cardBaseStyles = createStyles({ name: "
|
|
8
|
+
const cardBaseStyles = createStyles({ name: "1t9ablw", styles: "box-shadow:var(--cnvs-sys-depth-1, 0 0.0625rem 0.25rem 0 rgba(31,38,46,0.12),0 0.125rem 0.5rem 0 rgba(31,38,46,0.08));padding:var(--cnvs-sys-space-x8, calc(0.25rem * 8));background-color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));border:0.0625rem solid var(--cnvs-base-palette-soap-500, rgba(206,211,217,1));border-radius:var(--cnvs-sys-shape-x2, calc(0.25rem * 2));" });
|
|
9
9
|
/**
|
|
10
10
|
* `Card` is a container component that holds a {@link CardBody Card.Body} and an optional
|
|
11
11
|
* {@link CardHeading Card.Heading}. `Card` wraps a non-semantic `div` element. The element can be
|
|
@@ -4,7 +4,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
|
4
4
|
import { BodyText } from '@workday/canvas-kit-react/text';
|
|
5
5
|
import { createStyles } from '@workday/canvas-kit-styling';
|
|
6
6
|
import { system } from '@workday/canvas-tokens-web';
|
|
7
|
-
const cardHeadingBaseStyles = createStyles({ name: "
|
|
7
|
+
const cardHeadingBaseStyles = createStyles({ name: "1oy61zb", styles: "font-weight:var(--cnvs-sys-font-weight-bold, 700);margin-bottom:var(--cnvs-sys-space-x6, calc(0.25rem * 6));margin-top:0px;" });
|
|
8
8
|
export const CardHeading = createComponent('h3')({
|
|
9
9
|
displayName: 'Card.Heading',
|
|
10
10
|
Component: ({ children, ...elemProps }, ref, Element) => {
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { ErrorType } from '@workday/canvas-kit-react/common';
|
|
3
|
+
interface CheckBackgroundProps {
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
error?: ErrorType;
|
|
6
|
+
}
|
|
7
|
+
export declare const backgroundVars: import("@workday/canvas-kit-styling").CsVars<"inner" | "outer", never>;
|
|
8
|
+
export declare const CheckBackground: import("@workday/canvas-kit-react/common").ElementComponent<"div", CheckBackgroundProps>;
|
|
9
|
+
export {};
|
|
10
|
+
//# sourceMappingURL=CheckBackground.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CheckBackground.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/CheckBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAI5E,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,cAAc,wEAA+B,CAAC;AAgC3D,eAAO,MAAM,eAAe,0FAK1B,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { createComponent } from '@workday/canvas-kit-react/common';
|
|
3
|
+
import { calc, createStencil, createVars, px2rem, cssVar } from '@workday/canvas-kit-styling';
|
|
4
|
+
import { base, brand, system } from '@workday/canvas-tokens-web';
|
|
5
|
+
export const backgroundVars = createVars({ id: "cnvs-background", args: ["inner", "outer"] });
|
|
6
|
+
const checkboxBackgroundStencil = createStencil({
|
|
7
|
+
base: { name: "13c6rci", styles: "align-items:center;background-color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));border-radius:var(--cnvs-sys-shape-half, calc(0.25rem * 0.5));box-sizing:border-box;display:flex;height:calc(var(--cnvs-sys-space-x4) + 0.125rem);justify-content:center;padding:var(--cnvs-sys-space-zero, 0) calc(var(--cnvs-sys-space-x1) / 2);pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;width:calc(var(--cnvs-sys-space-x4) + 0.125rem);border:0.0625rem solid var(--cnvs-base-palette-licorice-200, rgba(123,133,143,1));" },
|
|
8
|
+
modifiers: {
|
|
9
|
+
modifiers: {
|
|
10
|
+
error: { name: "1oai5jc", styles: "--cnvs-background-inner:var(--cnvs-brand-error-base, var(--cnvs-base-palette-cinnamon-500));--cnvs-background-outer:transparent;" },
|
|
11
|
+
alert: { name: "6w2nb6", styles: "--cnvs-background-inner:var(--cnvs-brand-alert-base, var(--cnvs-base-palette-cantaloupe-600));--cnvs-background-outer:var(--cnvs-brand-alert-darkest, var(--cnvs-base-palette-cantaloupe-400));" }
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}, "checkbox-background");
|
|
15
|
+
export const CheckBackground = createComponent('div')({
|
|
16
|
+
displayName: 'CheckBackground',
|
|
17
|
+
Component: ({ error, children }) => {
|
|
18
|
+
return React.createElement("div", Object.assign({}, checkboxBackgroundStencil({ error })), children);
|
|
19
|
+
},
|
|
20
|
+
});
|
|
@@ -1,49 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
export interface CheckboxProps extends Themeable {
|
|
4
|
-
/**
|
|
5
|
-
* If true, set the Checkbox to the checked state.
|
|
6
|
-
* @default false
|
|
7
|
-
*/
|
|
8
|
-
checked?: boolean;
|
|
9
|
-
/**
|
|
10
|
-
* If true, set the Checkbox to the disabled state.
|
|
11
|
-
* @default false
|
|
12
|
-
*/
|
|
13
|
-
disabled?: boolean;
|
|
14
|
-
/**
|
|
15
|
-
* The HTML `id` of the underlying checkbox input element. This is required if `label` is defined as a non-empty string.
|
|
16
|
-
* @default {useUniqueId}
|
|
17
|
-
*/
|
|
18
|
-
id?: string;
|
|
19
|
-
/**
|
|
20
|
-
* The text of the Checkbox label.
|
|
21
|
-
* @default ''
|
|
22
|
-
*/
|
|
23
|
-
label?: string;
|
|
24
|
-
/**
|
|
25
|
-
* The function called when the Checkbox state changes.
|
|
26
|
-
*/
|
|
27
|
-
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
28
|
-
/**
|
|
29
|
-
* The value of the Checkbox.
|
|
30
|
-
*/
|
|
31
|
-
value?: string;
|
|
32
|
-
/**
|
|
33
|
-
* The type of error associated with the Checkbox (if applicable).
|
|
34
|
-
*/
|
|
35
|
-
error?: ErrorType;
|
|
36
|
-
/**
|
|
37
|
-
* If true, set the Checkbox to an indeterminate state. Use this on a Checkbox with nested child Checkboxes to denote that some (but not all) child Checkboxes are checked.
|
|
38
|
-
* @default false
|
|
39
|
-
*/
|
|
40
|
-
indeterminate?: boolean;
|
|
41
|
-
/**
|
|
42
|
-
* The variant for the checkbox
|
|
43
|
-
*/
|
|
44
|
-
variant?: 'inverse' | undefined;
|
|
45
|
-
}
|
|
1
|
+
import { ErrorType } from '@workday/canvas-kit-react/common';
|
|
2
|
+
import { CheckboxProps } from './CheckboxInput';
|
|
46
3
|
export declare const Checkbox: import("@workday/canvas-kit-react/common").ElementComponent<"input", CheckboxProps> & {
|
|
47
4
|
ErrorType: typeof ErrorType;
|
|
48
5
|
};
|
|
6
|
+
export { CheckboxProps };
|
|
49
7
|
//# sourceMappingURL=Checkbox.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/Checkbox.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAI1C,OAAO,EAAgB,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAE7D,eAAO,MAAM,QAAQ;;CA6BnB,CAAC;AAEH,OAAO,EAAC,aAAa,EAAC,CAAC"}
|