@atlaskit/navigation-system 10.1.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 (17) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/compass.yml +38 -0
  3. package/constellation/top-nav-items/examples.mdx +4 -1
  4. package/dist/cjs/ui/top-nav-items/themed/themed-anchor.compiled.css +2 -0
  5. package/dist/cjs/ui/top-nav-items/themed/themed-anchor.js +2 -1
  6. package/dist/cjs/ui/top-nav-items/themed/themed-pressable.compiled.css +2 -0
  7. package/dist/cjs/ui/top-nav-items/themed/themed-pressable.js +2 -1
  8. package/dist/es2019/ui/top-nav-items/themed/themed-anchor.compiled.css +2 -0
  9. package/dist/es2019/ui/top-nav-items/themed/themed-anchor.js +2 -1
  10. package/dist/es2019/ui/top-nav-items/themed/themed-pressable.compiled.css +2 -0
  11. package/dist/es2019/ui/top-nav-items/themed/themed-pressable.js +2 -1
  12. package/dist/esm/ui/top-nav-items/themed/themed-anchor.compiled.css +2 -0
  13. package/dist/esm/ui/top-nav-items/themed/themed-anchor.js +2 -1
  14. package/dist/esm/ui/top-nav-items/themed/themed-pressable.compiled.css +2 -0
  15. package/dist/esm/ui/top-nav-items/themed/themed-pressable.js +2 -1
  16. package/navigation-system.docs.tsx +49 -0
  17. package/package.json +14 -10
package/CHANGELOG.md CHANGED
@@ -1,5 +1,29 @@
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
+
13
+ ## 10.2.0
14
+
15
+ ### Minor Changes
16
+
17
+ - [`015a98b324278`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/015a98b324278) -
18
+ Adopt motion.button.hovered / motion.button.pressed tokens for hover/press background transitions
19
+ in custom button-like components (inline-edit read view, navigation-system top-nav pressable, and
20
+ page-layout resize control grab area), gated behind the platform-dst-motion-uplift-button feature
21
+ flag.
22
+
23
+ ### Patch Changes
24
+
25
+ - Updated dependencies
26
+
3
27
  ## 10.1.0
4
28
 
5
29
  ### Minor Changes
package/compass.yml ADDED
@@ -0,0 +1,38 @@
1
+ configVersion: 1
2
+ id: ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/a7e5789e-4083-40b3-92f3-3f9161ef5256
3
+ name: '@atlaskit/navigation-system'
4
+ ownerId: ari:cloud:identity::team/b2a81260-5a72-4737-9878-c7f8f005af70 # DST - Nav4 Stream
5
+ labels:
6
+ - platform-code
7
+ - platform-afm
8
+ typeId: OTHER
9
+ fields:
10
+ tier: 4
11
+ lifecycle: Active
12
+ isMonorepoProject: true
13
+ links:
14
+ - name: Root Repository
15
+ type: REPOSITORY
16
+ url: https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master
17
+ - name: Slack Channel
18
+ type: CHAT_CHANNEL
19
+ url: https://atlassian.enterprise.slack.com/archives/CFJ9DU39U # #help-design-system
20
+ - name: Navigation System
21
+ type: REPOSITORY
22
+ url: https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/design-system/navigation-system
23
+ customFields:
24
+ - name: Department
25
+ type: text
26
+ value: Eng - Design System Pyxis
27
+ - name: Technical Owner
28
+ type: user
29
+ value: ari:cloud:identity::user/557057:eb60bca1-2eec-4569-ac3c-619f26589354 # Alex Reardon
30
+ - name: Required Reviewers Opt In
31
+ type: boolean
32
+ value: true
33
+ - name: Reviewer Selection Mechanism
34
+ type: text
35
+ value: random(2)
36
+ - name: Required Reviewer Approvals
37
+ type: number
38
+ value: 1
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/cjs/ui/top-nav-items/themed/themed-pressable.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-pressable.js CHANGED
@@ -21,6 +21,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
21
21
  var styles = {
22
22
  root: "_zulp12x7 _11c8fhey _2rkofajl _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
23
23
  rootT26Shape: "_2rko1qi0",
24
+ interactiveMotion: "_v564o1g2 _1gglat8s",
24
25
  border: "_14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _aetrb3bt _18postnw",
25
26
  selected: "_11q71qds _syazw5ct _8l3m15jn _f8pjw5ct _1053w5ct _19lcjrv1 _30l3w5ct _j6xtnh62 _9h8hw5ct",
26
27
  disabled: "_11q71c9b _syaz1i3i _8l3m1j28 _f8pj1i3i _10531i3i _19lc1c9b _30l31i3i _j6xt1c9b _9h8h1i3i"
@@ -58,7 +59,7 @@ var ThemedPressable = exports.ThemedPressable = /*#__PURE__*/(0, _react.forwardR
58
59
  // @ts-expect-error
59
60
  // eslint-disable-next-line @compiled/no-suppress-xcss
60
61
  ,
61
- 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),
62
+ 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),
62
63
  isDisabled: isDisabled
63
64
  }));
64
65
  });
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/es2019/ui/top-nav-items/themed/themed-pressable.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-pressable.js CHANGED
@@ -10,6 +10,7 @@ import { getPrimitiveSpreadProps } from './get-primitives-spread-props';
10
10
  const styles = {
11
11
  root: "_zulp12x7 _11c8fhey _2rkofajl _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
12
12
  rootT26Shape: "_2rko1qi0",
13
+ interactiveMotion: "_v564o1g2 _1gglat8s",
13
14
  border: "_14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _aetrb3bt _18postnw",
14
15
  selected: "_11q71qds _syazw5ct _8l3m15jn _f8pjw5ct _1053w5ct _19lcjrv1 _30l3w5ct _j6xtnh62 _9h8hw5ct",
15
16
  disabled: "_11q71c9b _syaz1i3i _8l3m1j28 _f8pj1i3i _10531i3i _19lc1c9b _30l31i3i _j6xt1c9b _9h8h1i3i"
@@ -46,7 +47,7 @@ export const ThemedPressable = /*#__PURE__*/forwardRef(function ThemedPressable(
46
47
  // @ts-expect-error
47
48
  // eslint-disable-next-line @compiled/no-suppress-xcss
48
49
  ,
49
- 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),
50
+ 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),
50
51
  isDisabled: isDisabled
51
52
  }));
