@workday/canvas-kit-docs 13.0.0-alpha.1075-next.0 → 13.0.0-alpha.1084-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 +144510 -124180
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.js +5 -5
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts +5 -5
- package/dist/es6/lib/widgets/enhancedComponent.js +1 -1
- package/dist/mdx/13.0-UPGRADE-GUIDE.mdx +37 -6
- package/dist/mdx/preview-react/pill/examples/WithAvatar.tsx +2 -2
- package/dist/mdx/preview-react/pill/examples/WithRemovable.tsx +1 -1
- package/dist/mdx/react/_examples/mdx/examples/GlobalHeader.tsx +1 -1
- package/dist/mdx/react/_examples/mdx/examples/SidePanelWithNavigation.tsx +1 -1
- package/dist/mdx/react/avatar/avatar/examples/Basic.tsx +2 -2
- package/dist/mdx/react/avatar/avatar/examples/Button.tsx +3 -3
- package/dist/mdx/react/avatar/avatar/examples/CustomStyles.tsx +2 -2
- package/dist/mdx/react/avatar/avatar/examples/Image.tsx +7 -7
- package/dist/mdx/react/avatar/avatar/examples/LazyLoad.tsx +7 -1
- package/dist/mdx/react/avatar/avatar/examples/ObjectFit.tsx +9 -3
- package/dist/mdx/react/avatar/avatar/examples/Size.tsx +10 -10
- package/dist/mdx/react/avatar/avatar/examples/Variant.tsx +2 -2
- package/dist/mdx/{labs-react → react}/expandable/Expandable.mdx +2 -2
- package/dist/mdx/{labs-react → react}/expandable/examples/Avatar.tsx +3 -3
- package/dist/mdx/{labs-react → react}/expandable/examples/Depth.tsx +1 -2
- package/dist/mdx/{labs-react → react}/expandable/examples/EndIcon.tsx +1 -1
- package/dist/mdx/{labs-react → react}/expandable/examples/HoistedModel.tsx +1 -1
- package/dist/mdx/{labs-react → react}/expandable/examples/LongTitle.tsx +2 -2
- package/dist/mdx/{labs-react → react}/expandable/examples/RTL.tsx +1 -1
- package/dist/mdx/{labs-react → react}/expandable/examples/StartIcon.tsx +1 -1
- package/dist/mdx/react/menu/Menu.mdx +12 -0
- package/dist/mdx/react/menu/examples/Grouping.tsx +32 -0
- package/dist/mdx/react/select/examples/Basic.tsx +1 -0
- package/lib/widgets/enhancedComponent.tsx +1 -1
- package/package.json +6 -6
- /package/dist/mdx/{labs-react → react}/expandable/examples/test-avatar.png +0 -0
|
@@ -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": "12.5.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "12.5.
|
|
23
|
-
"@workday/canvas-kit-react": "12.5.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^12.5.
|
|
25
|
-
"@workday/canvas-kit-styling": "12.5.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "12.5.5",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "12.5.5",
|
|
23
|
+
"@workday/canvas-kit-react": "12.5.5",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^12.5.5",
|
|
25
|
+
"@workday/canvas-kit-styling": "12.5.5",
|
|
26
26
|
"@workday/canvas-system-icons-web": "3.0.22",
|
|
27
27
|
"@workday/canvas-tokens-web": "2.0.0"
|
|
28
28
|
},
|
|
@@ -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": "12.5.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "12.5.
|
|
23
|
-
"@workday/canvas-kit-react": "12.5.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^12.5.
|
|
25
|
-
"@workday/canvas-kit-styling": "12.5.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "12.5.5",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "12.5.5",
|
|
23
|
+
"@workday/canvas-kit-react": "12.5.5",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^12.5.5",
|
|
25
|
+
"@workday/canvas-kit-styling": "12.5.5",
|
|
26
26
|
"@workday/canvas-system-icons-web": "3.0.22",
|
|
27
27
|
"@workday/canvas-tokens-web": "2.0.0"
|
|
28
28
|
},
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { Expandable } from '@workday/canvas-kit-
|
|
3
|
+
import { Expandable } from '@workday/canvas-kit-react/expandable';
|
|
4
4
|
import { defaultJSDoc } from '../../docgen/docParser';
|
|
5
5
|
import { MDX } from '../MDXElements';
|
|
6
6
|
import { SymbolDoc } from '../SymbolDoc';
|
|
@@ -18,6 +18,8 @@ any questions.
|
|
|
18
18
|
- [Instructions](#instructions)
|
|
19
19
|
- [Component Updates](#component-updates)
|
|
20
20
|
- [Styling API and CSS Tokens](#styling-api-and-css-tokens)
|
|
21
|
+
- [Avatar](#avatar)
|
|
22
|
+
- [Expandable](#expandable)
|
|
21
23
|
- [External Hyperlink](#external-hyperlink)
|
|
22
24
|
- [Pill](#pill)
|
|
23
25
|
- [Tabs](#tabs)
|
|
@@ -96,7 +98,7 @@ yarn remove @workday/canvas-kit-codemod
|
|
|
96
98
|
|
|
97
99
|
### Styling API and CSS Tokens
|
|
98
100
|
|
|
99
|
-
**PRs:** [#3101](https://github.com/Workday/canvas-kit/pull/3101), [#3088](https://github.com/Workday/canvas-kit/pull/3088), [#3114](https://github.com/Workday/canvas-kit/pull/3114), [#3119](https://github.com/Workday/canvas-kit/pull/3119), [#3120](https://github.com/Workday/canvas-kit/pull/3120), [#3164](https://github.com/Workday/canvas-kit/pull/3164), [#3128](https://github.com/Workday/canvas-kit/pull/3128), [#3123](https://github.com/Workday/canvas-kit/pull/3123), [#3205](https://github.com/Workday/canvas-kit/pull/3205)
|
|
101
|
+
**PRs:** [#3101](https://github.com/Workday/canvas-kit/pull/3101), [#3088](https://github.com/Workday/canvas-kit/pull/3088), [#3114](https://github.com/Workday/canvas-kit/pull/3114), [#3119](https://github.com/Workday/canvas-kit/pull/3119), [#3120](https://github.com/Workday/canvas-kit/pull/3120), [#3164](https://github.com/Workday/canvas-kit/pull/3164), [#3128](https://github.com/Workday/canvas-kit/pull/3128), [#3123](https://github.com/Workday/canvas-kit/pull/3123), [#3205](https://github.com/Workday/canvas-kit/pull/3205), [#3210](https://github.com/Workday/canvas-kit/pull/3210)
|
|
100
102
|
|
|
101
103
|
Several components have been refactored to use our
|
|
102
104
|
[Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
|
|
@@ -110,6 +112,7 @@ The React interface **has not changed**, but CSS variables are now used for dyna
|
|
|
110
112
|
The following components are affected:
|
|
111
113
|
|
|
112
114
|
- `ActionBar`
|
|
115
|
+
- `Banner`
|
|
113
116
|
- `Expandable`
|
|
114
117
|
- `ExternalHyperlink`
|
|
115
118
|
- `LoadingSparkles`
|
|
@@ -120,6 +123,34 @@ The following components are affected:
|
|
|
120
123
|
- `Tabs`
|
|
121
124
|
- `Tooltip`
|
|
122
125
|
|
|
126
|
+
### Avatar
|
|
127
|
+
|
|
128
|
+
**PR:** [#3231](https://github.com/Workday/canvas-kit/pull/3231)
|
|
129
|
+
|
|
130
|
+
A few changes have been made to `Avatar` to ensure proper accessibility.
|
|
131
|
+
|
|
132
|
+
##### Breaking Changes
|
|
133
|
+
|
|
134
|
+
- The `altText` prop no longer has a default of `"Avatar"` for better internalization. The default was an English word (“Avatar”) and this has caused issues in the past with translations.
|
|
135
|
+
|
|
136
|
+
>**Note:** You *must* provide an `altText` for `<Avatar />, <Pill.Avatar />, <Expandable.Avatar />` to ensure proper accessibility. Our examples have been updated to reflect this change.
|
|
137
|
+
|
|
138
|
+
### Expandable
|
|
139
|
+
|
|
140
|
+
**PR:** [#3213](https://github.com/Workday/canvas-kit/pull/3213)
|
|
141
|
+
|
|
142
|
+
We've promoted `Expandable` from [Labs](#labs) to [Main](#main).
|
|
143
|
+
|
|
144
|
+
```tsx
|
|
145
|
+
// v12
|
|
146
|
+
import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
|
|
147
|
+
|
|
148
|
+
// v13
|
|
149
|
+
import {Expandable} from '@workday/canvas-kit-react/expandable';
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
🤖 The codemod will handle the change of imports as shown above.
|
|
153
|
+
|
|
123
154
|
### External Hyperlink
|
|
124
155
|
|
|
125
156
|
**PR:** [#3101](https://github.com/Workday/canvas-kit/pull/3101)
|
|
@@ -169,11 +200,11 @@ A few changes have been made to `Pill` to ensure proper accessibility and styles
|
|
|
169
200
|
We've removed the outdated Dub Logos in Main and promoted the new logos that were previously in our Preview package to Main as part of the brand refresh.
|
|
170
201
|
|
|
171
202
|
| Old Logo Name | New Logo Name |
|
|
172
|
-
| --------------- | ----------------- |
|
|
173
|
-
| dubLogoBlue | dubLogoPrimary |
|
|
174
|
-
| dubLogoWhite | dubLogoReversed |
|
|
175
|
-
| wdayLogoBlue | wdayLogoPrimary |
|
|
176
|
-
| wdayLogoWhite | wdayLogoReversed |
|
|
203
|
+
| --------------- | ----------------- |
|
|
204
|
+
| dubLogoBlue | dubLogoPrimary |
|
|
205
|
+
| dubLogoWhite | dubLogoReversed |
|
|
206
|
+
| wdayLogoBlue | wdayLogoPrimary |
|
|
207
|
+
| wdayLogoWhite | wdayLogoReversed |
|
|
177
208
|
|
|
178
209
|
```tsx
|
|
179
210
|
// In v12
|
|
@@ -18,11 +18,11 @@ export default () => {
|
|
|
18
18
|
<div>
|
|
19
19
|
<div className={flexStyles}>
|
|
20
20
|
<Pill onClick={() => setText('The first pill is clicked!')}>
|
|
21
|
-
<Pill.Avatar url={testAvatar} />
|
|
21
|
+
<Pill.Avatar altText="Avatar" url={testAvatar} />
|
|
22
22
|
<Pill.Label>Regina Skeltor</Pill.Label>
|
|
23
23
|
</Pill>
|
|
24
24
|
<Pill disabled>
|
|
25
|
-
<Pill.Avatar />
|
|
25
|
+
<Pill.Avatar altText="Avatar" />
|
|
26
26
|
<Pill.Label>Regina Skeltor</Pill.Label>
|
|
27
27
|
</Pill>
|
|
28
28
|
</div>
|
|
@@ -3,7 +3,7 @@ import {base, system} from '@workday/canvas-tokens-web';
|
|
|
3
3
|
import {SidePanel, useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
|
|
4
4
|
import {Flex} from '@workday/canvas-kit-react/layout';
|
|
5
5
|
import {Heading, Subtext, Text} from '@workday/canvas-kit-react/text';
|
|
6
|
-
import {Expandable} from '@workday/canvas-kit-
|
|
6
|
+
import {Expandable} from '@workday/canvas-kit-react/expandable';
|
|
7
7
|
import {SystemIcon} from '@workday/canvas-kit-react/icon';
|
|
8
8
|
import {Hyperlink, TertiaryButton} from '@workday/canvas-kit-react/button';
|
|
9
9
|
import {Menu} from '@workday/canvas-kit-react/menu';
|
|
@@ -11,7 +11,7 @@ const containerStyles = createStyles({
|
|
|
11
11
|
|
|
12
12
|
export default () => (
|
|
13
13
|
<div className={containerStyles}>
|
|
14
|
-
<Avatar onClick={handleAvatarButtonClick} />
|
|
15
|
-
<Avatar as="div" />
|
|
14
|
+
<Avatar altText="Avatar" onClick={handleAvatarButtonClick} />
|
|
15
|
+
<Avatar altText="Avatar" as="div" />
|
|
16
16
|
</div>
|
|
17
17
|
);
|
|
@@ -13,8 +13,8 @@ const containerStyles = createStyles({
|
|
|
13
13
|
|
|
14
14
|
export default () => (
|
|
15
15
|
<div className={containerStyles}>
|
|
16
|
-
<Avatar variant="dark" onClick={handleAvatarButtonClick} />
|
|
17
|
-
<Avatar onClick={handleAvatarButtonClick} />
|
|
18
|
-
<Avatar url={testAvatar} onClick={handleAvatarButtonClick} />
|
|
16
|
+
<Avatar altText="Avatar" variant="dark" onClick={handleAvatarButtonClick} />
|
|
17
|
+
<Avatar altText="Avatar" onClick={handleAvatarButtonClick} />
|
|
18
|
+
<Avatar altText="Avatar" url={testAvatar} onClick={handleAvatarButtonClick} />
|
|
19
19
|
</div>
|
|
20
20
|
);
|
|
@@ -28,7 +28,7 @@ const containerStyles = createStyles({
|
|
|
28
28
|
|
|
29
29
|
export default () => (
|
|
30
30
|
<div className={containerStyles}>
|
|
31
|
-
<Avatar as="div" {...customBlueAvatarStencil()} />
|
|
32
|
-
<Avatar as="div" {...customGreenAvatarStencil()} />
|
|
31
|
+
<Avatar altText="Avatar" as="div" {...customBlueAvatarStencil()} />
|
|
32
|
+
<Avatar altText="Avatar" as="div" {...customGreenAvatarStencil()} />
|
|
33
33
|
</div>
|
|
34
34
|
);
|
|
@@ -13,13 +13,13 @@ const containerStyles = createStyles({
|
|
|
13
13
|
export default () => (
|
|
14
14
|
<div className={containerStyles}>
|
|
15
15
|
<h3>Working Images</h3>
|
|
16
|
-
<Avatar size="extraExtraLarge" as="div" url={testAvatar} />
|
|
17
|
-
<Avatar size="extraLarge" as="div" url={testAvatar} />
|
|
18
|
-
<Avatar size="large" as="div" url={testAvatar} />
|
|
19
|
-
<Avatar size="medium" as="div" url={testAvatar} />
|
|
20
|
-
<Avatar size="small" as="div" url={testAvatar} />
|
|
21
|
-
<Avatar size="extraSmall" as="div" url={testAvatar} />
|
|
16
|
+
<Avatar altText="Avatar" size="extraExtraLarge" as="div" url={testAvatar} />
|
|
17
|
+
<Avatar altText="Avatar" size="extraLarge" as="div" url={testAvatar} />
|
|
18
|
+
<Avatar altText="Avatar" size="large" as="div" url={testAvatar} />
|
|
19
|
+
<Avatar altText="Avatar" size="medium" as="div" url={testAvatar} />
|
|
20
|
+
<Avatar altText="Avatar" size="small" as="div" url={testAvatar} />
|
|
21
|
+
<Avatar altText="Avatar" size="extraSmall" as="div" url={testAvatar} />
|
|
22
22
|
<h3>Broken Image</h3>
|
|
23
|
-
<Avatar url="/fake/path/to/image.png" as="div" />
|
|
23
|
+
<Avatar altText="Avatar" url="/fake/path/to/image.png" as="div" />
|
|
24
24
|
</div>
|
|
25
25
|
);
|
|
@@ -6,7 +6,13 @@ export default () => (
|
|
|
6
6
|
<div className="story">
|
|
7
7
|
{Array.from({length: 5}, (v, index) => (
|
|
8
8
|
<>
|
|
9
|
-
<Avatar
|
|
9
|
+
<Avatar
|
|
10
|
+
altText="Avatar"
|
|
11
|
+
key={index}
|
|
12
|
+
as="div"
|
|
13
|
+
size="medium"
|
|
14
|
+
url={testAvatar + '?v=' + index}
|
|
15
|
+
/>
|
|
10
16
|
<br />
|
|
11
17
|
</>
|
|
12
18
|
))}
|
|
@@ -6,9 +6,10 @@ export default () => (
|
|
|
6
6
|
<h3>Original Rectangle Image</h3>
|
|
7
7
|
<img alt="" src="https://picsum.photos/id/237/300/200" />
|
|
8
8
|
<h3>Object fit on a Rectangle Image</h3>
|
|
9
|
-
<Avatar as="div" url="https://picsum.photos/id/237/300/200" />
|
|
9
|
+
<Avatar altText="Avatar" as="div" url="https://picsum.photos/id/237/300/200" />
|
|
10
10
|
<h3>Object fit on a Rectangle Image using Dynamic Size</h3>
|
|
11
11
|
<Avatar
|
|
12
|
+
altText="Avatar"
|
|
12
13
|
as="div"
|
|
13
14
|
size={px2rem(200)}
|
|
14
15
|
url="https://picsum.photos/id/237/300/200"
|
|
@@ -17,8 +18,13 @@ export default () => (
|
|
|
17
18
|
<h3>Original Square Image</h3>
|
|
18
19
|
<img alt="" src="https://picsum.photos/id/237/300/300" />
|
|
19
20
|
<h3>Object fit on a Square Image</h3>
|
|
20
|
-
<Avatar as="div" url="https://picsum.photos/id/237/300/300" />
|
|
21
|
+
<Avatar altText="Avatar" as="div" url="https://picsum.photos/id/237/300/300" />
|
|
21
22
|
<h3>Object fit on a Square Image using Dynamic Size</h3>
|
|
22
|
-
<Avatar
|
|
23
|
+
<Avatar
|
|
24
|
+
altText="Avatar"
|
|
25
|
+
as="div"
|
|
26
|
+
size={px2rem(200)}
|
|
27
|
+
url="https://picsum.photos/id/237/300/300"
|
|
28
|
+
/>
|
|
23
29
|
</div>
|
|
24
30
|
);
|
|
@@ -4,24 +4,24 @@ import {px2rem} from '@workday/canvas-kit-styling';
|
|
|
4
4
|
export default () => (
|
|
5
5
|
<div className="story">
|
|
6
6
|
<h3>Extra-Extra Large</h3>
|
|
7
|
-
<Avatar as="div" size="extraExtraLarge" />
|
|
7
|
+
<Avatar altText="Avatar" as="div" size="extraExtraLarge" />
|
|
8
8
|
<h3>Extra Large</h3>
|
|
9
|
-
<Avatar as="div" size="extraLarge" />
|
|
9
|
+
<Avatar altText="Avatar" as="div" size="extraLarge" />
|
|
10
10
|
<h3>Large</h3>
|
|
11
|
-
<Avatar as="div" size="large" />
|
|
11
|
+
<Avatar altText="Avatar" as="div" size="large" />
|
|
12
12
|
<h3>Medium</h3>
|
|
13
|
-
<Avatar as="div" size="medium" />
|
|
13
|
+
<Avatar altText="Avatar" as="div" size="medium" />
|
|
14
14
|
<h3>Small</h3>
|
|
15
|
-
<Avatar as="div" size="small" />
|
|
15
|
+
<Avatar altText="Avatar" as="div" size="small" />
|
|
16
16
|
<h3>Extra Small</h3>
|
|
17
|
-
<Avatar as="div" size="extraSmall" />
|
|
17
|
+
<Avatar altText="Avatar" as="div" size="extraSmall" />
|
|
18
18
|
<h3>30px</h3>
|
|
19
|
-
<Avatar as="div" size={px2rem(30)} />
|
|
19
|
+
<Avatar altText="Avatar" as="div" size={px2rem(30)} />
|
|
20
20
|
<h3>40px</h3>
|
|
21
|
-
<Avatar as="div" size={px2rem(40)} />
|
|
21
|
+
<Avatar altText="Avatar" as="div" size={px2rem(40)} />
|
|
22
22
|
<h3>3rem</h3>
|
|
23
|
-
<Avatar as="div" size="3rem" />
|
|
23
|
+
<Avatar altText="Avatar" as="div" size="3rem" />
|
|
24
24
|
<h3>4rem</h3>
|
|
25
|
-
<Avatar as="div" size="4rem" />
|
|
25
|
+
<Avatar altText="Avatar" as="div" size="4rem" />
|
|
26
26
|
</div>
|
|
27
27
|
);
|
|
@@ -3,8 +3,8 @@ import {Avatar} from '@workday/canvas-kit-react/avatar';
|
|
|
3
3
|
export default () => (
|
|
4
4
|
<div className="story">
|
|
5
5
|
<h3>Light</h3>
|
|
6
|
-
<Avatar as="div" size="medium" />
|
|
6
|
+
<Avatar altText="Avatar" as="div" size="medium" />
|
|
7
7
|
<h3>Dark</h3>
|
|
8
|
-
<Avatar as="div" size="medium" variant="dark" />
|
|
8
|
+
<Avatar altText="Avatar" as="div" size="medium" variant="dark" />
|
|
9
9
|
</div>
|
|
10
10
|
);
|
|
@@ -16,7 +16,7 @@ import HoistedModel from './examples/HoistedModel';
|
|
|
16
16
|
## Installation
|
|
17
17
|
|
|
18
18
|
```sh
|
|
19
|
-
yarn add @workday/canvas-kit-
|
|
19
|
+
yarn add @workday/canvas-kit-react
|
|
20
20
|
```
|
|
21
21
|
|
|
22
22
|
## Usage
|
|
@@ -79,4 +79,4 @@ the example below, we're hoisting the models to expand and collapse all three co
|
|
|
79
79
|
|
|
80
80
|
## Component API
|
|
81
81
|
|
|
82
|
-
<SymbolDoc name="Expandable" fileName="/
|
|
82
|
+
<SymbolDoc name="Expandable" fileName="/react/" />
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {Expandable} from '@workday/canvas-kit-
|
|
1
|
+
import {Expandable} from '@workday/canvas-kit-react/expandable';
|
|
2
2
|
// @ts-ignore: Cannot find module error
|
|
3
3
|
import testAvatar from './test-avatar.png';
|
|
4
4
|
|
|
@@ -7,7 +7,7 @@ export default () => (
|
|
|
7
7
|
<Expandable>
|
|
8
8
|
<Expandable.Target headingLevel="h4">
|
|
9
9
|
<Expandable.Icon iconPosition="start" />
|
|
10
|
-
<Expandable.Avatar url={testAvatar} />
|
|
10
|
+
<Expandable.Avatar altText="Avatar" url={testAvatar} />
|
|
11
11
|
<Expandable.Title>Title</Expandable.Title>
|
|
12
12
|
</Expandable.Target>
|
|
13
13
|
|
|
@@ -15,7 +15,7 @@ export default () => (
|
|
|
15
15
|
</Expandable>
|
|
16
16
|
<Expandable>
|
|
17
17
|
<Expandable.Target headingLevel="h4">
|
|
18
|
-
<Expandable.Avatar url={testAvatar} />
|
|
18
|
+
<Expandable.Avatar altText="Avatar" url={testAvatar} />
|
|
19
19
|
<Expandable.Title>Title</Expandable.Title>
|
|
20
20
|
<Expandable.Icon iconPosition="end" />
|
|
21
21
|
</Expandable.Target>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
|
-
import {Expandable, useExpandableModel} from '@workday/canvas-kit-
|
|
3
|
+
import {Expandable, useExpandableModel} from '@workday/canvas-kit-react/expandable';
|
|
4
4
|
import {Flex} from '@workday/canvas-kit-react/layout';
|
|
5
5
|
import {SecondaryButton} from '@workday/canvas-kit-react/button';
|
|
6
6
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {Expandable} from '@workday/canvas-kit-
|
|
1
|
+
import {Expandable} from '@workday/canvas-kit-react/expandable';
|
|
2
2
|
// @ts-ignore: Cannot find module error
|
|
3
3
|
import testAvatar from './test-avatar.png';
|
|
4
4
|
|
|
@@ -6,7 +6,7 @@ export default () => (
|
|
|
6
6
|
<Expandable>
|
|
7
7
|
<Expandable.Target headingLevel="h4">
|
|
8
8
|
<Expandable.Icon iconPosition="start" />
|
|
9
|
-
<Expandable.Avatar url={testAvatar} />
|
|
9
|
+
<Expandable.Avatar altText="Avatar" url={testAvatar} />
|
|
10
10
|
<Expandable.Title>
|
|
11
11
|
Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,
|
|
12
12
|
onions, and oregano.
|
|
@@ -3,6 +3,7 @@ import Basic from './examples/Basic';
|
|
|
3
3
|
import ContextMenu from './examples/ContextMenu';
|
|
4
4
|
import Icons from './examples/Icons';
|
|
5
5
|
import SelectableMenu from './examples/SelectableMenu';
|
|
6
|
+
import Grouping from './examples/Grouping';
|
|
6
7
|
|
|
7
8
|
# Canvas Kit Menu
|
|
8
9
|
|
|
@@ -69,6 +70,17 @@ behaviors depend on many other things. To see a full example of all these behavi
|
|
|
69
70
|
|
|
70
71
|
<ExampleCodeBlock code={SelectableMenu} />
|
|
71
72
|
|
|
73
|
+
### Grouping
|
|
74
|
+
|
|
75
|
+
Grouping adds hierarchy and categorization to menu items. Group headers do not represent menu items
|
|
76
|
+
and are not selectable with the keyboard or mouse.
|
|
77
|
+
|
|
78
|
+
> **Note**: Grouping is not supported in virtual rendering. Menus by default have `shouldVirtualize`
|
|
79
|
+
> set to `false`. Setting to `true` results in unspecified behavior. We use `react-virtual` which
|
|
80
|
+
> doesn't support nested virtualization.
|
|
81
|
+
|
|
82
|
+
<ExampleCodeBlock code={Grouping} />
|
|
83
|
+
|
|
72
84
|
## Component API
|
|
73
85
|
|
|
74
86
|
<SymbolDoc name="Menu" fileName="/react/" />
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
import {Menu} from '@workday/canvas-kit-react/menu';
|
|
4
|
+
import {BodyText} from '@workday/canvas-kit-react/text';
|
|
5
|
+
|
|
6
|
+
export default () => {
|
|
7
|
+
const [selected, setSelected] = React.useState('');
|
|
8
|
+
return (
|
|
9
|
+
<>
|
|
10
|
+
<Menu onSelect={data => setSelected(data.id)}>
|
|
11
|
+
<Menu.Target>Open Menu</Menu.Target>
|
|
12
|
+
<Menu.Popper>
|
|
13
|
+
<Menu.Card>
|
|
14
|
+
<Menu.List>
|
|
15
|
+
<Menu.Group title="First Group">
|
|
16
|
+
<Menu.Item>First Item</Menu.Item>
|
|
17
|
+
<Menu.Item>Second Item</Menu.Item>
|
|
18
|
+
</Menu.Group>
|
|
19
|
+
<Menu.Group title="Second Group">
|
|
20
|
+
<Menu.Item>Third Item (with a really, really, really long label)</Menu.Item>
|
|
21
|
+
<Menu.Item aria-disabled>Fourth Item</Menu.Item>
|
|
22
|
+
</Menu.Group>
|
|
23
|
+
</Menu.List>
|
|
24
|
+
</Menu.Card>
|
|
25
|
+
</Menu.Popper>
|
|
26
|
+
<BodyText size="small" marginTop="s">
|
|
27
|
+
Selected: <span data-testid="output">{selected}</span>
|
|
28
|
+
</BodyText>
|
|
29
|
+
</Menu>
|
|
30
|
+
</>
|
|
31
|
+
);
|
|
32
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
|
-
import {Expandable} from '@workday/canvas-kit-
|
|
3
|
+
import {Expandable} from '@workday/canvas-kit-react/expandable';
|
|
4
4
|
|
|
5
5
|
import {defaultJSDoc} from '../../docgen/docParser';
|
|
6
6
|
import {EnhancedComponentValue} from '../../docgen/plugins/customTypes';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "13.0.0-alpha.
|
|
3
|
+
"version": "13.0.0-alpha.1084-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": "^13.0.0-alpha.
|
|
49
|
-
"@workday/canvas-kit-preview-react": "^13.0.0-alpha.
|
|
50
|
-
"@workday/canvas-kit-react": "^13.0.0-alpha.
|
|
51
|
-
"@workday/canvas-kit-styling": "^13.0.0-alpha.
|
|
48
|
+
"@workday/canvas-kit-labs-react": "^13.0.0-alpha.1084-next.0",
|
|
49
|
+
"@workday/canvas-kit-preview-react": "^13.0.0-alpha.1084-next.0",
|
|
50
|
+
"@workday/canvas-kit-react": "^13.0.0-alpha.1084-next.0",
|
|
51
|
+
"@workday/canvas-kit-styling": "^13.0.0-alpha.1084-next.0",
|
|
52
52
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
53
53
|
"@workday/canvas-tokens-web": "^2.1.1",
|
|
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": "7e212f823aba1ffbb1965c6ffdf8e270ad575a96"
|
|
65
65
|
}
|
|
File without changes
|