@kaizen/components 1.79.5 → 1.79.6
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/styles.css
CHANGED
|
@@ -5062,7 +5062,9 @@
|
|
|
5062
5062
|
align-items: center;
|
|
5063
5063
|
justify-content: center;
|
|
5064
5064
|
position: absolute;
|
|
5065
|
-
|
|
5065
|
+
|
|
5066
|
+
/* from $ca-z-index-fixed */
|
|
5067
|
+
z-index: 1030;
|
|
5066
5068
|
background: var(--color-white);
|
|
5067
5069
|
inset-block: 0 1px;
|
|
5068
5070
|
width: 48px;
|
package/package.json
CHANGED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import { Meta } from '@storybook/blocks'
|
|
2
|
+
|
|
3
|
+
<Meta title="Components/Menu/Migration guide" />
|
|
4
|
+
|
|
5
|
+
# Menu migration guide
|
|
6
|
+
|
|
7
|
+
## Audience
|
|
8
|
+
|
|
9
|
+
This guide is relevant for Kaizen All-In-One (KAIO) v1 consumers.
|
|
10
|
+
|
|
11
|
+
## Purpose
|
|
12
|
+
|
|
13
|
+
This guide provides instructions for migrating menu usage from the `deprecated` (`@kaizen/components`) `Menu` component to the `next` (`@kaizen/components/next`) `Menu` component.
|
|
14
|
+
|
|
15
|
+
This migration is a prerequisite for [migrating to KAIO v2](/docs/releases-upcoming-major-releases--docs).
|
|
16
|
+
|
|
17
|
+
## Key API changes
|
|
18
|
+
|
|
19
|
+
`next/Menu` separates its functionality into the following components:
|
|
20
|
+
|
|
21
|
+
- `MenuTrigger` wraps the `MenuPopover` component and its trigger element.
|
|
22
|
+
- `MenuPopover` contains a `Menu` component, and controls the popover placement and open and close interactions.
|
|
23
|
+
- `Menu` contains one or more `MenuItem` and `MenuSection` components.
|
|
24
|
+
- `MenuSection` enables menu items to be grouped into sections.
|
|
25
|
+
- `MenuHeader` provides a section's header content.
|
|
26
|
+
- `MenuItem` provides a menu item's content, and handles item selection.
|
|
27
|
+
|
|
28
|
+
Other notable changes:
|
|
29
|
+
|
|
30
|
+
- `Menu.align` prop becomes MenuPopover.placement, and values are mapped as follows:
|
|
31
|
+
- `left` becomes `start`
|
|
32
|
+
- `right` becomes `end`
|
|
33
|
+
- `Menu.autoHide` prop is retired
|
|
34
|
+
- `Menu.button` prop becomes `MenuTrigger.children`
|
|
35
|
+
- The trigger element must be a `next/Button`
|
|
36
|
+
- `Menu.dropdownWidth` prop is retired
|
|
37
|
+
- `Menu.portalSelector` prop is retired
|
|
38
|
+
- Where needed, [PortalProvider](https://react-spectrum.adobe.com/react-aria/PortalProvider.html) can be used to control portalling behaviour
|
|
39
|
+
- `MenuItem.destructive` prop is retired
|
|
40
|
+
- This change aligns with a broader move towards more judicious use of colour
|
|
41
|
+
- `MenuItem.disabled` prop becomes `MenuItem.isDisabled`
|
|
42
|
+
- `MenuItem.label` prop becomes `MenuItem.children`
|
|
43
|
+
- `MenuItem.onClick` prop becomes `MenuItem.onAction`
|
|
44
|
+
- React Aria's `Menu` does not expose native click events, e.g. `MenuItem.onAction` cannot call `e.preventDefault()`
|
|
45
|
+
- See React Aria [Menu documentation](https://react-spectrum.adobe.com/react-aria/Menu.html) for more details on working with `Menu` and `MenuItem` events
|
|
46
|
+
- `MenuList.heading` prop becomes `MenuHeader` in a `MenuSection`
|
|
47
|
+
|
|
48
|
+
## Migration example
|
|
49
|
+
|
|
50
|
+
### Before
|
|
51
|
+
|
|
52
|
+
```tsx
|
|
53
|
+
<Menu button={<Button>Trigger</Button>}>
|
|
54
|
+
<MenuList>
|
|
55
|
+
<MenuList heading={<MenuHeading>Section One</MenuHeading>}>
|
|
56
|
+
<MenuItem onClick={() => alert('1')} label="Item 1" />
|
|
57
|
+
<MenuItem onClick={() => alert('2')} label="Item 2" />
|
|
58
|
+
</MenuList>
|
|
59
|
+
<MenuList heading={<MenuHeading>Section Two</MenuHeading>}>
|
|
60
|
+
<MenuItem onClick={() => alert('3')} label="Item 3" />
|
|
61
|
+
<MenuItem onClick={() => alert('4')} label="Item 4" />
|
|
62
|
+
</MenuList>
|
|
63
|
+
</MenuList>
|
|
64
|
+
</Menu>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### After
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
<MenuTrigger>
|
|
71
|
+
<Button>Trigger</Button>
|
|
72
|
+
<MenuPopover>
|
|
73
|
+
<Menu>
|
|
74
|
+
<MenuSection>
|
|
75
|
+
<MenuHeader>Section One</MenuHeader>
|
|
76
|
+
<MenuItem onAction={() => alert('1')}>Item 1</MenuItem>
|
|
77
|
+
<MenuItem onAction={() => alert('2')}>Item 2</MenuItem>
|
|
78
|
+
</MenuSection>
|
|
79
|
+
<MenuSection>
|
|
80
|
+
<MenuHeader>Section Two</MenuHeader>
|
|
81
|
+
<MenuItem onAction={() => alert('3')}>Item 3</MenuItem>
|
|
82
|
+
<MenuItem onAction={() => alert('4')}>Item 4</MenuItem>
|
|
83
|
+
</MenuSection>
|
|
84
|
+
</Menu>
|
|
85
|
+
</MenuPopover>
|
|
86
|
+
</MenuTrigger>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## More information
|
|
90
|
+
|
|
91
|
+
More information about `next/Menu` can be found at [API Specification](/docs/components-menu-menu-next-api-specification--docs) and [Usage Guidelines](/docs/components-menu-menu-next-usage-guidelines--docs).
|