@atlaskit/navigation-system 10.8.0 → 10.9.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlassian/navigation-system
 
+## 10.9.0
+
+### Minor Changes
+
+- [`994b264c96af8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/994b264c96af8) -
+  `AppLogo` now accepts an optional `secondaryName` prop, which renders supporting text below the
+  app name in wider viewports. This can be used to provide extra context for an app or experience
+  while keeping the existing `name`, `label`, and small-screen behavior unchanged.
+
+  ```tsx
+  import { ConfluenceIcon } from '@atlaskit/logo/confluence-icon';
+  import { AppLogo } from '@atlaskit/navigation-system/top-nav-items';
+
+  <AppLogo
+  	href="http://www.atlassian.design"
+  	icon={ConfluenceIcon}
+  	name="Confluence"
+  	secondaryName="Documentation"
+  	label="Home page"
+  />;
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.8.0
 
 ### Minor Changes

package/constellation/top-nav-items/examples.mdx

@@ -171,10 +171,7 @@ A button component that supports theming. The following variants are available:
 Use this component when you need to add buttons to the top nav. Be aware that adding custom buttons
 may negatively impact the consistency across apps.
 
-<Example
-	Component={TopNavButtonExample}
-	featureFlagDefaults={{ 'platform-dst-motion-uplift-button': true }}
-/>
+<Example Component={TopNavButtonExample} />
 
 ## Responsive
 

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

@@ -1,14 +1,17 @@
 ._2rko19bv{border-radius:10px}
 ._2rko1mok{border-radius:var(--ds-radius-large,8px)}
 ._18zr1b66{padding-inline:var(--ds-space-050,4px)}._18m915vq{overflow-y:hidden}
+._1bah1h6o{justify-content:center}
 ._1bsb1ris{width:max-content}
 ._1e0c1txw{display:flex}
 ._1e0cglyw{display:none}
 ._1o9zidpf{flex-shrink:0}
 ._1o9zkb7n{flex-shrink:1}
+._1pfh1i6y{margin-block-start:var(--ds-space-negative-025,-2px)}
 ._1reo15vq{overflow-x:hidden}
 ._1toh1r31._1toh1r31{text-decoration-color:currentColor}
 ._1w901kw7._1w901kw7{color:inherit}
+._2lx21bp4{flex-direction:column}
 ._4cvr1h6o{align-items:center}
 ._4t3izwfg{height:2pc}
 ._5jyqglyw._5jyqglyw{text-decoration-line:none}
@@ -24,4 +27,4 @@
 ._irr31rps:hover{background-color:var(--ds-top-bar-button-background-hovered)}
 ._1di69yc7:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)!important}
 ._1di6yhlj:active{background-color:var(--ds-top-bar-button-background-pressed)!important}
-@media (min-width:64rem){._10y418uv._10y418uv{display:initial}}
+@media (min-width:64rem){._10y41txw._10y41txw{display:flex}}

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

