@atlaskit/navigation-system 7.1.4 → 7.1.6

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlassian/navigation-system
 
+## 7.1.6
+
+### Patch Changes
+
+- [`02483200273ec`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/02483200273ec) -
+  Enrol all Design System UI packages into the React Compiler with platform gating via
+  isReactCompilerActivePlatform.
+- Updated dependencies
+
+## 7.1.5
+
+### Patch Changes
+
+- [`f54d8707590da`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f54d8707590da) -
+  The `platform-dst-nav-app-icon-height-fix` feature gate has been cleaned up. The app logo icon now
+  always has a maximum height of 24px applied to prevent custom App Logos from extending beyond the
+  edges of the container.
+
 ## 7.1.4
 
 ### Patch Changes

package/constellation/layout/examples.mdx

@@ -30,7 +30,8 @@ The full page layout with all areas rendered has the structure depicted below, o
 	alt="Example of the navigation system layout areas"
 />
 
-The top nav overlaps the side nav when it is expanded to give the appearance of a full height side nav.
+The top nav overlaps the side nav when it is expanded to give the appearance of a full height side
+nav.
 
 When composing your page layout ensure that:
 
@@ -42,7 +43,8 @@ When composing your page layout ensure that:
 These are the distinct areas in the layout. These components are designed to contain other
 components and content.
 
