@workday/canvas-kit-preview-react 15.0.0-alpha.0292-next.0 → 15.0.0-alpha.0293-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 (7) hide show
  1. package/dist/commonjs/multi-select/lib/MultiSelectInput.js +2 -2
  2. package/dist/commonjs/switch/lib/SwitchIcon.js +3 -3
  3. package/dist/es6/multi-select/lib/MultiSelectInput.js +2 -2
  4. package/dist/es6/switch/lib/SwitchIcon.js +4 -4
  5. package/multi-select/lib/MultiSelectInput.tsx +2 -2
  6. package/package.json +4 -4
  7. package/switch/lib/SwitchIcon.tsx +6 -6
package/dist/commonjs/multi-select/lib/MultiSelectInput.js CHANGED
@@ -51,11 +51,11 @@ exports.MultiSelectInput = (0, common_1.createSubcomponent)(text_input_1.TextInp
51
51
  modelHook: useMultiSelectModel_1.useMultiSelectModel,
52
52
  elemPropsHook: exports.useMultiSelectInput,
53
53
  })(({ className, cs, style, error, 'aria-labelledby': ariaLabelledBy, removeLabel, disabled, formInputProps, ...elemProps }, Element) => {
54
- return ((0, jsx_runtime_1.jsxs)("div", { ...(0, canvas_kit_styling_1.handleCsProp)({ className, cs, style }, (0, exports.multiSelectInputStencil)({ error })), children: [(0, jsx_runtime_1.jsxs)(text_input_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { "data-part": "form-input", ...formInputProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, readOnly: true, disabled: disabled, error: error, ...elemProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerEnd, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.caretDownSmallIcon }) })] }), (0, jsx_runtime_1.jsx)(MultiSelectedList_1.MultiSelectedList, { disabled: disabled, removeLabel: removeLabel })] }));
54
+ return ((0, jsx_runtime_1.jsxs)("div", { ...(0, canvas_kit_styling_1.handleCsProp)({ className, cs, style }, (0, exports.multiSelectInputStencil)({ error })), children: [(0, jsx_runtime_1.jsxs)(text_input_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { "data-part": "form-input", ...formInputProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, readOnly: true, disabled: disabled, error: error, ...elemProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerEnd, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.caretDownSmallIcon, size: "md" }) })] }), (0, jsx_runtime_1.jsx)(MultiSelectedList_1.MultiSelectedList, { disabled: disabled, removeLabel: removeLabel })] }));
55
55
  });
56
56
  exports.MultiSelectSearchInput = (0, common_1.createSubcomponent)(text_input_1.TextInput)({
57
57
  modelHook: useMultiSelectModel_1.useMultiSelectModel,
58
58
  elemPropsHook: exports.useMultiSelectInput,
59
59
  })(({ className, cs, style, 'aria-labelledby': ariaLabelledBy, removeLabel, formInputProps, ref, disabled, error, ...elemProps }, Element) => {
60
- return ((0, jsx_runtime_1.jsxs)("div", { ...(0, canvas_kit_styling_1.handleCsProp)({ className, cs, style }, (0, exports.multiSelectInputStencil)({})), children: [(0, jsx_runtime_1.jsxs)(text_input_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerStart, { pointerEvents: "none", width: canvas_tokens_web_1.system.space.x8, children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.searchIcon, size: canvas_tokens_web_1.system.space.x4 }) }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { "data-part": "form-input", placeholder: null, ...formInputProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, disabled: disabled, error: error, ...elemProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerEnd, { width: canvas_tokens_web_1.system.space.x4, children: (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.ClearButton, {}) }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerEnd, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.caretDownSmallIcon }) })] }), (0, jsx_runtime_1.jsx)(MultiSelectedList_1.MultiSelectedList, { removeLabel: removeLabel, disabled: disabled })] }));
60
+ return ((0, jsx_runtime_1.jsxs)("div", { ...(0, canvas_kit_styling_1.handleCsProp)({ className, cs, style }, (0, exports.multiSelectInputStencil)({})), children: [(0, jsx_runtime_1.jsxs)(text_input_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerStart, { pointerEvents: "none", width: canvas_tokens_web_1.system.space.x8, children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.searchIcon, size: canvas_tokens_web_1.system.space.x4 }) }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { "data-part": "form-input", placeholder: null, ...formInputProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, disabled: disabled, error: error, ...elemProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerEnd, { width: canvas_tokens_web_1.system.space.x4, children: (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.ClearButton, {}) }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerEnd, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.caretDownSmallIcon, size: "md" }) })] }), (0, jsx_runtime_1.jsx)(MultiSelectedList_1.MultiSelectedList, { removeLabel: removeLabel, disabled: disabled })] }));
61
61
  });