@@ -34,14 +34,16 @@ var iconContainerStyles = {
   fullHeightSidebar: "_1o9zidpf"
 };
 var logoTextStyles = {
-  root: "_1bsb1ris _p12fnklw _uiztglyw _y4tiv77o _1e0cglyw _10y418uv"
+  root: "_1bsb1ris _p12fnklw _uiztglyw _y4tiv77o _1e0cglyw _2lx21bp4 _1bah1h6o _10y41txw"
+};
+var secondaryNameStyles = {
+  root: "_1pfh1i6y"
 };
 function isTextClamped(element) {
   // 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__
  *
@@ -52,6 +54,7 @@ function isTextClamped(element) {
 var AppLogo = exports.AppLogo = function AppLogo(_ref) {
   var name = _ref.name,
     label = _ref.label,
+    secondaryName = _ref.secondaryName,
     href = _ref.href,
     icon = _ref.icon,
     onClick = _ref.onClick;
@@ -59,6 +62,7 @@ var AppLogo = exports.AppLogo = function AppLogo(_ref) {
   var ref = (0, _react.useRef)(null);
   var nameRef = (0, _react.useRef)(null);
   var hasCustomTheme = (0, _hasCustomThemeContext.useHasCustomTheme)();
+  var showSecondaryName = Boolean(secondaryName) && (0, _platformFeatureFlags.fg)('platform_dst_ads_appswitcher_improvements');
 
   /**
    * Show the tooltip if the name is truncated
@@ -107,5 +111,13 @@ var AppLogo = exports.AppLogo = function AppLogo(_ref) {
       maxLines: 1,
       ref: nameRef
     }, name));
-  }))));
+  }), showSecondaryName && /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _runtime.ax)([secondaryNameStyles.root])
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    "aria-hidden": true,
+    color: "color.text.subtlest",
+    weight: "regular",
+    maxLines: 1,
+    size: "small"
+  }, secondaryName)))));
 };

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

@@ -1,14 +1,17 @@
 ._2rko19bv{border-radius:10px}
 ._2rko1mok{border-radius:var(--ds-radius-large,8px)}
 ._18zr1b66{padding-inline:var(--ds-space-050,4px)}._18m915vq{overflow-y:hidden}
+._1bah1h6o{justify-content:center}
 ._1bsb1ris{width:max-content}
 ._1e0c1txw{display:flex}
 ._1e0cglyw{display:none}
 ._1o9zidpf{flex-shrink:0}
 ._1o9zkb7n{flex-shrink:1}
+._1pfh1i6y{margin-block-start:var(--ds-space-negative-025,-2px)}
 ._1reo15vq{overflow-x:hidden}
 ._1toh1r31._1toh1r31{text-decoration-color:currentColor}
 ._1w901kw7._1w901kw7{color:inherit}
+._2lx21bp4{flex-direction:column}
 ._4cvr1h6o{align-items:center}
 ._4t3izwfg{height:2pc}
 ._5jyqglyw._5jyqglyw{text-decoration-line:none}
@@ -24,4 +27,4 @@
 ._irr31rps:hover{background-color:var(--ds-top-bar-button-background-hovered)}
 ._1di69yc7:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)!important}
 ._1di6yhlj:active{background-color:var(--ds-top-bar-button-background-pressed)!important}
-@media (min-width:64rem){._10y418uv._10y418uv{display:initial}}
+@media (min-width:64rem){._10y41txw._10y41txw{display:flex}}

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

@@ -25,14 +25,16 @@ const iconContainerStyles = {
   fullHeightSidebar: "_1o9zidpf"
 };
 const logoTextStyles = {
-  root: "_1bsb1ris _p12fnklw _uiztglyw _y4tiv77o _1e0cglyw _10y418uv"
+  root: "_1bsb1ris _p12fnklw _uiztglyw _y4tiv77o _1e0cglyw _2lx21bp4 _1bah1h6o _10y41txw"
+};
+const secondaryNameStyles = {
+  root: "_1pfh1i6y"
 };
 function isTextClamped(element) {
   // 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__
  *
@@ -43,6 +45,7 @@ function isTextClamped(element) {
 export const AppLogo = ({
   name,
   label,
+  secondaryName,
   href,
   icon,
   onClick
@@ -51,6 +54,7 @@ export const AppLogo = ({
   const ref = useRef(null);
   const nameRef = useRef(null);
   const hasCustomTheme = useHasCustomTheme();
+  const showSecondaryName = Boolean(secondaryName) && fg('platform_dst_ads_appswitcher_improvements');
 
   /**
    * Show the tooltip if the name is truncated
@@ -97,5 +101,13 @@ export const AppLogo = ({
     weight: "semibold",
     maxLines: 1,
     ref: nameRef
-  }, name))))));
+  }, name))), showSecondaryName && /*#__PURE__*/React.createElement("span", {
+    className: ax([secondaryNameStyles.root])
+  }, /*#__PURE__*/React.createElement(Text, {
+    "aria-hidden": true,
+    color: "color.text.subtlest",
+    weight: "regular",
+    maxLines: 1,
+    size: "small"
+  }, secondaryName)))));
 };

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

@@ -1,14 +1,17 @@
 ._2rko19bv{border-radius:10px}
 ._2rko1mok{border-radius:var(--ds-radius-large,8px)}
 ._18zr1b66{padding-inline:var(--ds-space-050,4px)}._18m915vq{overflow-y:hidden}
+._1bah1h6o{justify-content:center}
 ._1bsb1ris{width:max-content}
 ._1e0c1txw{display:flex}
 ._1e0cglyw{display:none}
 ._1o9zidpf{flex-shrink:0}
 ._1o9zkb7n{flex-shrink:1}
+._1pfh1i6y{margin-block-start:var(--ds-space-negative-025,-2px)}
 ._1reo15vq{overflow-x:hidden}
 ._1toh1r31._1toh1r31{text-decoration-color:currentColor}
 ._1w901kw7._1w901kw7{color:inherit}
