@atlaskit/navigation-system 0.167.3 → 0.168.0

package/src/ui/top-nav-items/{nav-logo.tsx → nav-logo/nav-logo.tsx}

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { memo, useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import { cssMap, cx, jsx } from '@compiled/react';
 
@@ -15,7 +15,9 @@ import type {
 } from '@atlaskit/temp-nav-app-icons/types';
 import { token } from '@atlaskit/tokens';
 
-import { useHasCustomTheme } from './themed/has-custom-theme-context';
+import { useHasCustomTheme } from '../themed/has-custom-theme-context';
+
+import { LogoRenderer } from './logo-renderer';
 
 export const themedLogoIcon = '--ds-top-bar-logo-icon';
 export const themedLogoText = '--ds-top-bar-logo-text';
@@ -27,14 +29,15 @@ const anchorStyles = cssMap({
 		height: '32px',
 		borderRadius: token('border.radius.100'),
 	},
-	newBorderRadius: {
-		borderRadius: '8px',
+	customLogoBorderRadius: {
+		borderRadius: '3px',
 	},
 	newMargin: {
 		// Additional margin is added to the left of the interactive element, to create visual alignment
 		// with the app tile icon and the other icon buttons that use normal (non-tile) icons.
 		marginInlineStart: token('space.050'),
 	},
+	// This is the same between app-logo and nav-logo
 	newInteractionStates: {
 		'&:hover': {
 			backgroundColor: token('color.background.neutral.subtle.hovered'),
@@ -82,7 +85,6 @@ const sharedIconOrLogoContainerStyles = cssMap({
 		},
 	},
 	appIconTilePaddingFlagged: {
-		// Used when fg('platform-team25-app-icon-tiles') is enabled
 		paddingInline: token('space.050'),
 	},
 });
@@ -132,7 +134,7 @@ const logoContainerStyles = cssMap({
 /**
  * __Nav logo__
  *
- * The product logo for the top navigation.
+ * Custom image logo for the top navigation.
  *
  * To provide a responsive experience, it requires both a logo and an icon component.
  * The logo component will be used for large viewports, and the icon component will be used for small viewports.
@@ -219,8 +221,9 @@ export const NavLogo = ({
 			// eslint-disable-next-line @compiled/no-suppress-xcss
 			xcss={cx(
 				anchorStyles.root,
+				fg('platform_design_system_nav_logo_interaction_states') &&
+				anchorStyles.customLogoBorderRadius,
 				fg('platform_design_system_nav_logo_interaction_states') && anchorStyles.newMargin,
-				fg('platform_design_system_nav_logo_interaction_states') && anchorStyles.newBorderRadius,
 				fg('platform_design_system_nav_logo_interaction_states') &&
 					(hasCustomTheme
 						? anchorStyles.newInteractionStatesCustomTheming
@@ -236,7 +239,7 @@ export const NavLogo = ({
 						sharedIconOrLogoContainerStyles.appIconTilePaddingFlagged,
 				]}
 			>
-				<NavLogoRenderer logoOrIcon={icon} />
+				<LogoRenderer logoOrIcon={icon} />
 			</div>
 			<div
 				css={[
@@ -246,42 +249,8 @@ export const NavLogo = ({
 						sharedIconOrLogoContainerStyles.appIconTilePaddingFlagged,
 				]}
 			>
-				<NavLogoRenderer logoOrIcon={logo} />
+				<LogoRenderer logoOrIcon={logo} />
 			</div>
 		</Anchor>
 	);
 };
-
-function NavLogoRenderer({ logoOrIcon }: React.ComponentProps<typeof NavLogoRendererNoMemo>) {
-	return fg('jiv-20710-fix-nav-rerender') ? (
-		<NavLogoRendererMemo logoOrIcon={logoOrIcon} />
-	) : (
-		<NavLogoRendererNoMemo logoOrIcon={logoOrIcon} />
-	);
-}
-
-const NavLogoRendererMemo = memo(NavLogoRendererNoMemo);
-
-function NavLogoRendererNoMemo({
-	logoOrIcon: LogoOrIcon,
-}: {
-	logoOrIcon:
-		| ((props: LogoProps) => JSX.Element)
-		| ((props: TempLogoProps) => JSX.Element)
-		| ((props: TempIconProps) => JSX.Element);
-}) {
-	const hasCustomTheme = useHasCustomTheme();
-
-	if (hasCustomTheme) {
-		return (
-			<LogoOrIcon
-				size="small"
-				label=""
-				iconColor={`var(${themedLogoIcon})`}
-				textColor={`var(${themedLogoText})`}
-			/>
-		);
-	}
-
-	return <LogoOrIcon size="small" label="" appearance="brand" />;
-}

package/src/ui/top-nav-items/themed/get-custom-theme-styles.tsx

@@ -1,6 +1,6 @@
 import type React from 'react';
 
-import { themedLogoIcon, themedLogoText } from '../nav-logo';
+import { themedLogoIcon, themedLogoText } from '../nav-logo/nav-logo';
 
 import {
 	themedButtonBackground,