@atlaskit/navigation-system 0.167.2 → 0.168.0

package/examples/top-nav-with-temp-nav-app-icon.tsx

@@ -10,17 +10,17 @@ import {
 	TopNavStart,
 } from '@atlaskit/navigation-system/layout/top-nav';
 import {
+	AppLogo,
 	AppSwitcher,
 	ChatButton,
 	CreateButton,
 	Help,
-	NavLogo,
 	Notifications,
 	Profile,
 	Search,
 	Settings,
 } from '@atlaskit/navigation-system/top-nav-items';
-import { FocusIcon, FocusLogo } from '@atlaskit/temp-nav-app-icons/focus';
+import { FocusIcon } from '@atlaskit/temp-nav-app-icons/focus';
 
 import { WithResponsiveViewport } from './utils/example-utils';
 
@@ -38,10 +38,10 @@ export default function TopNavWithTempNavAppIcon() {
 					<TopNavStart>
 						<SideNavToggleButton collapseLabel="Collapse sidebar" expandLabel="Expand sidebar" />
 						<AppSwitcher label="App switcher" />
-						<NavLogo
+						<AppLogo
 							href="http://www.atlassian.design"
-							logo={() => <FocusLogo />}
-							icon={() => <FocusIcon size="24" />}
+							icon={FocusIcon}
+							name="Focus"
 							label="Home page"
 						/>
 					</TopNavStart>

package/examples/top-navigation-stress.tsx

@@ -12,7 +12,6 @@ import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdow
 import Heading from '@atlaskit/heading';
 import AiChatIcon from '@atlaskit/icon/core/ai-chat';
 import PremiumIcon from '@atlaskit/icon/core/premium';
-import { AtlassianAdministrationIcon, AtlassianAdministrationLogo } from '@atlaskit/logo';
 import { TopNavButton } from '@atlaskit/navigation-system/experimental/top-nav-button';
 import { SideNavToggleButton } from '@atlaskit/navigation-system/layout/side-nav';
 import {
@@ -23,6 +22,7 @@ import {
 } from '@atlaskit/navigation-system/layout/top-nav';
 import { MenuListItem } from '@atlaskit/navigation-system/side-nav-items/menu-list-item';
 import {
+	AppLogo,
 	AppSwitcher,
 	CreateButton,
 	CustomTitle,
@@ -33,24 +33,27 @@ import {
 	Settings,
 } from '@atlaskit/navigation-system/top-nav-items';
 import { Stack } from '@atlaskit/primitives/compiled';
-import { ConfluenceIcon, ConfluenceLogo } from '@atlaskit/temp-nav-app-icons/confluence';
+import { ConfluenceIcon } from '@atlaskit/temp-nav-app-icons/confluence';
 import { EditionAwarenessButton } from '@atlassian/growth-pattern-library-edition-awareness-button';
 
+import placeholder200x20 from './images/200x20.png';
 import { WithResponsiveViewport } from './utils/example-utils';
 import { MockRoot } from './utils/mock-root';
 import { MockSearch } from './utils/mock-search';
 
+
 const connieNavLogo = (
-	<NavLogo href="" logo={ConfluenceLogo} icon={ConfluenceIcon} label="Home page" />
+	<AppLogo href="" icon={ConfluenceIcon} name="Confluence" label="Home page" />
 );
-const administrationNavLogo = (
+// Stress test nav responsive behaviour with a wide logo
+const wideNavLogo = (
 	<NavLogo
 		href=""
-		logo={AtlassianAdministrationLogo}
-		icon={AtlassianAdministrationIcon}
+		icon={() => <img alt="" src={placeholder200x20} />}
+		logo={() => <img alt="" src={placeholder200x20} />}
 		label="Home page"
 	/>
-);
+)
 
 const defaultTopNavEnd = (
 	<Fragment>
@@ -138,7 +141,7 @@ export default function TopNavigationStressExample() {
 					<Heading as="h2" size="small">
 						Wide left column
 					</Heading>
-					<TopNavigationInstance navLogo={administrationNavLogo} />
+					<TopNavigationInstance navLogo={wideNavLogo} />
 				</Stack>
 
 				<Stack space="space.100">
@@ -159,7 +162,7 @@ export default function TopNavigationStressExample() {
 					<Heading as="h2" size="small">
 						Wide left and right column
 					</Heading>
-					<TopNavigationInstance navLogo={administrationNavLogo} topNavEnd={extendedTopNavEnd} />
+					<TopNavigationInstance navLogo={wideNavLogo} topNavEnd={extendedTopNavEnd} />
 				</Stack>
 
 				<Stack space="space.100">
@@ -167,7 +170,7 @@ export default function TopNavigationStressExample() {
 						No create button
 					</Heading>
 					<TopNavigationInstance
-						navLogo={administrationNavLogo}
+						navLogo={wideNavLogo}
 						topNavEnd={extendedTopNavEnd}
 						topNavMiddle={<MockSearch />}
 					/>
@@ -178,7 +181,7 @@ export default function TopNavigationStressExample() {
 						No common actions
 					</Heading>
 					<TopNavigationInstance
-						navLogo={administrationNavLogo}
+						navLogo={wideNavLogo}
 						topNavEnd={extendedTopNavEnd}
 						topNavMiddle={null}
 					/>
@@ -189,7 +192,7 @@ export default function TopNavigationStressExample() {
 						Extra common actions
 					</Heading>
 					<TopNavigationInstance
-						navLogo={administrationNavLogo}
+						navLogo={wideNavLogo}
 						topNavEnd={extendedTopNavEnd}
 						topNavMiddle={
 							<Fragment>

package/examples/top-navigation-theming-with-picker.tsx

@@ -9,7 +9,7 @@ import { jsx } from '@compiled/react';
 import AKBadge from '@atlaskit/badge';
 import { Label } from '@atlaskit/form';
 import { AtlassianIcon, AtlassianLogo } from '@atlaskit/logo';
-import { Main, Root, SideNav } from '@atlaskit/navigation-system';
+import { AppLogo, Main, Root, SideNav } from '@atlaskit/navigation-system';
 import { SideNavToggleButton } from '@atlaskit/navigation-system/layout/side-nav';
 import {
 	TopNav,
@@ -28,7 +28,7 @@ import {
 } from '@atlaskit/navigation-system/top-nav-items';
 import { Notifications } from '@atlaskit/navigation-system/top-nav-items/notifications';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { JiraIcon, JiraLogo } from '@atlaskit/temp-nav-app-icons/jira';
+import { JiraIcon } from '@atlaskit/temp-nav-app-icons/jira';
 
 // TODO: consider exposing this type properly, but it isn't needed for normal usage
 // eslint-disable-next-line @atlaskit/platform/use-entrypoints-in-examples
@@ -68,12 +68,21 @@ const TopNavigation = ({ customTheme }: { customTheme?: CustomTheme }) => {
 					onClick={toggleIsAppSwitcherSelected}
 					isSelected={isAppSwitcherSelected}
 				/>
-				<NavLogo
-					href="http://www.atlassian.design"
-					logo={fg('platform-team25-app-icon-tiles') ? JiraLogo : AtlassianLogo}
-					icon={fg('platform-team25-app-icon-tiles') ? JiraIcon : AtlassianIcon}
-					label="Home page"
-				/>
+				{fg('platform-team25-app-icon-tiles') ? (
+					<AppLogo
+						href="http://www.atlassian.design"
+						icon={JiraIcon}
+						name="Jira"
+						label="Home page"
+					/>
+				) : (
+					<NavLogo
+						href="http://www.atlassian.design"
+						logo={AtlassianLogo}
+						icon={AtlassianIcon}
+						label="Home page"
+					/>
+				)}
 			</TopNavStart>
 			<TopNavMiddle>
 				<MockSearch />

package/examples/top-navigation-theming.tsx

@@ -13,6 +13,7 @@ import {
 	TopNavStart,
 } from '@atlaskit/navigation-system/layout/top-nav';
 import {
+	AppLogo,
 	AppSwitcher,
 	ChatButton,
 	CreateButton,
@@ -25,7 +26,7 @@ import {
 import { Notifications } from '@atlaskit/navigation-system/top-nav-items/notifications';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Stack } from '@atlaskit/primitives';
-import { JiraIcon, JiraLogo } from '@atlaskit/temp-nav-app-icons/jira';
+import { JiraIcon } from '@atlaskit/temp-nav-app-icons/jira';
 
 // TODO: consider exposing this type properly, but it isn't needed for normal usage
 // eslint-disable-next-line @atlaskit/platform/use-entrypoints-in-examples
@@ -71,12 +72,21 @@ const TopNavigationThemingInstance = ({ customTheme }: { customTheme?: CustomThe
 						onClick={toggleIsAppSwitcherSelected}
 						isSelected={isAppSwitcherSelected}
 					/>
-					<NavLogo
+					{fg('platform-team25-app-icon-tiles') ? (
+					<AppLogo
 						href="http://www.atlassian.design"
-						logo={fg('platform-team25-app-icon-tiles') ? JiraLogo : JiraLogoOld}
-						icon={fg('platform-team25-app-icon-tiles') ? JiraIcon : JiraIconOld}
-						label="Home page"
-					/>
+							icon={JiraIcon}
+							name="Jira"
+							label="Home page"
+						/>
+					) : (
+						<NavLogo
+							href="http://www.atlassian.design"
+							icon={JiraIconOld}
+							logo={JiraLogoOld}
+							label="Home page"
+						/>
+					)}
 					<CustomTitle>Optional custom title</CustomTitle>
 				</TopNavStart>
 				<TopNavMiddle>

package/examples/top-navigation.tsx

@@ -17,6 +17,7 @@ import {
 	TopNavStart,
 } from '@atlaskit/navigation-system/layout/top-nav';
 import {
+	AppLogo,
 	AppSwitcher,
 	ChatButton,
 	CreateButton,
@@ -29,7 +30,7 @@ import {
 } from '@atlaskit/navigation-system/top-nav-items';
 import { Notifications } from '@atlaskit/navigation-system/top-nav-items/notifications';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { JiraIcon, JiraLogo } from '@atlaskit/temp-nav-app-icons/jira';
+import { JiraIcon } from '@atlaskit/temp-nav-app-icons/jira';
 import { token } from '@atlaskit/tokens';
 
 import { WithResponsiveViewport } from './utils/example-utils';
@@ -48,12 +49,21 @@ export const TopNavigationExample = () => (
 				<TopNavStart>
 					<SideNavToggleButton collapseLabel="Collapse sidebar" expandLabel="Expand sidebar" />
 					<AppSwitcher label="App switcher" onClick={() => alert('app switcher')} />
-					<NavLogo
-						href="http://www.atlassian.design"
-						logo={fg('platform-team25-app-icon-tiles') ? JiraLogo : AtlassianLogo}
-						icon={fg('platform-team25-app-icon-tiles') ? JiraIcon : AtlassianIcon}
-						label="Home page"
-					/>
+					{fg('platform-team25-app-icon-tiles') ? (
+						<AppLogo
+							href="http://www.atlassian.design"
+							icon={JiraIcon}
+							name="Jira"
+							label="Home page"
+						/>
+					) : (
+						<NavLogo
+							href="http://www.atlassian.design"
+							icon={AtlassianIcon}
+							logo={AtlassianLogo}
+							label="Home page"
+						/>
+					)}
 				</TopNavStart>
 				<TopNavMiddle>
 					<Search onClick={() => alert('mobile search')} label="Search" />

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "0.167.2",
+	"version": "0.168.0",
 	"description": "The latest navigation system for Atlassian products.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -66,7 +66,6 @@
 	"atlaskit:src": "src/index.tsx",
 	"atlassian": {
 		"team": "ADS: nav4",
-		"runReact18": true,
 		"website": {
 			"name": "Navigation system",
 			"category": "Navigation",

package/src/entry-points/top-nav-items/index.tsx

@@ -1,5 +1,6 @@
 export { AppSwitcher } from '../../ui/top-nav-items/app-switcher';
-export { NavLogo } from '../../ui/top-nav-items/nav-logo';
+export { NavLogo } from '../../ui/top-nav-items/nav-logo/nav-logo';
+export { AppLogo } from '../../ui/top-nav-items/nav-logo/app-logo';
 export { Search } from '../../ui/top-nav-items/search';
 export { ChatButton } from '../../ui/top-nav-items/chat-button';
 export { EndItem } from '../../ui/top-nav-items/end-item';

package/src/index.tsx

@@ -59,7 +59,8 @@ export type { ResizeBounds } from './ui/page-layout/panel-splitter/types';
 
 export { TopNavStart } from './ui/page-layout/top-nav/top-nav-start';
 export { AppSwitcher } from './ui/top-nav-items/app-switcher';
-export { NavLogo } from './ui/top-nav-items/nav-logo';
+export { NavLogo } from './ui/top-nav-items/nav-logo/nav-logo';
+export { AppLogo } from './ui/top-nav-items/nav-logo/app-logo';
 export { TopNavMiddle } from './ui/page-layout/top-nav/top-nav-middle';
 export { Search } from './ui/top-nav-items/search';
 export { ChatButton } from './ui/top-nav-items/chat-button';

package/src/ui/page-layout/side-nav/toggle-button.tsx

@@ -146,17 +146,7 @@ export const SideNavToggleButton = ({
 	 */
 	const icon = (props: NewCoreIconProps) => (
 		<span css={silentIconStyles}>
-			{isSideNavExpanded ? (
-				<SidebarCollapseIcon
-					{...props}
-					testId={testId ? `${testId}-collapse-icon-temp-do-not-use` : undefined}
-				/>
-			) : (
-				<SidebarExpandIcon
-					{...props}
-					testId={testId ? `${testId}-expand-icon-temp-do-not-use` : undefined}
-				/>
-			)}
+			{isSideNavExpanded ? <SidebarCollapseIcon {...props} /> : <SidebarExpandIcon {...props} />}
 		</span>
 	);
 

package/src/ui/top-nav-items/__tests__/informational-vr-tests/top-navigation.vr.tsx

@@ -1,5 +1,6 @@
 import { Device, snapshotInformational } from '@atlassian/gemini';
 
+import TopNavWithLongProductName from '../../../../../examples/top-nav-with-long-name';
 import TopNavWithTempNavAppIcon from '../../../../../examples/top-nav-with-temp-nav-app-icon';
 import { TopNavigationExample } from '../../../../../examples/top-navigation';
 import { TopNavigationThemingSingleExample } from '../../../../../examples/top-navigation-theming';
@@ -106,3 +107,20 @@ snapshotInformational(TopNavigationThemingSingleExample, {
 		await page.mouse.down();
 	},
 });
+
+snapshotInformational(TopNavWithLongProductName, {
+	description: 'long product name tooltip',
+	featureFlags: {
+		'platform-team25-app-icon-tiles': true,
+		platform_design_system_nav4_top_nav_columns: true,
+		platform_design_system_nav_logo_interaction_states: true,
+	},
+	prepare: async (page) => {
+		// Reduce the viewport size to remove whitespace but include the tooltip
+		await page.setViewportSize({ width: 1200, height: 100 });
+		await page.getByRole('link', { name: 'Home page' }).hover();
+		await page.getByRole('tooltip').waitFor();
+	},
+	// We need to include the tooltip in this snapshot
+	drawsOutsideBounds: true,
+});

package/src/ui/top-nav-items/__tests__/unit/top-nav-items.test.tsx

@@ -12,7 +12,7 @@ import { TopNavStart } from '../../../page-layout/top-nav/top-nav-start';
 import { AppSwitcher } from '../../app-switcher';
 import { CreateButton } from '../../create-button';
 import { Help } from '../../help';
-import { NavLogo } from '../../nav-logo';
+import { NavLogo } from '../../nav-logo/nav-logo';
 import { Search } from '../../search';
 import { Settings } from '../../settings';
 

package/src/ui/top-nav-items/nav-logo/app-logo.tsx

@@ -0,0 +1,213 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { useCallback, useRef } from 'react';
+
+import { cssMap, cx, jsx } from '@compiled/react';
+
+import type { LogoProps } from '@atlaskit/logo';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Anchor, Inline, Text } from '@atlaskit/primitives';
+import type {
+	IconProps as TempIconProps
+} from '@atlaskit/temp-nav-app-icons/types';
+import { token } from '@atlaskit/tokens';
+import Tooltip from '@atlaskit/tooltip';
+
+import { useHasCustomTheme } from '../themed/has-custom-theme-context';
+
+import { LogoRenderer } from './logo-renderer';
+
+
+const anchorStyles = cssMap({
+	root: {
+		display: 'flex',
+		alignItems: 'center',
+		height: '32px',
+		borderRadius: '10px',
+		flexShrink: 0,
+		// '&&' is required to add more CSS specificity to ensure styles take precedence over the default Anchor styles
+		// @ts-ignore
+		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+		'&&': {
+			textDecoration: 'none',
+			color: 'inherit',
+		},
+	},
+	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'),
+		},
+		'&:active': {
+			// Compiled bug is causing the `&:hover` state to take precedence in Jira
+			// Reported to #help-compiled but may not be fixed soon
+			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+			backgroundColor: `${token('color.background.neutral.subtle.pressed')}!important`,
+		},
+	},
+	newInteractionStatesCustomTheming: {
+		'&:hover': {
+			backgroundColor: 'var(--ds-top-bar-button-background-hovered)',
+		},
+		'&:active': {
+			// Compiled bug is causing the `&:hover` state to take precedence in Jira
+			// Reported to #help-compiled but may not be fixed soon
+			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+			backgroundColor: 'var(--ds-top-bar-button-background-pressed)!important',
+		},
+	},
+});
+
+const logoWrapperStyles = cssMap({
+	root: {
+		paddingInline: token('space.050'),
+	},
+});
+
+const iconContainerStyles = cssMap({
+	root: {
+		// Overflow should never occur, but hiding it just in case
+		overflow: 'hidden',
+		display: 'flex',
+		maxWidth: 24,
+	},
+});
+
+const logoTextStyles = cssMap({
+	root: {
+		// Logo text should never wrap or overflow
+		width: 'max-content',
+		maxWidth: 320,
+		userSelect: 'none',
+		paddingInlineEnd: token('space.025'),
+		display: 'none',
+		'@media (min-width: 64rem)': {
+			// @ts-ignore
+			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+			'&&': {
+				display: 'initial',
+			},
+		},
+	},
+});
+
+function isTextClamped(element: HTMLElement): boolean {
+	// Checking for vertical height rather than horizontal height.
+	// When text is "clamped", it's technically being clamped vertically! 🤯
+	return element.scrollHeight > element.clientHeight;
+}
+
+
+/**
+ * __App logo__
+ *
+ * The app logo for the top navigation.
+ *
+ * To provide a responsive experience, label text will render next to an icon at larger viewports.
+ */
+export const AppLogo = ({
+	name,
+	label,
+	href,
+	icon,
+	onClick,
+}: {
+	/**
+	 * The name of the app. Will be displayed next to the logo in wider viewports, and is used as an accessible label at smaller viewports.
+	 */
+	name: string;
+	/**
+	 * Provide an accessible label, often used by screen readers.
+	 * This label should include the name of the app, and if applicable,
+	 * the location the user will navigate to on click.
+	 */
+	label: string;
+	/**
+	 * The URL to navigate to when the element is clicked.
+	 */
+	href: string;
+	/**
+	 * The icon to render.
+	 */
+	icon: ((props: LogoProps) => JSX.Element) | ((props: TempIconProps) => JSX.Element);
+	/**
+	 * Handler called on click.
+	 */
+	onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+}) => {
+	const ref = useRef<HTMLAnchorElement>(null);
+	const nameRef = useRef<HTMLSpanElement | null>(null);
+
+	const hasCustomTheme = useHasCustomTheme();
+
+	/**
+     * Show the tooltip if the name is truncated
+	 */
+	const canTooltipAppear = useCallback((): boolean => {
+		const text = nameRef.current;
+		return Boolean(text && isTextClamped(text));
+	}, []);
+
+	return (
+		<Anchor
+			ref={ref}
+			aria-label={label}
+			href={href}
+			// @ts-expect-error - non-standard values for `borderRadius` and the custom theming interaction states
+			// eslint-disable-next-line @compiled/no-suppress-xcss
+			xcss={cx(
+				anchorStyles.root,
+				fg('platform_design_system_nav_logo_interaction_states') && anchorStyles.newMargin,
+				fg('platform_design_system_nav_logo_interaction_states') &&
+					(hasCustomTheme
+						? anchorStyles.newInteractionStatesCustomTheming
+						: anchorStyles.newInteractionStates),
+			)}
+			onClick={onClick}
+		>
+			<Inline
+				space="space.075"
+				alignBlock="center"
+				xcss={logoWrapperStyles.root}
+				aria-label={label}
+			>
+				<div css={[iconContainerStyles.root]}>
+					<LogoRenderer logoOrIcon={icon} />
+				</div>
+				<span css={logoTextStyles.root}>
+					<Tooltip
+						content={name}
+						position="bottom"
+						ignoreTooltipPointerEvents
+						hideTooltipOnMouseDown
+						// We don't need a duplicate hidden element containing tooltip content
+                        // as the content of the tooltip matches what is rendered in the nav item.
+						isScreenReaderAnnouncementDisabled
+						canAppear={canTooltipAppear}
+					>
+						{(tooltipProps) => (
+							<span {...tooltipProps}>
+								<Text
+									aria-hidden={true}
+									color="inherit"
+									weight="semibold"
+									maxLines={1}
+									ref={nameRef}
+								>
+									{name}
+								</Text>
+							</span>
+						)}
+					</Tooltip>
+				</span>
+			</Inline>
+		</Anchor>
+	);
+};