-For examples, see [navigation resources (Atlassians only)](https://hello.atlassian.net/wiki/x/rBE7MAE).
+For examples, see
+[navigation resources (Atlassians only)](https://hello.atlassian.net/wiki/x/rBE7MAE).
 
 ### Banner
 
@@ -56,7 +58,8 @@ Use the top nav area to render [top nav items](/components/navigation-system/top
 - It will display at the top of the screen, below the banner if one is present. It has a fixed
   height of 56px.
 - Use the [top nav slots](#top-nav-slots) to position actions within top nav.
-- The top nav is responsive, with the [top nav items](/components/navigation-system/top-nav-items) changing according to the viewport size.
+- The top nav is responsive, with the [top nav items](/components/navigation-system/top-nav-items)
+  changing according to the viewport size.
 
 [View interactive example](https://go.atlassian.com/nav4-interactive-example)
 
@@ -65,7 +68,8 @@ Use the top nav area to render [top nav items](/components/navigation-system/top
 The top nav has three layout components that you must use to position
 [top nav items](/components/navigation-system/top-nav-items) within the top nav flexbox.
 
-- `TopNavStart`: Area for left-aligned items. Appears in the side nav when the side nav is expanded to give the appearance of a full height sidebar.
+- `TopNavStart`: Area for left-aligned items. Appears in the side nav when the side nav is expanded
+  to give the appearance of a full height sidebar.
 - `TopNavMiddle`: Area for centre-aligned items.
 - `TopNavEnd`: Area for right-aligned items.
 
@@ -91,7 +95,9 @@ See the [custom theming](/components/navigation-system/layout/custom-theming) ta
   render [side nav items](https://atlaskit.atlassian.com/packages/navigation/side-nav-items). It
   will show on the left of the screen. The default width of the side nav is 320px.
 - Use the [side nav slots](#side-nav-slots) to position content within the side nav.
-- The side nav is [collapsable and expandable](#side-nav-collapseexpand), [resizable](#side-nav-resizing), [responsive](#side-nav-responsive), and offers [flyout](#side-nav-flyout) behaviour.
+- The side nav is [collapsable and expandable](#side-nav-collapseexpand),
+  [resizable](#side-nav-resizing), [responsive](#side-nav-responsive), and offers
+  [flyout](#side-nav-flyout) behaviour.
 
 [View interactive example](https://go.atlassian.com/nav4-interactive-example)
 
@@ -121,13 +127,17 @@ The side nav can collapse and expand based on user input or programmatically thr
 ##### Toggle button
 
 The side nav can collapse and expand using the `SideNavToggleButton` from
-[top nav items](/components/navigation-system/top-nav-items/examples#start-items) or the keyboard shortcut.
+[top nav items](/components/navigation-system/top-nav-items/examples#start-items) or the keyboard
+shortcut.
 
 ##### Keyboard shortcut
 
-The keyboard shortcut Ctrl+[ is enabled globally through the `isSideNavShortcutEnabled` on `Root`. It’s disabled by default.
+The keyboard shortcut Ctrl+[ is enabled globally through the `isSideNavShortcutEnabled` on `Root`.
+It’s disabled by default.
 
-When enabled, additional checks can be performed on individual keypresses through the `canToggleWithShortcut` prop on the side nav. This allows for apps to conditionally disable the shortcut based on additional app-specific requirements.
+When enabled, additional checks can be performed on individual keypresses through the
+`canToggleWithShortcut` prop on the side nav. This allows for apps to conditionally disable the
+shortcut based on additional app-specific requirements.
 
 ##### Programmatic / Hooks
 
@@ -172,20 +182,25 @@ This is useful for toggling the side nav based on a keyboard shortcut.
 
 #### Side nav resizing
 
-You can optionally render a [side nav panel splitter](#resizable-areas) as a child to make the side nav resizable.
-
-- The side nav is resized using the drag handle. When you hover over the drag handle, the mouse pointer changes to a resize cursor.
-- The side nav can be resized to a minimum width of 240px and a maximum width equal to 50% of the viewport width.
-- The side nav retains its resized width after it's collapsed or expanded. Persist the chosen width across page refreshes by providing it to the `defaultWidth` prop.
-- When resizing, any open layer components (for example, popups, dropdowns, selects, and tooltips) are closed.
+You can optionally render a [side nav panel splitter](#resizable-areas) as a child to make the side
+nav resizable.
+
+- The side nav is resized using the drag handle. When you hover over the drag handle, the mouse
+  pointer changes to a resize cursor.
+- The side nav can be resized to a minimum width of 240px and a maximum width equal to 50% of the
+  viewport width.
+- The side nav retains its resized width after it's collapsed or expanded. Persist the chosen width
+  across page refreshes by providing it to the `defaultWidth` prop.
+- When resizing, any open layer components (for example, popups, dropdowns, selects, and tooltips)
+  are closed.
 - You can also double-click the side nav panel splitter to collapse the side nav.
- 
+
 #### Side nav responsive
 
 - At `s`, `xs`, and `xxs` breakpoints (i.e. viewports smaller than 1024px), the side nav
   automatically collapses to make room for the content. Users have the option to manually
-  [open or close](/components/navigation-system/layout/examples#side-nav-collapseexpand) the side nav
-  according to their preferences. Doing so will open it as an overlay.
+  [open or close](/components/navigation-system/layout/examples#side-nav-collapseexpand) the side
+  nav according to their preferences. Doing so will open it as an overlay.
 - At `xs` and `xxs` breakpoints (i.e. viewports smaller than 768px), the max width of the overlay
   side nav is either 320px or 90% of the screen width - whichever value is smaller.
 
@@ -204,7 +219,7 @@ expand to fill available space.
 ### Aside
 
 <SectionMessage appearance="warning" title="Caution">
-We plan to deprecate aside. Use panel instead.
+	We plan to deprecate aside. Use panel instead.
 </SectionMessage>
 
 The aside area is rendered to the right of the main area.
@@ -224,13 +239,16 @@ The aside area is rendered to the right of the main area.
 You can optionally render a [panel splitter](#resizable-areas) as a child to make the aside
 resizable.
 
-- The aside is resized using the drag handle. When you hover over the drag handle, the mouse pointer changes to a resize cursor.
-- The aside can be resized to a minimum width of 120px and a maximum width equal to 50% of the viewport width. 
+- The aside is resized using the drag handle. When you hover over the drag handle, the mouse pointer
+  changes to a resize cursor.
+- The aside can be resized to a minimum width of 120px and a maximum width equal to 50% of the
+  viewport width.
 - Persist the chosen width across page refreshes by providing it to the `defaultWidth` prop.
 
 #### Aside responsive
 
-At `s`, `xs`, and `xxs` breakpoints (i.e. viewports smaller than 1024px), the aside moves below the main area, and conforms to main width and behaviour.
+At `s`, `xs`, and `xxs` breakpoints (i.e. viewports smaller than 1024px), the aside moves below the
+main area, and conforms to main width and behaviour.
 
 ### Panel
 
@@ -253,14 +271,17 @@ The panel can be collapsed and expanded using a trigger of your choosing.
 You can optionally render a [panel splitter](#resizable-areas) as a child to make the panel
 resizable.
 
-- The panel is resized using the drag handle. When you hover over the drag handle, the mouse pointer changes to a resize cursor.
-- The panel can be resized larger than `defaultWidth` to a maximum of 50% of the content area (viewport minus the side nav area). The panel can't be resized smaller than `defaultWidth`.
-- The panel retains its resized width after it's collapsed or expanded. Persist the chosen width across page refreshes by providing it to the `defaultWidth` prop.
+- The panel is resized using the drag handle. When you hover over the drag handle, the mouse pointer
+  changes to a resize cursor.
+- The panel can be resized larger than `defaultWidth` to a maximum of 50% of the content area
+  (viewport minus the side nav area). The panel can't be resized smaller than `defaultWidth`.
+- The panel retains its resized width after it's collapsed or expanded. Persist the chosen width
+  across page refreshes by providing it to the `defaultWidth` prop.
 
 #### Panel responsive
 
-At `m` breakpoints (between 1024-1440px), the panel will overlay the aside area. At `s` breakpoints and
-below (less than 1024px) it will start to overlay the main area.
+At `m` breakpoints (between 1024-1440px), the panel will overlay the aside area. At `s` breakpoints
+and below (less than 1024px) it will start to overlay the main area.
 
 ## Resizable areas
 

package/constellation/layout/usage.mdx

@@ -20,7 +20,8 @@ import SectionMessage from '@atlaskit/section-message';
 Use layout to compose the structure of your application. It also defines the page behavior and
 navigational areas.
 
-When applying components to the navigational areas, [see navigation resources (Atlassians only)](https://hello.atlassian.net/wiki/spaces/navx/pages/5104144812).
+When applying components to the navigational areas,
+[see navigation resources (Atlassians only)](https://hello.atlassian.net/wiki/spaces/navx/pages/5104144812).
 
 <Image
 	src={layoutAnatomyLight}
@@ -37,7 +38,8 @@ When applying components to the navigational areas, [see navigation resources (A
 		<a href="/components/navigation-system/top-nav-items">top nav items</a>.
 		<ol type="a">
 			<li>
-				<strong>Top nav start:</strong> Area for left-aligned actions. Appears in the side nav when the side nav is expanded.
+				<strong>Top nav start:</strong> Area for left-aligned actions. Appears in the side nav when
+				the side nav is expanded.
 			</li>
 			<li>
 				<strong>Top nav middle:</strong> Area for centre-aligned actions.
@@ -48,8 +50,9 @@ When applying components to the navigational areas, [see navigation resources (A
 		</ol>
 	</li>
 	<li>
-		<strong>Side nav:</strong> Use to display <a href="https://atlaskit.atlassian.com/packages/navigation/side-nav-items">side nav items</a>. Is resizable and
-		collapsible.
+		<strong>Side nav:</strong> Use to display{' '}
+		<a href="https://atlaskit.atlassian.com/packages/navigation/side-nav-items">side nav items</a>.
+		Is resizable and collapsible.
 		<ol type="a">
 			<li>
 				<strong>Side nav header:</strong> Optional. Top part of the side nav (fixed).
@@ -85,18 +88,18 @@ When applying components to the navigational areas, [see navigation resources (A
 The main difference between aside, panel and modal dialog is their behaviours:
 
 - **Aside** is not collapsible, while **panel** can be collapsible.
-- **Panel** and **aside** present content alongside the **main** area, while a **modal dialog** appears
-  in a layer above the page.
+- **Panel** and **aside** present content alongside the **main** area, while a **modal dialog**
+  appears in a layer above the page.
 - On small viewports (1024px and below), the **panel** becomes an overlay, while the **aside** moves
   below the **main** area.
 
 #### Usage guidance
 
-- Use the **panel** for contextual information or tertiary actions that complement the user's workflow.
-  Panels enable multitasking by providing an additional work space, while keeping users
+- Use the **panel** for contextual information or tertiary actions that complement the user's
+  workflow. Panels enable multitasking by providing an additional work space, while keeping users
   connected to their primary task.
-- Use a **modal dialog** when you need the user to focus on a specific
-  task, such as making a decision or completing an action, before they can return to their primary task.
+- Use a **modal dialog** when you need the user to focus on a specific task, such as making a
+  decision or completing an action, before they can return to their primary task.
 - Don’t use aside for new experiences. It is planned for deprecation.
 
 ## Best practices

package/constellation/top-nav-items/examples.mdx

@@ -19,7 +19,8 @@ import { EndItemExample } from '../../examples/constellation/top-nav-items/end-i
 import { TopNavButtonExample } from '../../examples/constellation/top-nav-items/top-nav-button';
 import { CustomTitleExample } from '../../examples/constellation/top-nav-items/custom-title';
 
-These components can be used within the top nav from [layout](/components/navigation-system/layout/examples).
+These components can be used within the top nav from
+[layout](/components/navigation-system/layout/examples).
 
 For other components that can be used within the top nav, see
 [navigation resources (Atlassians only)](https://hello.atlassian.net/wiki/x/rBE7MAE).
@@ -32,8 +33,8 @@ area.
 - Side nav toggle button: Opens and closes the
   [side nav](/components/navigation-system/layout/examples#side-nav).
 - App switcher: Opens and closes an app switcher. See
-  [navigation resources (Atlassians only)](https://hello.atlassian.net/wiki/x/rBE7MAE)
-  for recommended platform components.
+  [navigation resources (Atlassians only)](https://hello.atlassian.net/wiki/x/rBE7MAE) for
+  recommended platform components.
 
 Use one of the following logo components to orient users and provide a persistent link to the app
 landing page:
@@ -46,16 +47,22 @@ landing page:
 
 ### Side nav toggle button
 
-The side nav toggle button must be passed to `TopNavStart` through the `sideNavToggleButton` prop, not via `children`.
-- When the keyboard shortcut is enabled, the toggle button’s tooltip will automatically show Ctrl+[ as the shortcut.
-- The toggle button is left-aligned when the side nav is collapsed, and right-aligned when the side nav is expanded.
+The side nav toggle button must be passed to `TopNavStart` through the `sideNavToggleButton` prop,
+not via `children`.
+
+- When the keyboard shortcut is enabled, the toggle button’s tooltip will automatically show Ctrl+[
+  as the shortcut.
+- The toggle button is left-aligned when the side nav is collapsed, and right-aligned when the side
+  nav is expanded.
 
 <Example Component={TopNavStartToggleExample} />
 
 ### App logo
 
 App logo displays an app [logo icon](/components/logo) and name.
-- It has a maximum width of 320px, after which the app name truncates. The app name also truncates based on the available space when the side nav is resized.
+
+- It has a maximum width of 320px, after which the app name truncates. The app name also truncates
+  based on the available space when the side nav is resized.
 - At `s` breakpoints and below (less that 1024px), the app name is not shown.
 
 See the [responsive section](#responsive) for more information.
@@ -65,13 +72,16 @@ See the [responsive section](#responsive) for more information.
 ### Custom logo
 
 Custom logo provides a container for custom logo images with the following constraints:
-- Maximum width: 320px.  If the image is wider than this, or if space is limited when the side nav is resized, the logo will scale down to fit.
+
+- Maximum width: 320px. If the image is wider than this, or if space is limited when the side nav is
+  resized, the logo will scale down to fit.
 - Maximum height: 24px. If the image is shorter than this, the logo will scale up to fit.
 
-Do not provide explicit width and height values on the image, otherwise it will not respect the container size.
+Do not provide explicit width and height values on the image, otherwise it will not respect the
+container size.
 
-At `s` breakpoints and below (less that 1024px), only the provided icon is shown. Above `s` breakpoints,
-the provided logo is shown.
+At `s` breakpoints and below (less that 1024px), only the provided icon is shown. Above `s`
+breakpoints, the provided logo is shown.
 
 See the [responsive section](#responsive) for more information.
 
@@ -82,7 +92,8 @@ See the [responsive section](#responsive) for more information.
 Optional text used for app customisation by customers.
 
 - When present, it appears to the right of the logo.
-- It has a maximum width of 200px, after which the text truncates. It also truncates based on the available space when the side nav is resized.
+- It has a maximum width of 200px, after which the text truncates. It also truncates based on the
+  available space when the side nav is resized.
 - At `s` breakpoints and below (less than 1024px), the custom title is not displayed.
 
 <Example Component={CustomTitleExample} />
@@ -94,21 +105,24 @@ These actions go in the
 
 - They should consist of a search component and a create component, in that order to maintain the
   correct layout behaviour.
-- The actions are centre-aligned when the side nav is collapsed, and left-aligned when the side nav is expanded.
-- At `xl` breakpoints (1768px or greater), the middle items are centred in the viewport when the side nav is expanded, but are pushed out by the side nav to avoid overlapping.
+- The actions are centre-aligned when the side nav is collapsed, and left-aligned when the side nav
+  is expanded.
+- At `xl` breakpoints (1768px or greater), the middle items are centred in the viewport when the
+  side nav is expanded, but are pushed out by the side nav to avoid overlapping.
 - We have provided placeholder components. See
-  [navigation resources (Atlassians only)](https://hello.atlassian.net/wiki/x/rBE7MAE)
-  for recommended platform components.
+  [navigation resources (Atlassians only)](https://hello.atlassian.net/wiki/x/rBE7MAE) for
+  recommended platform components.
 - Our placeholder search field scales to fill the available area of common actions, up to a maximum
   width of 780px. At `xxs` breakpoints (less than 480px), the search field converts to an icon only
   button.
 
-See the [responsive section](#responsive) for more information. If you use search or create components
-from other packages, you may experience different responsive behaviour.
+See the [responsive section](#responsive) for more information. If you use search or create
+components from other packages, you may experience different responsive behaviour.
 
 <SectionMessage>
 
-The search bar must be the first child of `TopNavMiddle`, in line with our design specifications. Otherwise, you may see unexpected layout behavior.
+The search bar must be the first child of `TopNavMiddle`, in line with our design specifications.
+Otherwise, you may see unexpected layout behavior.
 
 </SectionMessage>
 
@@ -116,9 +130,9 @@ The search bar must be the first child of `TopNavMiddle`, in line with our desig
 
 ## End items
 
-These actions appear in the [top nav end](/components/navigation-system/layout/examples#top-nav-slots)
-area. They are right-aligned and provided as a list for accessibility. Contains, in the following
-order:
+These actions appear in the
+[top nav end](/components/navigation-system/layout/examples#top-nav-slots) area. They are
+right-aligned and provided as a list for accessibility. Contains, in the following order:
 
 - Growth button - A placeholder for an upselling button (optional).
 - Chat - A placeholder for a chat panel.
@@ -127,8 +141,8 @@ order:
 - Settings - Use to open and close a settings menu.
 - Profile/Login - A placeholder for an account component.
 
-See [navigation resources (Atlassians only)](https://hello.atlassian.net/wiki/x/rBE7MAE)
-for recommended platform components for these buttons, or components triggered by these buttons.
+See [navigation resources (Atlassians only)](https://hello.atlassian.net/wiki/x/rBE7MAE) for
+recommended platform components for these buttons, or components triggered by these buttons.
 
 At `xs` breakpoints and below (less than 768px), these buttons collapse into a single 'More' button.
 
@@ -140,7 +154,8 @@ See the [responsive section](#responsive) for more details.
 
 If none of the provided end items are suitable, you can create your own icon button using `EndItem`.
 
-If you need a more customised button, use [top nav button](#top-nav-button) and wrap it in a list item.
+If you need a more customised button, use [top nav button](#top-nav-button) and wrap it in a list
+item.
 
 <Example Component={EndItemExample} />
 
@@ -153,8 +168,8 @@ A button component that supports theming. The following variants are available:
 - Top nav link icon button
 - Top nav button
 
-Use this component when you need to add buttons to the top nav. Be aware that adding custom buttons may negatively impact the consistency
-across apps.
+Use this component when you need to add buttons to the top nav. Be aware that adding custom buttons
+may negatively impact the consistency across apps.
 
 <Example Component={TopNavButtonExample} />
 
@@ -206,10 +221,10 @@ backwards compatibility, and may be deprecated if the Search Platform evolves.
 
 Do not use [button](/components/button) inside of the top navigation.
 
-Use the action components exported from this package (such as `AppSwitcher`), as they
- automatically consume the custom theme.
+Use the action components exported from this package (such as `AppSwitcher`), as they automatically
+consume the custom theme.
 
-Custom actions can be created using [end item](#end-item) for icon buttons and [top nav button](#top-nav-button) for buttons with
-visible text.
+Custom actions can be created using [end item](#end-item) for icon buttons and
+[top nav button](#top-nav-button) for buttons with visible text.
 
 <Example Component={CustomThemingButtonsExample} />

package/constellation/top-nav-items/usage.mdx

@@ -19,8 +19,8 @@ import topNavItemsDont2Dark from './images/topNavItems-dont-2-dark.png';
 
 ## Usage
 
-Use top nav items to create common utilities in
-the top nav within [layout](/components/navigation-system/layout/examples).
+Use top nav items to create common utilities in the top nav within
+[layout](/components/navigation-system/layout/examples).
 
 <Image
 	src={topNavItemsAnatomyLight}

package/dist/cjs/ui/top-nav-items/nav-logo/app-logo.js

@@ -30,9 +30,8 @@ var logoWrapperStyles = {
   fullHeightSidebar: "_p12f1osq"
 };
 var iconContainerStyles = {
-  root: "_1reo15vq _18m915vq _1e0c1txw _p12f1tcg",
-  fullHeightSidebar: "_1o9zidpf",
-  maxHeightStyles: "_c71l1tcg"
+  root: "_1reo15vq _18m915vq _1e0c1txw _p12f1tcg _c71l1tcg",
+  fullHeightSidebar: "_1o9zidpf"
 };
 var logoTextStyles = {
   root: "_1bsb1ris _p12fnklw _uiztglyw _y4tiv77o _1e0cglyw _10y418uv"
@@ -82,7 +81,7 @@ var AppLogo = exports.AppLogo = function AppLogo(_ref) {
     alignBlock: "center",
     xcss: (0, _react2.cx)(logoWrapperStyles.root, isFhsEnabled && logoWrapperStyles.fullHeightSidebar)
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _runtime.ax)([iconContainerStyles.root, isFhsEnabled && iconContainerStyles.fullHeightSidebar, (0, _platformFeatureFlags.fg)('platform-dst-nav-app-icon-height-fix') && iconContainerStyles.maxHeightStyles])
+    className: (0, _runtime.ax)([iconContainerStyles.root, isFhsEnabled && iconContainerStyles.fullHeightSidebar])
   }, /*#__PURE__*/_react.default.createElement(_logoRenderer.LogoRenderer
   // Top nav always uses the new logo design
   , {

package/dist/es2019/ui/top-nav-items/nav-logo/app-logo.js

@@ -21,9 +21,8 @@ const logoWrapperStyles = {
   fullHeightSidebar: "_p12f1osq"
 };
 const iconContainerStyles = {
-  root: "_1reo15vq _18m915vq _1e0c1txw _p12f1tcg",
-  fullHeightSidebar: "_1o9zidpf",
-  maxHeightStyles: "_c71l1tcg"
+  root: "_1reo15vq _18m915vq _1e0c1txw _p12f1tcg _c71l1tcg",
+  fullHeightSidebar: "_1o9zidpf"
 };
 const logoTextStyles = {
   root: "_1bsb1ris _p12fnklw _uiztglyw _y4tiv77o _1e0cglyw _10y418uv"
@@ -74,7 +73,7 @@ export const AppLogo = ({
     alignBlock: "center",
     xcss: cx(logoWrapperStyles.root, isFhsEnabled && logoWrapperStyles.fullHeightSidebar)
   }, /*#__PURE__*/React.createElement("div", {
-    className: ax([iconContainerStyles.root, isFhsEnabled && iconContainerStyles.fullHeightSidebar, fg('platform-dst-nav-app-icon-height-fix') && iconContainerStyles.maxHeightStyles])
+    className: ax([iconContainerStyles.root, isFhsEnabled && iconContainerStyles.fullHeightSidebar])
   }, /*#__PURE__*/React.createElement(LogoRenderer
   // Top nav always uses the new logo design
   , {

package/dist/esm/ui/top-nav-items/nav-logo/app-logo.js

@@ -21,9 +21,8 @@ var logoWrapperStyles = {
   fullHeightSidebar: "_p12f1osq"
 };
 var iconContainerStyles = {
-  root: "_1reo15vq _18m915vq _1e0c1txw _p12f1tcg",
-  fullHeightSidebar: "_1o9zidpf",
-  maxHeightStyles: "_c71l1tcg"
+  root: "_1reo15vq _18m915vq _1e0c1txw _p12f1tcg _c71l1tcg",
+  fullHeightSidebar: "_1o9zidpf"
 };
 var logoTextStyles = {
   root: "_1bsb1ris _p12fnklw _uiztglyw _y4tiv77o _1e0cglyw _10y418uv"
@@ -73,7 +72,7 @@ export var AppLogo = function AppLogo(_ref) {
     alignBlock: "center",
     xcss: cx(logoWrapperStyles.root, isFhsEnabled && logoWrapperStyles.fullHeightSidebar)
   }, /*#__PURE__*/React.createElement("div", {
-    className: ax([iconContainerStyles.root, isFhsEnabled && iconContainerStyles.fullHeightSidebar, fg('platform-dst-nav-app-icon-height-fix') && iconContainerStyles.maxHeightStyles])
+    className: ax([iconContainerStyles.root, isFhsEnabled && iconContainerStyles.fullHeightSidebar])
   }, /*#__PURE__*/React.createElement(LogoRenderer
   // Top nav always uses the new logo design
   , {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "7.1.4",
+	"version": "7.1.6",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -24,6 +24,13 @@
 	],
 	"atlaskit:src": "src/index.tsx",
 	"atlassian": {
+		"react-compiler": {
+			"enabled": true,
+			"gating": {
+				"source": "@atlassian/react-compiler-gating",
+				"importSpecifierName": "isReactCompilerActivePlatform"
+			}
+		},
 		"team": "ADS: nav4",
 		"website": {
 			"name": "Navigation system",
@@ -113,7 +120,8 @@
 		"@atlaskit/skeleton": "^2.1.0",
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
-		"@atlassian/gemini": "^1.39.0",
+		"@atlassian/gemini": "^1.41.0",
+		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/search-dialog": "^9.20.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/test-utils": "^1.0.0",
@@ -166,9 +174,6 @@
 		"platform_dst_button_chevron_sizing": {
 			"type": "boolean"
 		},
-		"platform-dst-nav-app-icon-height-fix": {
-			"type": "boolean"
-		},
 		"platform-dst-shape-theme-default": {
 			"type": "boolean"
 		},