@atlaskit/navigation-system 0.177.0 → 0.177.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlassian/navigation-system
 
+## 0.177.2
+
+### Patch Changes
+
+- [#198583](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/198583)
+  [`eaabec48bbfdc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/eaabec48bbfdc) -
+  Minor internal refactor to AppLogo to remove a component prop that was unused.
+- Updated dependencies
+
+## 0.177.1
+
+### Patch Changes
+
+- [#195513](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/195513)
+  [`1574f6e829fe4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1574f6e829fe4) -
+  Fix support for `currentColor` in icons used in `elemBefore` of `ExpandableMenuItemTrigger` to
+  ensure correct icon color in selected state.
+
 ## 0.177.0
 
 ### Minor Changes

package/constellation/index/examples.mdx

@@ -1,7 +1,5 @@
 import SectionMessage from '@atlaskit/section-message';
 
-import { InteractiveLayoutExample } from '../../examples/constellation/interactive-layout';
-
 Navigation is how users get around a site to complete their tasks. The navigation-system package
 provides the following:
 
@@ -31,9 +29,9 @@ For ready-made navigation experiences see
 
 ## Examples
 
-To see in full screen interactive example below, open the code sandbox below.
-
-<Example Component={InteractiveLayoutExample} appearance="source-only" />
+- <a href="https://go.atlassian.com/nav4-interactive-example" target="_blank">
+  	Full screen interactive example
+  </a> (only available for Atlassian employees at this stage).
 
 ## Related
 

package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.compiled.css

@@ -7,5 +7,6 @@
 ._1mmi1txw{--expandable-chevron-display:flex}
 ._1mmiglyw{--expandable-chevron-display:none}
 ._b31z1txw:has(:focus-visible), ._1vnl1txw:hover{--expandable-chevron-display:flex}
+._syaz1qo3{color:var(--ds-icon-selected,#0c66e4)}
 ._v9u71txw:has([aria-expanded=true][aria-haspopup=true]){--expandable-chevron-display:flex}
 [dir=rtl] ._1tz3r0mg{transform:scaleX(-1)}

package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.js

@@ -27,7 +27,8 @@ var wrapperStyles = {
 };
 var iconStyles = {
   chevron: "_1e0ciw0t _1tz3r0mg",
-  providedElemBefore: "_1e0c1xb2"
+  providedElemBefore: "_1e0c1xb2",
+  providedElemBeforeSelected: "_syaz1qo3"
 };
 var ExpandableMenuItemIcon = function ExpandableMenuItemIcon(_ref) {
   var iconProps = _ref.iconProps,
@@ -43,7 +44,7 @@ var ExpandableMenuItemIcon = function ExpandableMenuItemIcon(_ref) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)([iconStyles.chevron])
   }, chevronElem), providedElemBefore && /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _runtime.ax)([iconStyles.providedElemBefore])
