@workday/canvas-kit-react 11.2.14 → 11.2.16
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/common/lib/utils/mergeProps.ts +3 -0
- package/dist/commonjs/common/lib/utils/mergeProps.d.ts.map +1 -1
- package/dist/commonjs/common/lib/utils/mergeProps.js +4 -0
- package/dist/commonjs/switch/lib/Switch.d.ts.map +1 -1
- package/dist/commonjs/switch/lib/Switch.js +11 -11
- package/dist/es6/common/lib/utils/mergeProps.d.ts.map +1 -1
- package/dist/es6/common/lib/utils/mergeProps.js +4 -0
- package/dist/es6/switch/lib/Switch.d.ts.map +1 -1
- package/dist/es6/switch/lib/Switch.js +12 -12
- package/package.json +4 -4
- package/switch/lib/Switch.tsx +4 -1
|
@@ -50,6 +50,9 @@ export function mergeProps<T extends object, S extends object>(
|
|
|
50
50
|
// @ts-ignore Typescript complains that key might not exist in `targetProps` since we're iterating over sourceProps. At runtime this doesn't matter
|
|
51
51
|
} else if (targetProps[key] === null) {
|
|
52
52
|
// target props is trying to disable the prop for whatever reason. Consider `null` a "remove this prop"
|
|
53
|
+
} else if (key === 'className' && targetProps.hasOwnProperty(key)) {
|
|
54
|
+
// @ts-ignore merging class names
|
|
55
|
+
returnProps[key] = `${targetProps[key]} ${sourceProps[key]}`;
|
|
53
56
|
} else {
|
|
54
57
|
// @ts-ignore TS has more object constraint complaints that aren't useful here
|
|
55
58
|
returnProps[key] = sourceProps[key];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mergeProps.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/mergeProps.ts"],"names":[],"mappings":"AAMA;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,EAC3D,WAAW,EAAE,CAAC,EACd,WAAW,EAAE,CAAC,GACb,CAAC,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"mergeProps.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/mergeProps.ts"],"names":[],"mappings":"AAMA;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,EAC3D,WAAW,EAAE,CAAC,EACd,WAAW,EAAE,CAAC,GACb,CAAC,GAAG,CAAC,CA8CP"}
|
|
@@ -49,6 +49,10 @@ function mergeProps(targetProps, sourceProps) {
|
|
|
49
49
|
else if (targetProps[key] === null) {
|
|
50
50
|
// target props is trying to disable the prop for whatever reason. Consider `null` a "remove this prop"
|
|
51
51
|
}
|
|
52
|
+
else if (key === 'className' && targetProps.hasOwnProperty(key)) {
|
|
53
|
+
// @ts-ignore merging class names
|
|
54
|
+
returnProps[key] = `${targetProps[key]} ${sourceProps[key]}`;
|
|
55
|
+
}
|
|
52
56
|
else {
|
|
53
57
|
// @ts-ignore TS has more object constraint complaints that aren't useful here
|
|
54
58
|
returnProps[key] = sourceProps[key];
|
|
@@ -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) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mergeProps.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/mergeProps.ts"],"names":[],"mappings":"AAMA;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,EAC3D,WAAW,EAAE,CAAC,EACd,WAAW,EAAE,CAAC,GACb,CAAC,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"mergeProps.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/mergeProps.ts"],"names":[],"mappings":"AAMA;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,EAC3D,WAAW,EAAE,CAAC,EACd,WAAW,EAAE,CAAC,GACb,CAAC,GAAG,CAAC,CA8CP"}
|
|
@@ -46,6 +46,10 @@ export function mergeProps(targetProps, sourceProps) {
|
|
|
46
46
|
else if (targetProps[key] === null) {
|
|
47
47
|
// target props is trying to disable the prop for whatever reason. Consider `null` a "remove this prop"
|
|
48
48
|
}
|
|
49
|
+
else if (key === 'className' && targetProps.hasOwnProperty(key)) {
|
|
50
|
+
// @ts-ignore merging class names
|
|
51
|
+
returnProps[key] = `${targetProps[key]} ${sourceProps[key]}`;
|
|
52
|
+
}
|
|
49
53
|
else {
|
|
50
54
|
// @ts-ignore TS has more object constraint complaints that aren't useful here
|
|
51
55
|
returnProps[key] = sourceProps[key];
|
|
@@ -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) => {
|
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.16",
|
|
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.16",
|
|
53
|
+
"@workday/canvas-kit-styling": "^11.2.16",
|
|
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": "dbdda2e826e303179385fee74342e5a0d36e9846"
|
|
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
|
},
|