@atlaskit/navigation-system 10.2.0 → 10.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.
Files changed (9) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/constellation/top-nav-items/examples.mdx +4 -1
  3. package/dist/cjs/ui/top-nav-items/themed/themed-anchor.compiled.css +2 -0
  4. package/dist/cjs/ui/top-nav-items/themed/themed-anchor.js +2 -1
  5. package/dist/es2019/ui/top-nav-items/themed/themed-anchor.compiled.css +2 -0
  6. package/dist/es2019/ui/top-nav-items/themed/themed-anchor.js +2 -1
  7. package/dist/esm/ui/top-nav-items/themed/themed-anchor.compiled.css +2 -0
  8. package/dist/esm/ui/top-nav-items/themed/themed-anchor.js +2 -1
  9. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # @atlassian/navigation-system
2
2
 
3
+ ## 10.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`a3b0e6c4eeab7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a3b0e6c4eeab7) -
8
+ Apply button motion tokens (motion.button.hovered / motion.button.pressed) to top-nav
9
+ ThemedAnchor, gated behind platform-dst-motion-uplift-button, for parity with ThemedPressable.
10
+ Also enables the gate by default in the top nav button constellation example so the motion is
11
+ previewed in the docs.
12
+
3
13
  ## 10.2.0
4
14
 
5
15
  ### Minor Changes
package/constellation/top-nav-items/examples.mdx CHANGED
@@ -171,7 +171,10 @@ A button component that supports theming. The following variants are available:
171
171
  Use this component when you need to add buttons to the top nav. Be aware that adding custom buttons
172
172
  may negatively impact the consistency across apps.
173
173
 
174
- <Example Component={TopNavButtonExample} />
174
+ <Example
175
+ Component={TopNavButtonExample}
176
+ featureFlagDefaults={{ 'platform-dst-motion-uplift-button': true }}
177
+ />
175
178
 
176
179
  ## Responsive
177
180
 
package/dist/cjs/ui/top-nav-items/themed/themed-anchor.compiled.css CHANGED
@@ -9,6 +9,7 @@
9
9
  ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
10
10
  ._9v7aze3t:after{inset:var(--ds-space-0,0)}
11
11
  ._v5649dqc{transition:background .1s ease-out}
12
+ ._v564o1g2{transition:var(--ds-button-hovered,background-color .15s cubic-bezier(.4,1,.6,1))}
12
13
  ._zulp12x7{gap:var(--ds-space-075,6px)}
13
14
  ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
14
15
  ._18zrze3t{padding-inline:var(--ds-space-0,0)}
@@ -55,6 +56,7 @@
55
56
  ._30l3w5ct:hover{color:var(--ds-top-bar-button-selected-text)}
56
57
  ._9oik1r31:hover{text-decoration-color:currentColor}
57
58
  ._jf4cnqa1:hover{text-decoration-style:solid}
59
+ ._1gglat8s:active{transition:var(--ds-button-pressed,background-color .15s cubic-bezier(.4,1,.6,1))}
58
60
  ._j6xt1c9b:active{background:var(--ds-top-bar-button-disabled-background)}
59
61
  ._j6xt5sko:active{background:var(--ds-top-bar-button-primary-background-pressed)}
60
62
  ._j6xtnh62:active{background:var(--ds-top-bar-button-selected-background-pressed)}
package/dist/cjs/ui/top-nav-items/themed/themed-anchor.js CHANGED
@@ -20,6 +20,7 @@ var _excluded = ["appearance", "shape", "isSelected", "isDisabled"];
20
20
  var styles = {
21
21
  root: "_zulp12x7 _11c8fhey _2rkofajl _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
22
22
  rootT26Shape: "_2rko1qi0",
23
+ interactiveMotion: "_v564o1g2 _1gglat8s",
23
24
  border: "_14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _aetrb3bt _18postnw",
24
25
  selected: "_11q71qds _syazw5ct _8l3m15jn _f8pjw5ct _1053w5ct _19lcjrv1 _30l3w5ct _j6xtnh62 _9h8hw5ct",
25
26
  disabled: "_11q71c9b _syaz1i3i _8l3m1j28 _f8pj1i3i _10531i3i _19lc1c9b _30l31i3i _j6xt1c9b _9h8h1i3i"
@@ -60,7 +61,7 @@ function ThemedAnchorFn(_ref, ref) {
60
61
  // @ts-expect-error
61
62
  // eslint-disable-next-line @compiled/no-suppress-xcss
62
63
  ,
63
- xcss: (0, _react2.cx)(styles.root, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && styles.rootT26Shape, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled)
64
+ xcss: (0, _react2.cx)(styles.root, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && styles.rootT26Shape, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled, (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-button') && styles.interactiveMotion)
64
65
  }));
65
66
  }
