@workday/canvas-kit-labs-react 14.0.0-alpha.1254-next.0 → 14.0.0-alpha.1256-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.
- package/ai-ingress-button/lib/AIIngressButton.tsx +4 -1
- package/combobox/lib/Combobox.tsx +1 -6
- package/dist/commonjs/ai-ingress-button/lib/AIIngressButton.d.ts +1 -1
- package/dist/commonjs/ai-ingress-button/lib/AIIngressButton.d.ts.map +1 -1
- package/dist/commonjs/ai-ingress-button/lib/AIIngressButton.js +6 -6
- package/dist/commonjs/combobox/lib/Combobox.d.ts.map +1 -1
- package/dist/commonjs/combobox/lib/Combobox.js +1 -4
- package/dist/es6/ai-ingress-button/lib/AIIngressButton.d.ts +1 -1
- package/dist/es6/ai-ingress-button/lib/AIIngressButton.d.ts.map +1 -1
- package/dist/es6/ai-ingress-button/lib/AIIngressButton.js +6 -6
- package/dist/es6/combobox/lib/Combobox.d.ts.map +1 -1
- package/dist/es6/combobox/lib/Combobox.js +2 -5
- package/package.json +4 -4
|
@@ -5,7 +5,10 @@ import {system, base} from '@workday/canvas-tokens-web';
|
|
|
5
5
|
import {systemIconStencil} from '@workday/canvas-kit-react/icon';
|
|
6
6
|
import {getAIIngressIcon} from './AIIngressIcon';
|
|
7
7
|
export interface AIIngressButtonProps
|
|
8
|
-
extends Omit<
|
|
8
|
+
extends Omit<
|
|
9
|
+
BaseButtonProps,
|
|
10
|
+
'size' | 'colors' | 'icon' | 'iconPosition' | 'shouldMirrorIcon' | 'shouldMirrorIconInRTL'
|
|
11
|
+
> {
|
|
9
12
|
/**
|
|
10
13
|
* When true, indicates that the AI Ingress button is toggled.
|
|
11
14
|
*/
|
|
@@ -4,7 +4,6 @@ import {
|
|
|
4
4
|
GrowthBehavior,
|
|
5
5
|
useForkRef,
|
|
6
6
|
styled,
|
|
7
|
-
useIsRTL,
|
|
8
7
|
useUniqueId,
|
|
9
8
|
filterOutProps,
|
|
10
9
|
} from '@workday/canvas-kit-react/common';
|
|
@@ -240,9 +239,6 @@ export const Combobox = ({
|
|
|
240
239
|
}
|
|
241
240
|
}, [getStatusText, interactiveAutocompleteItems, isOpened]);
|
|
242
241
|
|
|
243
|
-
// Used to set the position of the reset button and the padding direction inside the input container
|
|
244
|
-
const isRTL = useIsRTL();
|
|
245
|
-
|
|
246
242
|
const setInputValue = useCallback(
|
|
247
243
|
(newValue: string) => {
|
|
248
244
|
_setValue(newValue);
|
|
@@ -434,10 +430,9 @@ export const Combobox = ({
|
|
|
434
430
|
const renderChildren = (inputElement: React.ReactElement<TextInputProps>): React.ReactNode => {
|
|
435
431
|
let cssOverride: CSSObject = {':focus': {zIndex: 2}};
|
|
436
432
|
if (showClearButton) {
|
|
437
|
-
const paddingDirection = isRTL ? 'paddingLeft' : 'paddingRight';
|
|
438
433
|
cssOverride = {
|
|
439
434
|
...cssOverride,
|
|
440
|
-
|
|
435
|
+
paddingInlineEnd: space.xl,
|
|
441
436
|
};
|
|
442
437
|
}
|
|
443
438
|
const newTextInputProps: Partial<
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { BaseButtonProps } from '@workday/canvas-kit-react/button';
|
|
2
|
-
export interface AIIngressButtonProps extends Omit<BaseButtonProps, 'size' | 'colors' | 'icon' | 'iconPosition' | 'shouldMirrorIcon'> {
|
|
2
|
+
export interface AIIngressButtonProps extends Omit<BaseButtonProps, 'size' | 'colors' | 'icon' | 'iconPosition' | 'shouldMirrorIcon' | 'shouldMirrorIconInRTL'> {
|
|
3
3
|
/**
|
|
4
4
|
* When true, indicates that the AI Ingress button is toggled.
|
|
5
5
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AIIngressButton.d.ts","sourceRoot":"","sources":["../../../../ai-ingress-button/lib/AIIngressButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAgB,MAAM,kCAAkC,CAAC;AAK5F,MAAM,WAAW,oBACf,SAAQ,IAAI,
|
|
1
|
+
{"version":3,"file":"AIIngressButton.d.ts","sourceRoot":"","sources":["../../../../ai-ingress-button/lib/AIIngressButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAgB,MAAM,kCAAkC,CAAC;AAK5F,MAAM,WAAW,oBACf,SAAQ,IAAI,CACV,eAAe,EACf,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,cAAc,GAAG,kBAAkB,GAAG,uBAAuB,CAC3F;IACD;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAoBD,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAqIjC,CAAC;AAEH,eAAO,MAAM,eAAe,6FAmB1B,CAAC"}
|
|
@@ -26,23 +26,23 @@ const glowHappyHour = canvas_tokens_web_1.base.orange400; //'#FD7E00';
|
|
|
26
26
|
const glowThumbtack = canvas_tokens_web_1.base.coral500; //'#FC5B05';
|
|
27
27
|
exports.AIIngressButtonStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
28
28
|
extends: button_1.buttonStencil,
|
|
29
|
-
base: { name: "
|
|
29
|
+
base: { name: "gs4s0", styles: "box-sizing:border-box;--background-button-85bf0e:var(--cnvs-sys-color-bg-ai-strongest);border-radius:var(--cnvs-sys-shape-round);height:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));transition:box-shadow 300ms ease-out, background 300ms ease-out;.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:disabled, &:disabled:active, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
|
|
30
30
|
modifiers: {
|
|
31
31
|
variant: {
|
|
32
|
-
inverse: { name: "
|
|
32
|
+
inverse: { name: "s0vku", styles: "--background-button-85bf0e:var(--cnvs-sys-color-bg-default);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:2px solid var(--cnvs-sys-color-border-ai) ;}" }
|
|
33
33
|
},
|
|
34
34
|
toggled: {
|
|
35
|
-
true: { name: "
|
|
36
|
-
false: { name: "
|
|
35
|
+
true: { name: "1ruoc5", styles: "--background-button-85bf0e:var(--cnvs-sys-color-bg-default);transition:box-shadow 300ms ease-out, background 300ms ease-out;box-shadow:0px 0px 4.9px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 0.98px 0px var(--cnvs-base-palette-amber-100), 0px 0px 1.96px 0px var(--cnvs-base-palette-amber-300), 0px 0px 2.94px 0px var(--cnvs-base-palette-amber-300), 0px 0px 4.9px 0px var(--cnvs-base-palette-orange-400), 0px 0px 7.36px 0px var(--cnvs-base-palette-coral-500), 0px 0px 9.81px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));border:1px solid var(--cnvs-sys-color-border-container) ;}" },
|
|
36
|
+
false: { name: "19sti3", styles: "transition:box-shadow 300ms ease-out, background 300ms ease-out;" }
|
|
37
37
|
}
|
|
38
38
|
},
|
|
39
39
|
compound: [
|
|
40
40
|
{
|
|
41
41
|
modifiers: { toggled: true, variant: 'inverse' },
|
|
42
|
-
styles: { name: "
|
|
42
|
+
styles: { name: "4a605r", styles: "--background-button-85bf0e:var(--cnvs-sys-color-bg-ai-strongest);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:none;}" }
|
|
43
43
|
}
|
|
44
44
|
]
|
|
45
|
-
}, "a-i-ingress-button-
|
|
45
|
+
}, "a-i-ingress-button-ea1953");
|
|
46
46
|
exports.AIIngressButton = (0, common_1.createComponent)('button')({
|
|
47
47
|
displayName: 'AIIngressButton',
|
|
48
48
|
Component: ({ toggled, variant, ...elemProps }, ref, Element) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,EACL,cAAc,
|
|
1
|
+
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,EACL,cAAc,EAKf,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAErF,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAKpE;;GAEG;AACH,MAAM,WAAW,qBAAqB;IAEpC,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAEhC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;CAClC;AAED;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACtF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;IAC7C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACpD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACxE;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AA6DD;;GAEG;AACH,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC;;GAEG;AACH,eAAO,MAAM,WAAW,YAAa,MAAM,UAAU,MAAM,WACrB,CAAC;AAEvC;;GAEG;AACH,eAAO,MAAM,kBAAkB,cAAe,MAAM,SAAS,WAc5D,CAAC;AAYF;;GAEG;AACH,eAAO,MAAM,QAAQ,wLAelB,aAAa,4CAmTf,CAAC"}
|
|
@@ -159,8 +159,6 @@ const Combobox = ({ autocompleteItems, children, grow, initialValue, onChange, o
|
|
|
159
159
|
setAnnouncementText(getStatusText(interactiveAutocompleteItems.length));
|
|
160
160
|
}
|
|
161
161
|
}, [getStatusText, interactiveAutocompleteItems, isOpened]);
|
|
162
|
-
// Used to set the position of the reset button and the padding direction inside the input container
|
|
163
|
-
const isRTL = (0, common_1.useIsRTL)();
|
|
164
162
|
const setInputValue = (0, react_1.useCallback)((newValue) => {
|
|
165
163
|
_setValue(newValue);
|
|
166
164
|
const inputDomElement = inputRef.current;
|
|
@@ -315,10 +313,9 @@ const Combobox = ({ autocompleteItems, children, grow, initialValue, onChange, o
|
|
|
315
313
|
const renderChildren = (inputElement) => {
|
|
316
314
|
let cssOverride = { ':focus': { zIndex: 2 } };
|
|
317
315
|
if (showClearButton) {
|
|
318
|
-
const paddingDirection = isRTL ? 'paddingLeft' : 'paddingRight';
|
|
319
316
|
cssOverride = {
|
|
320
317
|
...cssOverride,
|
|
321
|
-
|
|
318
|
+
paddingInlineEnd: tokens_1.space.xl,
|
|
322
319
|
};
|
|
323
320
|
}
|
|
324
321
|
const newTextInputProps = {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { BaseButtonProps } from '@workday/canvas-kit-react/button';
|
|
2
|
-
export interface AIIngressButtonProps extends Omit<BaseButtonProps, 'size' | 'colors' | 'icon' | 'iconPosition' | 'shouldMirrorIcon'> {
|
|
2
|
+
export interface AIIngressButtonProps extends Omit<BaseButtonProps, 'size' | 'colors' | 'icon' | 'iconPosition' | 'shouldMirrorIcon' | 'shouldMirrorIconInRTL'> {
|
|
3
3
|
/**
|
|
4
4
|
* When true, indicates that the AI Ingress button is toggled.
|
|
5
5
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AIIngressButton.d.ts","sourceRoot":"","sources":["../../../../ai-ingress-button/lib/AIIngressButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAgB,MAAM,kCAAkC,CAAC;AAK5F,MAAM,WAAW,oBACf,SAAQ,IAAI,
|
|
1
|
+
{"version":3,"file":"AIIngressButton.d.ts","sourceRoot":"","sources":["../../../../ai-ingress-button/lib/AIIngressButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAgB,MAAM,kCAAkC,CAAC;AAK5F,MAAM,WAAW,oBACf,SAAQ,IAAI,CACV,eAAe,EACf,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,cAAc,GAAG,kBAAkB,GAAG,uBAAuB,CAC3F;IACD;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAoBD,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAqIjC,CAAC;AAEH,eAAO,MAAM,eAAe,6FAmB1B,CAAC"}
|
|
@@ -23,23 +23,23 @@ const glowHappyHour = base.orange400; //'#FD7E00';
|
|
|
23
23
|
const glowThumbtack = base.coral500; //'#FC5B05';
|
|
24
24
|
export const AIIngressButtonStencil = createStencil({
|
|
25
25
|
extends: buttonStencil,
|
|
26
|
-
base: { name: "
|
|
26
|
+
base: { name: "gs4s0", styles: "box-sizing:border-box;--background-button-85bf0e:var(--cnvs-sys-color-bg-ai-strongest);border-radius:var(--cnvs-sys-shape-round);height:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));transition:box-shadow 300ms ease-out, background 300ms ease-out;.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:disabled, &:disabled:active, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
|
|
27
27
|
modifiers: {
|
|
28
28
|
variant: {
|
|
29
|
-
inverse: { name: "
|
|
29
|
+
inverse: { name: "s0vku", styles: "--background-button-85bf0e:var(--cnvs-sys-color-bg-default);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:2px solid var(--cnvs-sys-color-border-ai) ;}" }
|
|
30
30
|
},
|
|
31
31
|
toggled: {
|
|
32
|
-
true: { name: "
|
|
33
|
-
false: { name: "
|
|
32
|
+
true: { name: "1ruoc5", styles: "--background-button-85bf0e:var(--cnvs-sys-color-bg-default);transition:box-shadow 300ms ease-out, background 300ms ease-out;box-shadow:0px 0px 4.9px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 0.98px 0px var(--cnvs-base-palette-amber-100), 0px 0px 1.96px 0px var(--cnvs-base-palette-amber-300), 0px 0px 2.94px 0px var(--cnvs-base-palette-amber-300), 0px 0px 4.9px 0px var(--cnvs-base-palette-orange-400), 0px 0px 7.36px 0px var(--cnvs-base-palette-coral-500), 0px 0px 9.81px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));border:1px solid var(--cnvs-sys-color-border-container) ;}" },
|
|
33
|
+
false: { name: "19sti3", styles: "transition:box-shadow 300ms ease-out, background 300ms ease-out;" }
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
36
|
compound: [
|
|
37
37
|
{
|
|
38
38
|
modifiers: { toggled: true, variant: 'inverse' },
|
|
39
|
-
styles: { name: "
|
|
39
|
+
styles: { name: "4a605r", styles: "--background-button-85bf0e:var(--cnvs-sys-color-bg-ai-strongest);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:none;}" }
|
|
40
40
|
}
|
|
41
41
|
]
|
|
42
|
-
}, "a-i-ingress-button-
|
|
42
|
+
}, "a-i-ingress-button-ea1953");
|
|
43
43
|
export const AIIngressButton = createComponent('button')({
|
|
44
44
|
displayName: 'AIIngressButton',
|
|
45
45
|
Component: ({ toggled, variant, ...elemProps }, ref, Element) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,EACL,cAAc,
|
|
1
|
+
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,EACL,cAAc,EAKf,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAErF,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAKpE;;GAEG;AACH,MAAM,WAAW,qBAAqB;IAEpC,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAEhC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;CAClC;AAED;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACtF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;IAC7C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACpD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACxE;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AA6DD;;GAEG;AACH,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC;;GAEG;AACH,eAAO,MAAM,WAAW,YAAa,MAAM,UAAU,MAAM,WACrB,CAAC;AAEvC;;GAEG;AACH,eAAO,MAAM,kBAAkB,cAAe,MAAM,SAAS,WAc5D,CAAC;AAYF;;GAEG;AACH,eAAO,MAAM,QAAQ,wLAelB,aAAa,4CAmTf,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React, { useEffect, useLayoutEffect, useRef, useState, useCallback } from 'react';
|
|
3
3
|
import { jsx, keyframes } from '@emotion/react';
|
|
4
|
-
import { useForkRef, styled,
|
|
4
|
+
import { useForkRef, styled, useUniqueId, filterOutProps, } from '@workday/canvas-kit-react/common';
|
|
5
5
|
import { space, commonColors, borderRadius } from '@workday/canvas-kit-react/tokens';
|
|
6
6
|
import { Card } from '@workday/canvas-kit-react/card';
|
|
7
7
|
import { TertiaryButton } from '@workday/canvas-kit-react/button';
|
|
@@ -128,8 +128,6 @@ export const Combobox = ({ autocompleteItems, children, grow, initialValue, onCh
|
|
|
128
128
|
setAnnouncementText(getStatusText(interactiveAutocompleteItems.length));
|
|
129
129
|
}
|
|
130
130
|
}, [getStatusText, interactiveAutocompleteItems, isOpened]);
|
|
131
|
-
// Used to set the position of the reset button and the padding direction inside the input container
|
|
132
|
-
const isRTL = useIsRTL();
|
|
133
131
|
const setInputValue = useCallback((newValue) => {
|
|
134
132
|
_setValue(newValue);
|
|
135
133
|
const inputDomElement = inputRef.current;
|
|
@@ -284,10 +282,9 @@ export const Combobox = ({ autocompleteItems, children, grow, initialValue, onCh
|
|
|
284
282
|
const renderChildren = (inputElement) => {
|
|
285
283
|
let cssOverride = { ':focus': { zIndex: 2 } };
|
|
286
284
|
if (showClearButton) {
|
|
287
|
-
const paddingDirection = isRTL ? 'paddingLeft' : 'paddingRight';
|
|
288
285
|
cssOverride = {
|
|
289
286
|
...cssOverride,
|
|
290
|
-
|
|
287
|
+
paddingInlineEnd: space.xl,
|
|
291
288
|
};
|
|
292
289
|
}
|
|
293
290
|
const newTextInputProps = {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-labs-react",
|
|
3
|
-
"version": "14.0.0-alpha.
|
|
3
|
+
"version": "14.0.0-alpha.1256-next.0",
|
|
4
4
|
"description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.",
|
|
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": "^14.0.0-alpha.
|
|
52
|
-
"@workday/canvas-kit-styling": "^14.0.0-alpha.
|
|
51
|
+
"@workday/canvas-kit-react": "^14.0.0-alpha.1256-next.0",
|
|
52
|
+
"@workday/canvas-kit-styling": "^14.0.0-alpha.1256-next.0",
|
|
53
53
|
"@workday/canvas-system-icons-web": "^3.0.35",
|
|
54
54
|
"@workday/canvas-tokens-web": "3.0.0-alpha.12",
|
|
55
55
|
"@workday/design-assets-types": "^0.2.10",
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"devDependencies": {
|
|
61
61
|
"@types/lodash.flatten": "^4.4.6"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "ecb8230f9b648de52e89d8b84340dcd31b2514b2"
|
|
64
64
|
}
|