52
53
  });
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/dist/esm/ui/top-nav-items/themed/themed-pressable.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-pressable.js CHANGED
@@ -12,6 +12,7 @@ import { getPrimitiveSpreadProps } from './get-primitives-spread-props';
12
12
  var styles = {
13
13
  root: "_zulp12x7 _11c8fhey _2rkofajl _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
14
14
  rootT26Shape: "_2rko1qi0",
15
+ interactiveMotion: "_v564o1g2 _1gglat8s",
15
16
  border: "_14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _aetrb3bt _18postnw",
16
17
  selected: "_11q71qds _syazw5ct _8l3m15jn _f8pjw5ct _1053w5ct _19lcjrv1 _30l3w5ct _j6xtnh62 _9h8hw5ct",
17
18
  disabled: "_11q71c9b _syaz1i3i _8l3m1j28 _f8pj1i3i _10531i3i _19lc1c9b _30l31i3i _j6xt1c9b _9h8h1i3i"
@@ -49,7 +50,7 @@ export var ThemedPressable = /*#__PURE__*/forwardRef(function ThemedPressable(_r
49
50
  // @ts-expect-error
50
51
  // eslint-disable-next-line @compiled/no-suppress-xcss
51
52
  ,
52
- 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),
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, fg('platform-dst-motion-uplift-button') && styles.interactiveMotion),
53
54
  isDisabled: isDisabled
54
55
  }));
55
56
  });
package/navigation-system.docs.tsx ADDED
@@ -0,0 +1,49 @@
1
+ /**
2
+ * Structured MCP docs for `@atlaskit/navigation-system`.
3
+ */
4
+
5
+ import path from 'path';
6
+
7
+ import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
8
+
9
+ import packageJson from './package.json';
10
+
11
+ const packagePath = path.resolve(__dirname);
12
+
13
+ const documentation: StructuredContentSource = {
14
+ package: {
15
+ package: '@atlaskit/navigation-system',
16
+ packagePath,
17
+ packageJson,
18
+ overview:
19
+ 'The latest navigation system for Atlassian apps. It provides a flexible layout system for top and side navigation, including components for product logos, search, and global actions.',
20
+ },
21
+ components: [
22
+ {
23
+ name: 'TopNav',
24
+ description: 'The horizontal top navigation bar component.',
25
+ status: 'general-availability',
26
+ import: {
27
+ name: 'TopNav',
28
+ package: '@atlaskit/navigation-system/layout/top-nav',
29
+ type: 'named',
30
+ packagePath,
31
+ packageJson,
32
+ },
33
+ usageGuidelines: [
34
+ 'Render `TopNav` within the `Root` component to provide global navigation and actions.',
35
+ ],
36
+ keywords: ['navigation', 'top-nav', 'header'],
37
+ categories: ['navigation'],
38
+ examples: [
39
+ {
40
+ name: 'Top navigation',
41
+ description: 'Basic usage of the top navigation bar.',
42
+ source: path.resolve(packagePath, './examples/top-navigation.tsx'),
43
+ },
44
+ ],
45
+ },
46
+ ],
47
+ };
48
+
49
+ export default documentation;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/navigation-system",
3
- "version": "10.1.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,23 +53,23 @@
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
- "@atlaskit/button": "^24.2.0",
59
+ "@atlaskit/button": "^24.3.0",
60
60
  "@atlaskit/css": "^1.0.0",
61
61
  "@atlaskit/ds-lib": "^8.0.0",
62
62
  "@atlaskit/icon": "^36.1.0",
63
63
  "@atlaskit/layering": "^4.1.0",
64
- "@atlaskit/logo": "^21.2.0",
64
+ "@atlaskit/logo": "^21.3.0",
65
65
  "@atlaskit/platform-feature-flags": "^2.0.0",
66
66
  "@atlaskit/platform-feature-flags-react": "^1.1.0",
67
67
  "@atlaskit/popup": "^5.1.0",
68
68
  "@atlaskit/pragmatic-drag-and-drop": "^2.0.0",
69
- "@atlaskit/primitives": "^20.1.0",
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.1.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",
@@ -100,20 +100,20 @@
100
100
  "@atlaskit/modal-dialog": "^16.1.0",
101
101
  "@atlaskit/onboarding": "^15.1.0",
102
102
  "@atlaskit/page-header": "^13.1.0",
103
- "@atlaskit/page-layout": "^5.1.0",
103
+ "@atlaskit/page-layout": "^5.2.0",
104
104
  "@atlaskit/popper": "^8.2.0",
105
105
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
106
- "@atlaskit/select": "^22.2.0",
106
+ "@atlaskit/select": "^22.3.0",
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",
@@ -163,6 +163,10 @@
163
163
  },
164
164
  "platform_dst_nav4_skip_link_a11y_1": {
165
165
  "type": "boolean"
166
+ },
167
+ "platform-dst-motion-uplift-button": {
168
+ "type": "boolean",
169
+ "referenceOnly": true
166
170
  }
167
171
  },
168
172
  "homepage": "https://atlassian.design/components/navigation-system"