66
67
 
package/dist/es2019/ui/top-nav-items/themed/themed-anchor.compiled.css CHANGED
@@ -9,6 +9,7 @@
9
9
  ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
10
10
  ._9v7aze3t:after{inset:var(--ds-space-0,0)}
11
11
  ._v5649dqc{transition:background .1s ease-out}
12
+ ._v564o1g2{transition:var(--ds-button-hovered,background-color .15s cubic-bezier(.4,1,.6,1))}
12
13
  ._zulp12x7{gap:var(--ds-space-075,6px)}
13
14
  ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
14
15
  ._18zrze3t{padding-inline:var(--ds-space-0,0)}
@@ -55,6 +56,7 @@
55
56
  ._30l3w5ct:hover{color:var(--ds-top-bar-button-selected-text)}
56
57
  ._9oik1r31:hover{text-decoration-color:currentColor}
57
58
  ._jf4cnqa1:hover{text-decoration-style:solid}
59
+ ._1gglat8s:active{transition:var(--ds-button-pressed,background-color .15s cubic-bezier(.4,1,.6,1))}
58
60
  ._j6xt1c9b:active{background:var(--ds-top-bar-button-disabled-background)}
59
61
  ._j6xt5sko:active{background:var(--ds-top-bar-button-primary-background-pressed)}
60
62
  ._j6xtnh62:active{background:var(--ds-top-bar-button-selected-background-pressed)}
package/dist/es2019/ui/top-nav-items/themed/themed-anchor.js CHANGED
@@ -11,6 +11,7 @@ import { getPrimitiveSpreadProps } from './get-primitives-spread-props';
11
11
  const styles = {
12
12
  root: "_zulp12x7 _11c8fhey _2rkofajl _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
13
13
  rootT26Shape: "_2rko1qi0",
14
+ interactiveMotion: "_v564o1g2 _1gglat8s",
14
15
  border: "_14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _aetrb3bt _18postnw",
15
16
  selected: "_11q71qds _syazw5ct _8l3m15jn _f8pjw5ct _1053w5ct _19lcjrv1 _30l3w5ct _j6xtnh62 _9h8hw5ct",
16
17
  disabled: "_11q71c9b _syaz1i3i _8l3m1j28 _f8pj1i3i _10531i3i _19lc1c9b _30l31i3i _j6xt1c9b _9h8h1i3i"
@@ -50,7 +51,7 @@ function ThemedAnchorFn({
50
51
  // @ts-expect-error
51
52
  // eslint-disable-next-line @compiled/no-suppress-xcss
52
53
  ,
53
- xcss: cx(styles.root, fg('platform-dst-shape-theme-default') && styles.rootT26Shape, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled)
54
+ xcss: cx(styles.root, fg('platform-dst-shape-theme-default') && styles.rootT26Shape, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled, fg('platform-dst-motion-uplift-button') && styles.interactiveMotion)
54
55
  }));
55
56
  }
56
57
 
package/dist/esm/ui/top-nav-items/themed/themed-anchor.compiled.css CHANGED
@@ -9,6 +9,7 @@
9
9
  ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
10
10
  ._9v7aze3t:after{inset:var(--ds-space-0,0)}
11
11
  ._v5649dqc{transition:background .1s ease-out}
12
+ ._v564o1g2{transition:var(--ds-button-hovered,background-color .15s cubic-bezier(.4,1,.6,1))}
12
13
  ._zulp12x7{gap:var(--ds-space-075,6px)}
13
14
  ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
14
15
  ._18zrze3t{padding-inline:var(--ds-space-0,0)}
@@ -55,6 +56,7 @@
55
56
  ._30l3w5ct:hover{color:var(--ds-top-bar-button-selected-text)}
