@atlaskit/navigation-system 5.9.3 → 5.10.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 +20 -0
- package/dist/cjs/ui/page-layout/top-nav/top-nav-start.js +1 -1
- package/dist/cjs/ui/top-nav-items/end-item.js +7 -1
- package/dist/cjs/ui/top-nav-items/help.js +4 -2
- package/dist/cjs/ui/top-nav-items/notifications.js +4 -2
- package/dist/es2019/ui/page-layout/top-nav/top-nav-start.js +1 -1
- package/dist/es2019/ui/top-nav-items/end-item.js +7 -1
- package/dist/es2019/ui/top-nav-items/help.js +4 -2
- package/dist/es2019/ui/top-nav-items/notifications.js +4 -2
- package/dist/esm/ui/page-layout/top-nav/top-nav-start.js +1 -1
- package/dist/esm/ui/top-nav-items/end-item.js +7 -1
- package/dist/esm/ui/top-nav-items/help.js +4 -2
- package/dist/esm/ui/top-nav-items/notifications.js +4 -2
- package/dist/types/ui/top-nav-items/end-item.d.ts +7 -0
- package/dist/types-ts4.5/ui/top-nav-items/end-item.d.ts +7 -0
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
# @atlassian/navigation-system
|
|
2
2
|
|
|
3
|
+
## 5.10.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`f089cdf7f6a28`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f089cdf7f6a28) -
|
|
8
|
+
The following top nav items now support displaying a shortcut in their tooltips, through the new
|
|
9
|
+
`shortcut` prop:
|
|
10
|
+
- EndItem
|
|
11
|
+
- Notifications
|
|
12
|
+
- Help
|
|
13
|
+
- Profile
|
|
14
|
+
- Settings
|
|
15
|
+
|
|
16
|
+
## 5.9.4
|
|
17
|
+
|
|
18
|
+
### Patch Changes
|
|
19
|
+
|
|
20
|
+
- [`71832bba1ded1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/71832bba1ded1) -
|
|
21
|
+
Fixes a vertical alignment bug in top nav start items when the full height sidebar is enabled.
|
|
22
|
+
|
|
3
23
|
## 5.9.3
|
|
4
24
|
|
|
5
25
|
### Patch Changes
|
|
@@ -70,7 +70,7 @@ var wrapperStyles = {
|
|
|
70
70
|
*/
|
|
71
71
|
var childrenWrapperAnimationOffset = "calc(2rem + ".concat(flexGap, ")");
|
|
72
72
|
var childrenWrapperStyles = {
|
|
73
|
-
root: "_zulp1kw7 _1e0c1kw7 _1ul9idpf _15yekb7n _65m41mrw",
|
|
73
|
+
root: "_zulp1kw7 _1e0c1kw7 _4cvr1h6o _1ul9idpf _15yekb7n _65m41mrw",
|
|
74
74
|
animationBaseStyles: "_10t81e03",
|
|
75
75
|
finalPosition: "_mjvcz12g _xrrpfnf5",
|
|
76
76
|
expandAnimationStartPosition: "_mjvcyrjp",
|
|
@@ -28,7 +28,8 @@ var EndItem = exports.EndItem = /*#__PURE__*/(0, _react.forwardRef)(function (_r
|
|
|
28
28
|
ariaExpanded = _ref['aria-expanded'],
|
|
29
29
|
ariaHasPopup = _ref['aria-haspopup'],
|
|
30
30
|
_ref$isListItem = _ref.isListItem,
|
|
31
|
-
isListItem = _ref$isListItem === void 0 ? true : _ref$isListItem
|
|
31
|
+
isListItem = _ref$isListItem === void 0 ? true : _ref$isListItem,
|
|
32
|
+
shortcut = _ref.shortcut;
|
|
32
33
|
var Wrapper = isListItem ? _listItem.ListItem : _react.Fragment;
|
|
33
34
|
return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_migration.IconButton, {
|
|
34
35
|
ref: forwardedRef,
|
|
@@ -44,5 +45,10 @@ var EndItem = exports.EndItem = /*#__PURE__*/(0, _react.forwardRef)(function (_r
|
|
|
44
45
|
"aria-controls": ariaControls,
|
|
45
46
|
"aria-expanded": ariaExpanded,
|
|
46
47
|
"aria-haspopup": ariaHasPopup
|
|
48
|
+
// Only creating object when shortcut is provided
|
|
49
|
+
,
|
|
50
|
+
tooltip: shortcut ? {
|
|
51
|
+
shortcut: shortcut
|
|
52
|
+
} : undefined
|
|
47
53
|
}));
|
|
48
54
|
});
|
|
@@ -30,7 +30,8 @@ var Help = exports.Help = /*#__PURE__*/(0, _react.forwardRef)(function Help(_ref
|
|
|
30
30
|
testId = _ref.testId,
|
|
31
31
|
interactionName = _ref.interactionName,
|
|
32
32
|
isListItem = _ref.isListItem,
|
|
33
|
-
badge = _ref.badge
|
|
33
|
+
badge = _ref.badge,
|
|
34
|
+
shortcut = _ref.shortcut;
|
|
34
35
|
var sharedProps = {
|
|
35
36
|
icon: _questionCircle.default,
|
|
36
37
|
label: label,
|
|
@@ -39,7 +40,8 @@ var Help = exports.Help = /*#__PURE__*/(0, _react.forwardRef)(function Help(_ref
|
|
|
39
40
|
isSelected: isSelected,
|
|
40
41
|
testId: testId,
|
|
41
42
|
interactionName: interactionName,
|
|
42
|
-
ref: ref
|
|
43
|
+
ref: ref,
|
|
44
|
+
shortcut: shortcut
|
|
43
45
|
};
|
|
44
46
|
if (!badge) {
|
|
45
47
|
return /*#__PURE__*/_react.default.createElement(_endItem.EndItem, (0, _extends2.default)({}, sharedProps, {
|
|
@@ -28,7 +28,8 @@ var Notifications = exports.Notifications = /*#__PURE__*/(0, _react.forwardRef)(
|
|
|
28
28
|
ariaExpanded = _ref['aria-expanded'],
|
|
29
29
|
ariaHasPopup = _ref['aria-haspopup'],
|
|
30
30
|
isListItem = _ref.isListItem,
|
|
31
|
-
badge = _ref.badge
|
|
31
|
+
badge = _ref.badge,
|
|
32
|
+
shortcut = _ref.shortcut;
|
|
32
33
|
return /*#__PURE__*/_react.default.createElement(_badgeContainer.BadgeContainer, {
|
|
33
34
|
id: NOTIFICATIONS_BADGE_ID,
|
|
34
35
|
badge: badge
|
|
@@ -50,6 +51,7 @@ var Notifications = exports.Notifications = /*#__PURE__*/(0, _react.forwardRef)(
|
|
|
50
51
|
// We explicitly set the EndItem to not be a list item,
|
|
51
52
|
// because the BadgeContainer already has a list item role (if `isListItem` is true)
|
|
52
53
|
,
|
|
53
|
-
isListItem: false
|
|
54
|
+
isListItem: false,
|
|
55
|
+
shortcut: shortcut
|
|
54
56
|
}));
|
|
55
57
|
});
|
|
@@ -61,7 +61,7 @@ const wrapperStyles = {
|
|
|
61
61
|
*/
|
|
62
62
|
const childrenWrapperAnimationOffset = `calc(2rem + ${flexGap})`;
|
|
63
63
|
const childrenWrapperStyles = {
|
|
64
|
-
root: "_zulp1kw7 _1e0c1kw7 _1ul9idpf _15yekb7n _65m41mrw",
|
|
64
|
+
root: "_zulp1kw7 _1e0c1kw7 _4cvr1h6o _1ul9idpf _15yekb7n _65m41mrw",
|
|
65
65
|
animationBaseStyles: "_10t81e03",
|
|
66
66
|
finalPosition: "_mjvcz12g _xrrpfnf5",
|
|
67
67
|
expandAnimationStartPosition: "_mjvcyrjp",
|
|
@@ -19,7 +19,8 @@ export const EndItem = /*#__PURE__*/forwardRef(({
|
|
|
19
19
|
'aria-controls': ariaControls,
|
|
20
20
|
'aria-expanded': ariaExpanded,
|
|
21
21
|
'aria-haspopup': ariaHasPopup,
|
|
22
|
-
isListItem = true
|
|
22
|
+
isListItem = true,
|
|
23
|
+
shortcut
|
|
23
24
|
}, forwardedRef) => {
|
|
24
25
|
const Wrapper = isListItem ? ListItem : Fragment;
|
|
25
26
|
return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(IconButton, {
|
|
@@ -36,5 +37,10 @@ export const EndItem = /*#__PURE__*/forwardRef(({
|
|
|
36
37
|
"aria-controls": ariaControls,
|
|
37
38
|
"aria-expanded": ariaExpanded,
|
|
38
39
|
"aria-haspopup": ariaHasPopup
|
|
40
|
+
// Only creating object when shortcut is provided
|
|
41
|
+
,
|
|
42
|
+
tooltip: shortcut ? {
|
|
43
|
+
shortcut
|
|
44
|
+
} : undefined
|
|
39
45
|
}));
|
|
40
46
|
});
|
|
@@ -20,7 +20,8 @@ export const Help = /*#__PURE__*/forwardRef(function Help({
|
|
|
20
20
|
testId,
|
|
21
21
|
interactionName,
|
|
22
22
|
isListItem,
|
|
23
|
-
badge
|
|
23
|
+
badge,
|
|
24
|
+
shortcut
|
|
24
25
|
}, ref) {
|
|
25
26
|
const sharedProps = {
|
|
26
27
|
icon: HelpIcon,
|
|
@@ -30,7 +31,8 @@ export const Help = /*#__PURE__*/forwardRef(function Help({
|
|
|
30
31
|
isSelected,
|
|
31
32
|
testId,
|
|
32
33
|
interactionName,
|
|
33
|
-
ref
|
|
34
|
+
ref,
|
|
35
|
+
shortcut
|
|
34
36
|
};
|
|
35
37
|
if (!badge) {
|
|
36
38
|
return /*#__PURE__*/React.createElement(EndItem, _extends({}, sharedProps, {
|
|
@@ -19,7 +19,8 @@ export const Notifications = /*#__PURE__*/forwardRef(function Notifications({
|
|
|
19
19
|
'aria-expanded': ariaExpanded,
|
|
20
20
|
'aria-haspopup': ariaHasPopup,
|
|
21
21
|
isListItem,
|
|
22
|
-
badge
|
|
22
|
+
badge,
|
|
23
|
+
shortcut
|
|
23
24
|
}, ref) {
|
|
24
25
|
return /*#__PURE__*/React.createElement(BadgeContainer, {
|
|
25
26
|
id: NOTIFICATIONS_BADGE_ID,
|
|
@@ -42,6 +43,7 @@ export const Notifications = /*#__PURE__*/forwardRef(function Notifications({
|
|
|
42
43
|
// We explicitly set the EndItem to not be a list item,
|
|
43
44
|
// because the BadgeContainer already has a list item role (if `isListItem` is true)
|
|
44
45
|
,
|
|
45
|
-
isListItem: false
|
|
46
|
+
isListItem: false,
|
|
47
|
+
shortcut: shortcut
|
|
46
48
|
}));
|
|
47
49
|
});
|
|
@@ -62,7 +62,7 @@ var wrapperStyles = {
|
|
|
62
62
|
*/
|
|
63
63
|
var childrenWrapperAnimationOffset = "calc(2rem + ".concat(flexGap, ")");
|
|
64
64
|
var childrenWrapperStyles = {
|
|
65
|
-
root: "_zulp1kw7 _1e0c1kw7 _1ul9idpf _15yekb7n _65m41mrw",
|
|
65
|
+
root: "_zulp1kw7 _1e0c1kw7 _4cvr1h6o _1ul9idpf _15yekb7n _65m41mrw",
|
|
66
66
|
animationBaseStyles: "_10t81e03",
|
|
67
67
|
finalPosition: "_mjvcz12g _xrrpfnf5",
|
|
68
68
|
expandAnimationStartPosition: "_mjvcyrjp",
|
|
@@ -20,7 +20,8 @@ export var EndItem = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
|
|
|
20
20
|
ariaExpanded = _ref['aria-expanded'],
|
|
21
21
|
ariaHasPopup = _ref['aria-haspopup'],
|
|
22
22
|
_ref$isListItem = _ref.isListItem,
|
|
23
|
-
isListItem = _ref$isListItem === void 0 ? true : _ref$isListItem
|
|
23
|
+
isListItem = _ref$isListItem === void 0 ? true : _ref$isListItem,
|
|
24
|
+
shortcut = _ref.shortcut;
|
|
24
25
|
var Wrapper = isListItem ? ListItem : Fragment;
|
|
25
26
|
return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(IconButton, {
|
|
26
27
|
ref: forwardedRef,
|
|
@@ -36,5 +37,10 @@ export var EndItem = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
|
|
|
36
37
|
"aria-controls": ariaControls,
|
|
37
38
|
"aria-expanded": ariaExpanded,
|
|
38
39
|
"aria-haspopup": ariaHasPopup
|
|
40
|
+
// Only creating object when shortcut is provided
|
|
41
|
+
,
|
|
42
|
+
tooltip: shortcut ? {
|
|
43
|
+
shortcut: shortcut
|
|
44
|
+
} : undefined
|
|
39
45
|
}));
|
|
40
46
|
});
|
|
@@ -20,7 +20,8 @@ export var Help = /*#__PURE__*/forwardRef(function Help(_ref, ref) {
|
|
|
20
20
|
testId = _ref.testId,
|
|
21
21
|
interactionName = _ref.interactionName,
|
|
22
22
|
isListItem = _ref.isListItem,
|
|
23
|
-
badge = _ref.badge
|
|
23
|
+
badge = _ref.badge,
|
|
24
|
+
shortcut = _ref.shortcut;
|
|
24
25
|
var sharedProps = {
|
|
25
26
|
icon: HelpIcon,
|
|
26
27
|
label: label,
|
|
@@ -29,7 +30,8 @@ export var Help = /*#__PURE__*/forwardRef(function Help(_ref, ref) {
|
|
|
29
30
|
isSelected: isSelected,
|
|
30
31
|
testId: testId,
|
|
31
32
|
interactionName: interactionName,
|
|
32
|
-
ref: ref
|
|
33
|
+
ref: ref,
|
|
34
|
+
shortcut: shortcut
|
|
33
35
|
};
|
|
34
36
|
if (!badge) {
|
|
35
37
|
return /*#__PURE__*/React.createElement(EndItem, _extends({}, sharedProps, {
|
|
@@ -19,7 +19,8 @@ export var Notifications = /*#__PURE__*/forwardRef(function Notifications(_ref,
|
|
|
19
19
|
ariaExpanded = _ref['aria-expanded'],
|
|
20
20
|
ariaHasPopup = _ref['aria-haspopup'],
|
|
21
21
|
isListItem = _ref.isListItem,
|
|
22
|
-
badge = _ref.badge
|
|
22
|
+
badge = _ref.badge,
|
|
23
|
+
shortcut = _ref.shortcut;
|
|
23
24
|
return /*#__PURE__*/React.createElement(BadgeContainer, {
|
|
24
25
|
id: NOTIFICATIONS_BADGE_ID,
|
|
25
26
|
badge: badge
|
|
@@ -41,6 +42,7 @@ export var Notifications = /*#__PURE__*/forwardRef(function Notifications(_ref,
|
|
|
41
42
|
// We explicitly set the EndItem to not be a list item,
|
|
42
43
|
// because the BadgeContainer already has a list item role (if `isListItem` is true)
|
|
43
44
|
,
|
|
44
|
-
isListItem: false
|
|
45
|
+
isListItem: false,
|
|
46
|
+
shortcut: shortcut
|
|
45
47
|
}));
|
|
46
48
|
});
|
|
@@ -2,6 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
3
3
|
import { type IconButtonProps } from '@atlaskit/button/new';
|
|
4
4
|
import type { TriggerProps } from '@atlaskit/popup/types';
|
|
5
|
+
import type { TooltipProps } from '@atlaskit/tooltip';
|
|
5
6
|
export interface EndItemProps extends Partial<Pick<TriggerProps, 'aria-controls' | 'aria-expanded' | 'aria-haspopup'>> {
|
|
6
7
|
/**
|
|
7
8
|
* Provide an accessible label, often used by screen readers.
|
|
@@ -62,6 +63,12 @@ export interface EndItemProps extends Partial<Pick<TriggerProps, 'aria-controls'
|
|
|
62
63
|
* ```
|
|
63
64
|
*/
|
|
64
65
|
isListItem?: boolean;
|
|
66
|
+
/**
|
|
67
|
+
* Display a keyboard shortcut in the tooltip.
|
|
68
|
+
*
|
|
69
|
+
* Keys will be displayed as individual keyboard key segments after the tooltip content.
|
|
70
|
+
*/
|
|
71
|
+
shortcut?: TooltipProps['shortcut'];
|
|
65
72
|
}
|
|
66
73
|
/**
|
|
67
74
|
* __EndItem__
|
|
@@ -2,6 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
3
3
|
import { type IconButtonProps } from '@atlaskit/button/new';
|
|
4
4
|
import type { TriggerProps } from '@atlaskit/popup/types';
|
|
5
|
+
import type { TooltipProps } from '@atlaskit/tooltip';
|
|
5
6
|
export interface EndItemProps extends Partial<Pick<TriggerProps, 'aria-controls' | 'aria-expanded' | 'aria-haspopup'>> {
|
|
6
7
|
/**
|
|
7
8
|
* Provide an accessible label, often used by screen readers.
|
|
@@ -62,6 +63,12 @@ export interface EndItemProps extends Partial<Pick<TriggerProps, 'aria-controls'
|
|
|
62
63
|
* ```
|
|
63
64
|
*/
|
|
64
65
|
isListItem?: boolean;
|
|
66
|
+
/**
|
|
67
|
+
* Display a keyboard shortcut in the tooltip.
|
|
68
|
+
*
|
|
69
|
+
* Keys will be displayed as individual keyboard key segments after the tooltip content.
|
|
70
|
+
*/
|
|
71
|
+
shortcut?: TooltipProps['shortcut'];
|
|
65
72
|
}
|
|
66
73
|
/**
|
|
67
74
|
* __EndItem__
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/navigation-system",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.10.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",
|
|
@@ -79,8 +79,8 @@
|
|
|
79
79
|
"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
|
|
80
80
|
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
|
|
81
81
|
"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
|
|
82
|
-
"@atlaskit/primitives": "^16.
|
|
83
|
-
"@atlaskit/tokens": "^8.
|
|
82
|
+
"@atlaskit/primitives": "^16.4.0",
|
|
83
|
+
"@atlaskit/tokens": "^8.4.0",
|
|
84
84
|
"@atlaskit/tooltip": "^20.10.0",
|
|
85
85
|
"@atlaskit/visually-hidden": "^3.0.0",
|
|
86
86
|
"@babel/runtime": "^7.0.0",
|
|
@@ -116,7 +116,7 @@
|
|
|
116
116
|
"@atlaskit/skeleton": "^2.1.0",
|
|
117
117
|
"@atlaskit/textfield": "^8.1.0",
|
|
118
118
|
"@atlassian/feature-flags-test-utils": "^1.0.0",
|
|
119
|
-
"@atlassian/gemini": "^1.
|
|
119
|
+
"@atlassian/gemini": "^1.22.0",
|
|
120
120
|
"@atlassian/search-dialog": "^9.9.0",
|
|
121
121
|
"@atlassian/ssr-tests": "workspace:^",
|
|
122
122
|
"@atlassian/test-utils": "^1.0.0",
|