+._2lx21bp4{flex-direction:column}
 ._4cvr1h6o{align-items:center}
 ._4t3izwfg{height:2pc}
 ._5jyqglyw._5jyqglyw{text-decoration-line:none}
@@ -24,4 +27,4 @@
 ._irr31rps:hover{background-color:var(--ds-top-bar-button-background-hovered)}
 ._1di69yc7:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)!important}
 ._1di6yhlj:active{background-color:var(--ds-top-bar-button-background-pressed)!important}
-@media (min-width:64rem){._10y418uv._10y418uv{display:initial}}
+@media (min-width:64rem){._10y41txw._10y41txw{display:flex}}

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

@@ -25,14 +25,16 @@ var iconContainerStyles = {
   fullHeightSidebar: "_1o9zidpf"
 };
 var logoTextStyles = {
-  root: "_1bsb1ris _p12fnklw _uiztglyw _y4tiv77o _1e0cglyw _10y418uv"
+  root: "_1bsb1ris _p12fnklw _uiztglyw _y4tiv77o _1e0cglyw _2lx21bp4 _1bah1h6o _10y41txw"
+};
+var secondaryNameStyles = {
+  root: "_1pfh1i6y"
 };
 function isTextClamped(element) {
   // 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__
  *
@@ -43,6 +45,7 @@ function isTextClamped(element) {
 export var AppLogo = function AppLogo(_ref) {
   var name = _ref.name,
     label = _ref.label,
+    secondaryName = _ref.secondaryName,
     href = _ref.href,
     icon = _ref.icon,
     onClick = _ref.onClick;
@@ -50,6 +53,7 @@ export var AppLogo = function AppLogo(_ref) {
   var ref = useRef(null);
   var nameRef = useRef(null);
   var hasCustomTheme = useHasCustomTheme();
+  var showSecondaryName = Boolean(secondaryName) && fg('platform_dst_ads_appswitcher_improvements');
 
   /**
    * Show the tooltip if the name is truncated
@@ -98,5 +102,13 @@ export var AppLogo = function AppLogo(_ref) {
       maxLines: 1,
       ref: nameRef
     }, name));
-  }))));
+  }), showSecondaryName && /*#__PURE__*/React.createElement("span", {
+    className: ax([secondaryNameStyles.root])
+  }, /*#__PURE__*/React.createElement(Text, {
+    "aria-hidden": true,
+    color: "color.text.subtlest",
+    weight: "regular",
+    maxLines: 1,
+    size: "small"
+  }, secondaryName)))));
 };

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

@@ -4,18 +4,15 @@
  */
 import React from 'react';
 import type { LogoProps } from '@atlaskit/logo';
-/**
- * __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 declare const AppLogo: ({ name, label, href, icon, onClick, }: {
+interface AppLogoProps {
     /**
-     * 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.
+     * The name of the app. Will be displayed next to the logo in wider viewports.
      */
     name: string;
+    /**
+     * Provide a secondaryName for the app. Will be displayed below the name in wider viewports.
+     */
+    secondaryName?: string;
     /**
      * Provide an accessible label, often used by screen readers.
      * This label should include the name of the app, and if applicable,
@@ -34,4 +31,13 @@ export declare const AppLogo: ({ name, label, href, icon, onClick, }: {
      * Handler called on click.
      */
     onClick?: React.MouseEventHandler<HTMLAnchorElement>;
-}) => JSX.Element;
+}
+/**
+ * __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 declare const AppLogo: ({ name, label, secondaryName, href, icon, onClick, }: AppLogoProps) => JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "10.8.0",
+	"version": "10.9.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -59,7 +59,7 @@
 		"@atlaskit/button": "^24.3.0",
 		"@atlaskit/css": "^1.0.0",
 		"@atlaskit/ds-lib": "^8.0.0",
-		"@atlaskit/icon": "^37.1.0",
+		"@atlaskit/icon": "^37.2.0",
 		"@atlaskit/layering": "^5.0.0",
 		"@atlaskit/logo": "^21.4.0",
 		"@atlaskit/motion": "^7.5.0",
@@ -111,7 +111,7 @@
 		"@atlaskit/top-layer": "^1.10.0",
 		"@atlassian/feature-flags-test-utils": "^1.2.0",
 		"@atlassian/gemini": "^1.51.0",
-		"@atlassian/search-dialog": "^10.5.0",
+		"@atlassian/search-dialog": "^10.6.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/test-utils": "^1.1.0",
 		"@atlassian/testing-library": "^0.11.0",