@atlaskit/navigation-system 10.12.0 → 10.13.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 (14) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/cjs/ui/page-layout/panel.compiled.css +6 -2
  3. package/dist/cjs/ui/page-layout/panel.js +5 -3
  4. package/dist/cjs/ui/page-layout/root.compiled.css +2 -2
  5. package/dist/cjs/ui/page-layout/root.js +1 -1
  6. package/dist/es2019/ui/page-layout/panel.compiled.css +6 -2
  7. package/dist/es2019/ui/page-layout/panel.js +5 -3
  8. package/dist/es2019/ui/page-layout/root.compiled.css +2 -2
  9. package/dist/es2019/ui/page-layout/root.js +1 -1
  10. package/dist/esm/ui/page-layout/panel.compiled.css +6 -2
  11. package/dist/esm/ui/page-layout/panel.js +5 -3
  12. package/dist/esm/ui/page-layout/root.compiled.css +2 -2
  13. package/dist/esm/ui/page-layout/root.js +1 -1
  14. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # @atlassian/navigation-system
2
2
 
3
+ ## 10.13.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`0195cea826a48`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0195cea826a48) -
8
+ Use directional motion tokens for RTL-aware panel slide animations. Adds new
9
+ `motion.panel.content.enter` and `motion.panel.content.exit` motion tokens, applied to the Panel
10
+ to soften the content when opening and closing.
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+
16
+ ## 10.12.1
17
+
18
+ ### Patch Changes
19
+
20
+ - [`8cd40349d33ee`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8cd40349d33ee) -
21
+ Fix Aside slot appearing below other content when the `platform-dst-motion-uplift-panel` feature
22
+ gate is enabled. The root grid now uses `overflow: clip` instead of `overflow: hidden` to avoid
23
+ creating a scroll container that breaks `position: sticky` on descendant elements.
24
+
3
25
  ## 10.12.0
4
26
 
5
27
  ### Minor Changes
package/dist/cjs/ui/page-layout/panel.compiled.css CHANGED
@@ -1,6 +1,10 @@
1
1
  ._nd5l1b6c{grid-area:main/aside/aside/aside}
2
- ._y44v1s3l{animation:var(--ds-panel-enter,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}
3
- ._y44vqhwn{animation:var(--ds-panel-exit,.2s cubic-bezier(.6,0,.8,.6) SlideOut100PercentRight)}
2
+ ._y44v11az{animation:var(--ds-panel-content-enter,.15s cubic-bezier(.4,1,.6,1) FadeIn0to100 .1s)}
3
+ ._y44v14vv{animation:var(--ds-panel-exit-right,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentRight)}
4
+ ._y44v1nn1{animation:var(--ds-panel-enter-right,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}
5
+ ._y44v6gs0{animation:var(--ds-panel-content-exit,50ms cubic-bezier(.4,1,.6,1) FadeOut100to0)}
6
+ [dir=rtl] ._158obamb{animation:var(--ds-panel-enter-left,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentLeft)}
7
+ [dir=rtl] ._158oeydr{animation:var(--ds-panel-exit-left,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentLeft)}
4
8
  ._191wglyw{border-inline-start:none}._10fph9n0{justify-self:end}
5
9
  ._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
6
10
  ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
package/dist/cjs/ui/page-layout/panel.js CHANGED
@@ -44,8 +44,10 @@ var styles = {
44
44
  border: "_191wglyw _16qs130s _1w6eia51 _scbpglyw",
45
45
  scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
46
46
  hidden: "_1e0cglyw",
47
- entering: "_y44v1s3l",
48
- exiting: "_y44vqhwn"
47
+ entering: "_y44v1nn1 _158obamb",
48
+ exiting: "_y44v14vv _158oeydr",
49
+ contentEntering: "_y44v11az",
50
+ contentExiting: "_y44v6gs0"
49
51
  };
50
52
 
51
53
  /**
@@ -225,6 +227,6 @@ function Panel(_ref) {
225
227
  resizingCssVar: panelSplitterResizingVar,
226
228
  position: "start"
227
229
  }, /*#__PURE__*/React.createElement("div", {
228
- className: (0, _runtime.ax)([styles.scrollContainer])
230
+ className: (0, _runtime.ax)([styles.scrollContainer, isMotionUpliftEnabled && state === 'entering' && styles.contentEntering, isMotionUpliftEnabled && state === 'exiting' && styles.contentExiting])
229
231
  }, children)));
230
232
  }
package/dist/cjs/ui/page-layout/root.compiled.css CHANGED
@@ -1,8 +1,8 @@
1
- ._18m915vq{overflow-y:hidden}
1
+ ._18m9zryt{overflow-y:clip}
2
2
  ._1ciragmp >:not([data-layout-slot]){display:none!important}
