@atlaskit/navigation-system 9.2.0 → 9.3.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 +14 -0
- package/constellation/index/examples.mdx +4 -0
- package/constellation/index/migration-guide.mdx +329 -0
- package/constellation/index/props.mdx +4 -0
- package/constellation/layout/usage.mdx +11 -0
- package/constellation/top-nav-items/usage.mdx +11 -0
- package/dist/cjs/entry-points/legacy/css-variables.js +19 -0
- package/dist/es2019/entry-points/legacy/css-variables.js +13 -0
- package/dist/esm/entry-points/legacy/css-variables.js +13 -0
- package/dist/types/entry-points/legacy/css-variables.d.ts +12 -0
- package/dist/types-ts4.5/entry-points/legacy/css-variables.d.ts +12 -0
- package/legacy/css-variables/package.json +17 -0
- package/package.json +16 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlassian/navigation-system
|
|
2
2
|
|
|
3
|
+
## 9.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`a229f9efdb819`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a229f9efdb819) -
|
|
8
|
+
Add entrypoint for consuming Nav 3 CSS variables
|
|
9
|
+
|
|
10
|
+
## 9.2.1
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- [`ca5f7e8e2a556`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ca5f7e8e2a556) -
|
|
15
|
+
Dev-only dependencies have been added.
|
|
16
|
+
|
|
3
17
|
## 9.2.0
|
|
4
18
|
|
|
5
19
|
### Minor Changes
|
|
@@ -0,0 +1,329 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Migration guide
|
|
3
|
+
description: How to migrate to navigation system from the old Atlassian navigation, side navigation, and page layout packages.
|
|
4
|
+
order: 4
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
import SectionMessage from '@atlaskit/section-message';
|
|
8
|
+
import Link from '@atlaskit/link';
|
|
9
|
+
import { Code } from '@atlaskit/code';
|
|
10
|
+
|
|
11
|
+
<SectionMessage title="Further guidance for Atlassians">
|
|
12
|
+
This page covers the Design System visual primitives. For guidance on the broader platform
|
|
13
|
+
components — such as the customisation modal, app switcher data, and user personalisation — see{' '}
|
|
14
|
+
<Link href="https://hello.atlassian.net/wiki/spaces/navx/pages/5104144812">
|
|
15
|
+
navigation resources (Atlassians only)
|
|
16
|
+
</Link>
|
|
17
|
+
.
|
|
18
|
+
</SectionMessage>
|
|
19
|
+
|
|
20
|
+
This guide covers migration from the old [page layout](/components/page-layout), [Atlassian navigation](/components/atlassian-navigation),
|
|
21
|
+
and [side navigation](/components/side-navigation) to the new navigation system and [side nav items](https://atlaskit.atlassian.com/packages/navigation/side-nav-items).
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
## Page layout
|
|
25
|
+
|
|
26
|
+
### Slots
|
|
27
|
+
|
|
28
|
+
<table>
|
|
29
|
+
<colgroup>
|
|
30
|
+
<col style={{width: '40%'}} />
|
|
31
|
+
<col style={{width: '60%'}} />
|
|
32
|
+
</colgroup>
|
|
33
|
+
<thead>
|
|
34
|
+
<tr>
|
|
35
|
+
<th>Old</th>
|
|
36
|
+
<th>New</th>
|
|
37
|
+
</tr>
|
|
38
|
+
</thead>
|
|
39
|
+
<tbody>
|
|
40
|
+
<tr>
|
|
41
|
+
<td><Code>PageLayout</Code></td>
|
|
42
|
+
<td><Link href="/components/navigation-system/layout/code#root">Root</Link></td>
|
|
43
|
+
</tr>
|
|
44
|
+
<tr>
|
|
45
|
+
<td><Code>Banner</Code></td>
|
|
46
|
+
<td><Link href="/components/navigation-system/layout/code#banner">Banner</Link></td>
|
|
47
|
+
</tr>
|
|
48
|
+
<tr>
|
|
49
|
+
<td><Code>TopNavigation</Code></td>
|
|
50
|
+
<td><Link href="/components/navigation-system/layout/code#topnav">TopNav</Link></td>
|
|
51
|
+
</tr>
|
|
52
|
+
<tr>
|
|
53
|
+
<td><Code>LeftSidebar</Code>, <Code>LeftSidebarWithoutResize</Code></td>
|
|
54
|
+
<td><Link href="/components/navigation-system/layout/code#sidenav">SideNav</Link></td>
|
|
55
|
+
</tr>
|
|
56
|
+
<tr>
|
|
57
|
+
<td><Code>LeftPanel</Code></td>
|
|
58
|
+
<td>No equivalent. Use <Link href="/components/navigation-system/layout/code#sidenav">SideNav</Link> if it's navigation, or <Link href="/components/navigation-system/layout/code#panel">Panel</Link> if it's supplementary content.</td>
|
|
59
|
+
</tr>
|
|
60
|
+
<tr>
|
|
61
|
+
<td><Code>Content</Code>, <Code>Main</Code></td>
|
|
62
|
+
<td><Link href="/components/navigation-system/layout/code#main">Main</Link></td>
|
|
63
|
+
</tr>
|
|
64
|
+
<tr>
|
|
65
|
+
<td><Code>RightPanel</Code></td>
|
|
66
|
+
<td><Link href="/components/navigation-system/layout/code#panel">Panel</Link></td>
|
|
67
|
+
</tr>
|
|
68
|
+
<tr>
|
|
69
|
+
<td><Code>RightSidebar</Code></td>
|
|
70
|
+
<td>No equivalent. Use <Link href="/components/navigation-system/layout/examples#panel">Panel</Link>, or a custom two-column layout inside <Link href="/components/navigation-system/layout/examples#main">Main</Link>.</td>
|
|
71
|
+
</tr>
|
|
72
|
+
</tbody>
|
|
73
|
+
</table>
|
|
74
|
+
|
|
75
|
+
### Hooks
|
|
76
|
+
|
|
77
|
+
<table>
|
|
78
|
+
<colgroup>
|
|
79
|
+
<col style={{width: '40%'}} />
|
|
80
|
+
<col style={{width: '60%'}} />
|
|
81
|
+
</colgroup>
|
|
82
|
+
<thead>
|
|
83
|
+
<tr>
|
|
84
|
+
<th>Old</th>
|
|
85
|
+
<th>New</th>
|
|
86
|
+
</tr>
|
|
87
|
+
</thead>
|
|
88
|
+
<tbody>
|
|
89
|
+
<tr>
|
|
90
|
+
<td><Code>useCustomSkipLink</Code></td>
|
|
91
|
+
<td><Code>useSkipLink</Code> — see <Link href="/components/navigation-system/layout/examples#custom-skip-links">custom skip links</Link></td>
|
|
92
|
+
</tr>
|
|
93
|
+
<tr>
|
|
94
|
+
<td><Code>useLeftSidebarFlyoutLock</Code></td>
|
|
95
|
+
<td>No equivalent. Use <Code>useExpandSideNav()</Code> to force the side nav open.</td>
|
|
96
|
+
</tr>
|
|
97
|
+
<tr>
|
|
98
|
+
<td><Code>usePageLayoutResize</Code></td>
|
|
99
|
+
<td>No equivalent. Use <Code>useExpandSideNav()</Code> to expand the side nav, or the <Code>onExpand</Code> and <Code>onCollapse</Code> callbacks on <Code><SideNav></Code> to track its state.</td>
|
|
100
|
+
</tr>
|
|
101
|
+
<tr>
|
|
102
|
+
<td><Code>useGlobalTheme</Code></td>
|
|
103
|
+
<td>No equivalent. Theme is applied automatically.</td>
|
|
104
|
+
</tr>
|
|
105
|
+
</tbody>
|
|
106
|
+
</table>
|
|
107
|
+
|
|
108
|
+
### Constants
|
|
109
|
+
|
|
110
|
+
The legacy CSS variables are unsafe and encourage rigidity in the layout system. They should be removed:
|
|
111
|
+
|
|
112
|
+
- <Code>LEFT_SIDEBAR_WIDTH</Code>
|
|
113
|
+
- <Code>RIGHT_SIDEBAR_WIDTH</Code>
|
|
114
|
+
- <Code>LEFT_PANEL_WIDTH</Code>
|
|
115
|
+
- <Code>RIGHT_PANEL_WIDTH</Code>
|
|
116
|
+
- <Code>BANNER_HEIGHT</Code>
|
|
117
|
+
- <Code>TOP_NAVIGATION_HEIGHT</Code>
|
|
118
|
+
|
|
119
|
+
These will be temporarily available from the <Code>@atlaskit/navigation-system/legacy/css-variables</Code> entrypoint.
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
## Atlassian navigation
|
|
123
|
+
|
|
124
|
+
Top nav is for global, cross-app actions only. Items such as the app switcher, search, create,
|
|
125
|
+
help, notifications, settings, and profile are consistent across every Atlassian product.
|
|
126
|
+
|
|
127
|
+
### Layout
|
|
128
|
+
|
|
129
|
+
`AtlassianNavigation` is replaced by [`TopNav`](/components/navigation-system/layout/code#topnav).
|
|
130
|
+
The old render props (`renderProductHome`, `renderAppSwitcher`, `renderCreate`, etc.) are replaced by three layout slots:
|
|
131
|
+
|
|
132
|
+
- [`TopNavStart`](/components/navigation-system/layout/code#topnavstart) — place the side nav toggle button, app logo, and app switcher here
|
|
133
|
+
- [`TopNavMiddle`](/components/navigation-system/layout/code#topnavmiddle) — place search and create here
|
|
134
|
+
- [`TopNavEnd`](/components/navigation-system/layout/code#topnavend) — place help, notifications, settings, profile, and sign in here
|
|
135
|
+
|
|
136
|
+
`HORIZONTAL_GLOBAL_NAV_HEIGHT` has no equivalent. Any usage should be refactored out, or hardcoded if necessary.
|
|
137
|
+
|
|
138
|
+
### Primary items
|
|
139
|
+
|
|
140
|
+
`PrimaryButton` and `PrimaryDropdownButton` have no equivalent. Primary nav links are app-specific
|
|
141
|
+
and belong in the [side nav](/components/navigation-system/layout/examples#side-nav). The product
|
|
142
|
+
home and app switcher, previously also in this area, now live in `TopNavStart`.
|
|
143
|
+
|
|
144
|
+
`useOverflowStatus` was used to manage overflow of primary items and is no longer applicable.
|
|
145
|
+
|
|
146
|
+
<table>
|
|
147
|
+
<colgroup>
|
|
148
|
+
<col style={{width: '40%'}} />
|
|
149
|
+
<col style={{width: '60%'}} />
|
|
150
|
+
</colgroup>
|
|
151
|
+
<thead>
|
|
152
|
+
<tr>
|
|
153
|
+
<th>Old</th>
|
|
154
|
+
<th>New</th>
|
|
155
|
+
</tr>
|
|
156
|
+
</thead>
|
|
157
|
+
<tbody>
|
|
158
|
+
<tr>
|
|
159
|
+
<td><Code>AppHome</Code>, <Code>CustomProductHome</Code>, <Code>ProductHome</Code></td>
|
|
160
|
+
<td><Link href="/components/navigation-system/top-nav-items/code#applogo">AppLogo</Link> or <Link href="/components/navigation-system/top-nav-items/code#customlogo">CustomLogo</Link> inside <Code><TopNavStart></Code></td>
|
|
161
|
+
</tr>
|
|
162
|
+
<tr>
|
|
163
|
+
<td><Code>AppSwitcher</Code>, <Code>AppSwitcherNav4</Code></td>
|
|
164
|
+
<td><Link href="/components/navigation-system/top-nav-items/code#appswitcher">AppSwitcher</Link> inside <Code><TopNavStart></Code></td>
|
|
165
|
+
</tr>
|
|
166
|
+
</tbody>
|
|
167
|
+
</table>
|
|
168
|
+
|
|
169
|
+
### Secondary items
|
|
170
|
+
|
|
171
|
+
<table>
|
|
172
|
+
<colgroup>
|
|
173
|
+
<col style={{width: '40%'}} />
|
|
174
|
+
<col style={{width: '60%'}} />
|
|
175
|
+
</colgroup>
|
|
176
|
+
<thead>
|
|
177
|
+
<tr>
|
|
178
|
+
<th>Old</th>
|
|
179
|
+
<th>New</th>
|
|
180
|
+
</tr>
|
|
181
|
+
</thead>
|
|
182
|
+
<tbody>
|
|
183
|
+
<tr>
|
|
184
|
+
<td><Code>Search</Code></td>
|
|
185
|
+
<td><Link href="/components/navigation-system/top-nav-items/code#search">Search</Link> inside <Code><TopNavMiddle></Code></td>
|
|
186
|
+
</tr>
|
|
187
|
+
<tr>
|
|
188
|
+
<td><Code>Create</Code></td>
|
|
189
|
+
<td><Link href="/components/navigation-system/top-nav-items/code#createbutton">CreateButton</Link> inside <Code><TopNavMiddle></Code></td>
|
|
190
|
+
</tr>
|
|
191
|
+
<tr>
|
|
192
|
+
<td><Code>Help</Code></td>
|
|
193
|
+
<td><Link href="/components/navigation-system/top-nav-items/code#help">Help</Link> inside <Code><TopNavEnd></Code></td>
|
|
194
|
+
</tr>
|
|
195
|
+
<tr>
|
|
196
|
+
<td><Code>Notifications</Code></td>
|
|
197
|
+
<td><Link href="/components/navigation-system/top-nav-items/code#notifications">Notifications</Link> inside <Code><TopNavEnd></Code></td>
|
|
198
|
+
</tr>
|
|
199
|
+
<tr>
|
|
200
|
+
<td><Code>Settings</Code></td>
|
|
201
|
+
<td><Link href="/components/navigation-system/top-nav-items/code#settings">Settings</Link> inside <Code><TopNavEnd></Code></td>
|
|
202
|
+
</tr>
|
|
203
|
+
<tr>
|
|
204
|
+
<td><Code>Profile</Code></td>
|
|
205
|
+
<td><Link href="/components/navigation-system/top-nav-items/code#profile">Profile</Link> inside <Code><TopNavEnd></Code></td>
|
|
206
|
+
</tr>
|
|
207
|
+
<tr>
|
|
208
|
+
<td><Code>IconButton</Code></td>
|
|
209
|
+
<td><Link href="/components/navigation-system/top-nav-items/code#enditem">EndItem</Link> inside <Code><TopNavEnd></Code></td>
|
|
210
|
+
</tr>
|
|
211
|
+
<tr>
|
|
212
|
+
<td><Code>SignIn</Code></td>
|
|
213
|
+
<td><Link href="/components/navigation-system/top-nav-items/code#login">LogIn</Link> inside <Code><TopNavEnd></Code></td>
|
|
214
|
+
</tr>
|
|
215
|
+
</tbody>
|
|
216
|
+
</table>
|
|
217
|
+
|
|
218
|
+
### Custom theming
|
|
219
|
+
|
|
220
|
+
Legacy custom theming is supported with a new API. See [custom theming](/components/navigation-system/layout/custom-theming) for details.
|
|
221
|
+
|
|
222
|
+
### Loading states
|
|
223
|
+
|
|
224
|
+
The skeleton loading components (`NavigationSkeleton`, `SkeletonCreateButton`, `SkeletonIconButton`, `SkeletonPrimaryButton`, `SkeletonSwitcherButton`) have no equivalent in the new navigation system.
|
|
225
|
+
|
|
226
|
+
|
|
227
|
+
## Side navigation
|
|
228
|
+
|
|
229
|
+
Side nav is for app-specific navigation — use it to navigate within an app, between sections,
|
|
230
|
+
projects, boards, spaces, and so on. The side nav is resizable, collapsible, and supports user
|
|
231
|
+
customisation of menu items.
|
|
232
|
+
|
|
233
|
+
Side nav items are in the separate [side nav items](https://atlaskit.atlassian.com/packages/navigation/side-nav-items) package.
|
|
234
|
+
|
|
235
|
+
### Layout
|
|
236
|
+
|
|
237
|
+
<table>
|
|
238
|
+
<colgroup>
|
|
239
|
+
<col style={{width: '40%'}} />
|
|
240
|
+
<col style={{width: '60%'}} />
|
|
241
|
+
</colgroup>
|
|
242
|
+
<thead>
|
|
243
|
+
<tr>
|
|
244
|
+
<th>Old</th>
|
|
245
|
+
<th>New</th>
|
|
246
|
+
</tr>
|
|
247
|
+
</thead>
|
|
248
|
+
<tbody>
|
|
249
|
+
<tr>
|
|
250
|
+
<td><Code>SideNavigation</Code></td>
|
|
251
|
+
<td><Link href="/components/navigation-system/layout/code#sidenav">SideNav</Link></td>
|
|
252
|
+
</tr>
|
|
253
|
+
<tr>
|
|
254
|
+
<td><Code>NavigationContent</Code></td>
|
|
255
|
+
<td><Link href="/components/navigation-system/layout/code#sidenavbody">SideNavBody</Link></td>
|
|
256
|
+
</tr>
|
|
257
|
+
<tr>
|
|
258
|
+
<td><Code>NavigationHeader</Code></td>
|
|
259
|
+
<td><Link href="/components/navigation-system/layout/code#sidenavheader">SideNavHeader</Link></td>
|
|
260
|
+
</tr>
|
|
261
|
+
<tr>
|
|
262
|
+
<td><Code>Header</Code></td>
|
|
263
|
+
<td>No equivalent. There is no opinionated presentation component for the header slot — build your own content inside <Link href="/components/navigation-system/layout/code#sidenavheader">SideNavHeader</Link>.</td>
|
|
264
|
+
</tr>
|
|
265
|
+
<tr>
|
|
266
|
+
<td><Code>NavigationFooter</Code></td>
|
|
267
|
+
<td><Link href="/components/navigation-system/layout/code#sidenavfooter">SideNavFooter</Link></td>
|
|
268
|
+
</tr>
|
|
269
|
+
<tr>
|
|
270
|
+
<td><Code>Footer</Code></td>
|
|
271
|
+
<td>No equivalent. There is no opinionated presentation component for the footer slot — build your own content inside <Link href="/components/navigation-system/layout/code#sidenavfooter">SideNavFooter</Link>.</td>
|
|
272
|
+
</tr>
|
|
273
|
+
</tbody>
|
|
274
|
+
</table>
|
|
275
|
+
|
|
276
|
+
### Sections and items
|
|
277
|
+
|
|
278
|
+
<table>
|
|
279
|
+
<colgroup>
|
|
280
|
+
<col style={{width: '40%'}} />
|
|
281
|
+
<col style={{width: '60%'}} />
|
|
282
|
+
</colgroup>
|
|
283
|
+
<thead>
|
|
284
|
+
<tr>
|
|
285
|
+
<th>Old</th>
|
|
286
|
+
<th>New</th>
|
|
287
|
+
</tr>
|
|
288
|
+
</thead>
|
|
289
|
+
<tbody>
|
|
290
|
+
<tr>
|
|
291
|
+
<td><Code>LinkItem</Code></td>
|
|
292
|
+
<td><Link href="https://atlaskit.atlassian.com/packages/navigation/side-nav-items#link-menu-item">LinkMenuItem</Link></td>
|
|
293
|
+
</tr>
|
|
294
|
+
<tr>
|
|
295
|
+
<td><Code>ButtonItem</Code></td>
|
|
296
|
+
<td><Link href="https://atlaskit.atlassian.com/packages/navigation/side-nav-items#button-menu-item">ButtonMenuItem</Link></td>
|
|
297
|
+
</tr>
|
|
298
|
+
<tr>
|
|
299
|
+
<td><Code>CustomItem</Code></td>
|
|
300
|
+
<td>No equivalent. Use <Code>ButtonMenuItem</Code> or <Code>LinkMenuItem</Code> with custom content.</td>
|
|
301
|
+
</tr>
|
|
302
|
+
<tr>
|
|
303
|
+
<td><Code>Section</Code></td>
|
|
304
|
+
<td><Link href="https://atlaskit.atlassian.com/packages/navigation/side-nav-items#menu-section-and-menu-section-heading">MenuSection</Link></td>
|
|
305
|
+
</tr>
|
|
306
|
+
<tr>
|
|
307
|
+
<td><Code>HeadingItem</Code></td>
|
|
308
|
+
<td><Link href="https://atlaskit.atlassian.com/packages/navigation/side-nav-items#menu-section-and-menu-section-heading">MenuSectionHeading</Link></td>
|
|
309
|
+
</tr>
|
|
310
|
+
<tr>
|
|
311
|
+
<td><Code>SkeletonItem</Code>, <Code>SkeletonHeadingItem</Code>, <Code>LoadingItems</Code></td>
|
|
312
|
+
<td>See <Link href="https://atlaskit.atlassian.com/packages/navigation/side-nav-items#loading-states">loading states</Link></td>
|
|
313
|
+
</tr>
|
|
314
|
+
</tbody>
|
|
315
|
+
</table>
|
|
316
|
+
|
|
317
|
+
### Nesting
|
|
318
|
+
|
|
319
|
+
The nested navigation pattern (`NestingItem`, `NestableNavigationContent`) has been replaced with
|
|
320
|
+
[expandable menu items](https://atlaskit.atlassian.com/packages/navigation/side-nav-items#expandable-menu-item).
|
|
321
|
+
`GoBackItem` and `useShouldNestedElementRender` have no equivalent.
|
|
322
|
+
|
|
323
|
+
---
|
|
324
|
+
|
|
325
|
+
## Related
|
|
326
|
+
|
|
327
|
+
- [Layout](/components/navigation-system/layout)
|
|
328
|
+
- [Top nav items](/components/navigation-system/top-nav-items)
|
|
329
|
+
- [Side nav items](https://atlaskit.atlassian.com/packages/navigation/side-nav-items)
|
|
@@ -104,6 +104,17 @@ The main difference between aside, panel and modal dialog is their behaviours:
|
|
|
104
104
|
decision or completing an action, before they can return to their primary task.
|
|
105
105
|
- Don’t use aside for new experiences. It is planned for deprecation.
|
|
106
106
|
|
|
107
|
+
## Accessibility
|
|
108
|
+
|
|
109
|
+
- Always place slots in this order as direct children of the root: banner, top nav, side nav, main,
|
|
110
|
+
aside, panel. This determines the keyboard tab order, screen reader reading order, and skip link
|
|
111
|
+
order.
|
|
112
|
+
- Provide a unique, meaningful `label` for side nav, aside, panel, and top nav end. The label is
|
|
113
|
+
exposed as the landmark's accessible name. Don't repeat the landmark's role in the label.
|
|
114
|
+
- Slots provide landmark roles automatically. Don't add or duplicate landmark roles inside them.
|
|
115
|
+
- Use custom skip links sparingly. Too many skip links makes the skip links menu noisy. Consider the
|
|
116
|
+
utility of each one before adding it.
|
|
117
|
+
|
|
107
118
|
## Best practices
|
|
108
119
|
|
|
109
120
|
### Design using grid in the main area
|
|
@@ -40,6 +40,17 @@ The current navigation has specific menu items that are similar across apps. Mak
|
|
|
40
40
|
navigation follows Atlassian patterns consistently. For all the guidelines, see
|
|
41
41
|
[navigation resources (Atlassians only)](https://hello.atlassian.net/wiki/spaces/navx/pages/5104144812).
|
|
42
42
|
|
|
43
|
+
## Accessibility
|
|
44
|
+
|
|
45
|
+
- Always provide a meaningful `label` for every top nav item. The label becomes the accessible name
|
|
46
|
+
and the visible tooltip.
|
|
47
|
+
- When a top nav item triggers a popup, menu, or dialog, pass the relevant `aria-controls`,
|
|
48
|
+
`aria-expanded`, and `aria-haspopup` props from that component to the top nav item.
|
|
49
|
+
- Use the `shortcut` prop to surface a keyboard shortcut in the tooltip when one exists. This makes
|
|
50
|
+
the shortcut discoverable for keyboard users.
|
|
51
|
+
- Use `isSelected` to indicate when a corresponding popup or panel is open. This exposes the state
|
|
52
|
+
to assistive technology.
|
|
53
|
+
|
|
43
54
|
## Best practices
|
|
44
55
|
|
|
45
56
|
### Use the top nav items provided
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.TOP_NAVIGATION_HEIGHT = exports.RIGHT_SIDEBAR_WIDTH = exports.RIGHT_PANEL_WIDTH = exports.LEFT_SIDEBAR_WIDTH = exports.LEFT_PANEL_WIDTH = exports.BANNER_HEIGHT = void 0;
|
|
7
|
+
/**
|
|
8
|
+
* CSS variables that mirror the legacy `@atlaskit/page-layout` CSS custom properties.
|
|
9
|
+
*
|
|
10
|
+
* These are provided for consumers that previously relied on the `@atlaskit/page-layout`
|
|
11
|
+
* CSS variables and need to reference them when using the navigation system.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
var LEFT_PANEL_WIDTH = exports.LEFT_PANEL_WIDTH = 'var(--leftPanelWidth, 0px)';
|
|
15
|
+
var RIGHT_PANEL_WIDTH = exports.RIGHT_PANEL_WIDTH = 'var(--rightPanelWidth, 0px)';
|
|
16
|
+
var LEFT_SIDEBAR_WIDTH = exports.LEFT_SIDEBAR_WIDTH = 'var(--leftSidebarWidth, 0px)';
|
|
17
|
+
var RIGHT_SIDEBAR_WIDTH = exports.RIGHT_SIDEBAR_WIDTH = 'var(--rightSidebarWidth, 0px)';
|
|
18
|
+
var TOP_NAVIGATION_HEIGHT = exports.TOP_NAVIGATION_HEIGHT = 'var(--topNavigationHeight, 0px)';
|
|
19
|
+
var BANNER_HEIGHT = exports.BANNER_HEIGHT = 'var(--bannerHeight, 0px)';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* CSS variables that mirror the legacy `@atlaskit/page-layout` CSS custom properties.
|
|
3
|
+
*
|
|
4
|
+
* These are provided for consumers that previously relied on the `@atlaskit/page-layout`
|
|
5
|
+
* CSS variables and need to reference them when using the navigation system.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
export const LEFT_PANEL_WIDTH = 'var(--leftPanelWidth, 0px)';
|
|
9
|
+
export const RIGHT_PANEL_WIDTH = 'var(--rightPanelWidth, 0px)';
|
|
10
|
+
export const LEFT_SIDEBAR_WIDTH = 'var(--leftSidebarWidth, 0px)';
|
|
11
|
+
export const RIGHT_SIDEBAR_WIDTH = 'var(--rightSidebarWidth, 0px)';
|
|
12
|
+
export const TOP_NAVIGATION_HEIGHT = 'var(--topNavigationHeight, 0px)';
|
|
13
|
+
export const BANNER_HEIGHT = 'var(--bannerHeight, 0px)';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* CSS variables that mirror the legacy `@atlaskit/page-layout` CSS custom properties.
|
|
3
|
+
*
|
|
4
|
+
* These are provided for consumers that previously relied on the `@atlaskit/page-layout`
|
|
5
|
+
* CSS variables and need to reference them when using the navigation system.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
export var LEFT_PANEL_WIDTH = 'var(--leftPanelWidth, 0px)';
|
|
9
|
+
export var RIGHT_PANEL_WIDTH = 'var(--rightPanelWidth, 0px)';
|
|
10
|
+
export var LEFT_SIDEBAR_WIDTH = 'var(--leftSidebarWidth, 0px)';
|
|
11
|
+
export var RIGHT_SIDEBAR_WIDTH = 'var(--rightSidebarWidth, 0px)';
|
|
12
|
+
export var TOP_NAVIGATION_HEIGHT = 'var(--topNavigationHeight, 0px)';
|
|
13
|
+
export var BANNER_HEIGHT = 'var(--bannerHeight, 0px)';
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* CSS variables that mirror the legacy `@atlaskit/page-layout` CSS custom properties.
|
|
3
|
+
*
|
|
4
|
+
* These are provided for consumers that previously relied on the `@atlaskit/page-layout`
|
|
5
|
+
* CSS variables and need to reference them when using the navigation system.
|
|
6
|
+
*/
|
|
7
|
+
export declare const LEFT_PANEL_WIDTH = "var(--leftPanelWidth, 0px)";
|
|
8
|
+
export declare const RIGHT_PANEL_WIDTH = "var(--rightPanelWidth, 0px)";
|
|
9
|
+
export declare const LEFT_SIDEBAR_WIDTH = "var(--leftSidebarWidth, 0px)";
|
|
10
|
+
export declare const RIGHT_SIDEBAR_WIDTH = "var(--rightSidebarWidth, 0px)";
|
|
11
|
+
export declare const TOP_NAVIGATION_HEIGHT = "var(--topNavigationHeight, 0px)";
|
|
12
|
+
export declare const BANNER_HEIGHT = "var(--bannerHeight, 0px)";
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* CSS variables that mirror the legacy `@atlaskit/page-layout` CSS custom properties.
|
|
3
|
+
*
|
|
4
|
+
* These are provided for consumers that previously relied on the `@atlaskit/page-layout`
|
|
5
|
+
* CSS variables and need to reference them when using the navigation system.
|
|
6
|
+
*/
|
|
7
|
+
export declare const LEFT_PANEL_WIDTH = "var(--leftPanelWidth, 0px)";
|
|
8
|
+
export declare const RIGHT_PANEL_WIDTH = "var(--rightPanelWidth, 0px)";
|
|
9
|
+
export declare const LEFT_SIDEBAR_WIDTH = "var(--leftSidebarWidth, 0px)";
|
|
10
|
+
export declare const RIGHT_SIDEBAR_WIDTH = "var(--rightSidebarWidth, 0px)";
|
|
11
|
+
export declare const TOP_NAVIGATION_HEIGHT = "var(--topNavigationHeight, 0px)";
|
|
12
|
+
export declare const BANNER_HEIGHT = "var(--bannerHeight, 0px)";
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@atlaskit/navigation-system/legacy/css-variables",
|
|
3
|
+
"main": "../../dist/cjs/entry-points/legacy/css-variables.js",
|
|
4
|
+
"module": "../../dist/esm/entry-points/legacy/css-variables.js",
|
|
5
|
+
"module:es2019": "../../dist/es2019/entry-points/legacy/css-variables.js",
|
|
6
|
+
"sideEffects": [
|
|
7
|
+
"*.compiled.css"
|
|
8
|
+
],
|
|
9
|
+
"types": "../../dist/types/entry-points/legacy/css-variables.d.ts",
|
|
10
|
+
"typesVersions": {
|
|
11
|
+
">=4.5 <5.9": {
|
|
12
|
+
"*": [
|
|
13
|
+
"../../dist/types-ts4.5/entry-points/legacy/css-variables.d.ts"
|
|
14
|
+
]
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/navigation-system",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.3.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",
|
|
@@ -76,17 +76,17 @@
|
|
|
76
76
|
"@atlaskit/button": "^23.11.0",
|
|
77
77
|
"@atlaskit/css": "^0.19.0",
|
|
78
78
|
"@atlaskit/ds-lib": "^7.0.0",
|
|
79
|
-
"@atlaskit/icon": "^34.
|
|
79
|
+
"@atlaskit/icon": "^34.5.0",
|
|
80
80
|
"@atlaskit/layering": "^3.7.0",
|
|
81
81
|
"@atlaskit/logo": "^20.1.0",
|
|
82
82
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
83
83
|
"@atlaskit/platform-feature-flags-react": "^0.4.0",
|
|
84
|
-
"@atlaskit/popup": "^4.
|
|
84
|
+
"@atlaskit/popup": "^4.19.0",
|
|
85
85
|
"@atlaskit/pragmatic-drag-and-drop": "^1.8.0",
|
|
86
86
|
"@atlaskit/primitives": "^19.0.0",
|
|
87
87
|
"@atlaskit/side-nav-items": "^1.13.0",
|
|
88
88
|
"@atlaskit/tokens": "^13.0.0",
|
|
89
|
-
"@atlaskit/tooltip": "^22.
|
|
89
|
+
"@atlaskit/tooltip": "^22.2.0",
|
|
90
90
|
"@atlaskit/visually-hidden": "^3.1.0",
|
|
91
91
|
"@babel/runtime": "^7.0.0",
|
|
92
92
|
"@compiled/react": "^0.20.0",
|
|
@@ -106,24 +106,28 @@
|
|
|
106
106
|
"@atlaskit/banner": "^14.1.0",
|
|
107
107
|
"@atlaskit/breadcrumbs": "^16.1.0",
|
|
108
108
|
"@atlaskit/dropdown-menu": "^16.8.0",
|
|
109
|
+
"@atlaskit/flag": "^17.11.0",
|
|
109
110
|
"@atlaskit/form": "^15.5.0",
|
|
110
111
|
"@atlaskit/heading": "^5.4.0",
|
|
112
|
+
"@atlaskit/inline-dialog": "^18.1.0",
|
|
111
113
|
"@atlaskit/link": "^3.4.0",
|
|
112
114
|
"@atlaskit/lozenge": "^13.8.0",
|
|
113
115
|
"@atlaskit/menu": "^8.5.0",
|
|
114
|
-
"@atlaskit/modal-dialog": "^
|
|
116
|
+
"@atlaskit/modal-dialog": "^15.0.0",
|
|
115
117
|
"@atlaskit/onboarding": "^14.6.0",
|
|
116
118
|
"@atlaskit/page-header": "^12.2.0",
|
|
117
119
|
"@atlaskit/page-layout": "^4.3.0",
|
|
118
120
|
"@atlaskit/popper": "^7.2.0",
|
|
119
121
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
|
|
120
|
-
"@atlaskit/select": "^21.
|
|
122
|
+
"@atlaskit/select": "^21.12.0",
|
|
121
123
|
"@atlaskit/skeleton": "^2.1.0",
|
|
124
|
+
"@atlaskit/spotlight": "^0.14.0",
|
|
122
125
|
"@atlaskit/textfield": "^8.3.0",
|
|
123
|
-
"@
|
|
126
|
+
"@atlaskit/top-layer": "^0.6.0",
|
|
127
|
+
"@atlassian/feature-flags-test-utils": "^1.1.0",
|
|
124
128
|
"@atlassian/gemini": "^1.44.0",
|
|
125
129
|
"@atlassian/react-compiler-gating": "workspace:^",
|
|
126
|
-
"@atlassian/search-dialog": "^10.
|
|
130
|
+
"@atlassian/search-dialog": "^10.3.0",
|
|
127
131
|
"@atlassian/ssr-tests": "workspace:^",
|
|
128
132
|
"@atlassian/test-utils": "^1.0.0",
|
|
129
133
|
"@atlassian/testing-library": "^0.5.0",
|
|
@@ -153,6 +157,10 @@
|
|
|
153
157
|
}
|
|
154
158
|
},
|
|
155
159
|
"platform-feature-flags": {
|
|
160
|
+
"platform-dst-top-layer": {
|
|
161
|
+
"type": "boolean",
|
|
162
|
+
"referenceOnly": true
|
|
163
|
+
},
|
|
156
164
|
"platform-component-visual-refresh": {
|
|
157
165
|
"type": "boolean",
|
|
158
166
|
"referenceOnly": true
|