@atlaskit/navigation-system 5.36.0 → 5.38.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 (13) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/ui/page-layout/top-nav/top-nav-start.compiled.css +1 -1
  3. package/dist/cjs/ui/page-layout/top-nav/top-nav-start.js +3 -2
  4. package/dist/cjs/ui/page-layout/top-nav/top-nav.js +3 -2
  5. package/dist/es2019/ui/page-layout/top-nav/top-nav-start.compiled.css +1 -1
  6. package/dist/es2019/ui/page-layout/top-nav/top-nav-start.js +3 -2
  7. package/dist/es2019/ui/page-layout/top-nav/top-nav.js +3 -1
  8. package/dist/esm/ui/page-layout/top-nav/top-nav-start.compiled.css +1 -1
  9. package/dist/esm/ui/page-layout/top-nav/top-nav-start.js +3 -2
  10. package/dist/esm/ui/page-layout/top-nav/top-nav.js +3 -2
  11. package/dist/types/ui/page-layout/top-nav/top-nav.d.ts +1 -1
  12. package/dist/types-ts4.5/ui/page-layout/top-nav/top-nav.d.ts +1 -1
  13. package/package.json +4 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlassian/navigation-system
2
2
 
3
+ ## 5.38.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`0739fc0341b20`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0739fc0341b20) -
8
+ Increases the default height of the top navigation to `56px` when the
9
+ `platform_dst_nav4_top_nav_increase_height` gate is enabled.
10
+
11
+ ## 5.37.0
12
+
13
+ ### Minor Changes
14
+
15
+ - [`accbbfe68dc49`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/accbbfe68dc49) -
16
+ Decreases the padding to the right of the toggle button when the full height sidebar is enabled,
17
+ so that it aligns with the other `elemAfter` items in the side navigation. This change is behind
18
+ the `platform_dst_nav4_fhs_feedback_1` feature gate.
19
+
3
20
  ## 5.36.0
4
21
 
5
22
  ### Minor Changes
package/dist/cjs/ui/page-layout/top-nav/top-nav-start.compiled.css CHANGED
@@ -13,6 +13,6 @@
13
13
  ._vchhusvi{box-sizing:border-box}
14
14
  [dir=rtl] ._65m41mrw{--animation-direction:-1}
15
15
  @media (prefers-reduced-motion:no-preference){._10t81e03{transition-property:transform}._10t81rjc{transition-property:transform,opacity}._1xq51ytf{transition-timing-function:ease-in-out}._1xq55ucs{transition-timing-function:ease}._mjvc1efy{transform:translateX(calc(100%*var(--animation-direction)))}._bgpzidpf{opacity:0}._mjvc1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._mjvco0k7{transform:translateX(calc((-2rem + var(--ds-space-050, 4px)*-1)*var(--animation-direction)))}._mjvcyrjp{transform:translateX(calc((2rem + var(--ds-space-050, 4px))*var(--animation-direction)))}._mjvcz12g{transform:translateX(0)}._xrrpfnf5{transition-duration:.2s}._bgpzkb7n{opacity:1}}