3
3
  ._1e0c11p5{display:grid}
4
4
  ._1lmcq9em{grid-template-areas:"banner" "top-bar" "main" "aside"}
5
- ._1reo15vq{overflow-x:hidden}
5
+ ._1reozryt{overflow-x:clip}
6
6
  ._1tke1kxc{min-height:100vh}
7
7
  ._1tvnagmp >:not([data-layout-slot]):not(dialog):not([popover]){display:none!important}
8
8
  ._2z0516ab{grid-template-rows:auto auto 1fr auto}
package/dist/cjs/ui/page-layout/root.js CHANGED
@@ -26,7 +26,7 @@ var styles = {
26
26
  root: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco",
27
27
  safetyRail: "_1ciragmp",
28
28
  safetyRailWithTopLayer: "_1tvnagmp",
29
- panelUplift: "_1reo15vq _18m915vq"
29
+ panelUplift: "_1reozryt _18m9zryt"
30
30
  };
31
31
 
32
32
  /**
package/dist/es2019/ui/page-layout/panel.compiled.css CHANGED
@@ -1,6 +1,10 @@
1
1
  ._nd5l1b6c{grid-area:main/aside/aside/aside}
2
- ._y44v1s3l{animation:var(--ds-panel-enter,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}
3
- ._y44vqhwn{animation:var(--ds-panel-exit,.2s cubic-bezier(.6,0,.8,.6) SlideOut100PercentRight)}
2
+ ._y44v11az{animation:var(--ds-panel-content-enter,.15s cubic-bezier(.4,1,.6,1) FadeIn0to100 .1s)}
3
+ ._y44v14vv{animation:var(--ds-panel-exit-right,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentRight)}
4
+ ._y44v1nn1{animation:var(--ds-panel-enter-right,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}
5
+ ._y44v6gs0{animation:var(--ds-panel-content-exit,50ms cubic-bezier(.4,1,.6,1) FadeOut100to0)}
6
+ [dir=rtl] ._158obamb{animation:var(--ds-panel-enter-left,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentLeft)}
7
+ [dir=rtl] ._158oeydr{animation:var(--ds-panel-exit-left,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentLeft)}
4
8
  ._191wglyw{border-inline-start:none}._10fph9n0{justify-self:end}
5
9
  ._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
6
10
  ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
package/dist/es2019/ui/page-layout/panel.js CHANGED
@@ -33,8 +33,10 @@ const styles = {
33
33
  border: "_191wglyw _16qs130s _1w6eia51 _scbpglyw",
34
34
  scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
35
35
  hidden: "_1e0cglyw",
36
- entering: "_y44v1s3l",
37
- exiting: "_y44vqhwn"
36
+ entering: "_y44v1nn1 _158obamb",
37
+ exiting: "_y44v14vv _158oeydr",
38
+ contentEntering: "_y44v11az",
39
+ contentExiting: "_y44v6gs0"
38
40
  };
39
41
 
40
42
  /**
@@ -211,6 +213,6 @@ export function Panel({
211
213
  resizingCssVar: panelSplitterResizingVar,
212
214
  position: "start"
213
215
  }, /*#__PURE__*/React.createElement("div", {
214
- className: ax([styles.scrollContainer])
216
+ className: ax([styles.scrollContainer, isMotionUpliftEnabled && state === 'entering' && styles.contentEntering, isMotionUpliftEnabled && state === 'exiting' && styles.contentExiting])
215
217
  }, children)));
216
218
  }
package/dist/es2019/ui/page-layout/root.compiled.css CHANGED
@@ -1,8 +1,8 @@
1
- ._18m915vq{overflow-y:hidden}
1
+ ._18m9zryt{overflow-y:clip}
2
2
  ._1ciragmp >:not([data-layout-slot]){display:none!important}
3
3
  ._1e0c11p5{display:grid}
4
4
  ._1lmcq9em{grid-template-areas:"banner" "top-bar" "main" "aside"}
5
- ._1reo15vq{overflow-x:hidden}
5
+ ._1reozryt{overflow-x:clip}
6
6
  ._1tke1kxc{min-height:100vh}
7
7
  ._1tvnagmp >:not([data-layout-slot]):not(dialog):not([popover]){display:none!important}
8
8
  ._2z0516ab{grid-template-rows:auto auto 1fr auto}
package/dist/es2019/ui/page-layout/root.js CHANGED
@@ -18,7 +18,7 @@ const styles = {
18
18
  root: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco",
19
19
  safetyRail: "_1ciragmp",
20
20
  safetyRailWithTopLayer: "_1tvnagmp",
21
- panelUplift: "_1reo15vq _18m915vq"
21
+ panelUplift: "_1reozryt _18m9zryt"
22
22
  };
