@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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kaizen/components",
3
- "version": "1.70.0",
3
+ "version": "1.70.1",
4
4
  "description": "Kaizen component library",
5
5
  "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
6
6
  "homepage": "https://cultureamp.design",
@@ -121,10 +121,10 @@
121
121
 
122
122
  .informative {
123
123
  background: $color-blue-100;
124
- border-color: var(--color-blue-400);
124
+ border-color: var(--color-blue-500);
125
125
  color: $color-purple-800;
126
126
 
127
- --icon-color: var(--color-blue-400);
127
+ --icon-color: var(--color-blue-500);
128
128
  }
129
129
 
130
130
  .cautionary {
@@ -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 veiw our migration guide in the Future folder`}
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, Installation, DosAndDonts, DoOrDont } from '~storybook/components'
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
- <Installation
20
- installCommand="pnpm add @kaizen/components"
21
- importStatement='import { MenuTrigger, Menu, MenuItem, MenuPopover, MenuSection, MenuHeader } from "@kaizen/components/v3/actions"'
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
- ### When to use
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
- ### When not to use
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. Dont 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.
90
+ Good tooltips contain concise and helpful information, keep it short. If you need more space, consider using a Popover. Don&apos;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 theres a tooltip.
110
+ - E.g. something like an icon to suggest there&apos;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