@workday/canvas-kit-react 15.0.0-alpha.1293-next.0 → 15.0.0-alpha.1295-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 (19) hide show
  1. package/checkbox/lib/CheckboxRipple.tsx +3 -3
  2. package/dist/commonjs/checkbox/lib/CheckboxRipple.d.ts +2 -1
  3. package/dist/commonjs/checkbox/lib/CheckboxRipple.d.ts.map +1 -1
  4. package/dist/commonjs/checkbox/lib/CheckboxRipple.js +4 -4
  5. package/dist/commonjs/layout/lib/utils/space.js +4 -4
  6. package/dist/commonjs/skeleton/lib/parts/SkeletonHeader.js +1 -1
  7. package/dist/commonjs/skeleton/lib/parts/SkeletonText.d.ts.map +1 -1
  8. package/dist/commonjs/skeleton/lib/parts/SkeletonText.js +1 -3
  9. package/dist/es6/checkbox/lib/CheckboxRipple.d.ts +2 -1
  10. package/dist/es6/checkbox/lib/CheckboxRipple.d.ts.map +1 -1
  11. package/dist/es6/checkbox/lib/CheckboxRipple.js +5 -5
  12. package/dist/es6/layout/lib/utils/space.js +4 -4
  13. package/dist/es6/skeleton/lib/parts/SkeletonHeader.js +1 -1
  14. package/dist/es6/skeleton/lib/parts/SkeletonText.d.ts.map +1 -1
  15. package/dist/es6/skeleton/lib/parts/SkeletonText.js +1 -3
  16. package/layout/lib/utils/space.ts +4 -4
  17. package/package.json +5 -5
  18. package/skeleton/lib/parts/SkeletonHeader.tsx +1 -1
  19. package/skeleton/lib/parts/SkeletonText.tsx +3 -11
