@atlaskit/navigation-system 5.25.0 → 5.26.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.
Files changed (8) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/ui/page-layout/panel-splitter/panel-splitter.compiled.css +3 -0
  3. package/dist/cjs/ui/page-layout/panel-splitter/panel-splitter.js +7 -4
  4. package/dist/es2019/ui/page-layout/panel-splitter/panel-splitter.compiled.css +3 -0
  5. package/dist/es2019/ui/page-layout/panel-splitter/panel-splitter.js +7 -4
  6. package/dist/esm/ui/page-layout/panel-splitter/panel-splitter.compiled.css +3 -0
  7. package/dist/esm/ui/page-layout/panel-splitter/panel-splitter.js +7 -4
  8. package/package.json +4 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlassian/navigation-system
2
2
 
3
+ ## 5.26.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`05a04a1bfd2f9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/05a04a1bfd2f9) -
8
+ Panel splitter tooltips will now always fade in when the
9
+ `platform_dst_nav4_side_nav_resize_tooltip_feedback` gate is enabled.
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 5.25.0
4
16
 
5
17
  ### Minor Changes
package/dist/cjs/ui/page-layout/panel-splitter/panel-splitter.compiled.css CHANGED
@@ -7,12 +7,15 @@
7
7
  ._1e02zeo2{inset-inline-start:-9px}
8
8
  ._1e0c1ule{display:block}
9
9
  ._1e0cglyw{display:none}
10
+ ._1lww188d{transition-delay:.3s}
10
11
  ._1lww5cps{transition-delay:0ms}
11
12
  ._1oec1yx9{transition-duration:.1s}
13
+ ._1oec6ebc{transition-duration:.15s}
12
14
  ._1pbykb7n{z-index:1}
13
15
  ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
14
16
  ._1qu2glyw{outline-style:none}
15
17
  ._4t3i1osq{height:100%}
18
+ ._6fl41ytf{transition-timing-function:ease-in-out}
16
19
  ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
17
20
  ._ahbq196n{margin-inline-start:var(--ds-space-negative-075,-6px)}
18
21
  ._bfhk1j28{background-color:transparent}
package/dist/cjs/ui/page-layout/panel-splitter/panel-splitter.js CHANGED
@@ -48,8 +48,10 @@ var containerStyles = {
48
48
  positionStart: "_1e02zeo2"
49
49
  };
50
50
  var grabAreaStyles = {
51
- root: "_1bsbl52n _4t3i1osq _kqswstnw _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _syaz1j28 _bfhk1j28 _k8m01ylx _1oec1yx9 _1lww5cps _d0aluf7j _1gavfnf5 _vp7g6x5g _30l36x5g _1dr21ylx _1s5z1ylx _1cg4fnf5 _le1bfnf5 _1gglglyw _9h8h12zz",
52
- fullHeightSidebar: "_d0al11mm"
51
+ root: "_1bsbl52n _4t3i1osq _kqswstnw _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _syaz1j28 _bfhk1j28 _k8m01ylx _d0aluf7j _vp7g6x5g _30l36x5g _1gglglyw _9h8h12zz",
52
+ fullHeightSidebar: "_d0al11mm",
53
+ oldTransition: "_1oec1yx9 _1lww5cps _1gavfnf5 _1dr21ylx _1s5z1ylx _1cg4fnf5 _le1bfnf5",
54
+ newTransition: "_1oec6ebc _1lww188d _6fl41ytf"
53
55
  };
