@atlaskit/navigation-system 10.12.1 → 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 (8) hide show
  1. package/CHANGELOG.md +13 -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/es2019/ui/page-layout/panel.compiled.css +6 -2
  5. package/dist/es2019/ui/page-layout/panel.js +5 -3
  6. package/dist/esm/ui/page-layout/panel.compiled.css +6 -2
  7. package/dist/esm/ui/page-layout/panel.js +5 -3
  8. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
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
+
3
16
  ## 10.12.1
4
17
 
5
18
  ### Patch 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/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/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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/navigation-system",
3
- "version": "10.12.1",
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"