56
57
  ._9oik1r31:hover{text-decoration-color:currentColor}
57
58
  ._jf4cnqa1:hover{text-decoration-style:solid}
59
+ ._1gglat8s:active{transition:var(--ds-button-pressed,background-color .15s cubic-bezier(.4,1,.6,1))}
58
60
  ._j6xt1c9b:active{background:var(--ds-top-bar-button-disabled-background)}
59
61
  ._j6xt5sko:active{background:var(--ds-top-bar-button-primary-background-pressed)}
60
62
  ._j6xtnh62:active{background:var(--ds-top-bar-button-selected-background-pressed)}
package/dist/esm/ui/top-nav-items/themed/themed-anchor.js CHANGED
@@ -13,6 +13,7 @@ import { getPrimitiveSpreadProps } from './get-primitives-spread-props';
13
13
  var styles = {
14
14
  root: "_zulp12x7 _11c8fhey _2rkofajl _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
15
15
  rootT26Shape: "_2rko1qi0",
16
+ interactiveMotion: "_v564o1g2 _1gglat8s",
16
17
  border: "_14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _aetrb3bt _18postnw",
17
18
  selected: "_11q71qds _syazw5ct _8l3m15jn _f8pjw5ct _1053w5ct _19lcjrv1 _30l3w5ct _j6xtnh62 _9h8hw5ct",
18
19
  disabled: "_11q71c9b _syaz1i3i _8l3m1j28 _f8pj1i3i _10531i3i _19lc1c9b _30l31i3i _j6xt1c9b _9h8h1i3i"
@@ -53,7 +54,7 @@ function ThemedAnchorFn(_ref, ref) {
53
54
  // @ts-expect-error
54
55
  // eslint-disable-next-line @compiled/no-suppress-xcss
55
56
  ,
56
- xcss: cx(styles.root, fg('platform-dst-shape-theme-default') && styles.rootT26Shape, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled)
57
+ xcss: cx(styles.root, fg('platform-dst-shape-theme-default') && styles.rootT26Shape, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled, fg('platform-dst-motion-uplift-button') && styles.interactiveMotion)
57
58
  }));
58
59
  }
59
60
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/navigation-system",
3
- "version": "10.2.0",
3
+ "version": "10.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",
@@ -53,7 +53,7 @@
53
53
  }
54
54
  },
55
55
  "dependencies": {
56
- "@atlaskit/analytics-next": "^12.1.0",
56
+ "@atlaskit/analytics-next": "^12.2.0",
57
57
  "@atlaskit/app-provider": "^5.1.0",
58
58
  "@atlaskit/avatar": "^26.1.0",
59
59
  "@atlaskit/button": "^24.3.0",
@@ -69,7 +69,7 @@
69
69
  "@atlaskit/primitives": "^20.3.0",
70
70
  "@atlaskit/react-compiler-gating": "^0.2.0",
71
71
  "@atlaskit/side-nav-items": "^2.2.0",
72
- "@atlaskit/tokens": "^15.3.0",
72
+ "@atlaskit/tokens": "^15.4.0",
73
73
  "@atlaskit/tooltip": "^23.1.0",
74
74
  "@atlaskit/visually-hidden": "^4.1.0",
75
75
  "@babel/runtime": "^7.0.0",
@@ -107,13 +107,13 @@
107
107
  "@atlaskit/skeleton": "^3.1.0",
108
108
  "@atlaskit/spotlight": "^2.1.0",
109
109
  "@atlaskit/textfield": "^9.1.0",
110
- "@atlaskit/top-layer": "^1.2.0",
110
+ "@atlaskit/top-layer": "^1.3.0",
111
111
  "@atlassian/feature-flags-test-utils": "^1.1.0",
112
112
  "@atlassian/gemini": "^1.47.0",
113
113
  "@atlassian/search-dialog": "^10.5.0",
114
114
  "@atlassian/ssr-tests": "workspace:^",
115
115
  "@atlassian/test-utils": "^1.0.0",
116
- "@atlassian/testing-library": "^0.7.0",
116
+ "@atlassian/testing-library": "^0.8.0",
117
117
  "@axe-core/playwright": "^4.11.1",
118
118
  "@testing-library/react": "^16.3.0",
119
119
  "@testing-library/user-event": "^14.4.3",