@workday/canvas-kit-react 11.2.13 → 11.2.15
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/switch/lib/Switch.d.ts.map +1 -1
- package/dist/commonjs/switch/lib/Switch.js +11 -11
- package/dist/commonjs/text-input/lib/InputGroup.js +1 -1
- package/dist/es6/switch/lib/Switch.d.ts.map +1 -1
- package/dist/es6/switch/lib/Switch.js +12 -12
- package/dist/es6/text-input/lib/InputGroup.js +1 -1
- package/package.json +4 -4
- package/switch/lib/Switch.tsx +4 -1
- package/text-input/lib/InputGroup.tsx +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../switch/lib/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,SAAS,EAAyB,MAAM,kCAAkC,CAAC;AAKpG,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../switch/lib/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,SAAS,EAAyB,MAAM,kCAAkC,CAAC;AAKpG,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AA6ID,eAAO,MAAM,MAAM;;CA+BjB,CAAC"}
|
|
@@ -26,8 +26,8 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
|
26
26
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
27
27
|
const layout_1 = require("../../layout");
|
|
28
28
|
const switchContainerStencil = canvas_kit_styling_1.createStencil({
|
|
29
|
-
base: { name: "
|
|
30
|
-
}, "switch-container-
|
|
29
|
+
base: { name: "3c93da", styles: "box-sizing:border-box;position:relative;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);" }
|
|
30
|
+
}, "switch-container-debbb0");
|
|
31
31
|
const SwitchContainer = common_1.createComponent('div')({
|
|
32
32
|
displayName: 'SwitchContainer',
|
|
33
33
|
Component: ({ children, ...elemProps }, ref, Element) => {
|
|
@@ -35,14 +35,14 @@ const SwitchContainer = common_1.createComponent('div')({
|
|
|
35
35
|
},
|
|
36
36
|
});
|
|
37
37
|
const switchInputStencil = canvas_kit_styling_1.createStencil({
|
|
38
|
-
base: { name: "
|
|
38
|
+
base: { name: "509a50", styles: "box-sizing:border-box;display:flex;position:absolute;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);margin:var(--cnvs-sys-space-zero);margin-left:var(--cnvs-sys-space-x1);border-radius:var(--cnvs-sys-shape-round);opacity:0;cursor:pointer;&:checked, &.checked{& ~ div:first-of-type{background-color:var(--cnvs-brand-primary-base);}&:disabled, &.disabled{& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}}&:disabled, &.disabled{cursor:not-allowed;& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}&:focus-visible, &:focus, &.focus{outline:none;& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}}" },
|
|
39
39
|
modifiers: {
|
|
40
40
|
error: {
|
|
41
|
-
error: { name: "
|
|
42
|
-
alert: { name: "
|
|
41
|
+
error: { name: "265278", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n 0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-error-base),\n 0 0 0 0.3125rem transparent;}" },
|
|
42
|
+
alert: { name: "535699", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n 0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-alert-base),\n 0 0 0 0.3125rem var(--cnvs-brand-alert-darkest);}" }
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
|
-
}, "switch-input-
|
|
45
|
+
}, "switch-input-7f69d7");
|
|
46
46
|
const SwitchInput = common_1.createComponent('input')({
|
|
47
47
|
displayName: 'SwitchInput',
|
|
48
48
|
Component: ({ error, ...elemProps }, ref, Element) => {
|
|
@@ -50,8 +50,8 @@ const SwitchInput = common_1.createComponent('input')({
|
|
|
50
50
|
},
|
|
51
51
|
});
|
|
52
52
|
const switchBackgroundStencil = canvas_kit_styling_1.createStencil({
|
|
53
|
-
base: { name: "
|
|
54
|
-
}, "switch-background-
|
|
53
|
+
base: { name: "bc77b2", styles: "box-sizing:border-box;position:absolute;display:flex;align-items:center;pointer-events:none;margin-top:var(--cnvs-sys-space-x1);width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-shape-round);padding:var(--cnvs-sys-space-zero) 0.125rem;transition:background-color 200ms ease;background-color:var(--cnvs-sys-color-bg-muted-soft);" }
|
|
54
|
+
}, "switch-background-0e2846");
|
|
55
55
|
const SwitchBackground = common_1.createComponent('div')({
|
|
56
56
|
displayName: 'SwitchBackground',
|
|
57
57
|
Component: ({ children, ...elemProps }, ref, Element) => {
|
|
@@ -59,13 +59,13 @@ const SwitchBackground = common_1.createComponent('div')({
|
|
|
59
59
|
},
|
|
60
60
|
});
|
|
61
61
|
const switchCircleStencil = canvas_kit_styling_1.createStencil({
|
|
62
|
-
base: { name: "
|
|
62
|
+
base: { name: "216a89", styles: "box-sizing:border-box;width:var(--cnvs-sys-space-x3);height:var(--cnvs-sys-space-x3);border-radius:var(--cnvs-sys-shape-round);box-shadow:var(--cnvs-sys-depth-1);transition:transform 150ms ease;pointer-events:none;background-color:var(--cnvs-brand-primary-accent);transform:translateX(var(--cnvs-sys-space-zero));" },
|
|
63
63
|
modifiers: {
|
|
64
64
|
checked: {
|
|
65
|
-
true: { name: "
|
|
65
|
+
true: { name: "74a230", styles: "transform:translateX(var(--cnvs-sys-space-x4));:dir(rtl){transform:translateX(calc(var(--cnvs-sys-space-x4) * -1));}" }
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
|
-
}, "switch-circle-
|
|
68
|
+
}, "switch-circle-780885");
|
|
69
69
|
const SwitchCircle = common_1.createComponent('div')({
|
|
70
70
|
displayName: 'SwitchCircle',
|
|
71
71
|
Component: ({ checked, ...elemProps }, ref, Element) => {
|
|
@@ -196,5 +196,5 @@ exports.InputGroup = common_1.createContainer('div')({
|
|
|
196
196
|
}
|
|
197
197
|
return child;
|
|
198
198
|
});
|
|
199
|
-
return (react_1.default.createElement(layout_1.Flex, Object.assign({ as: Element, position: "relative" }, elemProps), mappedChildren));
|
|
199
|
+
return (react_1.default.createElement(layout_1.Flex, Object.assign({ as: Element, position: "relative", alignItems: "center" }, elemProps), mappedChildren));
|
|
200
200
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../switch/lib/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,SAAS,EAAyB,MAAM,kCAAkC,CAAC;AAKpG,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../switch/lib/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,SAAS,EAAyB,MAAM,kCAAkC,CAAC;AAKpG,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AA6ID,eAAO,MAAM,MAAM;;CA+BjB,CAAC"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { createComponent, ErrorType, focusRing, useUniqueId } from '@workday/canvas-kit-react/common';
|
|
3
|
-
import { createStencil, px2rem } from '@workday/canvas-kit-styling';
|
|
3
|
+
import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
|
|
4
4
|
import { brand, system } from '@workday/canvas-tokens-web';
|
|
5
5
|
import { mergeStyles } from '../../layout';
|
|
6
6
|
const switchContainerStencil = createStencil({
|
|
7
|
-
base: { name: "
|
|
8
|
-
}, "switch-container-
|
|
7
|
+
base: { name: "3c93da", styles: "box-sizing:border-box;position:relative;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);" }
|
|
8
|
+
}, "switch-container-debbb0");
|
|
9
9
|
const SwitchContainer = createComponent('div')({
|
|
10
10
|
displayName: 'SwitchContainer',
|
|
11
11
|
Component: ({ children, ...elemProps }, ref, Element) => {
|
|
@@ -13,14 +13,14 @@ const SwitchContainer = createComponent('div')({
|
|
|
13
13
|
},
|
|
14
14
|
});
|
|
15
15
|
const switchInputStencil = createStencil({
|
|
16
|
-
base: { name: "
|
|
16
|
+
base: { name: "509a50", styles: "box-sizing:border-box;display:flex;position:absolute;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);margin:var(--cnvs-sys-space-zero);margin-left:var(--cnvs-sys-space-x1);border-radius:var(--cnvs-sys-shape-round);opacity:0;cursor:pointer;&:checked, &.checked{& ~ div:first-of-type{background-color:var(--cnvs-brand-primary-base);}&:disabled, &.disabled{& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}}&:disabled, &.disabled{cursor:not-allowed;& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}&:focus-visible, &:focus, &.focus{outline:none;& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}}" },
|
|
17
17
|
modifiers: {
|
|
18
18
|
error: {
|
|
19
|
-
error: { name: "
|
|
20
|
-
alert: { name: "
|
|
19
|
+
error: { name: "265278", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n 0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-error-base),\n 0 0 0 0.3125rem transparent;}" },
|
|
20
|
+
alert: { name: "535699", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n 0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-alert-base),\n 0 0 0 0.3125rem var(--cnvs-brand-alert-darkest);}" }
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
|
-
}, "switch-input-
|
|
23
|
+
}, "switch-input-7f69d7");
|
|
24
24
|
const SwitchInput = createComponent('input')({
|
|
25
25
|
displayName: 'SwitchInput',
|
|
26
26
|
Component: ({ error, ...elemProps }, ref, Element) => {
|
|
@@ -28,8 +28,8 @@ const SwitchInput = createComponent('input')({
|
|
|
28
28
|
},
|
|
29
29
|
});
|
|
30
30
|
const switchBackgroundStencil = createStencil({
|
|
31
|
-
base: { name: "
|
|
32
|
-
}, "switch-background-
|
|
31
|
+
base: { name: "bc77b2", styles: "box-sizing:border-box;position:absolute;display:flex;align-items:center;pointer-events:none;margin-top:var(--cnvs-sys-space-x1);width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-shape-round);padding:var(--cnvs-sys-space-zero) 0.125rem;transition:background-color 200ms ease;background-color:var(--cnvs-sys-color-bg-muted-soft);" }
|
|
32
|
+
}, "switch-background-0e2846");
|
|
33
33
|
const SwitchBackground = createComponent('div')({
|
|
34
34
|
displayName: 'SwitchBackground',
|
|
35
35
|
Component: ({ children, ...elemProps }, ref, Element) => {
|
|
@@ -37,13 +37,13 @@ const SwitchBackground = createComponent('div')({
|
|
|
37
37
|
},
|
|
38
38
|
});
|
|
39
39
|
const switchCircleStencil = createStencil({
|
|
40
|
-
base: { name: "
|
|
40
|
+
base: { name: "216a89", styles: "box-sizing:border-box;width:var(--cnvs-sys-space-x3);height:var(--cnvs-sys-space-x3);border-radius:var(--cnvs-sys-shape-round);box-shadow:var(--cnvs-sys-depth-1);transition:transform 150ms ease;pointer-events:none;background-color:var(--cnvs-brand-primary-accent);transform:translateX(var(--cnvs-sys-space-zero));" },
|
|
41
41
|
modifiers: {
|
|
42
42
|
checked: {
|
|
43
|
-
true: { name: "
|
|
43
|
+
true: { name: "74a230", styles: "transform:translateX(var(--cnvs-sys-space-x4));:dir(rtl){transform:translateX(calc(var(--cnvs-sys-space-x4) * -1));}" }
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
|
-
}, "switch-circle-
|
|
46
|
+
}, "switch-circle-780885");
|
|
47
47
|
const SwitchCircle = createComponent('div')({
|
|
48
48
|
displayName: 'SwitchCircle',
|
|
49
49
|
Component: ({ checked, ...elemProps }, ref, Element) => {
|
|
@@ -190,5 +190,5 @@ export const InputGroup = createContainer('div')({
|
|
|
190
190
|
}
|
|
191
191
|
return child;
|
|
192
192
|
});
|
|
193
|
-
return (React.createElement(Flex, Object.assign({ as: Element, position: "relative" }, elemProps), mappedChildren));
|
|
193
|
+
return (React.createElement(Flex, Object.assign({ as: Element, position: "relative", alignItems: "center" }, elemProps), mappedChildren));
|
|
194
194
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-react",
|
|
3
|
-
"version": "11.2.
|
|
3
|
+
"version": "11.2.15",
|
|
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.2.
|
|
53
|
-
"@workday/canvas-kit-styling": "^11.2.
|
|
52
|
+
"@workday/canvas-kit-popup-stack": "^11.2.15",
|
|
53
|
+
"@workday/canvas-kit-styling": "^11.2.15",
|
|
54
54
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
55
55
|
"@workday/canvas-tokens-web": "^2.0.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": "
|
|
70
|
+
"gitHead": "7070b588614891bf36ecfaf7dcedf872cc776afb"
|
|
71
71
|
}
|
package/switch/lib/Switch.tsx
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import {createComponent, ErrorType, focusRing, useUniqueId} from '@workday/canvas-kit-react/common';
|
|
3
|
-
import {createStencil, px2rem} from '@workday/canvas-kit-styling';
|
|
3
|
+
import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
|
|
4
4
|
import {brand, system} from '@workday/canvas-tokens-web';
|
|
5
5
|
import {mergeStyles} from '../../layout';
|
|
6
6
|
|
|
@@ -158,6 +158,9 @@ const switchCircleStencil = createStencil({
|
|
|
158
158
|
checked: {
|
|
159
159
|
true: {
|
|
160
160
|
transform: `translateX(${system.space.x4})`,
|
|
161
|
+
':dir(rtl)': {
|
|
162
|
+
transform: `translateX(${calc.negate(system.space.x4)})`,
|
|
163
|
+
},
|
|
161
164
|
},
|
|
162
165
|
},
|
|
163
166
|
},
|
|
@@ -243,7 +243,7 @@ export const InputGroup = createContainer('div')({
|
|
|
243
243
|
});
|
|
244
244
|
|
|
245
245
|
return (
|
|
246
|
-
<Flex as={Element} position="relative" {...elemProps}>
|
|
246
|
+
<Flex as={Element} position="relative" alignItems="center" {...elemProps}>
|
|
247
247
|
{mappedChildren}
|
|
248
248
|
</Flex>
|
|
249
249
|
);
|