package/dist/commonjs/switch/lib/SwitchIcon.js CHANGED
@@ -8,13 +8,13 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
8
8
  const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
9
9
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
10
10
  exports.switchIconStencil = (0, canvas_kit_styling_1.createStencil)({
11
- base: { name: "45biwi", styles: "box-sizing:border-box;--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-inverse, var(--cnvs-brand-primary-accent));--size-svg-2af90b:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5));position:absolute;transition:transform 0ms;pointer-events:none;transform:translateX(0.6875rem);:dir(rtl){transform:translateX(-0.6875rem);}" },
11
+ base: { name: "4c8ws5", styles: "box-sizing:border-box;--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-inverse, var(--cnvs-brand-primary-accent));--size-svg-2af90b:var(--cnvs-component-system-icon-size-sm, 1.125rem);position:absolute;transition:transform 0ms;pointer-events:none;transform:translateX(0.75rem);:dir(rtl){transform:translateX(-0.75rem);}" },
12
12
  modifiers: {
13
13
  checked: {
14
- true: { name: "46c3r1", styles: "transform:translateX(-0.1875rem);:dir(rtl){transform:translateX(0.1875rem);}" }
14
+ true: { name: "474d80", styles: "transform:translateX(-0.125rem);:dir(rtl){transform:translateX(0.125rem);}" }
15
15
  }
16
16
  }
17
- }, "switch-icon-e431b6");
17
+ }, "switch-icon-d9bcd4");
18
18
  exports.SwitchIcon = (0, common_1.createComponent)('div')({
19
19
  displayName: 'SwitchIcon',
20
20
  Component: ({ checked, ...elemProps }, ref) => {
package/dist/es6/multi-select/lib/MultiSelectInput.js CHANGED
@@ -48,11 +48,11 @@ export const MultiSelectInput = createSubcomponent(TextInput)({
48
48
  modelHook: useMultiSelectModel,
49
49
  elemPropsHook: useMultiSelectInput,
50
50
  })(({ className, cs, style, error, 'aria-labelledby': ariaLabelledBy, removeLabel, disabled, formInputProps, ...elemProps }, Element) => {
51
- return (_jsxs("div", { ...handleCsProp({ className, cs, style }, multiSelectInputStencil({ error })), children: [_jsxs(InputGroup, { children: [_jsx(InputGroup.Input, { "data-part": "form-input", ...formInputProps }), _jsx(InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, readOnly: true, disabled: disabled, error: error, ...elemProps }), _jsx(InputGroup.InnerEnd, { pointerEvents: "none", children: _jsx(SystemIcon, { icon: caretDownSmallIcon }) })] }), _jsx(MultiSelectedList, { disabled: disabled, removeLabel: removeLabel })] }));
51
+ return (_jsxs("div", { ...handleCsProp({ className, cs, style }, multiSelectInputStencil({ error })), children: [_jsxs(InputGroup, { children: [_jsx(InputGroup.Input, { "data-part": "form-input", ...formInputProps }), _jsx(InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, readOnly: true, disabled: disabled, error: error, ...elemProps }), _jsx(InputGroup.InnerEnd, { pointerEvents: "none", children: _jsx(SystemIcon, { icon: caretDownSmallIcon, size: "md" }) })] }), _jsx(MultiSelectedList, { disabled: disabled, removeLabel: removeLabel })] }));
52
52
  });
53
53
  export const MultiSelectSearchInput = createSubcomponent(TextInput)({
54
54
  modelHook: useMultiSelectModel,
55
55
  elemPropsHook: useMultiSelectInput,
56
56
  })(({ className, cs, style, 'aria-labelledby': ariaLabelledBy, removeLabel, formInputProps, ref, disabled, error, ...elemProps }, Element) => {
57
- return (_jsxs("div", { ...handleCsProp({ className, cs, style }, multiSelectInputStencil({})), children: [_jsxs(InputGroup, { children: [_jsx(InputGroup.InnerStart, { pointerEvents: "none", width: system.space.x8, children: _jsx(SystemIcon, { icon: searchIcon, size: system.space.x4 }) }), _jsx(InputGroup.Input, { "data-part": "form-input", placeholder: null, ...formInputProps }), _jsx(InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, disabled: disabled, error: error, ...elemProps }), _jsx(InputGroup.InnerEnd, { width: system.space.x4, children: _jsx(InputGroup.ClearButton, {}) }), _jsx(InputGroup.InnerEnd, { pointerEvents: "none", children: _jsx(SystemIcon, { icon: caretDownSmallIcon }) })] }), _jsx(MultiSelectedList, { removeLabel: removeLabel, disabled: disabled })] }));
57
+ return (_jsxs("div", { ...handleCsProp({ className, cs, style }, multiSelectInputStencil({})), children: [_jsxs(InputGroup, { children: [_jsx(InputGroup.InnerStart, { pointerEvents: "none", width: system.space.x8, children: _jsx(SystemIcon, { icon: searchIcon, size: system.space.x4 }) }), _jsx(InputGroup.Input, { "data-part": "form-input", placeholder: null, ...formInputProps }), _jsx(InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, disabled: disabled, error: error, ...elemProps }), _jsx(InputGroup.InnerEnd, { width: system.space.x4, children: _jsx(InputGroup.ClearButton, {}) }), _jsx(InputGroup.InnerEnd, { pointerEvents: "none", children: _jsx(SystemIcon, { icon: caretDownSmallIcon, size: "md" }) })] }), _jsx(MultiSelectedList, { removeLabel: removeLabel, disabled: disabled })] }));
58
58
  });
