@workday/canvas-kit-docs 14.0.0-alpha.1213-next.0 → 14.0.0-alpha.1215-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/dist/es6/lib/docs.js +22 -22
- package/dist/mdx/14.0-UPGRADE-GUIDE.mdx +32 -18
- package/dist/mdx/labs-react/{ai-assistant-ingress-button/AIAssistantIngressButton.mdx → ai-ingress-button/AIIngressButton.mdx} +5 -5
- package/dist/mdx/labs-react/{ai-assistant-ingress-button → ai-ingress-button}/examples/Basic.tsx +3 -3
- package/dist/mdx/labs-react/{ai-assistant-ingress-button → ai-ingress-button}/examples/Inverse.tsx +3 -3
- package/package.json +6 -6
package/dist/es6/lib/docs.js
CHANGED
|
@@ -8,19 +8,19 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
8
8
|
[
|
|
9
9
|
|
|
10
10
|
{
|
|
11
|
-
"name": "
|
|
12
|
-
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/ai-
|
|
11
|
+
"name": "AIIngressButtonProps",
|
|
12
|
+
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/ai-ingress-button/lib/AIIngressButton.tsx",
|
|
13
13
|
"description": "",
|
|
14
14
|
"declarations": [
|
|
15
15
|
{
|
|
16
|
-
"name": "
|
|
17
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/ai-
|
|
16
|
+
"name": "AIIngressButtonProps",
|
|
17
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/ai-ingress-button/lib/AIIngressButton.tsx"
|
|
18
18
|
}
|
|
19
19
|
],
|
|
20
20
|
"tags": {},
|
|
21
21
|
"type": {
|
|
22
22
|
"kind": "alias",
|
|
23
|
-
"name": "
|
|
23
|
+
"name": "AIIngressButton"
|
|
24
24
|
}
|
|
25
25
|
},
|
|
26
26
|
{
|
|
@@ -34,13 +34,13 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
36
|
{
|
|
37
|
-
"name": "
|
|
38
|
-
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/ai-
|
|
37
|
+
"name": "AIIngressButtonStencil",
|
|
38
|
+
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/ai-ingress-button/lib/AIIngressButton.tsx",
|
|
39
39
|
"description": "",
|
|
40
40
|
"declarations": [
|
|
41
41
|
{
|
|
42
|
-
"name": "
|
|
43
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/ai-
|
|
42
|
+
"name": "AIIngressButtonStencil",
|
|
43
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/ai-ingress-button/lib/AIIngressButton.tsx"
|
|
44
44
|
}
|
|
45
45
|
],
|
|
46
46
|
"tags": {},
|
|
@@ -738,20 +738,20 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
738
738
|
}
|
|
739
739
|
},
|
|
740
740
|
{
|
|
741
|
-
"name": "
|
|
742
|
-
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/ai-
|
|
741
|
+
"name": "AIIngressButton",
|
|
742
|
+
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/ai-ingress-button/lib/AIIngressButton.tsx",
|
|
743
743
|
"description": "",
|
|
744
744
|
"declarations": [
|
|
745
745
|
{
|
|
746
|
-
"name": "
|
|
747
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/ai-
|
|
746
|
+
"name": "AIIngressButton",
|
|
747
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/ai-ingress-button/lib/AIIngressButton.tsx"
|
|
748
748
|
}
|
|
749
749
|
],
|
|
750
750
|
"tags": {},
|
|
751
751
|
"type": {
|
|
752
752
|
"kind": "enhancedComponent",
|
|
753
753
|
"componentType": "regular",
|
|
754
|
-
"displayName": "
|
|
754
|
+
"displayName": "AIIngressButton",
|
|
755
755
|
"props": [
|
|
756
756
|
{
|
|
757
757
|
"kind": "property",
|
|
@@ -761,11 +761,11 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
761
761
|
"kind": "primitive",
|
|
762
762
|
"value": "boolean"
|
|
763
763
|
},
|
|
764
|
-
"description": "When true, indicates that the
|
|
764
|
+
"description": "When true, indicates that the AI Ingress button is toggled.",
|
|
765
765
|
"declarations": [
|
|
766
766
|
{
|
|
767
767
|
"name": "toggled",
|
|
768
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/ai-
|
|
768
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/ai-ingress-button/lib/AIIngressButton.tsx"
|
|
769
769
|
}
|
|
770
770
|
],
|
|
771
771
|
"tags": {}
|
|
@@ -782,7 +782,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
782
782
|
"declarations": [
|
|
783
783
|
{
|
|
784
784
|
"name": "variant",
|
|
785
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/ai-
|
|
785
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/ai-ingress-button/lib/AIIngressButton.tsx"
|
|
786
786
|
}
|
|
787
787
|
],
|
|
788
788
|
"tags": {}
|
|
@@ -1106,13 +1106,13 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
1106
1106
|
}
|
|
1107
1107
|
},
|
|
1108
1108
|
{
|
|
1109
|
-
"name": "
|
|
1110
|
-
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/ai-
|
|
1109
|
+
"name": "getAIIngressIcon",
|
|
1110
|
+
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/ai-ingress-button/lib/AIIngressIcon.tsx",
|
|
1111
1111
|
"description": "",
|
|
1112
1112
|
"declarations": [
|
|
1113
1113
|
{
|
|
1114
|
-
"name": "
|
|
1115
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/ai-
|
|
1114
|
+
"name": "getAIIngressIcon",
|
|
1115
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/ai-ingress-button/lib/AIIngressIcon.tsx"
|
|
1116
1116
|
}
|
|
1117
1117
|
],
|
|
1118
1118
|
"tags": {},
|
|
@@ -1132,7 +1132,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
1132
1132
|
"declarations": [
|
|
1133
1133
|
{
|
|
1134
1134
|
"name": "svgId",
|
|
1135
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/ai-
|
|
1135
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/ai-ingress-button/lib/AIIngressIcon.tsx"
|
|
1136
1136
|
}
|
|
1137
1137
|
],
|
|
1138
1138
|
"tags": {}
|
|
@@ -111,18 +111,22 @@ yarn remove @workday/canvas-kit-codemod
|
|
|
111
111
|
|
|
112
112
|
**PR:** [#3430](https://github.com/Workday/canvas-kit/pull/3430)
|
|
113
113
|
|
|
114
|
-
A new `Avatar` component has been added to the `@workday/canvas-kit-preview-react` package that
|
|
114
|
+
A new `Avatar` component has been added to the `@workday/canvas-kit-preview-react` package that
|
|
115
|
+
matches our brand refresh.
|
|
115
116
|
|
|
116
117
|
#### API Changes from the Main Avatar
|
|
117
118
|
|
|
118
|
-
- `Avatar` has a `name` prop. This is required to ensure a fallback if a `url` is not provided. The
|
|
119
|
+
- `Avatar` has a `name` prop. This is required to ensure a fallback if a `url` is not provided. The
|
|
120
|
+
`name` prop also determines the initials and the `alt` text for the image if a `url` is provided.
|
|
119
121
|
- `url` stays the same. This prop is optional and will be used to display an image `Avatar`.
|
|
120
|
-
- `variant` defines the color of the `Avatar`. The default is `blue` but you can choose one of the
|
|
122
|
+
- `variant` defines the color of the `Avatar`. The default is `blue` but you can choose one of the
|
|
123
|
+
following colors:
|
|
121
124
|
- `teal`
|
|
122
125
|
- `purple`
|
|
123
126
|
- `amber`
|
|
124
127
|
- `blue`
|
|
125
|
-
- By default, the `Avatar` will render a `div` element. If you need to render a `button` element use
|
|
128
|
+
- By default, the `Avatar` will render a `div` element. If you need to render a `button` element use
|
|
129
|
+
the `BaseAvatar` component.
|
|
126
130
|
- `size` accepts the following values:
|
|
127
131
|
- `extraExtraLarge`
|
|
128
132
|
- `extraLarge`
|
|
@@ -130,7 +134,7 @@ A new `Avatar` component has been added to the `@workday/canvas-kit-preview-reac
|
|
|
130
134
|
- `medium`
|
|
131
135
|
- `small`
|
|
132
136
|
- `extraSmall`
|
|
133
|
-
|
|
137
|
+
- `extraExtraSmall`
|
|
134
138
|
|
|
135
139
|
### Branding Changes 💅
|
|
136
140
|
|
|
@@ -139,7 +143,9 @@ revolve around the use of our new brand colors.
|
|
|
139
143
|
|
|
140
144
|
The following components have been updated:
|
|
141
145
|
|
|
142
|
-
- `Breadcrumbs`
|
|
146
|
+
- `Breadcrumbs`
|
|
147
|
+
- [#3270](https://github.com/Workday/canvas-kit/pull/3270)
|
|
148
|
+
- [#3447](https://github.com/Workday/canvas-kit/pull/3447)
|
|
143
149
|
- `Buttons` [#3394](https://github.com/Workday/canvas-kit/pull/3394)
|
|
144
150
|
- `ColorPicker` (Main) [#3307](https://github.com/Workday/canvas-kit/pull/3307)
|
|
145
151
|
- `ColorPicker` (preview) [#3307](https://github.com/Workday/canvas-kit/pull/3307)
|
|
@@ -276,17 +282,18 @@ emphasis for the badge.
|
|
|
276
282
|
|
|
277
283
|
### Expandable
|
|
278
284
|
|
|
279
|
-
**PRs:** [#3389](https://github.com/Workday/canvas-kit/pull/3389),
|
|
285
|
+
**PRs:** [#3389](https://github.com/Workday/canvas-kit/pull/3389),
|
|
286
|
+
[#3430](https://github.com/Workday/canvas-kit/pull/3430)
|
|
280
287
|
|
|
281
288
|
- `<Expandable.Target>` hover state has been update to use `system.color.bg.alt.soft` instead of
|
|
282
289
|
`system.color.bg.alt.default` to match our new brand directions.
|
|
283
290
|
- The `focus` state has been update to use `system.color.border.primary.default` to ensure the same
|
|
284
291
|
focus state color across all components.
|
|
285
|
-
- `Expandable.Avatar` has been updated to use the `Avatar` component from Preview. This change
|
|
292
|
+
- `Expandable.Avatar` has been updated to use the `Avatar` component from Preview. This change
|
|
293
|
+
requires that you update the `altText` prop to `name`.
|
|
286
294
|
|
|
287
295
|
> 🤖 The codemod will handle the change of `altText` to `name` on `Expandable.Avatar`.
|
|
288
296
|
|
|
289
|
-
|
|
290
297
|
These changes are only **visual** and should not affect the functionality of the component.
|
|
291
298
|
|
|
292
299
|
### Hyperlink and External Hyperlink
|
|
@@ -325,11 +332,11 @@ These changes are only **visual** and should not affect the functionality of the
|
|
|
325
332
|
|
|
326
333
|
**PR:** [#3430](https://github.com/Workday/canvas-kit/pull/3430)
|
|
327
334
|
|
|
328
|
-
- `Pill` has been updated to use the `Avatar` component from Preview. This change requires that you
|
|
335
|
+
- `Pill` has been updated to use the `Avatar` component from Preview. This change requires that you
|
|
336
|
+
provide a value for the `name` prop.
|
|
329
337
|
|
|
330
338
|
> 🤖 The codemod will handle the change of `altText` to `name` on `Pill.Avatar`.
|
|
331
339
|
|
|
332
|
-
|
|
333
340
|
### Search Form 🚨
|
|
334
341
|
|
|
335
342
|
**PR:** [#3303](https://github.com/Workday/canvas-kit/pull/3303)
|
|
@@ -412,7 +419,8 @@ deprecated code is removed.
|
|
|
412
419
|
|
|
413
420
|
**PR:** [#3430](https://github.com/Workday/canvas-kit/pull/3430)
|
|
414
421
|
|
|
415
|
-
We've deprecated the `Avatar` component in `@workday/canvas-kit-react` Main package. Please use the
|
|
422
|
+
We've deprecated the `Avatar` component in `@workday/canvas-kit-react` Main package. Please use the
|
|
423
|
+
`Avatar` component in our Preview package.
|
|
416
424
|
|
|
417
425
|
**Before in v13**
|
|
418
426
|
|
|
@@ -429,20 +437,26 @@ import { Avatar } from '@workday/canvas-kit-react/avatar';
|
|
|
429
437
|
**After in v14**
|
|
430
438
|
|
|
431
439
|
```tsx
|
|
432
|
-
import {
|
|
440
|
+
import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
|
|
433
441
|
// name is used as a fallback if the image url is broken or still loading
|
|
434
442
|
// variant light or dark are not used. Instead, variant defines the color of the Avatar
|
|
435
|
-
<Avatar name="John Doe" size="extraExtraLarge" variant=
|
|
443
|
+
<Avatar name="John Doe" size="extraExtraLarge" variant="teal" url={yourImageUrl} />;
|
|
436
444
|
```
|
|
437
445
|
|
|
438
446
|
If you need to render a `button` element use the `BaseAvatar` component.
|
|
439
447
|
|
|
440
448
|
```tsx
|
|
441
|
-
import {
|
|
442
|
-
|
|
443
|
-
<BaseAvatar
|
|
449
|
+
import {BaseAvatar} from '@workday/canvas-kit-preview-react/avatar';
|
|
450
|
+
|
|
451
|
+
<BaseAvatar
|
|
452
|
+
name="John Doe"
|
|
453
|
+
size="extraExtraLarge"
|
|
454
|
+
variant="teal"
|
|
455
|
+
as="button"
|
|
456
|
+
onClick={() => console.log('Avatar clicked')}
|
|
457
|
+
>
|
|
444
458
|
<BaseAvatar.Name name="John Doe" />
|
|
445
|
-
</BaseAvatar
|
|
459
|
+
</BaseAvatar>;
|
|
446
460
|
```
|
|
447
461
|
|
|
448
462
|
### Combobox (Labs)
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import {SymbolDoc, Specifications, ExampleCodeBlock} from '@workday/canvas-kit-docs';
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import {AIIngressButton} from '@workday/canvas-kit-labs-react/ai-ingress-button';
|
|
4
4
|
import Basic from './examples/Basic';
|
|
5
5
|
import Inverse from './examples/Inverse';
|
|
6
6
|
|
|
7
|
-
# AI
|
|
7
|
+
# AI Ingress Button
|
|
8
8
|
|
|
9
|
-
CTA to open and close AI
|
|
9
|
+
CTA to open and close AI Ingress Button
|
|
10
10
|
|
|
11
11
|
## Installation
|
|
12
12
|
|
|
@@ -19,7 +19,7 @@ yarn add @workday/canvas-kit-labs-react
|
|
|
19
19
|
|
|
20
20
|
### Basic Example
|
|
21
21
|
|
|
22
|
-
You can click to toggle the AI
|
|
22
|
+
You can click to toggle the AI Ingress Button.
|
|
23
23
|
|
|
24
24
|
<ExampleCodeBlock code={Basic} />
|
|
25
25
|
|
|
@@ -32,4 +32,4 @@ The Button can also be used on dark backgrounds.
|
|
|
32
32
|
|
|
33
33
|
## Component API
|
|
34
34
|
|
|
35
|
-
<SymbolDoc name="
|
|
35
|
+
<SymbolDoc name="AIIngressButton" hideDescription />
|
package/dist/mdx/labs-react/{ai-assistant-ingress-button → ai-ingress-button}/examples/Basic.tsx
RENAMED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import {useState} from 'react';
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import {AIIngressButton} from '@workday/canvas-kit-labs-react/ai-ingress-button';
|
|
4
4
|
|
|
5
5
|
export default () => {
|
|
6
6
|
const [toggled, setToggled] = useState(false);
|
|
7
7
|
return (
|
|
8
8
|
<div>
|
|
9
|
-
<
|
|
10
|
-
aria-label={toggled ? 'Hide AI
|
|
9
|
+
<AIIngressButton
|
|
10
|
+
aria-label={toggled ? 'Hide AI Ingress' : 'Show AI Ingress'}
|
|
11
11
|
onClick={() => setToggled(!toggled)}
|
|
12
12
|
toggled={toggled}
|
|
13
13
|
/>
|
package/dist/mdx/labs-react/{ai-assistant-ingress-button → ai-ingress-button}/examples/Inverse.tsx
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {useState} from 'react';
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import {AIIngressButton} from '@workday/canvas-kit-labs-react/ai-ingress-button';
|
|
4
4
|
import {createStyles} from '@workday/canvas-kit-styling';
|
|
5
5
|
import {system} from '@workday/canvas-tokens-web';
|
|
6
6
|
|
|
@@ -13,10 +13,10 @@ export default () => {
|
|
|
13
13
|
const [toggled, setToggled] = useState(false);
|
|
14
14
|
return (
|
|
15
15
|
<div className={darkBackground}>
|
|
16
|
-
<
|
|
16
|
+
<AIIngressButton
|
|
17
17
|
variant="inverse"
|
|
18
18
|
onClick={() => setToggled(!toggled)}
|
|
19
|
-
aria-label={toggled ? 'Hide
|
|
19
|
+
aria-label={toggled ? 'Hide Ingress' : 'Show Ingress'}
|
|
20
20
|
toggled={toggled}
|
|
21
21
|
/>
|
|
22
22
|
</div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "14.0.0-alpha.
|
|
3
|
+
"version": "14.0.0-alpha.1215-next.0",
|
|
4
4
|
"description": "Documentation components of Canvas Kit components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -45,10 +45,10 @@
|
|
|
45
45
|
"@emotion/styled": "^11.6.0",
|
|
46
46
|
"@stackblitz/sdk": "^1.11.0",
|
|
47
47
|
"@storybook/csf": "0.0.1",
|
|
48
|
-
"@workday/canvas-kit-labs-react": "^14.0.0-alpha.
|
|
49
|
-
"@workday/canvas-kit-preview-react": "^14.0.0-alpha.
|
|
50
|
-
"@workday/canvas-kit-react": "^14.0.0-alpha.
|
|
51
|
-
"@workday/canvas-kit-styling": "^14.0.0-alpha.
|
|
48
|
+
"@workday/canvas-kit-labs-react": "^14.0.0-alpha.1215-next.0",
|
|
49
|
+
"@workday/canvas-kit-preview-react": "^14.0.0-alpha.1215-next.0",
|
|
50
|
+
"@workday/canvas-kit-react": "^14.0.0-alpha.1215-next.0",
|
|
51
|
+
"@workday/canvas-kit-styling": "^14.0.0-alpha.1215-next.0",
|
|
52
52
|
"@workday/canvas-system-icons-web": "^3.0.35",
|
|
53
53
|
"@workday/canvas-tokens-web": "3.0.0-alpha.12",
|
|
54
54
|
"markdown-to-jsx": "^7.2.0",
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"mkdirp": "^1.0.3",
|
|
62
62
|
"typescript": "5.0"
|
|
63
63
|
},
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "443f211902d3c5cf9c91704aa41f3b4e0ce41e65"
|
|
65
65
|
}
|