package/checkbox/lib/CheckboxRipple.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import {createComponent} from '@workday/canvas-kit-react/common';
2
- import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
2
+ import {calc, CSProps, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
3
3
  import {system} from '@workday/canvas-tokens-web';
4
4
 
5
5
  const checkboxRippleStencil = createStencil({
@@ -16,7 +16,7 @@ const checkboxRippleStencil = createStencil({
16
16
 
17
17
  export const CheckboxRipple = createComponent('span')({
18
18
  displayName: 'CheckboxRipple',
19
- Component: elemProps => {
20
- return <span {...checkboxRippleStencil()} />;
19
+ Component: (elemProps: CSProps) => {
20
+ return <span {...handleCsProp(elemProps, checkboxRippleStencil())} />;
21
21
  },
22
22
  });
package/dist/commonjs/checkbox/lib/CheckboxRipple.d.ts CHANGED
@@ -1,2 +1,3 @@
1
- export declare const CheckboxRipple: import("@workday/canvas-kit-react/common").ElementComponent<"span", unknown>;
1
+ import { CSProps } from '@workday/canvas-kit-styling';
2
+ export declare const CheckboxRipple: import("@workday/canvas-kit-react/common").ElementComponent<"span", CSProps>;
2
3
  //# sourceMappingURL=CheckboxRipple.d.ts.map
package/dist/commonjs/checkbox/lib/CheckboxRipple.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxRipple.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/CheckboxRipple.tsx"],"names":[],"mappings":"AAgBA,eAAO,MAAM,cAAc,8EAKzB,CAAC"}
1
+ {"version":3,"file":"CheckboxRipple.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/CheckboxRipple.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,OAAO,EAAsC,MAAM,6BAA6B,CAAC;AAe/F,eAAO,MAAM,cAAc,8EAKzB,CAAC"}
package/dist/commonjs/checkbox/lib/CheckboxRipple.js CHANGED
@@ -6,11 +6,11 @@ const common_1 = require("@workday/canvas-kit-react/common");
6
6
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
7
7
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
8
8
  const checkboxRippleStencil = (0, canvas_kit_styling_1.createStencil)({
9
- base: { name: "4esoeb", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-round);box-shadow:none;height:calc(var(--cnvs-sys-space-x4) + 0.125rem);width:calc(var(--cnvs-sys-space-x4) + 0.125rem);transition:box-shadow 150ms ease-out;position:absolute;pointer-events:none;" }
10
- }, "checkbox-ripple-976d47");
9
+ base: { name: "21g8et", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-round);box-shadow:none;height:calc(var(--cnvs-sys-space-x4) + 0.125rem);width:calc(var(--cnvs-sys-space-x4) + 0.125rem);transition:box-shadow 150ms ease-out;position:absolute;pointer-events:none;" }
10
+ }, "checkbox-ripple-91b80f");
11
11
  exports.CheckboxRipple = (0, common_1.createComponent)('span')({
12
12
  displayName: 'CheckboxRipple',
13
- Component: elemProps => {
14
- return (0, jsx_runtime_1.jsx)("span", { ...checkboxRippleStencil() });
13
+ Component: (elemProps) => {
14
+ return (0, jsx_runtime_1.jsx)("span", { ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, checkboxRippleStencil()) });
15
15
  },
16
16
  });
package/dist/commonjs/layout/lib/utils/space.js CHANGED
@@ -31,12 +31,12 @@ exports.spaceStyleFnConfigs = [
31
31
  },
32
32
  {
33
33
  name: 'marginX',
34
- properties: ['marginLeft', 'marginRight'],
34
+ properties: ['marginInline'],
35
35
  system: 'space',
36
36
  },
37
37
  {
38
38
  name: 'marginY',
39
- properties: ['marginTop', 'marginBottom'],
39
+ properties: ['marginBlock'],
40
40
  system: 'space',
41
41
  },
42
42
  {
@@ -66,12 +66,12 @@ exports.spaceStyleFnConfigs = [
66
66
  },
67
67
  {
68
68
  name: 'paddingX',
69
- properties: ['paddingLeft', 'paddingRight'],
69
+ properties: ['paddingInline'],
70
70
  system: 'space',
71
71
  },
72
72
  {
73
73
  name: 'paddingY',
74
- properties: ['paddingTop', 'paddingBottom'],
74
+ properties: ['paddingBlock'],
75
75
  system: 'space',
76
76
  },
77
77
  {
package/dist/commonjs/skeleton/lib/parts/SkeletonHeader.js CHANGED
@@ -18,7 +18,7 @@ exports.SkeletonHeader = (0, common_1.createComponent)('div')({
18
18
  displayName: 'Skeleton.Header',
19
19
  Component: ({ width = '100%', backgroundColor, height, ...elemProps }, ref, Element) => ((0, jsx_runtime_1.jsx)(SkeletonShape_1.SkeletonShape, { ref: ref, as: Element, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.skeletonHeaderStencil)({
20
20
  width: typeof width === 'number' ? (0, canvas_kit_styling_1.px2rem)(width) : width,
21
- backgroundColor: backgroundColor,
21
+ backgroundColor,
22
22
  height: typeof height === 'number' ? (0, canvas_kit_styling_1.px2rem)(height) : height,
23
23
  })) })),
24
24
  });
package/dist/commonjs/skeleton/lib/parts/SkeletonText.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SkeletonText.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/SkeletonText.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,mBAAmB;;;;gBAiB9B,CAAC;AAEH,eAAO,MAAM,YAAY,uFAoBvB,CAAC"}
1
+ {"version":3,"file":"SkeletonText.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/SkeletonText.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,mBAAmB;;;;gBAiB9B,CAAC;AAEH,eAAO,MAAM,YAAY,uFAYvB,CAAC"}
package/dist/commonjs/skeleton/lib/parts/SkeletonText.js CHANGED
@@ -15,8 +15,6 @@ exports.SkeletonText = (0, common_1.createComponent)('div')({
15
15
  displayName: 'Skeleton.Text',
16
16
  Component: ({ backgroundColor, lineCount = 2, ...elemProps }, ref, Element) => {
17
17
  const lines = new Array(lineCount).fill(null);
18
- return lineCount <= 0 ? null : ((0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.skeletonTextStencil)({
19
- backgroundColor,
20
- })), children: lines.map((_value, index) => ((0, jsx_runtime_1.jsx)("div", { "data-part": 'skeleton-text-lines' }, index))) }));
18
+ return lineCount > 0 ? ((0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.skeletonTextStencil)({ backgroundColor })), children: lines.map((_value, index) => ((0, jsx_runtime_1.jsx)("div", { "data-part": 'skeleton-text-lines' }, index))) })) : null;
21
19
  },
22
20
  });
package/dist/es6/checkbox/lib/CheckboxRipple.d.ts CHANGED
@@ -1,2 +1,3 @@
1
- export declare const CheckboxRipple: import("@workday/canvas-kit-react/common").ElementComponent<"span", unknown>;
1
+ import { CSProps } from '@workday/canvas-kit-styling';
2
+ export declare const CheckboxRipple: import("@workday/canvas-kit-react/common").ElementComponent<"span", CSProps>;
2
3
  //# sourceMappingURL=CheckboxRipple.d.ts.map