+    className: (0, _runtime.ax)([iconStyles.providedElemBefore, isSelected && iconStyles.providedElemBeforeSelected])
   }, providedElemBefore));
 };
 /**

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

@@ -73,8 +73,7 @@ var AppLogo = exports.AppLogo = function AppLogo(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
     space: "space.075",
     alignBlock: "center",
-    xcss: logoWrapperStyles.root,
-    "aria-label": label
+    xcss: logoWrapperStyles.root
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)([iconContainerStyles.root])
   }, /*#__PURE__*/_react.default.createElement(_logoRenderer.LogoRenderer

package/dist/es2019/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.compiled.css

@@ -7,5 +7,6 @@
 ._1mmi1txw{--expandable-chevron-display:flex}
 ._1mmiglyw{--expandable-chevron-display:none}
 ._b31z1txw:has(:focus-visible), ._1vnl1txw:hover{--expandable-chevron-display:flex}
+._syaz1qo3{color:var(--ds-icon-selected,#0c66e4)}
 ._v9u71txw:has([aria-expanded=true][aria-haspopup=true]){--expandable-chevron-display:flex}
 [dir=rtl] ._1tz3r0mg{transform:scaleX(-1)}

package/dist/es2019/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.js

@@ -18,7 +18,8 @@ const wrapperStyles = {
 };
 const iconStyles = {
   chevron: "_1e0ciw0t _1tz3r0mg",
-  providedElemBefore: "_1e0c1xb2"
+  providedElemBefore: "_1e0c1xb2",
+  providedElemBeforeSelected: "_syaz1qo3"
 };
 const ExpandableMenuItemIcon = ({
   iconProps,
@@ -35,7 +36,7 @@ const ExpandableMenuItemIcon = ({
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: ax([iconStyles.chevron])
   }, chevronElem), providedElemBefore && /*#__PURE__*/React.createElement("div", {
-    className: ax([iconStyles.providedElemBefore])
+    className: ax([iconStyles.providedElemBefore, isSelected && iconStyles.providedElemBeforeSelected])
   }, providedElemBefore));
 };
 /**

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

@@ -65,8 +65,7 @@ export const AppLogo = ({
   }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.075",
     alignBlock: "center",
-    xcss: logoWrapperStyles.root,
-    "aria-label": label
+    xcss: logoWrapperStyles.root
   }, /*#__PURE__*/React.createElement("div", {
     className: ax([iconContainerStyles.root])
   }, /*#__PURE__*/React.createElement(LogoRenderer

package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.compiled.css

@@ -7,5 +7,6 @@
 ._1mmi1txw{--expandable-chevron-display:flex}
 ._1mmiglyw{--expandable-chevron-display:none}
 ._b31z1txw:has(:focus-visible), ._1vnl1txw:hover{--expandable-chevron-display:flex}
+._syaz1qo3{color:var(--ds-icon-selected,#0c66e4)}
 ._v9u71txw:has([aria-expanded=true][aria-haspopup=true]){--expandable-chevron-display:flex}
 [dir=rtl] ._1tz3r0mg{transform:scaleX(-1)}

package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.js

@@ -18,7 +18,8 @@ var wrapperStyles = {
 };
 var iconStyles = {
   chevron: "_1e0ciw0t _1tz3r0mg",
-  providedElemBefore: "_1e0c1xb2"
+  providedElemBefore: "_1e0c1xb2",
+  providedElemBeforeSelected: "_syaz1qo3"
 };
 var ExpandableMenuItemIcon = function ExpandableMenuItemIcon(_ref) {
   var iconProps = _ref.iconProps,
@@ -34,7 +35,7 @@ var ExpandableMenuItemIcon = function ExpandableMenuItemIcon(_ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: ax([iconStyles.chevron])
   }, chevronElem), providedElemBefore && /*#__PURE__*/React.createElement("div", {
-    className: ax([iconStyles.providedElemBefore])
+    className: ax([iconStyles.providedElemBefore, isSelected && iconStyles.providedElemBeforeSelected])
   }, providedElemBefore));
 };
 /**

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

@@ -64,8 +64,7 @@ export var AppLogo = function AppLogo(_ref) {
   }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.075",
     alignBlock: "center",
-    xcss: logoWrapperStyles.root,
-    "aria-label": label
+    xcss: logoWrapperStyles.root
   }, /*#__PURE__*/React.createElement("div", {
     className: ax([iconContainerStyles.root])
   }, /*#__PURE__*/React.createElement(LogoRenderer

package/examples/expandable-menu-item.tsx

@@ -212,6 +212,19 @@ export const ExpandableMenuItemSelectedWithIcon = () => (
 						<ButtonMenuItem>Item 2</ButtonMenuItem>
 					</ExpandableMenuItemContent>
 				</ExpandableMenuItem>
+				<ExpandableMenuItem>
+					<ExpandableMenuItemTrigger
+						href="#test"
+						isSelected
+						elemBefore={<HomeIcon label="" color="currentColor" />}
+					>
+						Parent menu item (with currentColor)
+					</ExpandableMenuItemTrigger>
+					<ExpandableMenuItemContent>
+						<ButtonMenuItem>Item 1</ButtonMenuItem>
+						<ButtonMenuItem>Item 2</ButtonMenuItem>
+					</ExpandableMenuItemContent>
+				</ExpandableMenuItem>
 			</MenuList>
 		</SideNavContent>
 	</div>

package/examples/{constellation/interactive-layout.tsx → interactive-layout.tsx}

@@ -49,8 +49,8 @@ import {
 import { Inline, Stack, Text } from '@atlaskit/primitives';
 import { token } from '@atlaskit/tokens';
 
-import { WithResponsiveViewport } from '../utils/example-utils';
-import { LongPlaceholderContent } from '../utils/long-placeholder-content';
+import { WithResponsiveViewport } from './utils/example-utils';
+import { LongPlaceholderContent } from './utils/long-placeholder-content';
 
 const bannerStyles = cssMap({
 	root: {

package/examples/{top-nav-with-temp-nav-app-icon.tsx → top-nav-with-temp-nav-app-icon-app-logo.tsx}

@@ -26,7 +26,7 @@ import { WithResponsiveViewport } from './utils/example-utils';
 
 const Badge = () => <AKBadge appearance="important">{5}</AKBadge>;
 
-export default function TopNavWithTempNavAppIcon() {
+export function TopNavWithTempNavAppIconAppLogo() {
 	return (
 		<WithResponsiveViewport>
 			{/**
@@ -61,3 +61,5 @@ export default function TopNavWithTempNavAppIcon() {
 		</WithResponsiveViewport>
 	);
 }
+
+export default TopNavWithTempNavAppIconAppLogo;

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

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import AKBadge from '@atlaskit/badge';
+import { Root } from '@atlaskit/navigation-system/layout/root';
+import { SideNavToggleButton } from '@atlaskit/navigation-system/layout/side-nav';
+import {
+	TopNav,
+	TopNavEnd,
+	TopNavMiddle,
+	TopNavStart,
+} from '@atlaskit/navigation-system/layout/top-nav';
+import {
+	AppSwitcher,
+	ChatButton,
+	CreateButton,
+	CustomLogo,
+	Help,
+	Notifications,
+	Profile,
+	Search,
+	Settings,
+} from '@atlaskit/navigation-system/top-nav-items';
+import { FocusIcon, FocusLogo } from '@atlaskit/temp-nav-app-icons/focus';
+
+import { WithResponsiveViewport } from './utils/example-utils';
+
+const Badge = () => <AKBadge appearance="important">{5}</AKBadge>;
+
+export default function TopNavWithTempNavAppIcon() {
+	return (
+		<WithResponsiveViewport>
+			{/**
+			 * Wrapping in `Root to ensure the TopNav height is set correctly, as it would in a proper composed usage.
+			 * Root sets the top bar height CSS variable that TopNav uses to set its height
+			 */}
+			<Root>
+				<TopNav>
+					<TopNavStart>
+						<SideNavToggleButton collapseLabel="Collapse sidebar" expandLabel="Expand sidebar" />
+						<AppSwitcher label="App switcher" />
+						<CustomLogo
+							href="http://www.atlassian.design"
+							icon={FocusIcon}
+							logo={FocusLogo}
+							label="Home page"
+						/>
+					</TopNavStart>
+					<TopNavMiddle>
+						<Search label="Search" />
+						<CreateButton>Create</CreateButton>
+					</TopNavMiddle>
+					<TopNavEnd>
+						<ChatButton>Chat</ChatButton>
+						<Notifications label="Notifications" badge={Badge} />
+						<Help label="Help" />
+						<Settings label="Settings" />
+						<Profile label="Your profile" />
+					</TopNavEnd>
+				</TopNav>
+			</Root>
+		</WithResponsiveViewport>
+	);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "0.177.0",
+	"version": "0.177.2",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -116,7 +116,7 @@
 		"@atlaskit/button": "^23.3.0",
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/ds-lib": "^5.0.0",
-		"@atlaskit/icon": "^27.9.0",
+		"@atlaskit/icon": "^27.10.0",
 		"@atlaskit/layering": "^3.0.0",
 		"@atlaskit/logo": "^19.6.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
@@ -142,10 +142,10 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/react-unit-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/app-provider": "^3.0.0",
+		"@atlaskit/app-provider": "^3.1.0",
 		"@atlaskit/badge": "^18.1.0",
 		"@atlaskit/banner": "^14.0.0",
-		"@atlaskit/breadcrumbs": "^15.2.0",
+		"@atlaskit/breadcrumbs": "^15.3.0",
 		"@atlaskit/dropdown-menu": "^16.3.0",
 		"@atlaskit/form": "^12.0.0",
 		"@atlaskit/heading": "^5.2.0",
@@ -158,7 +158,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
 		"@atlaskit/select": "^21.2.0",
 		"@atlaskit/skeleton": "^2.1.0",
-		"@atlaskit/temp-nav-app-icons": "^0.9.0",
+		"@atlaskit/temp-nav-app-icons": "^0.10.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@atlassian/gemini": "^1.19.0",
@@ -168,8 +168,7 @@
 		"@testing-library/react-hooks": "^8.0.1",
 		"@testing-library/user-event": "^14.4.3",
 		"raf-stub": "^2.0.1",
-		"react-dom": "^18.2.0",
-		"typescript": "~5.4.2"
+		"react-dom": "^18.2.0"
 	},
 	"techstack": {
 		"@atlassian/frontend": {

package/src/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.tsx

@@ -95,6 +95,9 @@ const iconStyles = cssMap({
 	providedElemBefore: {
 		display: `var(${providedElemBeforeDisplayCssVar})`,
 	},
+	providedElemBeforeSelected: {
+		color: token('color.icon.selected'),
+	},
 });
 
 const ExpandableMenuItemIcon = ({
@@ -118,7 +121,13 @@ const ExpandableMenuItemIcon = ({
 		<>
 			<div css={iconStyles.chevron}>{chevronElem}</div>
 			{/* If there is no provided elemBefore, not rendering the wrapper either to simplify the DOM */}
-			{providedElemBefore && <div css={iconStyles.providedElemBefore}>{providedElemBefore}</div>}
+			{providedElemBefore && (
+				<div
+					css={[iconStyles.providedElemBefore, isSelected && iconStyles.providedElemBeforeSelected]}
+				>
+					{providedElemBefore}
+				</div>
+			)}
 		</>
 	);
 };

package/src/ui/page-layout/__tests__/unit/_test-utils.tsx

@@ -1,9 +1,3 @@
-import React, { type ReactNode, Suspense } from 'react';
-
-import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
-
-import { getSuspenseResource } from '@af/react-unit-testing/suspense-resource';
-
 export function resetMatchMedia() {
 	const mediaNoop: MediaQueryList = {
 		media: '',
@@ -189,49 +183,3 @@ export function filterFromConsoleErrorOutput(searchString: RegExp): ResetConsole
 // Expected error due to jsdom not knowing how to parse the `@starting-style` at-rule.
 // See: https://github.com/jsdom/jsdom/issues/3236
 export const parseCssErrorRegex = /Could not parse CSS stylesheet/;
-
-// TODO: pull into a jest matcher:
-// expect(<App/>).toWorkWithSuspense();
-export async function runSuspenseTest(node: ReactNode) {
-	const resource = getSuspenseResource();
-
-	function ResourceContent() {
-		resource.read();
-
-		return <span>Content</span>;
-	}
-
-	function App() {
-		return (
-			<>
-				<Suspense fallback={<div data-testid="suspense" />}>
-					<div data-testid="suspense-child">
-						{node}
-						<ResourceContent />
-					</div>
-				</Suspense>
-				<div>hi</div>
-			</>
-		);
-	}
-
-	// Initial render with no suspense
-	const { rerender } = render(<App />);
-
-	expect(screen.queryByTestId('suspense')).not.toBeInTheDocument();
-	expect(screen.getByTestId('suspense-child')).toBeVisible();
-
-	// Render again while suspended
-	const { complete } = resource.load();
-	rerender(<App />);
-
-	expect(screen.getByTestId('suspense')).toBeInTheDocument();
-	expect(screen.getByTestId('suspense-child')).not.toBeVisible();
-
-	// Resolve promise (which will cause a re-render)
-	complete();
-	await waitForElementToBeRemoved(() => screen.queryByTestId('suspense'));
-
-	expect(screen.queryByTestId('suspense')).not.toBeInTheDocument();
-	expect(screen.getByTestId('suspense-child')).toBeVisible();
-}

package/src/ui/page-layout/__tests__/unit/panel-splitter-and-suspense.test.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { toBeSuspendable } from '@af/react-unit-testing';
+
 import { PanelSplitter } from '../../panel-splitter/panel-splitter';
 import { Root } from '../../root';
 import { SideNav } from '../../side-nav/side-nav';
@@ -10,7 +12,6 @@ import {
 	parseCssErrorRegex,
 	type ResetConsoleErrorFn,
 	resetMatchMedia,
-	runSuspenseTest,
 } from './_test-utils';
 
 let resetConsoleErrorSpyFn: ResetConsoleErrorFn;
@@ -26,13 +27,17 @@ beforeEach(() => {
 	resetMatchMedia();
 });
 
+expect.extend({
+	toBeSuspendable,
+});
+
 test('panel splitter works with suspense', async () => {
-	await runSuspenseTest(
+	expect(() => (
 		<Root>
 			<SideNav>
 				<SideNavContent>Side navigation content</SideNavContent>
 				<PanelSplitter label="Resize side nav" />
 			</SideNav>
-		</Root>,
-	);
+		</Root>
+	)).toBeSuspendable();
 });

package/src/ui/page-layout/__tests__/unit/react-safety.test.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { toBeSuspendable, toPassStrictMode } from '@af/react-unit-testing';
+
+import CompositionExample from '../../../../../examples/composition';
+
+import { resetMatchMedia } from './_test-utils';
+
+beforeEach(() => {
+	resetMatchMedia();
+});
+
+// TODO: move to `jestFrameworkSetup.js` in follow up pull request
+expect.extend({
+	toBeSuspendable,
+	toPassStrictMode,
+});
+
+it('should support being suspended', async () => {
+	await expect(() => <CompositionExample />).toBeSuspendable();
+});
+
+it('should be strict mode compliant', async () => {
+	await expect(() => <CompositionExample />).toPassStrictMode();
+});

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

@@ -1,7 +1,7 @@
 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 { TopNavWithTempNavAppIconAppLogo } from '../../../../../examples/top-nav-with-temp-nav-app-icon-app-logo';
 import { TopNavigationExample } from '../../../../../examples/top-navigation';
 import { TopNavigationThemingSingleExample } from '../../../../../examples/top-navigation-theming';
 
@@ -58,7 +58,7 @@ const interactionStateSharedOptions: Parameters<typeof snapshotInformational>[1]
  *
  * Can make all these normal VR tests once pressed state variants are added to Gemini.
  */
-snapshotInformational(TopNavWithTempNavAppIcon, {
+snapshotInformational(TopNavWithTempNavAppIconAppLogo, {
 	...interactionStateSharedOptions,
 	description: 'nav logo hover',
 	featureFlags: {
@@ -69,7 +69,7 @@ snapshotInformational(TopNavWithTempNavAppIcon, {
 	},
 });
 
-snapshotInformational(TopNavWithTempNavAppIcon, {
+snapshotInformational(TopNavWithTempNavAppIconAppLogo, {
 	...interactionStateSharedOptions,
 	description: 'nav logo pressed',
 	featureFlags: {

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

@@ -163,12 +163,7 @@ export const AppLogo = ({
 			)}
 			onClick={onClick}
 		>
-			<Inline
-				space="space.075"
-				alignBlock="center"
-				xcss={logoWrapperStyles.root}
-				aria-label={label}
-			>
+			<Inline space="space.075" alignBlock="center" xcss={logoWrapperStyles.root}>
 				<div css={[iconContainerStyles.root]}>
 					<LogoRenderer
 						// Top nav always uses the new logo design

package/src/ui/page-layout/__tests__/unit/suspense.test.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-
-import CompositionExample from '../../../../../examples/composition';
-
-beforeEach(() => {
-	resetMatchMedia();
-});
-
-import { resetMatchMedia, runSuspenseTest } from './_test-utils';
-
-it('should support being suspended', async () => {
-	await runSuspenseTest(<CompositionExample />);
-});