@workday/canvas-kit-react 11.0.0-alpha.765-next.0 → 11.0.0-alpha.767-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.
Files changed (6) hide show
  1. package/dist/commonjs/loading-dots/lib/LoadingDots.d.ts.map +1 -1
  2. package/dist/commonjs/loading-dots/lib/LoadingDots.js +12 -9
  3. package/dist/es6/loading-dots/lib/LoadingDots.d.ts.map +1 -1
  4. package/dist/es6/loading-dots/lib/LoadingDots.js +14 -11
  5. package/loading-dots/lib/LoadingDots.tsx +35 -33
  6. package/package.json +4 -4
package/dist/commonjs/loading-dots/lib/LoadingDots.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"LoadingDots.d.ts","sourceRoot":"","sources":["../../../../loading-dots/lib/LoadingDots.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAwC,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAwD3F;;GAEG;AACH,eAAO,MAAM,WAAW,6EAWtB,CAAC"}
1
+ {"version":3,"file":"LoadingDots.d.ts","sourceRoot":"","sources":["../../../../loading-dots/lib/LoadingDots.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA0B,OAAO,EAAsB,MAAM,6BAA6B,CAAC;AA0DlG;;GAEG;AACH,eAAO,MAAM,WAAW,6EAWtB,CAAC"}
package/dist/commonjs/loading-dots/lib/LoadingDots.js CHANGED
@@ -24,30 +24,33 @@ const React = __importStar(require("react"));
24
24
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
25
25
  const common_1 = require("@workday/canvas-kit-react/common");
26
26
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
27
- /**
28
- * Duration of the sparkle dots loading (in ms).
29
- */
30
- const ANIMATION_DURATION_MS = '1400';
31
27
  /**
32
28
  * Keyframe for the dots loading animation.
33
29
  */
34
- const keyframesLoading = canvas_kit_styling_1.keyframes({ name: "454a47", styles: "0%, 80%, 100%{transform:scale(0);}40%{transform:scale(1);}" });
35
- const loadingDotStyles = canvas_kit_styling_1.createStyles({ name: "d1522e", styles: "background-color:var(--cnvs-base-palette-soap-400);width:var(--cnvs-sys-space-x4);height:var(--cnvs-sys-space-x4);font-size:var(--cnvs-sys-space-zero);border-radius:var(--cnvs-sys-shape-round);transform:scale(0);display:inline-block;animation-name:animation-454a47;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));}" });
30
+ const keyframesLoading = canvas_kit_styling_1.keyframes({ name: "9d34b1", styles: "0%, 80%, 100%{transform:scale(0);}40%{transform:scale(1);}" });
31
+ const singleLoadingDotStencil = canvas_kit_styling_1.createStencil({
32
+ vars: {
33
+ animationDurationMs: '40ms',
34
+ },
35
+ base: { name: "803fb0", styles: "--cnvs-single-loading-dot-animationDurationMs:40ms;box-sizing:border-box;background-color:var(--cnvs-sys-color-bg-alt-strong);width:var(--cnvs-sys-space-x4);height:var(--cnvs-sys-space-x4);font-size:var(--cnvs-sys-space-zero);border-radius:var(--cnvs-sys-shape-round);transform:scale(0);display:inline-block;animation-name:animation-9d34b1;animation-duration:calc(var(--cnvs-single-loading-dot-animationDurationMs) * 35);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(var(--cnvs-single-loading-dot-animationDurationMs) * 4);}&:nth-child(3){animation-delay:calc(var(--cnvs-single-loading-dot-animationDurationMs) * 8);}" }
36
+ }, "cnvs-single-loading-dot");
36
37
  /**
37
38
  * The actual loading dot div.
38
39
  */
39
- const LoadingAnimationDot = () => React.createElement("div", { className: `${loadingDotStyles}` });
40
+ const LoadingAnimationDot = () => React.createElement("div", Object.assign({}, singleLoadingDotStencil()));
40
41
  /**
41
42
  * A simple container for the loading dots.
42
43
  */
43
- const containerStyles = canvas_kit_styling_1.createStyles({ name: "0e8878", styles: "display:inline-flex;gap:var(--cnvs-sys-space-x2);" });
44
+ const loadingDotsStencil = canvas_kit_styling_1.createStencil({
45
+ base: { name: "ebd515", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-space-x2);" }
46
+ }, "cnvs-loading-dots");
44
47
  /**
45
48
  * A simple component that displays three horizontal dots, to be used when some data is loading.
46
49
  */
47
50
  exports.LoadingDots = common_1.createComponent('div')({
48
51
  displayName: 'LoadingDots',
49
52
  Component: (elemProps, ref, Element) => {
50
- return (React.createElement(Element, Object.assign({ ref: ref }, canvas_kit_styling_1.handleCsProp(elemProps, containerStyles)),
53
+ return (React.createElement(Element, Object.assign({ ref: ref }, canvas_kit_styling_1.handleCsProp(elemProps, loadingDotsStencil())),
51
54
  React.createElement(LoadingAnimationDot, null),
52
55
  React.createElement(LoadingAnimationDot, null),
53
56
  React.createElement(LoadingAnimationDot, null)));
package/dist/es6/loading-dots/lib/LoadingDots.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"LoadingDots.d.ts","sourceRoot":"","sources":["../../../../loading-dots/lib/LoadingDots.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAwC,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAwD3F;;GAEG;AACH,eAAO,MAAM,WAAW,6EAWtB,CAAC"}
1
+ {"version":3,"file":"LoadingDots.d.ts","sourceRoot":"","sources":["../../../../loading-dots/lib/LoadingDots.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA0B,OAAO,EAAsB,MAAM,6BAA6B,CAAC;AA0DlG;;GAEG;AACH,eAAO,MAAM,WAAW,6EAWtB,CAAC"}
package/dist/es6/loading-dots/lib/LoadingDots.js CHANGED
@@ -1,31 +1,34 @@
1
1
  import * as React from 'react';
2
- import { base, system } from '@workday/canvas-tokens-web';
2
+ import { system } from '@workday/canvas-tokens-web';
3
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';
4
+ import { handleCsProp, keyframes, createStencil, calc } from '@workday/canvas-kit-styling';
9
5
  /**
10
6
  * Keyframe for the dots loading animation.
11
7
  */
12
- const keyframesLoading = keyframes({ name: "454a47", styles: "0%, 80%, 100%{transform:scale(0);}40%{transform:scale(1);}" });
13
- const loadingDotStyles = createStyles({ name: "d1522e", styles: "background-color:var(--cnvs-base-palette-soap-400);width:var(--cnvs-sys-space-x4);height:var(--cnvs-sys-space-x4);font-size:var(--cnvs-sys-space-zero);border-radius:var(--cnvs-sys-shape-round);transform:scale(0);display:inline-block;animation-name:animation-454a47;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));}" });
8
+ const keyframesLoading = keyframes({ name: "9d34b1", styles: "0%, 80%, 100%{transform:scale(0);}40%{transform:scale(1);}" });
9
+ const singleLoadingDotStencil = createStencil({
10
+ vars: {
11
+ animationDurationMs: '40ms',
12
+ },
13
+ base: { name: "803fb0", styles: "--cnvs-single-loading-dot-animationDurationMs:40ms;box-sizing:border-box;background-color:var(--cnvs-sys-color-bg-alt-strong);width:var(--cnvs-sys-space-x4);height:var(--cnvs-sys-space-x4);font-size:var(--cnvs-sys-space-zero);border-radius:var(--cnvs-sys-shape-round);transform:scale(0);display:inline-block;animation-name:animation-9d34b1;animation-duration:calc(var(--cnvs-single-loading-dot-animationDurationMs) * 35);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(var(--cnvs-single-loading-dot-animationDurationMs) * 4);}&:nth-child(3){animation-delay:calc(var(--cnvs-single-loading-dot-animationDurationMs) * 8);}" }
14
+ }, "cnvs-single-loading-dot");
14
15
  /**
15
16
  * The actual loading dot div.
16
17
  */
17
- const LoadingAnimationDot = () => React.createElement("div", { className: `${loadingDotStyles}` });
18
+ const LoadingAnimationDot = () => React.createElement("div", Object.assign({}, singleLoadingDotStencil()));
18
19
  /**
19
20
  * A simple container for the loading dots.
20
21
  */
21
- const containerStyles = createStyles({ name: "0e8878", styles: "display:inline-flex;gap:var(--cnvs-sys-space-x2);" });
22
+ const loadingDotsStencil = createStencil({
23
+ base: { name: "ebd515", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-space-x2);" }
24
+ }, "cnvs-loading-dots");
22
25
  /**
23
26
  * A simple component that displays three horizontal dots, to be used when some data is loading.
24
27
  */
25
28
  export const LoadingDots = createComponent('div')({
26
29
  displayName: 'LoadingDots',
27
30
  Component: (elemProps, ref, Element) => {
28
- return (React.createElement(Element, Object.assign({ ref: ref }, handleCsProp(elemProps, containerStyles)),
31
+ return (React.createElement(Element, Object.assign({ ref: ref }, handleCsProp(elemProps, loadingDotsStencil())),
29
32
  React.createElement(LoadingAnimationDot, null),
30
33
  React.createElement(LoadingAnimationDot, null),
31
34
  React.createElement(LoadingAnimationDot, null)));
package/loading-dots/lib/LoadingDots.tsx CHANGED
@@ -1,12 +1,7 @@
1
1
  import * as React from 'react';
2
- import {base, system} from '@workday/canvas-tokens-web';
2
+ import {system} from '@workday/canvas-tokens-web';
3
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';
4
+ import {handleCsProp, keyframes, CSProps, createStencil, calc} from '@workday/canvas-kit-styling';
10
5
 
11
6
  /**
12
7
  * Keyframe for the dots loading animation.
@@ -20,41 +15,48 @@ const keyframesLoading = keyframes({
20
15
  },
21
16
  });
22
17
 
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
18
+ const singleLoadingDotStencil = createStencil({
19
+ vars: {
20
+ animationDurationMs: '40ms',
44
21
  },
22
+ base: ({animationDurationMs}) => ({
23
+ backgroundColor: system.color.bg.alt.strong,
24
+ width: system.space.x4,
25
+ height: system.space.x4,
26
+ fontSize: system.space.zero,
27
+ borderRadius: system.shape.round,
28
+ transform: 'scale(0)',
29
+ display: 'inline-block',
30
+ animationName: keyframesLoading,
31
+ animationDuration: calc.multiply(animationDurationMs, 35),
32
+ animationIterationCount: 'infinite',
33
+ animationTimingFunction: 'ease-in-out',
34
+ animationFillMode: 'both',
35
+ '&:nth-child(1)': {
36
+ animationDelay: '0ms',
37
+ },
38
+ '&:nth-child(2)': {
39
+ animationDelay: calc.multiply(animationDurationMs, 4),
40
+ },
41
+ '&:nth-child(3)': {
42
+ animationDelay: calc.multiply(animationDurationMs, 8),
43
+ },
44
+ }),
45
45
  });
46
46
 
47
47
  /**
48
48
  * The actual loading dot div.
49
49
  */
50
- const LoadingAnimationDot = () => <div className={`${loadingDotStyles}`}></div>;
50
+ const LoadingAnimationDot = () => <div {... singleLoadingDotStencil()} />;
51
51
 
52
52
  /**
53
53
  * A simple container for the loading dots.
54
54
  */
55
- const containerStyles = createStyles({
56
- display: 'inline-flex',
57
- gap: system.space.x2,
55
+ const loadingDotsStencil = createStencil({
56
+ base: {
57
+ display: 'inline-flex',
58
+ gap: system.space.x2,
59
+ },
58
60
  });
59
61
 
60
62
  /**
@@ -64,7 +66,7 @@ export const LoadingDots = createComponent('div')({
64
66
  displayName: 'LoadingDots',
65
67
  Component: (elemProps: CSProps, ref, Element) => {
66
68
  return (
67
- <Element ref={ref} {...handleCsProp(elemProps, containerStyles)}>
69
+ <Element ref={ref} {...handleCsProp(elemProps, loadingDotsStencil())}>
68
70
  <LoadingAnimationDot />
69
71
  <LoadingAnimationDot />
70
72
  <LoadingAnimationDot />
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "11.0.0-alpha.765-next.0",
3
+ "version": "11.0.0-alpha.767-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",
@@ -49,8 +49,8 @@
49
49
  "@emotion/styled": "^11.6.0",
50
50
  "@popperjs/core": "^2.5.4",
51
51
  "@workday/canvas-colors-web": "^2.0.0",
52
- "@workday/canvas-kit-popup-stack": "^11.0.0-alpha.765-next.0",
53
- "@workday/canvas-kit-styling": "^11.0.0-alpha.765-next.0",
52
+ "@workday/canvas-kit-popup-stack": "^11.0.0-alpha.767-next.0",
53
+ "@workday/canvas-kit-styling": "^11.0.0-alpha.767-next.0",
54
54
  "@workday/canvas-system-icons-web": "^3.0.0",
55
55
  "@workday/canvas-tokens-web": "^1.3.0",
56
56
  "@workday/design-assets-types": "^0.2.8",
@@ -67,5 +67,5 @@
67
67
  "@workday/canvas-accent-icons-web": "^3.0.0",
68
68
  "@workday/canvas-applet-icons-web": "^2.0.0"
69
69
  },
70
- "gitHead": "75a590b82446ba010969a3beb9a74df0571b163c"
70
+ "gitHead": "d52d032456b050c163ecff6643ece156056e40c8"
71
71
  }