@workday/canvas-kit-docs 16.2.10 → 16.2.11
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 +20 -6
- package/dist/es6/lib/specs.js +14 -0
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.js +5 -5
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts +5 -5
- package/dist/mdx/react/avatar/Avatar.mdx +8 -7
- package/dist/mdx/react/avatar/examples/DecorativeInitials.tsx +18 -0
- package/package.json +6 -6
package/dist/es6/lib/docs.js
CHANGED
|
@@ -144438,14 +144438,20 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
144438
144438
|
"kind": "primitive",
|
|
144439
144439
|
"value": "boolean"
|
|
144440
144440
|
},
|
|
144441
|
-
"description": "If true,
|
|
144441
|
+
"description": "If true, hides the image and fallback initials from assistive technology. This is useful when\nthe Avatar is purely decorative and is rendered next to a name or text.",
|
|
144442
144442
|
"declarations": [
|
|
144443
144443
|
{
|
|
144444
144444
|
"name": "isDecorative",
|
|
144445
144445
|
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/avatar/lib/Avatar.tsx"
|
|
144446
144446
|
}
|
|
144447
144447
|
],
|
|
144448
|
-
"tags": {
|
|
144448
|
+
"tags": {
|
|
144449
|
+
"default": "false"
|
|
144450
|
+
},
|
|
144451
|
+
"defaultValue": {
|
|
144452
|
+
"kind": "boolean",
|
|
144453
|
+
"value": false
|
|
144454
|
+
}
|
|
144449
144455
|
},
|
|
144450
144456
|
{
|
|
144451
144457
|
"kind": "property",
|
|
@@ -275737,14 +275743,16 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
275737
275743
|
"kind": "primitive",
|
|
275738
275744
|
"value": "boolean"
|
|
275739
275745
|
},
|
|
275740
|
-
"description": "If true,
|
|
275746
|
+
"description": "If true, hides the image and fallback initials from assistive technology. This is useful when\nthe Avatar is purely decorative and is rendered next to a name or text.",
|
|
275741
275747
|
"declarations": [
|
|
275742
275748
|
{
|
|
275743
275749
|
"name": "isDecorative",
|
|
275744
275750
|
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/avatar/lib/Avatar.tsx"
|
|
275745
275751
|
}
|
|
275746
275752
|
],
|
|
275747
|
-
"tags": {
|
|
275753
|
+
"tags": {
|
|
275754
|
+
"default": "false"
|
|
275755
|
+
},
|
|
275748
275756
|
"defaultValue": {
|
|
275749
275757
|
"kind": "boolean",
|
|
275750
275758
|
"value": true
|
|
@@ -380320,14 +380328,20 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
380320
380328
|
"kind": "primitive",
|
|
380321
380329
|
"value": "boolean"
|
|
380322
380330
|
},
|
|
380323
|
-
"description": "If true,
|
|
380331
|
+
"description": "If true, hides the image and fallback initials from assistive technology. This is useful when\nthe Avatar is purely decorative and is rendered next to a name or text.",
|
|
380324
380332
|
"declarations": [
|
|
380325
380333
|
{
|
|
380326
380334
|
"name": "isDecorative",
|
|
380327
380335
|
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/avatar/lib/Avatar.tsx"
|
|
380328
380336
|
}
|
|
380329
380337
|
],
|
|
380330
|
-
"tags": {
|
|
380338
|
+
"tags": {
|
|
380339
|
+
"default": "false"
|
|
380340
|
+
},
|
|
380341
|
+
"defaultValue": {
|
|
380342
|
+
"kind": "boolean",
|
|
380343
|
+
"value": false
|
|
380344
|
+
}
|
|
380331
380345
|
},
|
|
380332
380346
|
{
|
|
380333
380347
|
"kind": "property",
|
package/dist/es6/lib/specs.js
CHANGED
|
@@ -596,6 +596,20 @@ module.exports = {specifications: [
|
|
|
596
596
|
"type": "describe",
|
|
597
597
|
"name": "Avatar",
|
|
598
598
|
"children": [
|
|
599
|
+
{
|
|
600
|
+
"type": "describe",
|
|
601
|
+
"name": "Decorative initials",
|
|
602
|
+
"children": [
|
|
603
|
+
{
|
|
604
|
+
"type": "it",
|
|
605
|
+
"name": "should not have any axe errors"
|
|
606
|
+
},
|
|
607
|
+
{
|
|
608
|
+
"type": "it",
|
|
609
|
+
"name": "should keep the initials visible but hidden from assistive technology beside the name"
|
|
610
|
+
}
|
|
611
|
+
]
|
|
612
|
+
},
|
|
599
613
|
{
|
|
600
614
|
"type": "describe",
|
|
601
615
|
"name": "Image Example",
|
|
@@ -18,11 +18,11 @@ export const packageJSONFile = `{
|
|
|
18
18
|
"@emotion/react": "11.11.4",
|
|
19
19
|
"@types/react": "18.2.60",
|
|
20
20
|
"@types/react-dom": "18.2.19",
|
|
21
|
-
"@workday/canvas-kit-labs-react": "16.2.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "16.2.
|
|
23
|
-
"@workday/canvas-kit-react": "16.2.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^16.2.
|
|
25
|
-
"@workday/canvas-kit-styling": "16.2.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "16.2.11",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "16.2.11",
|
|
23
|
+
"@workday/canvas-kit-react": "16.2.11",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^16.2.11",
|
|
25
|
+
"@workday/canvas-kit-styling": "16.2.11",
|
|
26
26
|
"@workday/canvas-system-icons-web": "^5.0.3",
|
|
27
27
|
"@workday/canvas-expressive-icons-web": "1.0.1",
|
|
28
28
|
"@workday/canvas-tokens-web": "4.4.0-beta.11"
|
|
@@ -19,11 +19,11 @@ export const packageJSONFile = `{
|
|
|
19
19
|
"@emotion/react": "11.11.4",
|
|
20
20
|
"@types/react": "18.2.60",
|
|
21
21
|
"@types/react-dom": "18.2.19",
|
|
22
|
-
"@workday/canvas-kit-labs-react": "16.2.
|
|
23
|
-
"@workday/canvas-kit-preview-react": "16.2.
|
|
24
|
-
"@workday/canvas-kit-react": "16.2.
|
|
25
|
-
"@workday/canvas-kit-react-fonts": "^16.2.
|
|
26
|
-
"@workday/canvas-kit-styling": "16.2.
|
|
22
|
+
"@workday/canvas-kit-labs-react": "16.2.11",
|
|
23
|
+
"@workday/canvas-kit-preview-react": "16.2.11",
|
|
24
|
+
"@workday/canvas-kit-react": "16.2.11",
|
|
25
|
+
"@workday/canvas-kit-react-fonts": "^16.2.11",
|
|
26
|
+
"@workday/canvas-kit-styling": "16.2.11",
|
|
27
27
|
"@workday/canvas-system-icons-web": "^5.0.3",
|
|
28
28
|
"@workday/canvas-expressive-icons-web": "1.0.1",
|
|
29
29
|
"@workday/canvas-tokens-web": "4.4.0-beta.11"
|
|
@@ -1,14 +1,11 @@
|
|
|
1
|
-
import {
|
|
2
|
-
ExampleCodeBlock,
|
|
3
|
-
Specifications,
|
|
4
|
-
SymbolDoc,
|
|
5
|
-
} from '@workday/canvas-kit-docs';
|
|
1
|
+
import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
|
|
6
2
|
|
|
7
3
|
import {Avatar} from '@workday/canvas-kit-react/avatar';
|
|
8
4
|
|
|
9
5
|
import Basic from './examples/Basic';
|
|
10
6
|
import Custom from './examples/Custom';
|
|
11
7
|
import Decorative from './examples/Decorative';
|
|
8
|
+
import DecorativeInitials from './examples/DecorativeInitials';
|
|
12
9
|
import Image from './examples/Image';
|
|
13
10
|
import Size from './examples/Size';
|
|
14
11
|
import Variant from './examples/Variant';
|
|
@@ -77,11 +74,15 @@ For complete control over styling and behavior, use the `BaseAvatar` component:
|
|
|
77
74
|
|
|
78
75
|
### Accessibility
|
|
79
76
|
|
|
80
|
-
If the Avatar is
|
|
81
|
-
|
|
77
|
+
If the Avatar is rendered next to the user's name, set `isDecorative` to `true` to hide the image
|
|
78
|
+
and fallback initials from assistive technology. This avoids announcing the same name twice.
|
|
82
79
|
|
|
83
80
|
<ExampleCodeBlock code={Decorative} />
|
|
84
81
|
|
|
82
|
+
The same applies when no image is provided:
|
|
83
|
+
|
|
84
|
+
<ExampleCodeBlock code={DecorativeInitials} />
|
|
85
|
+
|
|
85
86
|
## Component API
|
|
86
87
|
|
|
87
88
|
<SymbolDoc name="Avatar" fileName="/react/" hideDescription />
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import {Avatar} from '@workday/canvas-kit-react/avatar';
|
|
2
|
+
import {Text} from '@workday/canvas-kit-react/text';
|
|
3
|
+
import {createStyles} from '@workday/canvas-kit-styling';
|
|
4
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
5
|
+
|
|
6
|
+
const containerStyles = createStyles({
|
|
7
|
+
display: 'inline-flex',
|
|
8
|
+
gap: system.gap.sm,
|
|
9
|
+
alignItems: 'center',
|
|
10
|
+
});
|
|
11
|
+
export default () => {
|
|
12
|
+
return (
|
|
13
|
+
<div className={containerStyles}>
|
|
14
|
+
<Avatar name="Nicholas Smith" isDecorative size="small" />
|
|
15
|
+
<Text>Nicholas Smith</Text>
|
|
16
|
+
</div>
|
|
17
|
+
);
|
|
18
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "16.2.
|
|
3
|
+
"version": "16.2.11",
|
|
4
4
|
"description": "Documentation components of Canvas Kit components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -47,10 +47,10 @@
|
|
|
47
47
|
"@stackblitz/sdk": "^1.11.0",
|
|
48
48
|
"@storybook/csf": "0.0.1",
|
|
49
49
|
"@workday/canvas-expressive-icons-web": "1.0.2",
|
|
50
|
-
"@workday/canvas-kit-labs-react": "^16.2.
|
|
51
|
-
"@workday/canvas-kit-preview-react": "^16.2.
|
|
52
|
-
"@workday/canvas-kit-react": "^16.2.
|
|
53
|
-
"@workday/canvas-kit-styling": "^16.2.
|
|
50
|
+
"@workday/canvas-kit-labs-react": "^16.2.11",
|
|
51
|
+
"@workday/canvas-kit-preview-react": "^16.2.11",
|
|
52
|
+
"@workday/canvas-kit-react": "^16.2.11",
|
|
53
|
+
"@workday/canvas-kit-styling": "^16.2.11",
|
|
54
54
|
"@workday/canvas-system-icons-web": "^5.0.3",
|
|
55
55
|
"@workday/canvas-tokens-web": "^4.4.0",
|
|
56
56
|
"markdown-to-jsx": "^7.2.0",
|
|
@@ -63,5 +63,5 @@
|
|
|
63
63
|
"mkdirp": "^1.0.3",
|
|
64
64
|
"typescript": "5.0"
|
|
65
65
|
},
|
|
66
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "21b0c64e5227e1a6aa3208ad52495c8ae543aa55"
|
|
67
67
|
}
|