@workday/canvas-kit-react 11.0.0-alpha.662-next.0 → 11.0.0-alpha.667-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/commonjs/badge/lib/CountBadge.js +3 -3
- package/dist/commonjs/button/lib/BaseButton.js +17 -17
- package/dist/commonjs/button/lib/DeleteButton.js +1 -1
- package/dist/commonjs/button/lib/PrimaryButton.js +2 -2
- package/dist/commonjs/button/lib/SecondaryButton.js +2 -2
- package/dist/commonjs/button/lib/TertiaryButton.js +15 -15
- package/dist/commonjs/card/lib/Card.js +1 -1
- package/dist/commonjs/card/lib/CardHeading.js +1 -1
- package/dist/commonjs/common/lib/AccessibleHide.js +1 -1
- package/dist/commonjs/common/lib/CanvasProvider.js +1 -1
- package/dist/commonjs/form-field/lib/FormField.d.ts +2 -2
- package/dist/commonjs/form-field/lib/FormField.js +1 -1
- package/dist/commonjs/form-field/lib/Hint.d.ts +2 -2
- package/dist/commonjs/form-field/lib/Hint.js +1 -1
- package/dist/commonjs/form-field/lib/Label.d.ts +2 -2
- package/dist/commonjs/form-field/lib/Label.js +1 -1
- package/dist/commonjs/form-field/lib/types.d.ts +2 -2
- package/dist/commonjs/form-field/lib/types.js +1 -1
- package/dist/commonjs/loading-dots/lib/LoadingDots.d.ts +2 -2
- package/dist/commonjs/loading-dots/lib/LoadingDots.d.ts.map +1 -1
- package/dist/commonjs/loading-dots/lib/LoadingDots.js +19 -42
- package/dist/commonjs/popup/lib/hooks/useCloseOnOutsideClick.d.ts.map +1 -1
- package/dist/commonjs/popup/lib/hooks/useCloseOnOutsideClick.js +2 -0
- package/dist/commonjs/select/lib/Select.js +2 -2
- package/dist/commonjs/text/lib/LabelText.js +18 -18
- package/dist/commonjs/text/lib/Text.js +15 -15
- package/dist/es6/badge/lib/CountBadge.js +3 -3
- package/dist/es6/button/lib/BaseButton.js +17 -17
- package/dist/es6/button/lib/DeleteButton.js +1 -1
- package/dist/es6/button/lib/PrimaryButton.js +2 -2
- package/dist/es6/button/lib/SecondaryButton.js +2 -2
- package/dist/es6/button/lib/TertiaryButton.js +15 -15
- package/dist/es6/card/lib/Card.js +1 -1
- package/dist/es6/card/lib/CardHeading.js +1 -1
- package/dist/es6/common/lib/AccessibleHide.js +1 -1
- package/dist/es6/common/lib/CanvasProvider.js +1 -1
- package/dist/es6/form-field/lib/FormField.d.ts +2 -2
- package/dist/es6/form-field/lib/FormField.js +1 -1
- package/dist/es6/form-field/lib/Hint.d.ts +2 -2
- package/dist/es6/form-field/lib/Hint.js +1 -1
- package/dist/es6/form-field/lib/Label.d.ts +2 -2
- package/dist/es6/form-field/lib/Label.js +1 -1
- package/dist/es6/form-field/lib/types.d.ts +2 -2
- package/dist/es6/form-field/lib/types.js +1 -1
- package/dist/es6/loading-dots/lib/LoadingDots.d.ts +2 -2
- package/dist/es6/loading-dots/lib/LoadingDots.d.ts.map +1 -1
- package/dist/es6/loading-dots/lib/LoadingDots.js +20 -42
- package/dist/es6/popup/lib/hooks/useCloseOnOutsideClick.d.ts.map +1 -1
- package/dist/es6/popup/lib/hooks/useCloseOnOutsideClick.js +2 -0
- package/dist/es6/select/lib/Select.js +2 -2
- package/dist/es6/text/lib/LabelText.js +18 -18
- package/dist/es6/text/lib/Text.js +15 -15
- package/form-field/lib/FormField.tsx +2 -2
- package/form-field/lib/Hint.tsx +2 -2
- package/form-field/lib/Label.tsx +2 -2
- package/form-field/lib/types.ts +2 -2
- package/loading-dots/lib/LoadingDots.tsx +55 -54
- package/package.json +4 -4
- package/popup/lib/hooks/useCloseOnOutsideClick.ts +2 -0
- package/select/lib/Select.tsx +1 -1
|
@@ -1,55 +1,33 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
2
|
+
import { base, system } from '@workday/canvas-tokens-web';
|
|
3
|
+
import { createComponent } from '@workday/canvas-kit-react/common';
|
|
4
|
+
import { createStyles, handleCsProp, keyframes } from '@workday/canvas-kit-styling';
|
|
5
|
+
/**
|
|
6
|
+
* Duration of the sparkle dots loading (in ms).
|
|
7
|
+
*/
|
|
8
|
+
const ANIMATION_DURATION_MS = '1400';
|
|
5
9
|
/**
|
|
6
10
|
* Keyframe for the dots loading animation.
|
|
7
11
|
*/
|
|
8
|
-
const keyframesLoading = keyframes
|
|
9
|
-
|
|
10
|
-
80%,
|
|
11
|
-
100% {
|
|
12
|
-
transform: scale(0);
|
|
13
|
-
}
|
|
14
|
-
40% {
|
|
15
|
-
transform: scale(1);
|
|
16
|
-
}`;
|
|
12
|
+
const keyframesLoading = keyframes({ name: "zl77bl", styles: "0%, 80%, 100%{transform:scale(0);}40%{transform:scale(1);}" });
|
|
13
|
+
const loadingDotStyles = createStyles({ name: "krub25", styles: "background-color:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));width:var(--cnvs-sys-space-x4, calc(0.25rem * 4));height:var(--cnvs-sys-space-x4, calc(0.25rem * 4));font-size:var(--cnvs-sys-space-zero, 0);border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));transform:scale(0);display:inline-block;animation-name:animation-zl77bl;animation-duration:1400ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-fill-mode:both;&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(1400ms * (4/35));}&:nth-child(3){animation-delay:calc(1400ms * (8/35));}" });
|
|
17
14
|
/**
|
|
18
15
|
* The actual loading dot div.
|
|
19
16
|
*/
|
|
20
|
-
const LoadingAnimationDot =
|
|
21
|
-
backgroundColor: canvas.colors.soap400,
|
|
22
|
-
width: canvas.space.s,
|
|
23
|
-
height: canvas.space.s,
|
|
24
|
-
fontSize: '0px',
|
|
25
|
-
borderRadius: borderRadius.circle,
|
|
26
|
-
transform: 'scale(0)',
|
|
27
|
-
display: 'inline-block',
|
|
28
|
-
marginRight: canvas.space.xxs,
|
|
29
|
-
animationName: keyframesLoading,
|
|
30
|
-
animationDuration: '1400ms',
|
|
31
|
-
animationIterationCount: 'infinite',
|
|
32
|
-
animationTimingFunction: 'ease-in-out',
|
|
33
|
-
animationFillMode: 'both',
|
|
34
|
-
'&:last-child': {
|
|
35
|
-
marginRight: 0,
|
|
36
|
-
},
|
|
37
|
-
}, ({ animationDelay }) => ({
|
|
38
|
-
animationDelay: animationDelay + 'ms',
|
|
39
|
-
}));
|
|
17
|
+
const LoadingAnimationDot = () => React.createElement("div", { className: `${loadingDotStyles}` });
|
|
40
18
|
/**
|
|
41
19
|
* A simple container for the loading dots.
|
|
42
20
|
*/
|
|
43
|
-
const
|
|
44
|
-
display: 'inline-block',
|
|
45
|
-
});
|
|
21
|
+
const containerStyles = createStyles({ name: "krub26", styles: "display:inline-flex;gap:var(--cnvs-sys-space-x2, calc(0.25rem * 2));" });
|
|
46
22
|
/**
|
|
47
23
|
* A simple component that displays three horizontal dots, to be used when some data is loading.
|
|
48
24
|
*/
|
|
49
|
-
export
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
React.createElement(
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
25
|
+
export const LoadingDots = createComponent('div')({
|
|
26
|
+
displayName: 'LoadingDots',
|
|
27
|
+
Component: (elemProps, ref, Element) => {
|
|
28
|
+
return (React.createElement(Element, Object.assign({ ref: ref }, handleCsProp(elemProps, containerStyles)),
|
|
29
|
+
React.createElement(LoadingAnimationDot, null),
|
|
30
|
+
React.createElement(LoadingAnimationDot, null),
|
|
31
|
+
React.createElement(LoadingAnimationDot, null)));
|
|
32
|
+
},
|
|
33
|
+
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCloseOnOutsideClick.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useCloseOnOutsideClick.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B;;;;;;;;;GASG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"useCloseOnOutsideClick.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useCloseOnOutsideClick.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B;;;;;;;;;GASG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;MAwCjC,CAAC"}
|
|
@@ -22,6 +22,8 @@ export const useCloseOnOutsideClick = createElemPropsHook(usePopupModel)(model =
|
|
|
22
22
|
.sort((a, b) => Number(a.style.zIndex) - Number(b.style.zIndex));
|
|
23
23
|
if (elements.length &&
|
|
24
24
|
elements[elements.length - 1] === model.state.stackRef.current &&
|
|
25
|
+
// Only consider event targets that are currently in the DOM as valid
|
|
26
|
+
document.contains(event.target) &&
|
|
25
27
|
// Use `PopupStack.contains` instead of `ref.current.contains` so that the application can
|
|
26
28
|
// decide if clicking the target should toggle the popup rather than it toggling implicitly
|
|
27
29
|
// because the target is outside `ref.current`
|
|
@@ -9,12 +9,12 @@ import { useSelectModel } from './hooks/useSelectModel';
|
|
|
9
9
|
import { useSelectCard } from './hooks/useSelectCard';
|
|
10
10
|
import { useSelectInput } from './hooks/useSelectInput';
|
|
11
11
|
import { createStyles } from '@workday/canvas-kit-styling';
|
|
12
|
-
const selectInputStyles = createStyles({ name: "
|
|
12
|
+
const selectInputStyles = createStyles({ name: "krub27", styles: "caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" });
|
|
13
13
|
export const SelectInput = createSubcomponent(TextInput)({
|
|
14
14
|
modelHook: useSelectModel,
|
|
15
15
|
elemPropsHook: useSelectInput,
|
|
16
16
|
})(({ placeholder = 'Choose an option', inputStartIcon, width, ...elemProps }, Element, model) => {
|
|
17
|
-
return (React.createElement(InputGroup, { width: width },
|
|
17
|
+
return (React.createElement(InputGroup, { width: width, "data-width": "ck-formfield-width" },
|
|
18
18
|
inputStartIcon && model.state.selectedIds.length > 0 && (React.createElement(InputGroup.InnerStart, { pointerEvents: "none" },
|
|
19
19
|
React.createElement(SystemIcon, { icon: inputStartIcon }))),
|
|
20
20
|
React.createElement(InputGroup.Input, Object.assign({ as: Element, placeholder: placeholder }, mergeStyles(elemProps, [selectInputStyles]))),
|
|
@@ -4,39 +4,39 @@ import { base, system } from '@workday/canvas-tokens-web';
|
|
|
4
4
|
import { createStencil } from '@workday/canvas-kit-styling';
|
|
5
5
|
import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
6
6
|
const labelTextStencil = createStencil({
|
|
7
|
-
base: { name: "
|
|
7
|
+
base: { name: "krubh", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-100;font-size:--cnvs-base-font-size-75;letter-spacing:--cnvs-base-letter-spacing-150;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
|
|
8
8
|
modifiers: {
|
|
9
9
|
typeLevel: {
|
|
10
10
|
// Title level styles
|
|
11
|
-
'title.large': { name: "
|
|
12
|
-
'title.medium': { name: "
|
|
13
|
-
'title.small': { name: "
|
|
11
|
+
'title.large': { name: "krubi", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-600;font-size:--cnvs-base-font-size-600;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
|
|
12
|
+
'title.medium': { name: "krubj", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-500;font-size:--cnvs-base-font-size-500;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
|
|
13
|
+
'title.small': { name: "krubk", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-400;font-size:--cnvs-base-font-size-400;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
|
|
14
14
|
// Heading level styles
|
|
15
|
-
'heading.large': { name: "
|
|
16
|
-
'heading.medium': { name: "
|
|
17
|
-
'heading.small': { name: "
|
|
15
|
+
'heading.large': { name: "krubl", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-350;font-size:--cnvs-base-font-size-300;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
|
|
16
|
+
'heading.medium': { name: "krubm", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-300;font-size:--cnvs-base-font-size-250;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
|
|
17
|
+
'heading.small': { name: "krubn", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-250;font-size:--cnvs-base-font-size-200;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
|
|
18
18
|
// Body level styles
|
|
19
|
-
'body.large': { name: "
|
|
20
|
-
'body.medium': { name: "
|
|
21
|
-
'body.small': { name: "
|
|
19
|
+
'body.large': { name: "krubo", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-200;font-size:--cnvs-base-font-size-150;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
|
|
20
|
+
'body.medium': { name: "krubp", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-200;font-size:--cnvs-base-font-size-125;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
|
|
21
|
+
'body.small': { name: "krubq", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-150;font-size:--cnvs-base-font-size-100;letter-spacing:--cnvs-base-letter-spacing-200;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
|
|
22
22
|
// Subtext level styles
|
|
23
|
-
'subtext.large': { name: "
|
|
24
|
-
'subtext.medium': { name: "
|
|
25
|
-
'subtext.small': { name: "
|
|
23
|
+
'subtext.large': { name: "krubr", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-100;font-size:--cnvs-base-font-size-75;letter-spacing:--cnvs-base-letter-spacing-150;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
|
|
24
|
+
'subtext.medium': { name: "krubs", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-50;font-size:--cnvs-base-font-size-50;letter-spacing:--cnvs-base-letter-spacing-100;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
|
|
25
|
+
'subtext.small': { name: "krubt", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-50;font-size:--cnvs-base-font-size-25;letter-spacing:--cnvs-base-letter-spacing-50;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
|
|
26
26
|
},
|
|
27
27
|
variant: {
|
|
28
|
-
error: { name: "
|
|
29
|
-
hint: { name: "
|
|
30
|
-
inverse: { name: "
|
|
28
|
+
error: { name: "krubu", styles: "color:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));" },
|
|
29
|
+
hint: { name: "krubv", styles: "color:var(--cnvs-base-palette-licorice-300, rgba(94,106,117,1));" },
|
|
30
|
+
inverse: { name: "krubw", styles: "color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" },
|
|
31
31
|
},
|
|
32
32
|
disabled: {
|
|
33
|
-
true: { name: "
|
|
33
|
+
true: { name: "krubx", styles: "cursor:default;color:var(--cnvs-base-palette-licorice-100, rgba(161,170,179,1));" },
|
|
34
34
|
},
|
|
35
35
|
},
|
|
36
36
|
compound: [
|
|
37
37
|
{
|
|
38
38
|
modifiers: { variant: 'inverse', disabled: true },
|
|
39
|
-
styles: { name: "
|
|
39
|
+
styles: { name: "kruby", styles: "opacity:var(--cnvs-sys-opacity-disabled, 0.4);color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" },
|
|
40
40
|
},
|
|
41
41
|
],
|
|
42
42
|
}, "label-text");
|
|
@@ -6,26 +6,26 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
|
6
6
|
const textModifiers = createModifiers({
|
|
7
7
|
typeLevel: {
|
|
8
8
|
// Title level styles
|
|
9
|
-
'title.large': createStyles({ name: "
|
|
10
|
-
'title.medium': createStyles({ name: "
|
|
11
|
-
'title.small': createStyles({ name: "
|
|
9
|
+
'title.large': createStyles({ name: "krub2", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-600;font-size:--cnvs-base-font-size-600;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
10
|
+
'title.medium': createStyles({ name: "krub3", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-500;font-size:--cnvs-base-font-size-500;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
11
|
+
'title.small': createStyles({ name: "krub4", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-400;font-size:--cnvs-base-font-size-400;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
12
12
|
// Heading level styles
|
|
13
|
-
'heading.large': createStyles({ name: "
|
|
14
|
-
'heading.medium': createStyles({ name: "
|
|
15
|
-
'heading.small': createStyles({ name: "
|
|
13
|
+
'heading.large': createStyles({ name: "krub5", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-350;font-size:--cnvs-base-font-size-300;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
14
|
+
'heading.medium': createStyles({ name: "krub6", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-300;font-size:--cnvs-base-font-size-250;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
15
|
+
'heading.small': createStyles({ name: "krub7", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-250;font-size:--cnvs-base-font-size-200;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
16
16
|
// Body level styles
|
|
17
|
-
'body.large': createStyles({ name: "
|
|
18
|
-
'body.medium': createStyles({ name: "
|
|
19
|
-
'body.small': createStyles({ name: "
|
|
17
|
+
'body.large': createStyles({ name: "krub8", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-200;font-size:--cnvs-base-font-size-150;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
|
|
18
|
+
'body.medium': createStyles({ name: "krub9", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-200;font-size:--cnvs-base-font-size-125;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
|
|
19
|
+
'body.small': createStyles({ name: "kruba", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-150;font-size:--cnvs-base-font-size-100;letter-spacing:--cnvs-base-letter-spacing-200;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
|
|
20
20
|
// Subtext level styles
|
|
21
|
-
'subtext.large': createStyles({ name: "
|
|
22
|
-
'subtext.medium': createStyles({ name: "
|
|
23
|
-
'subtext.small': createStyles({ name: "
|
|
21
|
+
'subtext.large': createStyles({ name: "krubb", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-100;font-size:--cnvs-base-font-size-75;letter-spacing:--cnvs-base-letter-spacing-150;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
|
|
22
|
+
'subtext.medium': createStyles({ name: "krubc", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-50;font-size:--cnvs-base-font-size-50;letter-spacing:--cnvs-base-letter-spacing-100;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
|
|
23
|
+
'subtext.small': createStyles({ name: "krubd", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-50;font-size:--cnvs-base-font-size-25;letter-spacing:--cnvs-base-letter-spacing-50;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
|
|
24
24
|
},
|
|
25
25
|
variant: {
|
|
26
|
-
error: createStyles({ name: "
|
|
27
|
-
hint: createStyles({ name: "
|
|
28
|
-
inverse: createStyles({ name: "
|
|
26
|
+
error: createStyles({ name: "krube", styles: "color:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));" }),
|
|
27
|
+
hint: createStyles({ name: "krubf", styles: "color:var(--cnvs-base-palette-licorice-300, rgba(94,106,117,1));" }),
|
|
28
|
+
inverse: createStyles({ name: "krubg", styles: "color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }),
|
|
29
29
|
},
|
|
30
30
|
});
|
|
31
31
|
/**
|
|
@@ -11,7 +11,7 @@ import {Hint} from './Hint';
|
|
|
11
11
|
import {Label} from './Label';
|
|
12
12
|
import {FormFieldLabelPosition, FormFieldLabelPositionBehavior} from './types';
|
|
13
13
|
/**
|
|
14
|
-
* @deprecated ⚠️ `FormFieldProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
14
|
+
* @deprecated ⚠️ `FormFieldProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
15
15
|
*/
|
|
16
16
|
export interface FormFieldProps
|
|
17
17
|
extends Themeable,
|
|
@@ -139,7 +139,7 @@ const FormFieldInputContainer = styled('div')<GrowthBehavior & FormFieldLabelPos
|
|
|
139
139
|
}
|
|
140
140
|
);
|
|
141
141
|
/**
|
|
142
|
-
* @deprecated ⚠️ `FormField` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
142
|
+
* @deprecated ⚠️ `FormField` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
143
143
|
*/
|
|
144
144
|
export class FormField extends React.Component<React.PropsWithChildren<FormFieldProps>> {
|
|
145
145
|
static LabelPosition = FormFieldLabelPosition;
|
package/form-field/lib/Hint.tsx
CHANGED
|
@@ -3,7 +3,7 @@ import {ErrorType, Themeable, styled} from '@workday/canvas-kit-react/common';
|
|
|
3
3
|
import {space} from '@workday/canvas-kit-react/tokens';
|
|
4
4
|
import {Subtext, Text} from '@workday/canvas-kit-react/text';
|
|
5
5
|
/**
|
|
6
|
-
* @deprecated ⚠️ `HintProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
6
|
+
* @deprecated ⚠️ `HintProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
7
7
|
*/
|
|
8
8
|
export interface HintProps extends Themeable, React.HTMLAttributes<HTMLParagraphElement> {
|
|
9
9
|
/**
|
|
@@ -26,7 +26,7 @@ const Message = styled(Subtext)<Pick<HintProps, 'error'>>(
|
|
|
26
26
|
({error, theme}) => error === ErrorType.Error && {color: theme.canvas.palette.error.main}
|
|
27
27
|
);
|
|
28
28
|
/**
|
|
29
|
-
* @deprecated ⚠️ `Hint` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
29
|
+
* @deprecated ⚠️ `Hint` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
30
30
|
*/
|
|
31
31
|
class Hint extends React.Component<HintProps> {
|
|
32
32
|
static ErrorType = ErrorType;
|
package/form-field/lib/Label.tsx
CHANGED
|
@@ -3,7 +3,7 @@ import {colors, space, type} from '@workday/canvas-kit-react/tokens';
|
|
|
3
3
|
import {accessibleHide as accessibleHideCSS, styled} from '@workday/canvas-kit-react/common';
|
|
4
4
|
import {FormFieldLabelPosition, FormFieldLabelPositionBehavior} from './types';
|
|
5
5
|
/**
|
|
6
|
-
* @deprecated ⚠️ `LabelProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
6
|
+
* @deprecated ⚠️ `LabelProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
7
7
|
*/
|
|
8
8
|
export interface LabelProps extends FormFieldLabelPositionBehavior {
|
|
9
9
|
/**
|
|
@@ -90,7 +90,7 @@ const LegendComponent = styled('legend')<LabelProps>(...labelStyles, ({labelPosi
|
|
|
90
90
|
|
|
91
91
|
const LabelComponent = styled('label')<LabelProps>(...labelStyles);
|
|
92
92
|
/**
|
|
93
|
-
* @deprecated ⚠️ `Label` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
93
|
+
* @deprecated ⚠️ `Label` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
94
94
|
*/
|
|
95
95
|
class Label extends React.Component<React.PropsWithChildren<LabelProps>> {
|
|
96
96
|
static Position = FormFieldLabelPosition;
|
package/form-field/lib/types.ts
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
*
|
|
3
3
|
* The position of the FormField label (Top vs Left vs Hidden).
|
|
4
4
|
*
|
|
5
|
-
* @deprecated ⚠️ `FormFieldLabelPosition` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
5
|
+
* @deprecated ⚠️ `FormFieldLabelPosition` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
6
6
|
*/
|
|
7
7
|
export enum FormFieldLabelPosition {
|
|
8
8
|
Top,
|
|
@@ -10,7 +10,7 @@ export enum FormFieldLabelPosition {
|
|
|
10
10
|
Hidden,
|
|
11
11
|
}
|
|
12
12
|
/**
|
|
13
|
-
* @deprecated ⚠️ `FormFieldLabelPositionBehavior` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
13
|
+
* @deprecated ⚠️ `FormFieldLabelPositionBehavior` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
14
14
|
*/
|
|
15
15
|
export interface FormFieldLabelPositionBehavior {
|
|
16
16
|
labelPosition?: FormFieldLabelPosition;
|
|
@@ -1,73 +1,74 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
2
|
+
import {base, system} from '@workday/canvas-tokens-web';
|
|
3
|
+
import {createComponent} from '@workday/canvas-kit-react/common';
|
|
4
|
+
import {createStyles, handleCsProp, keyframes, CSProps} from '@workday/canvas-kit-styling';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Duration of the sparkle dots loading (in ms).
|
|
8
|
+
*/
|
|
9
|
+
const ANIMATION_DURATION_MS = '1400';
|
|
5
10
|
|
|
6
11
|
/**
|
|
7
12
|
* Keyframe for the dots loading animation.
|
|
8
13
|
*/
|
|
9
|
-
const keyframesLoading = keyframes
|
|
10
|
-
0%,
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}`;
|
|
14
|
+
const keyframesLoading = keyframes({
|
|
15
|
+
'0%, 80%, 100%': {
|
|
16
|
+
transform: 'scale(0)',
|
|
17
|
+
},
|
|
18
|
+
'40%': {
|
|
19
|
+
transform: 'scale(1)',
|
|
20
|
+
},
|
|
21
|
+
});
|
|
18
22
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
const loadingDotStyles = createStyles({
|
|
24
|
+
backgroundColor: base.soap400,
|
|
25
|
+
width: system.space.x4,
|
|
26
|
+
height: system.space.x4,
|
|
27
|
+
fontSize: system.space.zero,
|
|
28
|
+
borderRadius: system.shape.round,
|
|
29
|
+
transform: 'scale(0)',
|
|
30
|
+
display: 'inline-block',
|
|
31
|
+
animationName: keyframesLoading,
|
|
32
|
+
animationDuration: `${ANIMATION_DURATION_MS}ms`,
|
|
33
|
+
animationIterationCount: 'infinite',
|
|
34
|
+
animationTimingFunction: 'ease-in-out',
|
|
35
|
+
animationFillMode: 'both',
|
|
36
|
+
'&:nth-child(1)': {
|
|
37
|
+
animationDelay: '0ms',
|
|
38
|
+
},
|
|
39
|
+
'&:nth-child(2)': {
|
|
40
|
+
animationDelay: `calc(${ANIMATION_DURATION_MS}ms * (4/35))`, // 160
|
|
41
|
+
},
|
|
42
|
+
'&:nth-child(3)': {
|
|
43
|
+
animationDelay: `calc(${ANIMATION_DURATION_MS}ms * (8/35))`, // 320
|
|
44
|
+
},
|
|
45
|
+
});
|
|
25
46
|
|
|
26
47
|
/**
|
|
27
48
|
* The actual loading dot div.
|
|
28
49
|
*/
|
|
29
|
-
const LoadingAnimationDot =
|
|
30
|
-
{
|
|
31
|
-
backgroundColor: canvas.colors.soap400,
|
|
32
|
-
width: canvas.space.s,
|
|
33
|
-
height: canvas.space.s,
|
|
34
|
-
fontSize: '0px',
|
|
35
|
-
borderRadius: borderRadius.circle,
|
|
36
|
-
transform: 'scale(0)',
|
|
37
|
-
display: 'inline-block',
|
|
38
|
-
marginRight: canvas.space.xxs,
|
|
39
|
-
animationName: keyframesLoading,
|
|
40
|
-
animationDuration: '1400ms',
|
|
41
|
-
animationIterationCount: 'infinite',
|
|
42
|
-
animationTimingFunction: 'ease-in-out',
|
|
43
|
-
animationFillMode: 'both',
|
|
44
|
-
'&:last-child': {
|
|
45
|
-
marginRight: 0,
|
|
46
|
-
},
|
|
47
|
-
},
|
|
48
|
-
({animationDelay}) => ({
|
|
49
|
-
animationDelay: animationDelay + 'ms',
|
|
50
|
-
})
|
|
51
|
-
);
|
|
50
|
+
const LoadingAnimationDot = () => <div className={`${loadingDotStyles}`}></div>;
|
|
52
51
|
|
|
53
52
|
/**
|
|
54
53
|
* A simple container for the loading dots.
|
|
55
54
|
*/
|
|
56
|
-
const
|
|
57
|
-
display: 'inline-
|
|
55
|
+
const containerStyles = createStyles({
|
|
56
|
+
display: 'inline-flex',
|
|
57
|
+
gap: system.space.x2,
|
|
58
58
|
});
|
|
59
59
|
|
|
60
60
|
/**
|
|
61
61
|
* A simple component that displays three horizontal dots, to be used when some data is loading.
|
|
62
62
|
*/
|
|
63
|
-
export
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
}
|
|
63
|
+
export const LoadingDots = createComponent('div')({
|
|
64
|
+
displayName: 'LoadingDots',
|
|
65
|
+
Component: (elemProps: CSProps, ref, Element) => {
|
|
66
|
+
return (
|
|
67
|
+
<Element ref={ref} {...handleCsProp(elemProps, containerStyles)}>
|
|
68
|
+
<LoadingAnimationDot />
|
|
69
|
+
<LoadingAnimationDot />
|
|
70
|
+
<LoadingAnimationDot />
|
|
71
|
+
</Element>
|
|
72
|
+
);
|
|
73
|
+
},
|
|
74
|
+
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-react",
|
|
3
|
-
"version": "11.0.0-alpha.
|
|
3
|
+
"version": "11.0.0-alpha.667-next.0",
|
|
4
4
|
"description": "The parent module that contains all Workday Canvas Kit React components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -50,8 +50,8 @@
|
|
|
50
50
|
"@emotion/styled": "^11.6.0",
|
|
51
51
|
"@popperjs/core": "^2.5.4",
|
|
52
52
|
"@workday/canvas-colors-web": "^2.0.0",
|
|
53
|
-
"@workday/canvas-kit-popup-stack": "^11.0.0-alpha.
|
|
54
|
-
"@workday/canvas-kit-styling": "^
|
|
53
|
+
"@workday/canvas-kit-popup-stack": "^11.0.0-alpha.667-next.0",
|
|
54
|
+
"@workday/canvas-kit-styling": "^10.3.1",
|
|
55
55
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
56
56
|
"@workday/canvas-tokens-web": "^1.0.2",
|
|
57
57
|
"@workday/design-assets-types": "^0.2.8",
|
|
@@ -69,5 +69,5 @@
|
|
|
69
69
|
"@workday/canvas-accent-icons-web": "^3.0.0",
|
|
70
70
|
"@workday/canvas-applet-icons-web": "^2.0.0"
|
|
71
71
|
},
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "345331557dba888d9b12c56470a5e015162a6a0e"
|
|
73
73
|
}
|
|
@@ -27,6 +27,8 @@ export const useCloseOnOutsideClick = createElemPropsHook(usePopupModel)(model =
|
|
|
27
27
|
if (
|
|
28
28
|
elements.length &&
|
|
29
29
|
elements[elements.length - 1] === model.state.stackRef.current &&
|
|
30
|
+
// Only consider event targets that are currently in the DOM as valid
|
|
31
|
+
document.contains(event.target as HTMLElement) &&
|
|
30
32
|
// Use `PopupStack.contains` instead of `ref.current.contains` so that the application can
|
|
31
33
|
// decide if clicking the target should toggle the popup rather than it toggling implicitly
|
|
32
34
|
// because the target is outside `ref.current`
|
package/select/lib/Select.tsx
CHANGED
|
@@ -40,7 +40,7 @@ export const SelectInput = createSubcomponent(TextInput)({
|
|
|
40
40
|
})<SelectInputProps>(
|
|
41
41
|
({placeholder = 'Choose an option', inputStartIcon, width, ...elemProps}, Element, model) => {
|
|
42
42
|
return (
|
|
43
|
-
<InputGroup width={width}>
|
|
43
|
+
<InputGroup width={width} data-width="ck-formfield-width">
|
|
44
44
|
{inputStartIcon && model.state.selectedIds.length > 0 && (
|
|
45
45
|
<InputGroup.InnerStart pointerEvents="none">
|
|
46
46
|
<SystemIcon icon={inputStartIcon} />
|