@atlaskit/navigation-system 5.31.0 → 5.32.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/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlassian/navigation-system
2
2
 
3
+ ## 5.32.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`ea028d2a58383`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ea028d2a58383) -
8
+ Implemented the SkeletonMenuItem and SkeletonMenuSectionHeading components to match the
9
+ corresponding components they represent.
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 5.31.0
4
16
 
5
17
  ### Minor Changes
@@ -20,6 +20,9 @@ import { MenuSectionExample } from '../../examples/constellation/side-nav-items/
20
20
  import { MenuDividerExample } from '../../examples/constellation/side-nav-items/menu-divider';
21
21
  import { TopLevelSpacerExample } from '../../examples/constellation/side-nav-items/top-level-spacer';
22
22
  import { RightToLeftExample } from '../../examples/constellation/side-nav-items/right-to-left';
23
+ import { SkeletonMenuItemDescriptionExample } from '../../examples/constellation/side-nav-items/skeleton-menu-item-description';
24
+ import { SkeletonMenuItemElemBeforeExample } from '../../examples/constellation/side-nav-items/skeleton-menu-item-elem-before';
25
+ import { SkeletonMenuSectionHeadingExample } from '../../examples/constellation/side-nav-items/skeleton-menu-section-heading';
23
26
 
24
27
  These components can be used within
25
28
  the [side nav](/components/navigation-system/layout/examples#side-nav).
@@ -208,3 +211,25 @@ A 12px space to separate level 0 menu items or sections.
208
211
  All side nav items support right to left languages.
209
212
 
210
213
  <Example Component={RightToLeftExample} />
214
+
215
+ ## Loading states
216
+
217
+ ### Menu item skeleton
218
+
219
+ #### With description
220
+
221
+ Menu item skeletons can include a description, a secondary line of text. Use the `hasDescription`
222
+ prop to match the corresponding menu item that will be loaded.
223
+
224
+ <Example Component={SkeletonMenuItemDescriptionExample} backgroundColor="white" />
225
+
226
+ #### With icon
227
+
228
+ Menu item skeletons can include an icon or avatar before the label. Use the `hasElemBefore` prop to
229
+ match the corresponding menu item that will be loaded.
230
+
231
+ <Example Component={SkeletonMenuItemElemBeforeExample} backgroundColor="white" />
232
+
233
+ ### Menu section heading skeleton
234
+
235
+ <Example Component={SkeletonMenuSectionHeadingExample} backgroundColor="white" />
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/navigation-system",
3
- "version": "5.31.0",
3
+ "version": "5.32.0",
4
4
  "description": "The latest navigation system for Atlassian apps.",
5
5
  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
6
6
  "author": "Atlassian Pty Ltd",
@@ -78,7 +78,7 @@
78
78
  "@atlaskit/popup": "^4.13.0",
79
79
  "@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
80
80
  "@atlaskit/primitives": "^17.1.0",
81
- "@atlaskit/side-nav-items": "^1.3.0",
81
+ "@atlaskit/side-nav-items": "^1.4.0",
82
82
  "@atlaskit/tokens": "^10.1.0",
83
83
  "@atlaskit/tooltip": "^20.14.0",
84
84
  "@atlaskit/visually-hidden": "^3.0.0",