@kaizen/components 1.70.0 → 1.70.1
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 +8589 -8589
- package/package.json +1 -1
- package/src/Notification/subcomponents/GenericNotification/GenericNotification.module.scss +2 -2
- package/src/Tag/_docs/Tag.mdx +1 -1
- package/src/__rc__/Menu/_docs/{Menu.mdx → Menu--usage-guidelines.mdx} +9 -6
- package/src/__rc__/Tooltip/_docs/Tooltip.mdx +2 -2
- /package/src/__rc__/Menu/_docs/{ApiSpecification.mdx → Menu--api-specification.mdx} +0 -0
package/package.json
CHANGED
|
@@ -121,10 +121,10 @@
|
|
|
121
121
|
|
|
122
122
|
.informative {
|
|
123
123
|
background: $color-blue-100;
|
|
124
|
-
border-color: var(--color-blue-
|
|
124
|
+
border-color: var(--color-blue-500);
|
|
125
125
|
color: $color-purple-800;
|
|
126
126
|
|
|
127
|
-
--icon-color: var(--color-blue-
|
|
127
|
+
--icon-color: var(--color-blue-500);
|
|
128
128
|
}
|
|
129
129
|
|
|
130
130
|
.cautionary {
|
package/src/Tag/_docs/Tag.mdx
CHANGED
|
@@ -17,7 +17,7 @@ import * as TagStories from './Tag.stories'
|
|
|
17
17
|
<Unstyled>
|
|
18
18
|
<InlineNotification type="cautionary" persistent>
|
|
19
19
|
{`This version of the Tag will soon be deprecated and will be removed in the next major release.
|
|
20
|
-
Import Tag from "@kaizen/components/future" for the latest version and
|
|
20
|
+
Import Tag from "@kaizen/components/future" for the latest version and view our migration guide in the Future folder`}
|
|
21
21
|
</InlineNotification>
|
|
22
22
|
</Unstyled>
|
|
23
23
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Canvas, Meta, Controls } from '@storybook/blocks'
|
|
2
|
-
import { ResourceLinks,
|
|
2
|
+
import { ResourceLinks, KAIOInstallation, DosAndDonts, DoOrDont } from '~storybook/components'
|
|
3
3
|
import * as MenuDocsStories from './Menu.docs.stories'
|
|
4
4
|
import * as MenuStories from './Menu.stories'
|
|
5
5
|
|
|
@@ -16,9 +16,10 @@ Updated July 6, 2024
|
|
|
16
16
|
apiSpecification="/?path=/docs/actions-menu-v3-api-specification--docs"
|
|
17
17
|
/>
|
|
18
18
|
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
<KAIOInstallation
|
|
20
|
+
exportNames={['Menu', 'MenuTrigger', 'MenuItem', 'MenuPopover', 'MenuSection', 'MenuHeader']}
|
|
21
|
+
family="actions"
|
|
22
|
+
version="3"
|
|
22
23
|
/>
|
|
23
24
|
|
|
24
25
|
## Overview
|
|
@@ -55,12 +56,12 @@ A menu displays a list of actions in a popover, toggled opened with a button.
|
|
|
55
56
|
- Menu items may be organised into sections, with a heading for each section.
|
|
56
57
|
- The menu trigger button, which may be any variation of a button.
|
|
57
58
|
|
|
58
|
-
|
|
59
|
+
### When to use
|
|
59
60
|
|
|
60
61
|
- When you have a group of related actions for a page or item on the page.
|
|
61
62
|
- The actions either: - Cause an action on the page (e.g. delete), or - Navigate somewhere
|
|
62
63
|
|
|
63
|
-
|
|
64
|
+
### When not to use
|
|
64
65
|
|
|
65
66
|
- When you want to persist a user selection.
|
|
66
67
|
- Use a Select/Multi-Select or Combobox/Multi-Combobox component instead.
|
|
@@ -69,6 +70,8 @@ A menu displays a list of actions in a popover, toggled opened with a button.
|
|
|
69
70
|
- It's recommended that you avoid this because of the complexity it adds for accessibility.
|
|
70
71
|
- Inside a navigation bar - Different DOM elements and behaviour is required for a dropdown menu in a navigation bar.
|
|
71
72
|
|
|
73
|
+
### Specs
|
|
74
|
+
|
|
72
75
|
#### Do use a menu for an overflow of actions
|
|
73
76
|
|
|
74
77
|
Menus work well as an overflow for a list of actions on a page or section. Try to avoid using menus for a single action, favouring an inline button/link instead.
|
|
@@ -87,7 +87,7 @@ Tooltips should never stop a user (or be a gate) from completing a task or perfo
|
|
|
87
87
|
|
|
88
88
|
#### Do be concise
|
|
89
89
|
|
|
90
|
-
Good tooltips contain concise and helpful information, keep it short. If you need more space, consider using a Popover. Don
|
|
90
|
+
Good tooltips contain concise and helpful information, keep it short. If you need more space, consider using a Popover. Don't use it to duplicate information that already exists on the page. Instead, closely consider its placement and whether the disclosed copy will inform the action the user is about to perform.
|
|
91
91
|
|
|
92
92
|
<DosAndDonts>
|
|
93
93
|
<DoOrDont story={TooltipStories.DoConcise} />
|
|
@@ -107,7 +107,7 @@ Good tooltips contain concise and helpful information, keep it short. If you nee
|
|
|
107
107
|
### Trigger
|
|
108
108
|
|
|
109
109
|
- A tooltip trigger needs to be discoverable:
|
|
110
|
-
- E.g. something like an icon to suggest there
|
|
110
|
+
- E.g. something like an icon to suggest there's a tooltip.
|
|
111
111
|
- Avoid triggering tooltips from text that excludes a visual indicator (e.g. underline)
|
|
112
112
|
- A tooltip should be shown and accessible on hover, click or on focus events.
|
|
113
113
|
|
|
File without changes
|