23
23
 
24
24
  /**
package/dist/esm/ui/page-layout/panel.compiled.css CHANGED
@@ -1,6 +1,10 @@
1
1
  ._nd5l1b6c{grid-area:main/aside/aside/aside}
2
- ._y44v1s3l{animation:var(--ds-panel-enter,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}
3
- ._y44vqhwn{animation:var(--ds-panel-exit,.2s cubic-bezier(.6,0,.8,.6) SlideOut100PercentRight)}
2
+ ._y44v11az{animation:var(--ds-panel-content-enter,.15s cubic-bezier(.4,1,.6,1) FadeIn0to100 .1s)}
3
+ ._y44v14vv{animation:var(--ds-panel-exit-right,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentRight)}
4
+ ._y44v1nn1{animation:var(--ds-panel-enter-right,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}
5
+ ._y44v6gs0{animation:var(--ds-panel-content-exit,50ms cubic-bezier(.4,1,.6,1) FadeOut100to0)}
6
+ [dir=rtl] ._158obamb{animation:var(--ds-panel-enter-left,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentLeft)}
7
+ [dir=rtl] ._158oeydr{animation:var(--ds-panel-exit-left,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentLeft)}
4
8
  ._191wglyw{border-inline-start:none}._10fph9n0{justify-self:end}
5
9
  ._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
6
10
  ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
package/dist/esm/ui/page-layout/panel.js CHANGED
@@ -35,8 +35,10 @@ var styles = {
35
35
  border: "_191wglyw _16qs130s _1w6eia51 _scbpglyw",
36
36
  scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
37
37
  hidden: "_1e0cglyw",
38
- entering: "_y44v1s3l",
39
- exiting: "_y44vqhwn"
38
+ entering: "_y44v1nn1 _158obamb",
39
+ exiting: "_y44v14vv _158oeydr",
40
+ contentEntering: "_y44v11az",
41
+ contentExiting: "_y44v6gs0"
40
42
  };
41
43
 
42
44
  /**
@@ -216,6 +218,6 @@ export function Panel(_ref) {
216
218
  resizingCssVar: panelSplitterResizingVar,
217
219
  position: "start"
218
220
  }, /*#__PURE__*/React.createElement("div", {
219
- className: ax([styles.scrollContainer])
221
+ className: ax([styles.scrollContainer, isMotionUpliftEnabled && state === 'entering' && styles.contentEntering, isMotionUpliftEnabled && state === 'exiting' && styles.contentExiting])
220
222
  }, children)));
221
223
  }
package/dist/esm/ui/page-layout/root.compiled.css CHANGED
@@ -1,8 +1,8 @@
1
- ._18m915vq{overflow-y:hidden}
1
+ ._18m9zryt{overflow-y:clip}
2
2
  ._1ciragmp >:not([data-layout-slot]){display:none!important}
3
3
  ._1e0c11p5{display:grid}
4
4
  ._1lmcq9em{grid-template-areas:"banner" "top-bar" "main" "aside"}
5
- ._1reo15vq{overflow-x:hidden}
5
+ ._1reozryt{overflow-x:clip}
6
6
  ._1tke1kxc{min-height:100vh}
7
7
  ._1tvnagmp >:not([data-layout-slot]):not(dialog):not([popover]){display:none!important}
8
8
  ._2z0516ab{grid-template-rows:auto auto 1fr auto}
package/dist/esm/ui/page-layout/root.js CHANGED
@@ -18,7 +18,7 @@ var styles = {
18
18
  root: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco",
19
19
  safetyRail: "_1ciragmp",
20
20
  safetyRailWithTopLayer: "_1tvnagmp",
21
- panelUplift: "_1reo15vq _18m915vq"
21
+ panelUplift: "_1reozryt _18m9zryt"
22
22
  };
23
23
 
24
24
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/navigation-system",
3
- "version": "10.12.0",
3
+ "version": "10.13.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",
@@ -70,11 +70,11 @@
70
70
  "@atlaskit/primitives": "^22.2.0",
71
71
  "@atlaskit/react-compiler-gating": "^0.2.0",
72
72
  "@atlaskit/side-nav-items": "^2.3.0",
73
- "@atlaskit/tokens": "^16.6.0",
73
+ "@atlaskit/tokens": "^16.7.0",
74
74
  "@atlaskit/tooltip": "^24.0.0",
75
75
  "@atlaskit/visually-hidden": "^4.2.0",
76
76
  "@babel/runtime": "^7.0.0",
77
- "@compiled/react": "^1.0.0",
77
+ "@compiled/react": "^1.0.2",
78
78
  "bind-event-listener": "^3.0.0",
79
79
  "raf-schd": "^4.0.3",
80
80
  "tiny-invariant": "^1.2.0"