@atlaskit/navigation-system 9.2.1 → 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 +7 -0
- package/constellation/index/examples.mdx +4 -0
- package/constellation/index/migration-guide.mdx +329 -0
- package/constellation/index/props.mdx +4 -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 +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
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
|
+
|
|
3
10
|
## 9.2.1
|
|
4
11
|
|
|
5
12
|
### Patch 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)
|
|
@@ -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",
|
|
@@ -119,15 +119,15 @@
|
|
|
119
119
|
"@atlaskit/page-layout": "^4.3.0",
|
|
120
120
|
"@atlaskit/popper": "^7.2.0",
|
|
121
121
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
|
|
122
|
-
"@atlaskit/select": "^21.
|
|
122
|
+
"@atlaskit/select": "^21.12.0",
|
|
123
123
|
"@atlaskit/skeleton": "^2.1.0",
|
|
124
124
|
"@atlaskit/spotlight": "^0.14.0",
|
|
125
125
|
"@atlaskit/textfield": "^8.3.0",
|
|
126
126
|
"@atlaskit/top-layer": "^0.6.0",
|
|
127
|
-
"@atlassian/feature-flags-test-utils": "^1.
|
|
127
|
+
"@atlassian/feature-flags-test-utils": "^1.1.0",
|
|
128
128
|
"@atlassian/gemini": "^1.44.0",
|
|
129
129
|
"@atlassian/react-compiler-gating": "workspace:^",
|
|
130
|
-
"@atlassian/search-dialog": "^10.
|
|
130
|
+
"@atlassian/search-dialog": "^10.3.0",
|
|
131
131
|
"@atlassian/ssr-tests": "workspace:^",
|
|
132
132
|
"@atlassian/test-utils": "^1.0.0",
|
|
133
133
|
"@atlassian/testing-library": "^0.5.0",
|