@atlaskit/navigation-system 0.176.2 → 0.177.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlassian/navigation-system
 
+## 0.177.0
+
+### Minor Changes
+
+- [`e12d813a2d3fd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e12d813a2d3fd) -
+  The default height of the Banner layout area has been updated to 48px, down from 64px, to align
+  with the height of the @atlaskit/banner component. This change was previously behind a feature
+  flag, which has now been removed.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.176.2
 
 ### Patch Changes

package/dist/cjs/ui/page-layout/banner.js

@@ -10,7 +10,6 @@ require("./banner.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _skipLinksContext = require("../../context/skip-links/skip-links-context");
 var _constants = require("./constants");
 var _hoistSlotSizesContext = require("./hoist-slot-sizes-context");
@@ -30,7 +29,7 @@ function Banner(_ref) {
   var children = _ref.children,
     xcss = _ref.xcss,
     _ref$height = _ref.height,
-    height = _ref$height === void 0 ? (0, _platformFeatureFlags.fg)('platform_dst_nav4_banner_default_height') ? 48 : 64 : _ref$height,
+    height = _ref$height === void 0 ? 48 : _ref$height,
     _ref$skipLinkLabel = _ref.skipLinkLabel,
     skipLinkLabel = _ref$skipLinkLabel === void 0 ? 'Banner' : _ref$skipLinkLabel,
     testId = _ref.testId,

package/dist/es2019/ui/page-layout/banner.js

@@ -3,7 +3,6 @@ import "./banner.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useContext } from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { useSkipLinkInternal } from '../../context/skip-links/skip-links-context';
 import { bannerMountedVar, localSlotLayers, UNSAFE_bannerVar } from './constants';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
@@ -22,7 +21,7 @@ export function Banner({
   children,
   xcss,
   // 48px has been chosen to align with the height of the Banner component from `@atlaskit/banner`.
-  height = fg('platform_dst_nav4_banner_default_height') ? 48 : 64,
+  height = 48,
   skipLinkLabel = 'Banner',
   testId,
   id: providedId

package/dist/esm/ui/page-layout/banner.js

@@ -3,7 +3,6 @@ import "./banner.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useContext } from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { useSkipLinkInternal } from '../../context/skip-links/skip-links-context';
 import { bannerMountedVar, localSlotLayers, UNSAFE_bannerVar } from './constants';
 import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
@@ -22,7 +21,7 @@ export function Banner(_ref) {
   var children = _ref.children,
     xcss = _ref.xcss,
     _ref$height = _ref.height,
-    height = _ref$height === void 0 ? fg('platform_dst_nav4_banner_default_height') ? 48 : 64 : _ref$height,
+    height = _ref$height === void 0 ? 48 : _ref$height,
     _ref$skipLinkLabel = _ref.skipLinkLabel,
     skipLinkLabel = _ref$skipLinkLabel === void 0 ? 'Banner' : _ref$skipLinkLabel,
     testId = _ref.testId,

package/dist/types/ui/page-layout/banner.d.ts

@@ -18,6 +18,8 @@ export declare function Banner({ children, xcss, height, skipLinkLabel, testId,
     xcss?: StrictXCSSProp<'backgroundColor', never>;
     /**
      * The height of the layout area.
+     *
+     * Defaults to 48px.
      */
     height?: number;
 }): JSX.Element;

package/dist/types-ts4.5/ui/page-layout/banner.d.ts

@@ -18,6 +18,8 @@ export declare function Banner({ children, xcss, height, skipLinkLabel, testId,
     xcss?: StrictXCSSProp<'backgroundColor', never>;
     /**
      * The height of the layout area.
+     *
+     * Defaults to 48px.
      */
     height?: number;
 }): JSX.Element;

package/examples/constellation/side-nav-items/actions-and-actions-on-hover.tsx

@@ -38,6 +38,8 @@ function MoreAction() {
 	);
 }
 
+const exampleHref = '#example-href';
+
 export function ActionsAndActionsOnHoverExample() {
 	return (
 		<Inline space="space.600">
@@ -45,7 +47,7 @@ export function ActionsAndActionsOnHoverExample() {
 				<SideNavContent>
 					<MenuList>
 						<LinkMenuItem
-							href="#"
+							href={exampleHref}
 							elemBefore={<HomeIcon label="" color="currentColor" spacing="spacious" />}
 							actions={
 								<>
@@ -57,7 +59,7 @@ export function ActionsAndActionsOnHoverExample() {
 							Link menu item (actions)
 						</LinkMenuItem>
 						<LinkMenuItem
-							href="#"
+							href={exampleHref}
 							elemBefore={<HomeIcon label="" color="currentColor" spacing="spacious" />}
 							actionsOnHover={
 								<>
@@ -69,7 +71,7 @@ export function ActionsAndActionsOnHoverExample() {
 							Link menu item (actionsOnHover)
 						</LinkMenuItem>
 						<LinkMenuItem
-							href="#"
+							href={exampleHref}
 							elemBefore={<HomeIcon label="" color="currentColor" spacing="spacious" />}
 							actions={<MoreAction />}
 							actionsOnHover={<AddAction />}
@@ -78,7 +80,7 @@ export function ActionsAndActionsOnHoverExample() {
 						</LinkMenuItem>
 
 						<LinkMenuItem
-							href="#"
+							href={exampleHref}
 							elemBefore={<HomeIcon label="" color="currentColor" spacing="spacious" />}
 							elemAfter={<Lozenge>New</Lozenge>}
 							actions={<MoreAction />}

package/examples/constellation/side-nav-items/container-avatar.tsx

@@ -10,15 +10,17 @@ import ScienceIcon from '../../images/science.svg';
 
 import { MockSideNav } from './common/mock-side-nav';
 
+const exampleHref = '#example-href';
+
 export function ContainerAvatarExample() {
 	return (
 		<MockSideNav>
 			<SideNavContent>
 				<MenuList>
-					<LinkMenuItem href="#" elemBefore={<ContainerAvatar src={MoneyIcon} />}>
+					<LinkMenuItem href={exampleHref} elemBefore={<ContainerAvatar src={MoneyIcon} />}>
 						Link menu item (ContainerAvatar)
 					</LinkMenuItem>
-					<LinkMenuItem href="#" elemBefore={<ContainerAvatar src={ScienceIcon} />}>
+					<LinkMenuItem href={exampleHref} elemBefore={<ContainerAvatar src={ScienceIcon} />}>
 						Link menu item (ContainerAvatar)
 					</LinkMenuItem>
 				</MenuList>

package/examples/constellation/side-nav-items/elem-after.tsx

@@ -11,34 +11,36 @@ import { Inline } from '@atlaskit/primitives/compiled';
 
 import { MockSideNav } from './common/mock-side-nav';
 
+const exampleHref = '#example-href';
+
 export function ElemAfterExample() {
 	return (
 		<MockSideNav>
 			<SideNavContent>
 				<MenuList>
 					<LinkMenuItem
-						href="#"
+						href={exampleHref}
 						elemBefore={<HomeIcon label="" color="currentColor" spacing="spacious" />}
 						elemAfter={<Lozenge>New</Lozenge>}
 					>
 						Link menu item (lozenge)
 					</LinkMenuItem>
 					<LinkMenuItem
-						href="#"
+						href={exampleHref}
 						elemBefore={<HomeIcon label="" color="currentColor" spacing="spacious" />}
 						elemAfter={<Badge>24</Badge>}
 					>
 						Link menu item (badge)
 					</LinkMenuItem>
 					<LinkMenuItem
-						href="#"
+						href={exampleHref}
 						elemBefore={<HomeIcon label="" color="currentColor" spacing="spacious" />}
 						elemAfter={<LinkExternalIcon label="" size="small" />}
 					>
 						Link menu item (icon)
 					</LinkMenuItem>
 					<LinkMenuItem
-						href="#"
+						href={exampleHref}
 						elemBefore={<HomeIcon label="" color="currentColor" spacing="spacious" />}
 						elemAfter={
 							<Inline space="space.050" alignBlock="center">

package/examples/constellation/side-nav-items/elem-before.tsx

@@ -24,6 +24,8 @@ import MoneyIcon from '../../images/money.svg';
 
 import { MockSideNav } from './common/mock-side-nav';
 
+const exampleHref = '#example-href';
+
 export function ElemBeforeExample() {
 	return (
 		<Inline space="space.600">
@@ -31,19 +33,19 @@ export function ElemBeforeExample() {
 				<SideNavContent>
 					<MenuList>
 						<LinkMenuItem
-							href="#"
+							href={exampleHref}
 							elemBefore={<HomeIcon label="" color="currentColor" spacing="spacious" />}
 						>
 							Link menu item (icon)
 						</LinkMenuItem>
-						<LinkMenuItem href="#" elemBefore={<ContainerAvatar src={MoneyIcon} />}>
+						<LinkMenuItem href={exampleHref} elemBefore={<ContainerAvatar src={MoneyIcon} />}>
 							Link menu item (ContainerAvatar)
 						</LinkMenuItem>
-						<LinkMenuItem href="#" elemBefore={<JiraIcon label="" />}>
+						<LinkMenuItem href={exampleHref} elemBefore={<JiraIcon label="" />}>
 							Link menu item (app tile)
 						</LinkMenuItem>
-						<LinkMenuItem href="#">Link menu item (spacer)</LinkMenuItem>
-						<LinkMenuItem href="#" elemBefore={COLLAPSE_ELEM_BEFORE}>
+						<LinkMenuItem href={exampleHref}>Link menu item (spacer)</LinkMenuItem>
+						<LinkMenuItem href={exampleHref} elemBefore={COLLAPSE_ELEM_BEFORE}>
 							Link menu item (no elemBefore)
 						</LinkMenuItem>
 					</MenuList>

package/examples/constellation/side-nav-items/expandable-menu-item-default-variant.tsx

@@ -27,10 +27,12 @@ import MoneyIcon from '../../images/money.svg';
 
 import { MockSideNav } from './common/mock-side-nav';
 
+const exampleHref = '#example-href';
+
 function PlaceholderExpandableContent() {
 	return (
 		<ExpandableMenuItemContent>
-			<LinkMenuItem href="#">Expandable menu item content</LinkMenuItem>
+			<LinkMenuItem href={exampleHref}>Expandable menu item content</LinkMenuItem>
 		</ExpandableMenuItemContent>
 	);
 }
@@ -109,7 +111,9 @@ export function ExpandableMenuItemDefaultVariantExample() {
 														Exp default menu item (level 2)
 													</ExpandableMenuItemTrigger>
 													<ExpandableMenuItemContent>
-														<LinkMenuItem href="#">Expandable menu item content</LinkMenuItem>
+														<LinkMenuItem href={exampleHref}>
+															Expandable menu item content
+														</LinkMenuItem>
 													</ExpandableMenuItemContent>
 												</ExpandableMenuItem>
 											</ExpandableMenuItemContent>
@@ -125,7 +129,9 @@ export function ExpandableMenuItemDefaultVariantExample() {
 														Exp default menu item (level 2)
 													</ExpandableMenuItemTrigger>
 													<ExpandableMenuItemContent>
-														<LinkMenuItem href="#">Expandable menu item content</LinkMenuItem>
+														<LinkMenuItem href={exampleHref}>
+															Expandable menu item content
+														</LinkMenuItem>
 													</ExpandableMenuItemContent>
 												</ExpandableMenuItem>
 											</ExpandableMenuItemContent>