@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.
Files changed (31) hide show
  1. package/dist/es6/lib/docs.js +144510 -124180
  2. package/dist/es6/lib/stackblitzFiles/packageJSONFile.js +5 -5
  3. package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts +5 -5
  4. package/dist/es6/lib/widgets/enhancedComponent.js +1 -1
  5. package/dist/mdx/13.0-UPGRADE-GUIDE.mdx +37 -6
  6. package/dist/mdx/preview-react/pill/examples/WithAvatar.tsx +2 -2
  7. package/dist/mdx/preview-react/pill/examples/WithRemovable.tsx +1 -1
  8. package/dist/mdx/react/_examples/mdx/examples/GlobalHeader.tsx +1 -1
  9. package/dist/mdx/react/_examples/mdx/examples/SidePanelWithNavigation.tsx +1 -1
  10. package/dist/mdx/react/avatar/avatar/examples/Basic.tsx +2 -2
  11. package/dist/mdx/react/avatar/avatar/examples/Button.tsx +3 -3
  12. package/dist/mdx/react/avatar/avatar/examples/CustomStyles.tsx +2 -2
  13. package/dist/mdx/react/avatar/avatar/examples/Image.tsx +7 -7
  14. package/dist/mdx/react/avatar/avatar/examples/LazyLoad.tsx +7 -1
  15. package/dist/mdx/react/avatar/avatar/examples/ObjectFit.tsx +9 -3
  16. package/dist/mdx/react/avatar/avatar/examples/Size.tsx +10 -10
  17. package/dist/mdx/react/avatar/avatar/examples/Variant.tsx +2 -2
  18. package/dist/mdx/{labs-react → react}/expandable/Expandable.mdx +2 -2
  19. package/dist/mdx/{labs-react → react}/expandable/examples/Avatar.tsx +3 -3
  20. package/dist/mdx/{labs-react → react}/expandable/examples/Depth.tsx +1 -2
  21. package/dist/mdx/{labs-react → react}/expandable/examples/EndIcon.tsx +1 -1
  22. package/dist/mdx/{labs-react → react}/expandable/examples/HoistedModel.tsx +1 -1
  23. package/dist/mdx/{labs-react → react}/expandable/examples/LongTitle.tsx +2 -2
  24. package/dist/mdx/{labs-react → react}/expandable/examples/RTL.tsx +1 -1
  25. package/dist/mdx/{labs-react → react}/expandable/examples/StartIcon.tsx +1 -1
  26. package/dist/mdx/react/menu/Menu.mdx +12 -0
  27. package/dist/mdx/react/menu/examples/Grouping.tsx +32 -0
  28. package/dist/mdx/react/select/examples/Basic.tsx +1 -0
  29. package/lib/widgets/enhancedComponent.tsx +1 -1
  30. package/package.json +6 -6
  31. /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.4",
22
- "@workday/canvas-kit-preview-react": "12.5.4",
23
- "@workday/canvas-kit-react": "12.5.4",
24
- "@workday/canvas-kit-react-fonts": "^12.5.4",
25
- "@workday/canvas-kit-styling": "12.5.4",
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.4",
22
- "@workday/canvas-kit-preview-react": "12.5.4",
23
- "@workday/canvas-kit-react": "12.5.4",
24
- "@workday/canvas-kit-react-fonts": "^12.5.4",
25
- "@workday/canvas-kit-styling": "12.5.4",
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-labs-react/expandable';
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>
@@ -25,7 +25,7 @@ export default () => {
25
25
  />
26
26
  </Pill>
27
27
  <Pill variant="removable">
28
- <Pill.Avatar url={testAvatar} />
28
+ <Pill.Avatar altText="Avatar" url={testAvatar} />
29
29
  <Pill.Label>Carolyn Grimaldi</Pill.Label>
30
30
  <Pill.IconButton
31
31
  aria-label="Remove"
@@ -149,7 +149,7 @@ export default () => {
149
149
  <TertiaryButton icon={inboxIcon} />
150
150
  </Tooltip>
151
151
  <Tooltip title="Profile">
152
- <Avatar />
152
+ <Avatar altText="Avatar" />
153
153
  </Tooltip>
154
154
  </GlobalHeader.Item>
155
155
  </GlobalHeader>
@@ -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-labs-react/expandable';
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 key={index} as="div" size="medium" url={testAvatar + '?v=' + index} />
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 as="div" size={px2rem(200)} url="https://picsum.photos/id/237/300/300" />
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-labs-react
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="/labs-react/" />
82
+ <SymbolDoc name="Expandable" fileName="/react/" />
@@ -1,4 +1,4 @@
1
- import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
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,5 +1,4 @@
1
- import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
2
- import {space} from '@workday/canvas-kit-react/tokens';
1
+ import {Expandable} from '@workday/canvas-kit-react/expandable';
3
2
 
4
3
  export default () => {
5
4
  return (
@@ -1,4 +1,4 @@
1
- import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
1
+ import {Expandable} from '@workday/canvas-kit-react/expandable';
2
2
 
3
3
  export default () => (
4
4
  <Expandable>
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
 
3
- import {Expandable, useExpandableModel} from '@workday/canvas-kit-labs-react/expandable';
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-labs-react/expandable';
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.
@@ -1,4 +1,4 @@
1
- import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
1
+ import {Expandable} from '@workday/canvas-kit-react/expandable';
2
2
  import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
3
3
 
4
4
  export default () => {
@@ -1,4 +1,4 @@
1
- import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
1
+ import {Expandable} from '@workday/canvas-kit-react/expandable';
2
2
 
3
3
  export default () => (
4
4
  <Expandable>
@@ -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
+ };
@@ -22,6 +22,7 @@ export default () => {
22
22
  const [value, setValue] = React.useState('');
23
23
 
24
24
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
25
+ console.log('change', event.currentTarget.value);
25
26
  setValue(event.target.value);
26
27
  };
27
28
 
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
 
3
- import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
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.1075-next.0",
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.1075-next.0",
49
- "@workday/canvas-kit-preview-react": "^13.0.0-alpha.1075-next.0",
50
- "@workday/canvas-kit-react": "^13.0.0-alpha.1075-next.0",
51
- "@workday/canvas-kit-styling": "^13.0.0-alpha.1075-next.0",
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": "423e097625d8c1cf8e48dcfc794313aae00ded67"
64
+ "gitHead": "7e212f823aba1ffbb1965c6ffdf8e270ad575a96"
65
65
  }