package/dist/es6/checkbox/lib/CheckboxRipple.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxRipple.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/CheckboxRipple.tsx"],"names":[],"mappings":"AAgBA,eAAO,MAAM,cAAc,8EAKzB,CAAC"}
1
+ {"version":3,"file":"CheckboxRipple.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/CheckboxRipple.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,OAAO,EAAsC,MAAM,6BAA6B,CAAC;AAe/F,eAAO,MAAM,cAAc,8EAKzB,CAAC"}
package/dist/es6/checkbox/lib/CheckboxRipple.js CHANGED
@@ -1,13 +1,13 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { createComponent } from '@workday/canvas-kit-react/common';
3
- import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
3
+ import { calc, createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
4
4
  import { system } from '@workday/canvas-tokens-web';
5
5
  const checkboxRippleStencil = createStencil({
6
- base: { name: "4esoeb", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-round);box-shadow:none;height:calc(var(--cnvs-sys-space-x4) + 0.125rem);width:calc(var(--cnvs-sys-space-x4) + 0.125rem);transition:box-shadow 150ms ease-out;position:absolute;pointer-events:none;" }
7
- }, "checkbox-ripple-976d47");
6
+ base: { name: "21g8et", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-round);box-shadow:none;height:calc(var(--cnvs-sys-space-x4) + 0.125rem);width:calc(var(--cnvs-sys-space-x4) + 0.125rem);transition:box-shadow 150ms ease-out;position:absolute;pointer-events:none;" }
7
+ }, "checkbox-ripple-91b80f");
8
8
  export const CheckboxRipple = createComponent('span')({
9
9
  displayName: 'CheckboxRipple',
10
- Component: elemProps => {
11
- return _jsx("span", { ...checkboxRippleStencil() });
10
+ Component: (elemProps) => {
11
+ return _jsx("span", { ...handleCsProp(elemProps, checkboxRippleStencil()) });
12
12
  },
13
13
  });
package/dist/es6/layout/lib/utils/space.js CHANGED
@@ -28,12 +28,12 @@ export const spaceStyleFnConfigs = [
28
28
  },
29
29
  {
30
30
  name: 'marginX',
31
- properties: ['marginLeft', 'marginRight'],
31
+ properties: ['marginInline'],
32
32
  system: 'space',
33
33
  },
34
34
  {
35
35
  name: 'marginY',
36
- properties: ['marginTop', 'marginBottom'],
36
+ properties: ['marginBlock'],
37
37
  system: 'space',
38
38
  },
39
39
  {
@@ -63,12 +63,12 @@ export const spaceStyleFnConfigs = [
63
63
  },
64
64
  {
65
65
  name: 'paddingX',
66
- properties: ['paddingLeft', 'paddingRight'],
66
+ properties: ['paddingInline'],
67
67
  system: 'space',
68
68
  },
69
69
  {
70
70
  name: 'paddingY',
71
- properties: ['paddingTop', 'paddingBottom'],
71
+ properties: ['paddingBlock'],
72
72
  system: 'space',
73
73
  },
74
74
  {
package/dist/es6/skeleton/lib/parts/SkeletonHeader.js CHANGED
@@ -15,7 +15,7 @@ export const SkeletonHeader = createComponent('div')({
15
15
  displayName: 'Skeleton.Header',
16
16
  Component: ({ width = '100%', backgroundColor, height, ...elemProps }, ref, Element) => (_jsx(SkeletonShape, { ref: ref, as: Element, ...handleCsProp(elemProps, skeletonHeaderStencil({
17
17
  width: typeof width === 'number' ? px2rem(width) : width,
18
- backgroundColor: backgroundColor,
18
+ backgroundColor,
19
19
  height: typeof height === 'number' ? px2rem(height) : height,
20
20
  })) })),
21
21
  });
package/dist/es6/skeleton/lib/parts/SkeletonText.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SkeletonText.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/SkeletonText.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,mBAAmB;;;;gBAiB9B,CAAC;AAEH,eAAO,MAAM,YAAY,uFAoBvB,CAAC"}
1
+ {"version":3,"file":"SkeletonText.d.ts","sourceRoot":"","sources":["../../../../../skeleton/lib/parts/SkeletonText.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,mBAAmB;;;;gBAiB9B,CAAC;AAEH,eAAO,MAAM,YAAY,uFAYvB,CAAC"}
package/dist/es6/skeleton/lib/parts/SkeletonText.js CHANGED
@@ -12,8 +12,6 @@ export const SkeletonText = createComponent('div')({
12
12
  displayName: 'Skeleton.Text',
13
13
  Component: ({ backgroundColor, lineCount = 2, ...elemProps }, ref, Element) => {
14
14
  const lines = new Array(lineCount).fill(null);
15
- return lineCount <= 0 ? null : (_jsx(Element, { ref: ref, ...handleCsProp(elemProps, skeletonTextStencil({
16
- backgroundColor,
17
- })), children: lines.map((_value, index) => (_jsx("div", { "data-part": 'skeleton-text-lines' }, index))) }));
15
+ return lineCount > 0 ? (_jsx(Element, { ref: ref, ...handleCsProp(elemProps, skeletonTextStencil({ backgroundColor })), children: lines.map((_value, index) => (_jsx("div", { "data-part": 'skeleton-text-lines' }, index))) })) : null;
18
16
  },
19
17
  });
package/layout/lib/utils/space.ts CHANGED
@@ -152,12 +152,12 @@ export const spaceStyleFnConfigs: StyleFnConfig[] = [
152
152
  },
153
153
  {
154
154
  name: 'marginX',
155
- properties: ['marginLeft', 'marginRight'],
155
+ properties: ['marginInline'],
156
156
  system: 'space',
157
157
  },
158
158
  {
159
159
  name: 'marginY',
160
- properties: ['marginTop', 'marginBottom'],
160
+ properties: ['marginBlock'],
161
161
  system: 'space',
162
162
  },
163
163
  {
@@ -187,12 +187,12 @@ export const spaceStyleFnConfigs: StyleFnConfig[] = [
187
187
  },
188
188
  {
189
189
  name: 'paddingX',
190
- properties: ['paddingLeft', 'paddingRight'],
190
+ properties: ['paddingInline'],
191
191
  system: 'space',
192
192
  },
193
193
  {
194
194
  name: 'paddingY',
195
- properties: ['paddingTop', 'paddingBottom'],
195
+ properties: ['paddingBlock'],
196
196
  system: 'space',
197
197
  },
198
198
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "15.0.0-alpha.1293-next.0",
3
+ "version": "15.0.0-alpha.1295-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",
@@ -52,9 +52,9 @@
52
52
  "@popperjs/core": "^2.5.4",
53
53
  "@tanstack/react-virtual": "^3.13.9",
54
54
  "@workday/canvas-colors-web": "^2.0.0",
55
- "@workday/canvas-kit-popup-stack": "^15.0.0-alpha.1293-next.0",
56
- "@workday/canvas-kit-preview-react": "^15.0.0-alpha.1293-next.0",
57
- "@workday/canvas-kit-styling": "^15.0.0-alpha.1293-next.0",
55
+ "@workday/canvas-kit-popup-stack": "^15.0.0-alpha.1295-next.0",
56
+ "@workday/canvas-kit-preview-react": "^15.0.0-alpha.1295-next.0",
57
+ "@workday/canvas-kit-styling": "^15.0.0-alpha.1295-next.0",
58
58
  "@workday/canvas-system-icons-web": "^3.0.36",
59
59
  "@workday/canvas-tokens-web": "^3.1.1",
60
60
  "@workday/design-assets-types": "^0.2.10",
@@ -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": "3af12af1258fa5f8a09c702f9bb322b5a1f0653d"
72
+ "gitHead": "f930e8fc181a26555c35e6e081cf4e1405f4c6fa"
73
73
  }
package/skeleton/lib/parts/SkeletonHeader.tsx CHANGED
@@ -57,7 +57,7 @@ export const SkeletonHeader = createComponent('div')<SkeletonHeaderProps>({
57
57
  elemProps,
58
58
  skeletonHeaderStencil({
59
59
  width: typeof width === 'number' ? px2rem(width) : width,
60
- backgroundColor: backgroundColor,
60
+ backgroundColor,
61
61
  height: typeof height === 'number' ? px2rem(height) : height,
62
62
  })
63
63
  )}
package/skeleton/lib/parts/SkeletonText.tsx CHANGED
@@ -38,20 +38,12 @@ export const SkeletonText = createComponent('div')({
38
38
  displayName: 'Skeleton.Text',
39
39
  Component: ({backgroundColor, lineCount = 2, ...elemProps}: SkeletonTextProps, ref, Element) => {
40
40
  const lines = new Array(lineCount).fill(null);
41
- return lineCount <= 0 ? null : (
42
- <Element
43
- ref={ref}
44
- {...handleCsProp(
45
- elemProps,
46
- skeletonTextStencil({
47
- backgroundColor,
48
- })
49
- )}
50
- >
41
+ return lineCount > 0 ? (
42
+ <Element ref={ref} {...handleCsProp(elemProps, skeletonTextStencil({backgroundColor}))}>
51
43
  {lines.map((_value, index) => (
52
44
  <div data-part={'skeleton-text-lines'} key={index}></div>
53
45
  ))}
54
46
  </Element>
55
- );
47
+ ) : null;
56
48
  },
57
49
  });