@workday/canvas-kit-docs 15.1.14 → 15.1.18
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 +2 -2
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.js +5 -5
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts +5 -5
- package/dist/mdx/react/action-bar/ActionBar.mdx +9 -0
- package/dist/mdx/react/action-bar/examples/IconOnly.tsx +15 -0
- package/dist/mdx/react/action-bar/examples/index.ts +1 -0
- package/package.json +8 -7
package/dist/es6/lib/docs.js
CHANGED
|
@@ -70698,13 +70698,13 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
70698
70698
|
{
|
|
70699
70699
|
"kind": "property",
|
|
70700
70700
|
"name": "children",
|
|
70701
|
-
"required":
|
|
70701
|
+
"required": false,
|
|
70702
70702
|
"type": {
|
|
70703
70703
|
"kind": "external",
|
|
70704
70704
|
"name": "ReactNode",
|
|
70705
70705
|
"url": "https://reactjs.org/docs/rendering-elements.html"
|
|
70706
70706
|
},
|
|
70707
|
-
"description": "The contents of the action item. This will be the accessible name of the action for screen readers.\n\n```tsx\n<ActionBar.Item>First Action</ActionBar.Item>\n```",
|
|
70707
|
+
"description": "The contents of the action item. This will be the accessible name of the action for screen readers.\nOmit it to render an icon-only button, and provide an `aria-label` instead.\n\n```tsx\n<ActionBar.Item>First Action</ActionBar.Item>\n<ActionBar.Item icon={trashIcon} aria-label=\"Delete\" />\n```",
|
|
70708
70708
|
"declarations": [
|
|
70709
70709
|
{
|
|
70710
70710
|
"name": "children",
|
|
@@ -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": "15.1.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "15.1.
|
|
23
|
-
"@workday/canvas-kit-react": "15.1.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^15.1.
|
|
25
|
-
"@workday/canvas-kit-styling": "15.1.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "15.1.18",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "15.1.18",
|
|
23
|
+
"@workday/canvas-kit-react": "15.1.18",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^15.1.18",
|
|
25
|
+
"@workday/canvas-kit-styling": "15.1.18",
|
|
26
26
|
"@workday/canvas-system-icons-web": "4.0.2",
|
|
27
27
|
"@workday/canvas-expressive-icons-web": "1.0.1",
|
|
28
28
|
"@workday/canvas-tokens-web": "4.2.0"
|
|
@@ -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": "15.1.
|
|
23
|
-
"@workday/canvas-kit-preview-react": "15.1.
|
|
24
|
-
"@workday/canvas-kit-react": "15.1.
|
|
25
|
-
"@workday/canvas-kit-react-fonts": "^15.1.
|
|
26
|
-
"@workday/canvas-kit-styling": "15.1.
|
|
22
|
+
"@workday/canvas-kit-labs-react": "15.1.18",
|
|
23
|
+
"@workday/canvas-kit-preview-react": "15.1.18",
|
|
24
|
+
"@workday/canvas-kit-react": "15.1.18",
|
|
25
|
+
"@workday/canvas-kit-react-fonts": "^15.1.18",
|
|
26
|
+
"@workday/canvas-kit-styling": "15.1.18",
|
|
27
27
|
"@workday/canvas-system-icons-web": "4.0.2",
|
|
28
28
|
"@workday/canvas-expressive-icons-web": "1.0.1",
|
|
29
29
|
"@workday/canvas-tokens-web": "4.2.0"
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
|
|
2
2
|
import Basic from './examples/Basic';
|
|
3
3
|
import Icons from './examples/Icons';
|
|
4
|
+
import IconOnly from './examples/IconOnly';
|
|
4
5
|
import DeleteAction from './examples/DeleteAction';
|
|
5
6
|
import OverflowActionBar from './examples/OverflowActionBar';
|
|
6
7
|
import OverflowActionBarCustomButtonCount from './examples/OverflowActionBarCustomButtonCount';
|
|
@@ -38,6 +39,14 @@ with `ActionBar.Item` such as `icon` or `size`.
|
|
|
38
39
|
|
|
39
40
|
<ExampleCodeBlock code={Icons} />
|
|
40
41
|
|
|
42
|
+
### Icon-Only Example
|
|
43
|
+
|
|
44
|
+
An `ActionBar.Item` can render an icon-only button by passing an `icon` without `children`. Because
|
|
45
|
+
there is no visible text, provide an `aria-label` so the action has an accessible name. Wrapping the
|
|
46
|
+
item in a [Tooltip](/components/popups/tooltip/) also shows the label to sighted users.
|
|
47
|
+
|
|
48
|
+
<ExampleCodeBlock code={IconOnly} />
|
|
49
|
+
|
|
41
50
|
### Delete Action Example
|
|
42
51
|
|
|
43
52
|
`ActionBar.Item` is a `SecondaryButton` by default but it's posible to change it to another element,
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import {ActionBar} from '@workday/canvas-kit-react/action-bar';
|
|
2
|
+
import {PrimaryButton} from '@workday/canvas-kit-react/button';
|
|
3
|
+
import {editIcon, trashIcon} from '@workday/canvas-system-icons-web';
|
|
4
|
+
|
|
5
|
+
export default () => {
|
|
6
|
+
return (
|
|
7
|
+
<ActionBar>
|
|
8
|
+
<ActionBar.List position="relative" as="section" aria-label="Icon-only Action Bar">
|
|
9
|
+
<ActionBar.Item as={PrimaryButton}>Save</ActionBar.Item>
|
|
10
|
+
<ActionBar.Item icon={editIcon} aria-label="Edit" />
|
|
11
|
+
<ActionBar.Item icon={trashIcon} aria-label="Delete" />
|
|
12
|
+
</ActionBar.List>
|
|
13
|
+
</ActionBar>
|
|
14
|
+
);
|
|
15
|
+
};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export {Basic} from './Basic';
|
|
2
2
|
export {DeleteAction} from './DeleteAction';
|
|
3
|
+
export {IconOnly} from './IconOnly';
|
|
3
4
|
export {Icons} from './Icons';
|
|
4
5
|
export {OverflowActionBar} from './OverflowActionBar';
|
|
5
6
|
export {OverflowActionBarCustomButtonCount} from './OverflowActionBarCustomButtonCount';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "15.1.
|
|
3
|
+
"version": "15.1.18",
|
|
4
4
|
"description": "Documentation components of Canvas Kit components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -32,7 +32,8 @@
|
|
|
32
32
|
"typecheck:src": "tsc -p . --noEmit --incremental false"
|
|
33
33
|
},
|
|
34
34
|
"publishConfig": {
|
|
35
|
-
"access": "public"
|
|
35
|
+
"access": "public",
|
|
36
|
+
"timeout": 300000
|
|
36
37
|
},
|
|
37
38
|
"keywords": [
|
|
38
39
|
"canvas",
|
|
@@ -47,10 +48,10 @@
|
|
|
47
48
|
"@stackblitz/sdk": "^1.11.0",
|
|
48
49
|
"@storybook/csf": "0.0.1",
|
|
49
50
|
"@workday/canvas-expressive-icons-web": "1.0.2",
|
|
50
|
-
"@workday/canvas-kit-labs-react": "^15.1.
|
|
51
|
-
"@workday/canvas-kit-preview-react": "^15.1.
|
|
52
|
-
"@workday/canvas-kit-react": "^15.1.
|
|
53
|
-
"@workday/canvas-kit-styling": "^15.1.
|
|
51
|
+
"@workday/canvas-kit-labs-react": "^15.1.18",
|
|
52
|
+
"@workday/canvas-kit-preview-react": "^15.1.18",
|
|
53
|
+
"@workday/canvas-kit-react": "^15.1.18",
|
|
54
|
+
"@workday/canvas-kit-styling": "^15.1.18",
|
|
54
55
|
"@workday/canvas-system-icons-web": "4.2.0",
|
|
55
56
|
"@workday/canvas-tokens-web": "4.4.0",
|
|
56
57
|
"markdown-to-jsx": "^7.2.0",
|
|
@@ -63,5 +64,5 @@
|
|
|
63
64
|
"mkdirp": "^1.0.3",
|
|
64
65
|
"typescript": "5.0"
|
|
65
66
|
},
|
|
66
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "0ea6d3e10d2b450c6ec8228c1dc340003f744ec9"
|
|
67
68
|
}
|