54
56
  var lineStyles = {
55
57
  root: "_kqswstnw _1e0c1ule _1bsb1l7b _4t3i1osq _syaz1kw7 _bfhk1r31 _1e021v6z"
@@ -90,7 +92,8 @@ var MaybeTooltip = function MaybeTooltip(_ref2) {
90
92
  position: (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? 'mouse-y' : 'mouse',
91
93
  mousePosition: "right",
92
94
  isScreenReaderAnnouncementDisabled: true,
93
- component: (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? PanelSplitterTooltip : undefined
95
+ component: (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? PanelSplitterTooltip : undefined,
96
+ UNSAFE_shouldAlwaysFadeIn: (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback')
94
97
  }, children);
95
98
  }
96
99
  return children;
@@ -372,7 +375,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
372
375
  ref: splitterRef,
373
376
  "data-testid": testId,
374
377
  onDoubleClick: onDoubleClick,
375
- className: (0, _runtime.ax)([grabAreaStyles.root, isFhsEnabled && grabAreaStyles.fullHeightSidebar])
378
+ className: (0, _runtime.ax)([grabAreaStyles.root, isFhsEnabled && grabAreaStyles.fullHeightSidebar, (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? grabAreaStyles.newTransition : grabAreaStyles.oldTransition])
376
379
  }, /*#__PURE__*/React.createElement(_visuallyHidden.default, null, /*#__PURE__*/React.createElement("input", {
377
380
  type: "range",
378
381
  value: rangeInputValue,
package/dist/es2019/ui/page-layout/panel-splitter/panel-splitter.compiled.css CHANGED
@@ -7,12 +7,15 @@
7
7
  ._1e02zeo2{inset-inline-start:-9px}
8
8
  ._1e0c1ule{display:block}
9
9
  ._1e0cglyw{display:none}
10
+ ._1lww188d{transition-delay:.3s}
10
11
  ._1lww5cps{transition-delay:0ms}
11
12
  ._1oec1yx9{transition-duration:.1s}
13
+ ._1oec6ebc{transition-duration:.15s}
12
14
  ._1pbykb7n{z-index:1}
13
15
  ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
14
16
  ._1qu2glyw{outline-style:none}
15
17
  ._4t3i1osq{height:100%}
18
+ ._6fl41ytf{transition-timing-function:ease-in-out}
16
19
  ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
17
20
  ._ahbq196n{margin-inline-start:var(--ds-space-negative-075,-6px)}
18
21
  ._bfhk1j28{background-color:transparent}
package/dist/es2019/ui/page-layout/panel-splitter/panel-splitter.js CHANGED
@@ -32,8 +32,10 @@ const containerStyles = {
32
32
  positionStart: "_1e02zeo2"
33
33
  };
34
34
  const grabAreaStyles = {
35
- root: "_1bsbl52n _4t3i1osq _kqswstnw _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _syaz1j28 _bfhk1j28 _k8m01ylx _1oec1yx9 _1lww5cps _d0aluf7j _1gavfnf5 _vp7g6x5g _30l36x5g _1dr21ylx _1s5z1ylx _1cg4fnf5 _le1bfnf5 _1gglglyw _9h8h12zz",
36
- fullHeightSidebar: "_d0al11mm"
35
+ root: "_1bsbl52n _4t3i1osq _kqswstnw _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _syaz1j28 _bfhk1j28 _k8m01ylx _d0aluf7j _vp7g6x5g _30l36x5g _1gglglyw _9h8h12zz",
36
+ fullHeightSidebar: "_d0al11mm",
37
+ oldTransition: "_1oec1yx9 _1lww5cps _1gavfnf5 _1dr21ylx _1s5z1ylx _1cg4fnf5 _le1bfnf5",
38
+ newTransition: "_1oec6ebc _1lww188d _6fl41ytf"
37
39
  };
38
40
  const lineStyles = {
39
41
  root: "_kqswstnw _1e0c1ule _1bsb1l7b _4t3i1osq _syaz1kw7 _bfhk1r31 _1e021v6z"
@@ -79,7 +81,8 @@ const MaybeTooltip = ({
79
81
  position: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? 'mouse-y' : 'mouse',
80
82
  mousePosition: "right",
81
83
  isScreenReaderAnnouncementDisabled: true,
82
- component: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? PanelSplitterTooltip : undefined
84
+ component: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? PanelSplitterTooltip : undefined,
85
+ UNSAFE_shouldAlwaysFadeIn: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback')
83
86
  }, children);
84
87
  }
85
88
  return children;
@@ -350,7 +353,7 @@ const PortaledPanelSplitter = ({
350
353
  ref: splitterRef,
351
354
  "data-testid": testId,
352
355
  onDoubleClick: onDoubleClick,
353
- className: ax([grabAreaStyles.root, isFhsEnabled && grabAreaStyles.fullHeightSidebar])
356
+ className: ax([grabAreaStyles.root, isFhsEnabled && grabAreaStyles.fullHeightSidebar, fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? grabAreaStyles.newTransition : grabAreaStyles.oldTransition])
354
357
  }, /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("input", {
355
358
  type: "range",
356
359
  value: rangeInputValue,
package/dist/esm/ui/page-layout/panel-splitter/panel-splitter.compiled.css CHANGED
@@ -7,12 +7,15 @@
7
7
  ._1e02zeo2{inset-inline-start:-9px}
8
8
  ._1e0c1ule{display:block}
9
9
  ._1e0cglyw{display:none}
10
+ ._1lww188d{transition-delay:.3s}
10
11
  ._1lww5cps{transition-delay:0ms}
11
12
  ._1oec1yx9{transition-duration:.1s}
13
+ ._1oec6ebc{transition-duration:.15s}
12
14
  ._1pbykb7n{z-index:1}
13
15
  ._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
14
16
  ._1qu2glyw{outline-style:none}
15
17
  ._4t3i1osq{height:100%}
18
+ ._6fl41ytf{transition-timing-function:ease-in-out}
16
19
  ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
17
20
  ._ahbq196n{margin-inline-start:var(--ds-space-negative-075,-6px)}
18
21
  ._bfhk1j28{background-color:transparent}
package/dist/esm/ui/page-layout/panel-splitter/panel-splitter.js CHANGED
@@ -38,8 +38,10 @@ var containerStyles = {
38
38
  positionStart: "_1e02zeo2"
39
39
  };
40
40
  var grabAreaStyles = {
41
- root: "_1bsbl52n _4t3i1osq _kqswstnw _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _syaz1j28 _bfhk1j28 _k8m01ylx _1oec1yx9 _1lww5cps _d0aluf7j _1gavfnf5 _vp7g6x5g _30l36x5g _1dr21ylx _1s5z1ylx _1cg4fnf5 _le1bfnf5 _1gglglyw _9h8h12zz",
42
- fullHeightSidebar: "_d0al11mm"
41
+ root: "_1bsbl52n _4t3i1osq _kqswstnw _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _syaz1j28 _bfhk1j28 _k8m01ylx _d0aluf7j _vp7g6x5g _30l36x5g _1gglglyw _9h8h12zz",
42
+ fullHeightSidebar: "_d0al11mm",
43
+ oldTransition: "_1oec1yx9 _1lww5cps _1gavfnf5 _1dr21ylx _1s5z1ylx _1cg4fnf5 _le1bfnf5",
44
+ newTransition: "_1oec6ebc _1lww188d _6fl41ytf"
43
45
  };
44
46
  var lineStyles = {
45
47
  root: "_kqswstnw _1e0c1ule _1bsb1l7b _4t3i1osq _syaz1kw7 _bfhk1r31 _1e021v6z"
@@ -80,7 +82,8 @@ var MaybeTooltip = function MaybeTooltip(_ref2) {
80
82
  position: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? 'mouse-y' : 'mouse',
81
83
  mousePosition: "right",
82
84
  isScreenReaderAnnouncementDisabled: true,
83
- component: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? PanelSplitterTooltip : undefined
85
+ component: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? PanelSplitterTooltip : undefined,
86
+ UNSAFE_shouldAlwaysFadeIn: fg('platform_dst_nav4_side_nav_resize_tooltip_feedback')
84
87
  }, children);
85
88
  }
86
89
  return children;
@@ -362,7 +365,7 @@ var PortaledPanelSplitter = function PortaledPanelSplitter(_ref3) {
362
365
  ref: splitterRef,
363
366
  "data-testid": testId,
364
367
  onDoubleClick: onDoubleClick,
365
- className: ax([grabAreaStyles.root, isFhsEnabled && grabAreaStyles.fullHeightSidebar])
368
+ className: ax([grabAreaStyles.root, isFhsEnabled && grabAreaStyles.fullHeightSidebar, fg('platform_dst_nav4_side_nav_resize_tooltip_feedback') ? grabAreaStyles.newTransition : grabAreaStyles.oldTransition])
366
369
  }, /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("input", {
367
370
  type: "range",
368
371
  value: rangeInputValue,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/navigation-system",
3
- "version": "5.25.0",
3
+ "version": "5.26.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",
@@ -82,7 +82,7 @@
82
82
  "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
83
83
  "@atlaskit/primitives": "^17.0.0",
84
84
  "@atlaskit/tokens": "^9.1.0",
85
- "@atlaskit/tooltip": "^20.12.0",
85
+ "@atlaskit/tooltip": "^20.13.0",
86
86
  "@atlaskit/visually-hidden": "^3.0.0",
87
87
  "@babel/runtime": "^7.0.0",
88
88
  "@compiled/react": "^0.18.6",
@@ -98,7 +98,7 @@
98
98
  "@af/accessibility-testing": "workspace:^",
99
99
  "@af/integration-testing": "workspace:^",
100
100
  "@af/visual-regression": "workspace:^",
101
- "@atlaskit/app-provider": "^3.2.0",
101
+ "@atlaskit/app-provider": "^3.3.0",
102
102
  "@atlaskit/badge": "^18.3.0",
103
103
  "@atlaskit/banner": "^14.0.0",
104
104
  "@atlaskit/breadcrumbs": "^15.3.0",
@@ -122,8 +122,7 @@
122
122
  "@atlassian/test-utils": "^1.0.0",
123
123
  "@atlassian/testing-library": "^0.4.0",
124
124
  "@axe-core/playwright": "^4.8.0",
125
- "@testing-library/react": "^13.4.0",
126
- "@testing-library/react-hooks": "^8.0.1",
125
+ "@testing-library/react": "^16.3.0",
127
126
  "@testing-library/user-event": "^14.4.3",
128
127
  "raf-stub": "^2.0.1",
129
128
  "react-dom": "^18.2.0"