16
- @media (min-width:64rem){._13wnh2mm{position:relative}._1l3vb3bt:after{content:""}._juxdstnw:after{position:absolute}._1vinidpf:after{inset-block-start:0}._1719idpf:after{inset-block-end:0}._e6znidpf:after{inset-inline-end:0}._1kyhe4h9:after{border-inline-end-width:var(--ds-border-width,1px)}._4cwynqa1:after{border-inline-end-style:solid}._435s1l7x:after{border-inline-end-color:var(--ds-border,#0b120e24)}._m7c3idpf:after{opacity:0}._15rin7od{min-width:unset}._glte1osq{width:100%}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}}
16
+ @media (min-width:64rem){._13wnh2mm{position:relative}._1l3vb3bt:after{content:""}._juxdstnw:after{position:absolute}._1vinidpf:after{inset-block-start:0}._1719idpf:after{inset-block-end:0}._e6znidpf:after{inset-inline-end:0}._1kyhe4h9:after{border-inline-end-width:var(--ds-border-width,1px)}._4cwynqa1:after{border-inline-end-style:solid}._435s1l7x:after{border-inline-end-color:var(--ds-border,#0b120e24)}._m7c3idpf:after{opacity:0}._15rin7od{min-width:unset}._glte1osq{width:100%}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}._exxmutpp{padding-inline-end:var(--ds-space-150,9pt)}._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}}
17
17
  @media (prefers-reduced-motion:no-preference) and (min-width:64rem){._n8qabrmi:after{transition-property:opacity}._wc72fnf5:after{transition-duration:.2s}._j3mr1v42:after{transition-timing-function:ease-in}}
18
18
  @supports (scroll-timeline-axis:block){@keyframes khj1qz3{0%{box-shadow:inset 0 -1px 0 0 transparent}0.1%{box-shadow:inset 0 -1px 0 0 var(--ds-border,#0b120e24)}to{box-shadow:inset 0 -1px 0 0 var(--ds-border,#0b120e24)}}html:not(:has([data-private-side-nav-header])) ._5gdsgc9s{animation-timeline:--sNcst}html:not(:has([data-private-side-nav-header])) ._53fr1ybg{animation-name:khj1qz3}html:not(:has([data-private-side-nav-header])) ._bt1c1hrf{animation-fill-mode:both}}
package/dist/cjs/ui/page-layout/top-nav/top-nav-start.js CHANGED
@@ -63,7 +63,8 @@ var wrapperStyles = {
63
63
  fullHeightSidebarWithLayeringFixes: "_13wnh2mm _1l3vb3bt _juxdstnw _1vinidpf _1719idpf _e6znidpf _1kyhe4h9 _4cwynqa1 _435s1l7x _m7c3idpf",
64
64
  fullHeightSidebarExpandedWithLayeringFixes: "_4ap3vuon _m7c3kb7n",
65
65
  fullHeightSidebarExpandedWithLayeringFixesScrollTimeline: "_5gdsgc9s _53fr1ybg _bt1c1hrf",
66
- fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42"
66
+ fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42",
67
+ fullHeightSidebarExpandedWithFeedback: "_exxmutpp"
67
68
  };
68
69
 
69
70
  /**
@@ -149,7 +150,7 @@ var TopNavStartInnerFHS = /*#__PURE__*/(0, _react.forwardRef)(function TopNavSta
149
150
  }
150
151
  }, [sideNavState]);
151
152
  return /*#__PURE__*/_react.default.createElement("div", {
152
- className: (0, _runtime.ax)([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarWithLayeringFixes, !isFirstRenderRef.current && isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarBorderTransition, isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarExpandedWithLayeringFixes, isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedWithLayeringFixesScrollTimeline])
153
+ className: (0, _runtime.ax)([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedWithFeedback, (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarWithLayeringFixes, !isFirstRenderRef.current && isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarBorderTransition, isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarExpandedWithLayeringFixes, isExpandedOnDesktop && (0, _platformFeatureFlags.fg)('platform-dst-side-nav-layering-fixes') && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedWithLayeringFixesScrollTimeline])
153
154
  }, /*#__PURE__*/_react.default.createElement("div", {
154
155
  ref: ref,
155
156
  "data-testid": testId,
package/dist/cjs/ui/page-layout/top-nav/top-nav.js CHANGED
@@ -55,8 +55,7 @@ var backgroundStyles = {
55
55
  function TopNav(_ref) {
56
56
  var children = _ref.children,
57
57
  xcss = _ref.xcss,
58
- _ref$height = _ref.height,
59
- height = _ref$height === void 0 ? 48 : _ref$height,
58
+ heightProp = _ref.height,
60
59
  _ref$skipLinkLabel = _ref.skipLinkLabel,
61
60
  skipLinkLabel = _ref$skipLinkLabel === void 0 ? 'Top Bar' : _ref$skipLinkLabel,
62
61
  testId = _ref.testId,
@@ -68,6 +67,8 @@ function TopNav(_ref) {
68
67
  providedId: providedId
69
68
  });
70
69
  (0, _skipLinksContext.useSkipLink)(id, skipLinkLabel);
70
+ var hasIncreasedDefaultHeight = isFhsEnabled && (0, _platformFeatureFlags.fg)('platform_dst_nav4_top_nav_increase_height');
71
+ var height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
71
72
  var customTheme = (0, _useCustomTheme.useCustomTheme)(UNSAFE_theme);
72
73
 
73
74
  /**
package/dist/es2019/ui/page-layout/top-nav/top-nav-start.compiled.css CHANGED
@@ -13,6 +13,6 @@
13
13
  ._vchhusvi{box-sizing:border-box}
14
14
  [dir=rtl] ._65m41mrw{--animation-direction:-1}
15
15
  @media (prefers-reduced-motion:no-preference){._10t81e03{transition-property:transform}._10t81rjc{transition-property:transform,opacity}._1xq51ytf{transition-timing-function:ease-in-out}._1xq55ucs{transition-timing-function:ease}._mjvc1efy{transform:translateX(calc(100%*var(--animation-direction)))}._bgpzidpf{opacity:0}._mjvc1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._mjvco0k7{transform:translateX(calc((-2rem + var(--ds-space-050, 4px)*-1)*var(--animation-direction)))}._mjvcyrjp{transform:translateX(calc((2rem + var(--ds-space-050, 4px))*var(--animation-direction)))}._mjvcz12g{transform:translateX(0)}._xrrpfnf5{transition-duration:.2s}._bgpzkb7n{opacity:1}}
16
- @media (min-width:64rem){._13wnh2mm{position:relative}._1l3vb3bt:after{content:""}._juxdstnw:after{position:absolute}._1vinidpf:after{inset-block-start:0}._1719idpf:after{inset-block-end:0}._e6znidpf:after{inset-inline-end:0}._1kyhe4h9:after{border-inline-end-width:var(--ds-border-width,1px)}._4cwynqa1:after{border-inline-end-style:solid}._435s1l7x:after{border-inline-end-color:var(--ds-border,#0b120e24)}._m7c3idpf:after{opacity:0}._15rin7od{min-width:unset}._glte1osq{width:100%}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}}
16
+ @media (min-width:64rem){._13wnh2mm{position:relative}._1l3vb3bt:after{content:""}._juxdstnw:after{position:absolute}._1vinidpf:after{inset-block-start:0}._1719idpf:after{inset-block-end:0}._e6znidpf:after{inset-inline-end:0}._1kyhe4h9:after{border-inline-end-width:var(--ds-border-width,1px)}._4cwynqa1:after{border-inline-end-style:solid}._435s1l7x:after{border-inline-end-color:var(--ds-border,#0b120e24)}._m7c3idpf:after{opacity:0}._15rin7od{min-width:unset}._glte1osq{width:100%}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}._exxmutpp{padding-inline-end:var(--ds-space-150,9pt)}._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}}
17
17
  @media (prefers-reduced-motion:no-preference) and (min-width:64rem){._n8qabrmi:after{transition-property:opacity}._wc72fnf5:after{transition-duration:.2s}._j3mr1v42:after{transition-timing-function:ease-in}}
18
18
  @supports (scroll-timeline-axis:block){@keyframes k1rswljm{0%{box-shadow:inset 0 -1px 0 0 transparent}0.1%{box-shadow:inset 0 -1px 0 0 var(--ds-border,#0b120e24)}to{box-shadow:inset 0 -1px 0 0 var(--ds-border,#0b120e24)}}html:not(:has([data-private-side-nav-header])) ._5gdsgc9s{animation-timeline:--sNcst}html:not(:has([data-private-side-nav-header])) ._53frsjnm{animation-name:k1rswljm}html:not(:has([data-private-side-nav-header])) ._bt1c1hrf{animation-fill-mode:both}}
package/dist/es2019/ui/page-layout/top-nav/top-nav-start.js CHANGED
@@ -54,7 +54,8 @@ const wrapperStyles = {
54
54
  fullHeightSidebarWithLayeringFixes: "_13wnh2mm _1l3vb3bt _juxdstnw _1vinidpf _1719idpf _e6znidpf _1kyhe4h9 _4cwynqa1 _435s1l7x _m7c3idpf",
55
55
  fullHeightSidebarExpandedWithLayeringFixes: "_4ap3vuon _m7c3kb7n",
56
56
  fullHeightSidebarExpandedWithLayeringFixesScrollTimeline: "_5gdsgc9s _53frsjnm _bt1c1hrf",
57
- fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42"
57
+ fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42",
58
+ fullHeightSidebarExpandedWithFeedback: "_exxmutpp"
58
59
  };
59
60
 
60
61
  /**
@@ -143,7 +144,7 @@ const TopNavStartInnerFHS = /*#__PURE__*/forwardRef(function TopNavStartInnerFHS
143
144
  }
144
145
  }, [sideNavState]);
145
146
  return /*#__PURE__*/React.createElement("div", {
146
- className: ax([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, fg('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarWithLayeringFixes, !isFirstRenderRef.current && isExpandedOnDesktop && fg('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarBorderTransition, isExpandedOnDesktop && fg('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarExpandedWithLayeringFixes, isExpandedOnDesktop && fg('platform-dst-side-nav-layering-fixes') && !fg('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedWithLayeringFixesScrollTimeline])
147
+ className: ax([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, isExpandedOnDesktop && fg('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedWithFeedback, fg('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarWithLayeringFixes, !isFirstRenderRef.current && isExpandedOnDesktop && fg('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarBorderTransition, isExpandedOnDesktop && fg('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarExpandedWithLayeringFixes, isExpandedOnDesktop && fg('platform-dst-side-nav-layering-fixes') && !fg('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedWithLayeringFixesScrollTimeline])
147
148
  }, /*#__PURE__*/React.createElement("div", {
148
149
  ref: ref,
149
150
  "data-testid": testId,
package/dist/es2019/ui/page-layout/top-nav/top-nav.js CHANGED
@@ -44,7 +44,7 @@ const backgroundStyles = {
44
44
  export function TopNav({
45
45
  children,
46
46
  xcss,
47
- height = 48,
47
+ height: heightProp,
48
48
  skipLinkLabel = 'Top Bar',
49
49
  testId,
50
50
  id: providedId,
@@ -56,6 +56,8 @@ export function TopNav({
56
56
  providedId
57
57
  });
58
58
  useSkipLink(id, skipLinkLabel);
59
+ const hasIncreasedDefaultHeight = isFhsEnabled && fg('platform_dst_nav4_top_nav_increase_height');
60
+ const height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
59
61
  const customTheme = useCustomTheme(UNSAFE_theme);
60
62
 
61
63
  /**
package/dist/esm/ui/page-layout/top-nav/top-nav-start.compiled.css CHANGED
@@ -13,6 +13,6 @@
13
13
  ._vchhusvi{box-sizing:border-box}
14
14
  [dir=rtl] ._65m41mrw{--animation-direction:-1}
15
15
  @media (prefers-reduced-motion:no-preference){._10t81e03{transition-property:transform}._10t81rjc{transition-property:transform,opacity}._1xq51ytf{transition-timing-function:ease-in-out}._1xq55ucs{transition-timing-function:ease}._mjvc1efy{transform:translateX(calc(100%*var(--animation-direction)))}._bgpzidpf{opacity:0}._mjvc1p9u{transform:translateX(calc(-100%*var(--animation-direction)))}._mjvco0k7{transform:translateX(calc((-2rem + var(--ds-space-050, 4px)*-1)*var(--animation-direction)))}._mjvcyrjp{transform:translateX(calc((2rem + var(--ds-space-050, 4px))*var(--animation-direction)))}._mjvcz12g{transform:translateX(0)}._xrrpfnf5{transition-duration:.2s}._bgpzkb7n{opacity:1}}
16
- @media (min-width:64rem){._13wnh2mm{position:relative}._1l3vb3bt:after{content:""}._juxdstnw:after{position:absolute}._1vinidpf:after{inset-block-start:0}._1719idpf:after{inset-block-end:0}._e6znidpf:after{inset-inline-end:0}._1kyhe4h9:after{border-inline-end-width:var(--ds-border-width,1px)}._4cwynqa1:after{border-inline-end-style:solid}._435s1l7x:after{border-inline-end-color:var(--ds-border,#0b120e24)}._m7c3idpf:after{opacity:0}._15rin7od{min-width:unset}._glte1osq{width:100%}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}}
16
+ @media (min-width:64rem){._13wnh2mm{position:relative}._1l3vb3bt:after{content:""}._juxdstnw:after{position:absolute}._1vinidpf:after{inset-block-start:0}._1719idpf:after{inset-block-end:0}._e6znidpf:after{inset-inline-end:0}._1kyhe4h9:after{border-inline-end-width:var(--ds-border-width,1px)}._4cwynqa1:after{border-inline-end-style:solid}._435s1l7x:after{border-inline-end-color:var(--ds-border,#0b120e24)}._m7c3idpf:after{opacity:0}._15rin7od{min-width:unset}._glte1osq{width:100%}._4ap3vuon{background-color:var(--ds-surface,#fff)}._m7c3kb7n:after{opacity:1}._exxmutpp{padding-inline-end:var(--ds-space-150,9pt)}._glte1ris{width:max-content}._15rip2n4{min-width:330px}._1gs5usvi{box-sizing:border-box}._glte93mn{width:var(--n_sNvlw,100%)}._exxmpxbi{padding-inline-end:var(--ds-space-200,1pc)}}
17
17
  @media (prefers-reduced-motion:no-preference) and (min-width:64rem){._n8qabrmi:after{transition-property:opacity}._wc72fnf5:after{transition-duration:.2s}._j3mr1v42:after{transition-timing-function:ease-in}}
18
18
  @supports (scroll-timeline-axis:block){@keyframes khj1qz3{0%{box-shadow:inset 0 -1px 0 0 transparent}0.1%{box-shadow:inset 0 -1px 0 0 var(--ds-border,#0b120e24)}to{box-shadow:inset 0 -1px 0 0 var(--ds-border,#0b120e24)}}html:not(:has([data-private-side-nav-header])) ._5gdsgc9s{animation-timeline:--sNcst}html:not(:has([data-private-side-nav-header])) ._53fr1ybg{animation-name:khj1qz3}html:not(:has([data-private-side-nav-header])) ._bt1c1hrf{animation-fill-mode:both}}
package/dist/esm/ui/page-layout/top-nav/top-nav-start.js CHANGED
@@ -55,7 +55,8 @@ var wrapperStyles = {
55
55
  fullHeightSidebarWithLayeringFixes: "_13wnh2mm _1l3vb3bt _juxdstnw _1vinidpf _1719idpf _e6znidpf _1kyhe4h9 _4cwynqa1 _435s1l7x _m7c3idpf",
56
56
  fullHeightSidebarExpandedWithLayeringFixes: "_4ap3vuon _m7c3kb7n",
57
57
  fullHeightSidebarExpandedWithLayeringFixesScrollTimeline: "_5gdsgc9s _53fr1ybg _bt1c1hrf",
58
- fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42"
58
+ fullHeightSidebarBorderTransition: "_n8qabrmi _wc72fnf5 _j3mr1v42",
59
+ fullHeightSidebarExpandedWithFeedback: "_exxmutpp"
59
60
  };
60
61
 
61
62
  /**
@@ -141,7 +142,7 @@ var TopNavStartInnerFHS = /*#__PURE__*/forwardRef(function TopNavStartInnerFHS(_
141
142
  }
142
143
  }, [sideNavState]);
143
144
  return /*#__PURE__*/React.createElement("div", {
144
- className: ax([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, fg('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarWithLayeringFixes, !isFirstRenderRef.current && isExpandedOnDesktop && fg('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarBorderTransition, isExpandedOnDesktop && fg('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarExpandedWithLayeringFixes, isExpandedOnDesktop && fg('platform-dst-side-nav-layering-fixes') && !fg('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedWithLayeringFixesScrollTimeline])
145
+ className: ax([wrapperStyles.root, isExpandedOnDesktop && wrapperStyles.fullHeightSidebarExpanded, isExpandedOnDesktop && fg('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedWithFeedback, fg('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarWithLayeringFixes, !isFirstRenderRef.current && isExpandedOnDesktop && fg('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarBorderTransition, isExpandedOnDesktop && fg('platform-dst-side-nav-layering-fixes') && wrapperStyles.fullHeightSidebarExpandedWithLayeringFixes, isExpandedOnDesktop && fg('platform-dst-side-nav-layering-fixes') && !fg('platform_dst_nav4_fhs_feedback_1') && wrapperStyles.fullHeightSidebarExpandedWithLayeringFixesScrollTimeline])
145
146
  }, /*#__PURE__*/React.createElement("div", {
146
147
  ref: ref,
147
148
  "data-testid": testId,
package/dist/esm/ui/page-layout/top-nav/top-nav.js CHANGED
@@ -46,8 +46,7 @@ var backgroundStyles = {
46
46
  export function TopNav(_ref) {
47
47
  var children = _ref.children,
48
48
  xcss = _ref.xcss,
49
- _ref$height = _ref.height,
50
- height = _ref$height === void 0 ? 48 : _ref$height,
49
+ heightProp = _ref.height,
51
50
  _ref$skipLinkLabel = _ref.skipLinkLabel,
52
51
  skipLinkLabel = _ref$skipLinkLabel === void 0 ? 'Top Bar' : _ref$skipLinkLabel,
53
52
  testId = _ref.testId,
@@ -59,6 +58,8 @@ export function TopNav(_ref) {
59
58
  providedId: providedId
60
59
  });
61
60
  useSkipLink(id, skipLinkLabel);
61
+ var hasIncreasedDefaultHeight = isFhsEnabled && fg('platform_dst_nav4_top_nav_increase_height');
62
+ var height = heightProp !== null && heightProp !== void 0 ? heightProp : hasIncreasedDefaultHeight ? 56 : 48;
62
63
  var customTheme = useCustomTheme(UNSAFE_theme);
63
64
 
64
65
  /**
package/dist/types/ui/page-layout/top-nav/top-nav.d.ts CHANGED
@@ -4,7 +4,7 @@ import type { CommonSlotProps } from '../types';
4
4
  /**
5
5
  * The top nav layout area. It will display at the top of the screen, below the banner if one is present.
6
6
  */
7
- export declare function TopNav({ children, xcss, height, skipLinkLabel, testId, id: providedId, UNSAFE_theme, }: CommonSlotProps & {
7
+ export declare function TopNav({ children, xcss, height: heightProp, skipLinkLabel, testId, id: providedId, UNSAFE_theme, }: CommonSlotProps & {
8
8
  /**
9
9
  * The content of the layout area.
10
10
  * Should include `TopNavStart`, `TopNavMiddle`, and `TopNavEnd`.
package/dist/types-ts4.5/ui/page-layout/top-nav/top-nav.d.ts CHANGED
@@ -4,7 +4,7 @@ import type { CommonSlotProps } from '../types';
4
4
  /**
5
5
  * The top nav layout area. It will display at the top of the screen, below the banner if one is present.
6
6
  */
7
- export declare function TopNav({ children, xcss, height, skipLinkLabel, testId, id: providedId, UNSAFE_theme, }: CommonSlotProps & {
7
+ export declare function TopNav({ children, xcss, height: heightProp, skipLinkLabel, testId, id: providedId, UNSAFE_theme, }: CommonSlotProps & {
8
8
  /**
9
9
  * The content of the layout area.
10
10
  * Should include `TopNavStart`, `TopNavMiddle`, and `TopNavEnd`.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/navigation-system",
3
- "version": "5.36.0",
3
+ "version": "5.38.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",
@@ -153,6 +153,9 @@
153
153
  "platform_dst_nav4_fhs_feedback_1": {
154
154
  "type": "boolean"
155
155
  },
156
+ "platform_dst_nav4_top_nav_increase_height": {
157
+ "type": "boolean"
158
+ },
156
159
  "platform_dst_nav4_side_nav_resize_tooltip_feedback": {
157
160
  "type": "boolean"
158
161
  },