@atlaskit/navigation-system 0.176.0 → 0.176.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlassian/navigation-system
 
+## 0.176.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.176.1
+
+### Patch Changes
+
+- [#193214](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/193214)
+  [`c661806a65543`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c661806a65543) -
+  Internal changes to how border radius and border width values are applied. No visual change.
+- Updated dependencies
+
 ## 0.176.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -14,7 +14,13 @@
 	"exclude": [
 		"../src/**/__tests__/*",
 		"../src/**/*.test.*",
-		"../src/**/test.*"
+		"../src/**/test.*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
 	],
 	"references": [
 		{

package/afm-dev-agents/tsconfig.json

@@ -14,7 +14,13 @@
 	"exclude": [
 		"../src/**/__tests__/*",
 		"../src/**/*.test.*",
-		"../src/**/test.*"
+		"../src/**/test.*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
 	],
 	"references": [
 		{

package/afm-jira/tsconfig.json

@@ -14,7 +14,13 @@
 	"exclude": [
 		"../src/**/__tests__/*",
 		"../src/**/*.test.*",
-		"../src/**/test.*"
+		"../src/**/test.*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
 	],
 	"references": [
 		{

package/afm-passionfruit/tsconfig.json

@@ -14,7 +14,13 @@
 	"exclude": [
 		"../src/**/__tests__/*",
 		"../src/**/*.test.*",
-		"../src/**/test.*"
+		"../src/**/test.*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
 	],
 	"references": [
 		{

package/afm-post-office/tsconfig.json

@@ -14,7 +14,13 @@
 	"exclude": [
 		"../src/**/__tests__/*",
 		"../src/**/*.test.*",
-		"../src/**/test.*"
+		"../src/**/test.*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
 	],
 	"references": [
 		{

package/afm-rovo-extension/tsconfig.json

@@ -14,7 +14,13 @@
 	"exclude": [
 		"../src/**/__tests__/*",
 		"../src/**/*.test.*",
-		"../src/**/test.*"
+		"../src/**/test.*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
 	],
 	"references": [
 		{

package/afm-townsquare/tsconfig.json

@@ -14,7 +14,13 @@
 	"exclude": [
 		"../src/**/__tests__/*",
 		"../src/**/*.test.*",
-		"../src/**/test.*"
+		"../src/**/test.*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
 	],
 	"references": [
 		{

package/build/tsconfig.json

@@ -12,6 +12,12 @@
   "exclude": [
     "../src/**/__tests__/*",
     "../src/**/*.test.*",
-    "../src/**/test.*"
+    "../src/**/test.*",
+    "../src/**/examples.*",
+    "../src/**/examples/*",
+    "../src/**/examples/**/*",
+    "../src/**/*.stories.*",
+    "../src/**/stories/*",
+    "../src/**/stories/**/*"
   ]
-}
+}

package/constellation/layout/diagram.tsx

@@ -22,7 +22,7 @@ const styles = cssMap({
 		paddingBottom: token('space.100'),
 		paddingLeft: token('space.100'),
 		marginBottom: token('space.100'),
-		borderWidth: '1px',
+		borderWidth: token('border.width'),
 		borderStyle: 'solid',
 		borderColor: token('color.border'),
 		borderRadius: token('border.radius'),
@@ -58,7 +58,7 @@ const styles = cssMap({
 		width: '100%',
 		height: '100%',
 		backgroundColor: token('color.background.neutral'),
-		borderWidth: '1px',
+		borderWidth: token('border.width'),
 		borderStyle: 'solid',
 		borderColor: token('color.border'),
 		borderRadius: token('border.radius'),

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

@@ -291,8 +291,8 @@ For `actions` and `actionsOnHover`, when there is more than one icon button, use
 
 ### Write labels in sentence case for menu items and labels
 
-Only capitalize the first letter of the menu item name, unless the label contains a trademarked
-product or feature name that has been approved by legal.
+Only capitalize the first letter of the menu item name, unless the label contains a trademarked app
+or feature name that has been approved by legal.
 
 If the menu name is user generated, display as is.
 
@@ -313,8 +313,8 @@ If the menu name is user generated, display as is.
 		alt: 'A menu item with "For You" label using title case.',
 	}}
 >
-	Don't capitalize other parts of the label unless it is a trademarked product or feature name (not
-	all features are capitalized).
+	Don't capitalize other parts of the label unless it is a trademarked app or feature name (not all
+	features are capitalized).
 </DoDont>
 
 ## Related

package/dist/cjs/ui/top-nav-items/nav-logo/custom-logo.compiled.css

@@ -1,6 +1,5 @@
 
-._2rko1l7b{border-radius:3px}
-._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}
 ._18zr1b66{padding-inline:var(--ds-space-050,4px)}
 ._18zru2gc{padding-inline:var(--ds-space-100,8px)}._18m915vq{overflow-y:hidden}
 ._1e0c1txw{display:flex}

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

@@ -17,8 +17,8 @@ var _logoRenderer = require("./logo-renderer");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 var anchorStyles = {
-  root: "_2rkoiti9 _1e0c1txw _4cvr1h6o _4t3izwfg",
-  customLogoBorderRadius: "_2rko1l7b",
+  root: "_2rkosqtm _1e0c1txw _4cvr1h6o _4t3izwfg",
+  customLogoBorderRadius: "_2rkosqtm",
   newMargin: "_ahbq1b66",
   newInteractionStates: "_irr3166n _1di61wwy",
   newInteractionStatesCustomTheming: "_irr31rps _1di6yhlj"

package/dist/es2019/ui/top-nav-items/nav-logo/custom-logo.compiled.css

@@ -1,6 +1,5 @@
 
-._2rko1l7b{border-radius:3px}
-._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}
 ._18zr1b66{padding-inline:var(--ds-space-050,4px)}
 ._18zru2gc{padding-inline:var(--ds-space-100,8px)}._18m915vq{overflow-y:hidden}
 ._1e0c1txw{display:flex}

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

@@ -9,8 +9,8 @@ import { Anchor } from '@atlaskit/primitives';
 import { useHasCustomTheme } from '../themed/has-custom-theme-context';
 import { LogoRenderer } from './logo-renderer';
 const anchorStyles = {
-  root: "_2rkoiti9 _1e0c1txw _4cvr1h6o _4t3izwfg",
-  customLogoBorderRadius: "_2rko1l7b",
+  root: "_2rkosqtm _1e0c1txw _4cvr1h6o _4t3izwfg",
+  customLogoBorderRadius: "_2rkosqtm",
   newMargin: "_ahbq1b66",
   newInteractionStates: "_irr3166n _1di61wwy",
   newInteractionStatesCustomTheming: "_irr31rps _1di6yhlj"

package/dist/esm/ui/top-nav-items/nav-logo/custom-logo.compiled.css

@@ -1,6 +1,5 @@
 
-._2rko1l7b{border-radius:3px}
-._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}
 ._18zr1b66{padding-inline:var(--ds-space-050,4px)}
 ._18zru2gc{padding-inline:var(--ds-space-100,8px)}._18m915vq{overflow-y:hidden}
 ._1e0c1txw{display:flex}

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

@@ -9,8 +9,8 @@ import { Anchor } from '@atlaskit/primitives';
 import { useHasCustomTheme } from '../themed/has-custom-theme-context';
 import { LogoRenderer } from './logo-renderer';
 var anchorStyles = {
-  root: "_2rkoiti9 _1e0c1txw _4cvr1h6o _4t3izwfg",
-  customLogoBorderRadius: "_2rko1l7b",
+  root: "_2rkosqtm _1e0c1txw _4cvr1h6o _4t3izwfg",
+  customLogoBorderRadius: "_2rkosqtm",
   newMargin: "_ahbq1b66",
   newInteractionStates: "_irr3166n _1di61wwy",
   newInteractionStatesCustomTheming: "_irr31rps _1di6yhlj"

package/dist/types/ui/top-nav-items/nav-logo/logo-renderer.d.ts

@@ -7,7 +7,7 @@ import type { LogoProps } from '@atlaskit/logo';
 import type { IconProps as TempIconProps, LogoProps as TempLogoProps } from '@atlaskit/temp-nav-app-icons/types';
 export declare const themedLogoIcon = "--ds-top-bar-logo-icon";
 export declare const themedLogoText = "--ds-top-bar-logo-text";
-export declare function LogoRenderer({ logoOrIcon, shouldUseNewLogoDesign }: React.ComponentProps<typeof LogoRendererNoMemo>): JSX.Element;
+export declare function LogoRenderer({ logoOrIcon, shouldUseNewLogoDesign, }: React.ComponentProps<typeof LogoRendererNoMemo>): JSX.Element;
 declare function LogoRendererNoMemo({ logoOrIcon: LogoOrIcon, shouldUseNewLogoDesign, }: {
     logoOrIcon: ((props: LogoProps) => JSX.Element) | ((props: TempLogoProps) => JSX.Element) | ((props: TempIconProps) => JSX.Element);
     shouldUseNewLogoDesign?: boolean;

package/dist/types-ts4.5/ui/top-nav-items/nav-logo/logo-renderer.d.ts

@@ -7,7 +7,7 @@ import type { LogoProps } from '@atlaskit/logo';
 import type { IconProps as TempIconProps, LogoProps as TempLogoProps } from '@atlaskit/temp-nav-app-icons/types';
 export declare const themedLogoIcon = "--ds-top-bar-logo-icon";
 export declare const themedLogoText = "--ds-top-bar-logo-text";
-export declare function LogoRenderer({ logoOrIcon, shouldUseNewLogoDesign }: React.ComponentProps<typeof LogoRendererNoMemo>): JSX.Element;
+export declare function LogoRenderer({ logoOrIcon, shouldUseNewLogoDesign, }: React.ComponentProps<typeof LogoRendererNoMemo>): JSX.Element;
 declare function LogoRendererNoMemo({ logoOrIcon: LogoOrIcon, shouldUseNewLogoDesign, }: {
     logoOrIcon: ((props: LogoProps) => JSX.Element) | ((props: TempLogoProps) => JSX.Element) | ((props: TempIconProps) => JSX.Element);
     shouldUseNewLogoDesign?: boolean;

package/docs/00-intro.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { md } from '@atlaskit/docs';
+import Link from '@atlaskit/link';
+import SectionMessage from '@atlaskit/section-message';
+
+export default md`
+${(
+	<SectionMessage appearance="information">
+		This component is documented on{' '}
+		<Link href="https://atlassian.design/components/navigation-system">atlassian.design</Link>
+	</SectionMessage>
+)}
+`;

package/examples/confluence-mock.tsx

@@ -239,7 +239,7 @@ export default function ConfluenceMockExample({}: {}) {
 								<Text as="p">
 									The Atlassian Design System provides a complete set of UI components, patterns,
 									and guidelines for creating consistent and beautiful user experiences across
-									Atlassian products.
+									Atlassian apps.
 								</Text>
 								<Text as="p">
 									Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi labore corporis

package/examples/menu-list.tsx

@@ -19,7 +19,7 @@ const styles = cssMap({
 	root: {
 		width: '300px',
 		borderColor: token('color.border.accent.gray'),
-		borderWidth: '1px',
+		borderWidth: token('border.width'),
 		borderStyle: 'solid',
 	},
 });

package/examples/menu-section.tsx

@@ -23,7 +23,7 @@ const styles = cssMap({
 		width: '300px',
 	},
 	blackBorder: {
-		borderWidth: '1px',
+		borderWidth: token('border.width'),
 		borderStyle: 'solid',
 		borderColor: 'black',
 		borderRadius: token('border.radius.100', '3px'),

package/examples/top-navigation-stress.tsx

@@ -41,7 +41,9 @@ import { WithResponsiveViewport } from './utils/example-utils';
 import { MockRoot } from './utils/mock-root';
 import { MockSearch } from './utils/mock-search';
 
-const connieCustomLogo = <AppLogo href="" icon={ConfluenceIcon} name="Confluence" label="Home page" />;
+const connieCustomLogo = (
+	<AppLogo href="" icon={ConfluenceIcon} name="Confluence" label="Home page" />
+);
 // Stress test nav responsive behaviour with a wide logo
 const wideCustomLogo = (
 	<CustomLogo

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

@@ -66,12 +66,12 @@ const TopNavigation = ({ customTheme }: { customTheme?: CustomTheme }) => {
 					onClick={toggleIsAppSwitcherSelected}
 					isSelected={isAppSwitcherSelected}
 				/>
-					<AppLogo
-						href="http://www.atlassian.design"
-						icon={ConfluenceIcon}
-						name="Confluence"
-						label="Home page"
-					/>
+				<AppLogo
+					href="http://www.atlassian.design"
+					icon={ConfluenceIcon}
+					name="Confluence"
+					label="Home page"
+				/>
 			</TopNavStart>
 			<TopNavMiddle>
 				<MockSearch />

package/examples/top-navigation.tsx

@@ -46,12 +46,12 @@ export const TopNavigationExample = () => (
 				<TopNavStart>
 					<SideNavToggleButton collapseLabel="Collapse sidebar" expandLabel="Expand sidebar" />
 					<AppSwitcher label="App switcher" onClick={() => alert('app switcher')} />
-						<AppLogo
-							href="http://www.atlassian.design"
-							icon={ConfluenceIcon}
-							name="Confluence"
-							label="Home page"
-						/>
+					<AppLogo
+						href="http://www.atlassian.design"
+						icon={ConfluenceIcon}
+						name="Confluence"
+						label="Home page"
+					/>
 				</TopNavStart>
 				<TopNavMiddle>
 					<Search onClick={() => alert('mobile search')} label="Search" />

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "0.176.0",
-	"description": "The latest navigation system for Atlassian products.",
+	"version": "0.176.2",
+	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
 	"publishConfig": {
@@ -116,7 +116,7 @@
 		"@atlaskit/button": "^23.3.0",
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/ds-lib": "^5.0.0",
-		"@atlaskit/icon": "^27.8.0",
+		"@atlaskit/icon": "^27.9.0",
 		"@atlaskit/layering": "^3.0.0",
 		"@atlaskit/logo": "^19.6.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
@@ -125,7 +125,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^14.11.0",
-		"@atlaskit/tokens": "^5.6.0",
+		"@atlaskit/tokens": "^6.0.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -142,7 +142,7 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/react-unit-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/app-provider": "^2.3.0",
+		"@atlaskit/app-provider": "^3.0.0",
 		"@atlaskit/badge": "^18.1.0",
 		"@atlaskit/banner": "^14.0.0",
 		"@atlaskit/breadcrumbs": "^15.2.0",
@@ -157,12 +157,12 @@
 		"@atlaskit/page-layout": "^4.2.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
 		"@atlaskit/select": "^21.2.0",
-		"@atlaskit/skeleton": "^2.0.0",
+		"@atlaskit/skeleton": "^2.1.0",
 		"@atlaskit/temp-nav-app-icons": "^0.9.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@atlassian/gemini": "^1.19.0",
-		"@atlassian/search-dialog": "^9.5.0",
+		"@atlassian/search-dialog": "^9.6.0",
 		"@axe-core/playwright": "^4.8.0",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/react-hooks": "^8.0.1",

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

@@ -129,7 +129,7 @@ export const AppLogo = ({
 	/**
 	 * The icon to render.
 	 */
-	icon: ((props: LogoProps) => JSX.Element);
+	icon: (props: LogoProps) => JSX.Element;
 	/**
 	 * Handler called on click.
 	 */

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

@@ -25,10 +25,10 @@ const anchorStyles = cssMap({
 		display: 'flex',
 		alignItems: 'center',
 		height: '32px',
-		borderRadius: token('border.radius.100'),
+		borderRadius: token('border.radius.100', '3px'),
 	},
 	customLogoBorderRadius: {
-		borderRadius: '3px',
+		borderRadius: token('border.radius.100', '3px'),
 	},
 	newMargin: {
 		// Additional margin is added to the left of the interactive element, to create visual alignment

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

@@ -18,7 +18,10 @@ import { useHasCustomTheme } from '../themed/has-custom-theme-context';
 export const themedLogoIcon = '--ds-top-bar-logo-icon';
 export const themedLogoText = '--ds-top-bar-logo-text';
 
-export function LogoRenderer({ logoOrIcon, shouldUseNewLogoDesign }: React.ComponentProps<typeof LogoRendererNoMemo>) {
+export function LogoRenderer({
+	logoOrIcon,
+	shouldUseNewLogoDesign,
+}: React.ComponentProps<typeof LogoRendererNoMemo>) {
 	return fg('jiv-20710-fix-nav-rerender') ? (
 		<LogoRendererMemo logoOrIcon={logoOrIcon} shouldUseNewLogoDesign={shouldUseNewLogoDesign} />
 	) : (
@@ -52,5 +55,12 @@ function LogoRendererNoMemo({
 		);
 	}
 
-	return <LogoOrIcon size="small" shouldUseNewLogoDesign={shouldUseNewLogoDesign} label="" appearance="brand" />;
+	return (
+		<LogoOrIcon
+			size="small"
+			shouldUseNewLogoDesign={shouldUseNewLogoDesign}
+			label=""
+			appearance="brand"
+		/>
+	);
 }

package/tsconfig.json

@@ -1,15 +1,20 @@
 {
-	"extends": "../../../tsconfig.json",
-	"include": [
-		"./src/**/*.ts",
-		"./src/**/*.tsx",
-		"./docs/**/*.ts",
-		"./docs/**/*.tsx",
-		"./examples/**/*.ts",
-		"./examples/**/*.tsx",
-		"./example-helpers/**/*.ts",
-		"./example-helpers/**/*.tsx"
-	],
-	"compilerOptions": {
-	}
+  "extends": "../../../tsconfig.json",
+  "include": [
+    "./src/**/*.ts",
+    "./src/**/*.tsx",
+    "./docs/**/*.ts",
+    "./docs/**/*.tsx",
+    "./examples/**/*.ts",
+    "./examples/**/*.tsx",
+    "./example-helpers/**/*.ts",
+    "./example-helpers/**/*.tsx",
+    "**/stories.ts",
+    "**/stories.tsx",
+    "**/stories/*.ts",
+    "**/stories/*.tsx",
+    "**/stories/**/*.ts",
+    "**/stories/**/*.tsx"
+  ],
+  "compilerOptions": {}
 }