package/dist/es6/switch/lib/SwitchIcon.js CHANGED
@@ -3,15 +3,15 @@ import { createComponent } from '@workday/canvas-kit-react/common';
3
3
  import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
4
4
  import { createStencil, cssVar, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
5
5
  import { checkSmallIcon, xSmallIcon } from '@workday/canvas-system-icons-web';
6
- import { brand, system } from '@workday/canvas-tokens-web';
6
+ import { brand, component, system } from '@workday/canvas-tokens-web';
7
7
  export const switchIconStencil = createStencil({
8
- base: { name: "45biwi", styles: "box-sizing:border-box;--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-inverse, var(--cnvs-brand-primary-accent));--size-svg-2af90b:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5));position:absolute;transition:transform 0ms;pointer-events:none;transform:translateX(0.6875rem);:dir(rtl){transform:translateX(-0.6875rem);}" },
8
+ base: { name: "4c8ws5", styles: "box-sizing:border-box;--color-system-icon-f4b83b:var(--cnvs-sys-color-fg-inverse, var(--cnvs-brand-primary-accent));--size-svg-2af90b:var(--cnvs-component-system-icon-size-sm, 1.125rem);position:absolute;transition:transform 0ms;pointer-events:none;transform:translateX(0.75rem);:dir(rtl){transform:translateX(-0.75rem);}" },
9
9
  modifiers: {
10
10
  checked: {
11
- true: { name: "46c3r1", styles: "transform:translateX(-0.1875rem);:dir(rtl){transform:translateX(0.1875rem);}" }
11
+ true: { name: "474d80", styles: "transform:translateX(-0.125rem);:dir(rtl){transform:translateX(0.125rem);}" }
12
12
  }
13
13
  }
14
- }, "switch-icon-e431b6");
14
+ }, "switch-icon-d9bcd4");
15
15
  export const SwitchIcon = createComponent('div')({
16
16
  displayName: 'SwitchIcon',
17
17
  Component: ({ checked, ...elemProps }, ref) => {
package/multi-select/lib/MultiSelectInput.tsx CHANGED
@@ -255,7 +255,7 @@ export const MultiSelectInput = createSubcomponent(TextInput)({
255
255
  {...elemProps}
256
256
  />
257
257
  <InputGroup.InnerEnd pointerEvents="none">
258
- <SystemIcon icon={caretDownSmallIcon} />
258
+ <SystemIcon icon={caretDownSmallIcon} size="md" />
259
259
  </InputGroup.InnerEnd>
260
260
  </InputGroup>
261
261
  <MultiSelectedList disabled={disabled} removeLabel={removeLabel} />
@@ -306,7 +306,7 @@ export const MultiSelectSearchInput = createSubcomponent(TextInput)({
306
306
  <InputGroup.ClearButton />
307
307
  </InputGroup.InnerEnd>
308
308
  <InputGroup.InnerEnd pointerEvents="none">
309
- <SystemIcon icon={caretDownSmallIcon} />
309
+ <SystemIcon icon={caretDownSmallIcon} size="md" />
310
310
  </InputGroup.InnerEnd>
311
311
  </InputGroup>
312
312
  <MultiSelectedList removeLabel={removeLabel} disabled={disabled} />
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-preview-react",
3
- "version": "15.0.0-alpha.0292-next.0",
3
+ "version": "15.0.0-alpha.0293-next.0",
4
4
  "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -48,8 +48,8 @@
48
48
  "dependencies": {
49
49
  "@emotion/react": "^11.7.1",
50
50
  "@emotion/styled": "^11.6.0",
51
- "@workday/canvas-kit-react": "^15.0.0-alpha.0292-next.0",
52
- "@workday/canvas-kit-styling": "^15.0.0-alpha.0292-next.0",
51
+ "@workday/canvas-kit-react": "^15.0.0-alpha.0293-next.0",
52
+ "@workday/canvas-kit-styling": "^15.0.0-alpha.0293-next.0",
53
53
  "@workday/canvas-system-icons-web": "4.0.2",
54
54
  "@workday/canvas-tokens-web": "4.2.0",
55
55
  "@workday/design-assets-types": "^0.3.0"
@@ -60,5 +60,5 @@
60
60
  "react-hook-form": "7.36.1",
61
61
  "yup": "^0.32.11"
62
62
  },
63
- "gitHead": "4406470aaa0662ba08955fd47fb40bdbef18a8fe"
63
+ "gitHead": "e21a3fdd01e93a24636f46fc9a2aded478404cc8"
64
64
  }
package/switch/lib/SwitchIcon.tsx CHANGED
@@ -2,7 +2,7 @@ import {createComponent} from '@workday/canvas-kit-react/common';
2
2
  import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
3
3
  import {createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
4
4
  import {checkSmallIcon, xSmallIcon} from '@workday/canvas-system-icons-web';
5
- import {brand, system} from '@workday/canvas-tokens-web';
5
+ import {brand, component, system} from '@workday/canvas-tokens-web';
6
6
 
7
7
  import {SwitchProps} from './Switch';
8
8
 
@@ -11,21 +11,21 @@ export const switchIconStencil = createStencil({
11
11
  // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
12
12
  [systemIconStencil.vars.color]: cssVar(system.color.fg.inverse, brand.primary.accent),
13
13
  // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
14
- [systemIconStencil.vars.size]: cssVar(system.size.xxs, system.space.x5),
14
+ [systemIconStencil.vars.size]: cssVar(component.systemIcon.size.sm, px2rem(18)),
15
15
  position: 'absolute',
16
16
  transition: 'transform 0ms',
17
17
  pointerEvents: 'none',
18
- transform: `translateX(${px2rem(11)})`,
18
+ transform: `translateX(${px2rem(12)})`,
19
19
  ':dir(rtl)': {
20
- transform: `translateX(${px2rem(-11)})`,
20
+ transform: `translateX(${px2rem(-12)})`,
21
21
  },
22
22
  },
23
23
  modifiers: {
24
24
  checked: {
25
25
  true: {
26
- transform: `translateX(${px2rem(-3)})`,
26
+ transform: `translateX(${px2rem(-2)})`,
27
27
  ':dir(rtl)': {
28
- transform: `translateX(${px2rem(3)})`,
28
+ transform: `translateX(${px2rem(2)})`,
29
29
  },
30
30
  },
31
31
  },