@atlaskit/navigation-system 10.7.1 → 10.9.0

package/CHANGELOG.md

@@ -1,5 +1,78 @@
 # @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
+
+- [`5dd6269af3c70`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5dd6269af3c70) -
+  Add an opt-in `maxWidth` to the `Panel` layout slot and preview panel `Panel` config, letting a
+  single consumer request a wider resize bound (e.g. `70vw`) than the default cap of half the
+  viewport width. Defaults are unchanged, so all existing consumers remain capped at the default.
+
+  **`@atlaskit/navigation-system`** — the `Panel` layout slot accepts a `maxWidth` (`vw`/`px`),
+  applied to both the rendered width and the resize bounds (mouse and keyboard):
+
+  ```tsx
+  import { Panel } from '@atlaskit/navigation-system/layout/panel';
+
+  <Panel defaultWidth={600} maxWidth="70vw">
+  	{/* ...panel content... */}
+  </Panel>;
+  ```
+
+  **`@atlassian/preview-panels-api`** — the opened panel config takes the same `maxWidth`:
+
+  ```tsx
+  import { usePreviewPanelsActions } from '@atlassian/preview-panels-api';
+
+  const { open } = usePreviewPanelsActions();
+
+  open({
+  	panel: {
+  		id: 'issue-123',
+  		type: 'issue',
+  		product: 'jira',
+  		content: () => <IssuePreview />,
+  		maxWidth: '70vw',
+  	},
+  });
+  ```
+
+  **`@atlassian/preview-panel-global-objects`** — `useGlobalObjectPreviewPanels` accepts a
+  `maxWidth` option that it forwards onto the panel it opens, so global-object preview panels
+  (Confluence page, goals, teams, CMDB object, etc.) share the same wider bound. Omitting it keeps
+  the default cap:
+
+  ```tsx
+  const previewPanels = useGlobalObjectPreviewPanels('jira', cloudId, { maxWidth: '70vw' });
+  ```
+
 ## 10.7.1
 
 ### Patch 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/page-layout/panel.js

@@ -67,7 +67,8 @@ function Panel(_ref) {
     providedId = _ref.id,
     xcss = _ref.xcss,
     _ref$hasBorder = _ref.hasBorder,
-    hasBorder = _ref$hasBorder === void 0 ? true : _ref$hasBorder;
+    hasBorder = _ref$hasBorder === void 0 ? true : _ref$hasBorder,
+    maxWidth = _ref.maxWidth;
   var dangerouslyHoistSlotSizes = (0, _react.useContext)(_hoistSlotSizesContext.DangerouslyHoistSlotSizes);
   var id = (0, _useLayoutId.useLayoutId)({
     providedId: providedId
@@ -166,20 +167,23 @@ function Panel(_ref) {
     var _sideNavRef$current$o, _sideNavRef$current;
     var sideNavWidth = (_sideNavRef$current$o = (_sideNavRef$current = sideNavRef.current) === null || _sideNavRef$current === void 0 ? void 0 : _sideNavRef$current.offsetWidth) !== null && _sideNavRef$current$o !== void 0 ? _sideNavRef$current$o : 0;
     /**
-     * The panel should not resize larger than the page content, equivalent to the `Main` + `Aside` slots.
+     * By default the panel should not resize larger than the page content, equivalent to the `Main` + `Aside` slots.
      *
      * This maximum width is equivalent to half the viewport width, after removing the sidebar width.
+     *
+     * Consumers can opt in to a larger maximum via the `maxWidth` prop.
      */
-    var maxWidth = Math.round((window.innerWidth - sideNavWidth) / 2);
+    var defaultMaxWidth = "".concat(Math.round((window.innerWidth - sideNavWidth) / 2), "px");
     return {
       min: "".concat(minWidth, "px"),
-      max: "".concat(maxWidth, "px")
+      max: maxWidth !== null && maxWidth !== void 0 ? maxWidth : defaultMaxWidth
     };
-  }, [minWidth, sideNavRef]);
+  }, [maxWidth, minWidth, sideNavRef]);
   var panelWidthSlotBounds = {
     min: "".concat(minWidth, "px"),
     // `sideNavLiveWidthVar` is not defined if the `SideNav` is not mounted, so we fallback to `0px`.
-    max: "round(nearest, calc((100vw - var(".concat(_constants.sideNavLiveWidthVar, ", 0px)) / 2), 1px)")
+    // Consumers can opt in to a larger maximum via the `maxWidth` prop.
+    max: maxWidth !== null && maxWidth !== void 0 ? maxWidth : "round(nearest, calc((100vw - var(".concat(_constants.sideNavLiveWidthVar, ", 0px)) / 2), 1px)")
   };
   var panelVariableWidth = "clamp(".concat(panelWidthSlotBounds.min, ", ").concat(width, "px, ").concat(panelWidthSlotBounds.max, ")");
   (0, _useResizingWidthCssVarOnRootElement.useResizingWidthCssVarOnRootElement)({

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/page-layout/panel.js

@@ -52,7 +52,8 @@ export function Panel({
   testId,
   id: providedId,
   xcss,
-  hasBorder = true
+  hasBorder = true,
+  maxWidth
 }) {
   const dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
   const id = useLayoutId({
@@ -148,20 +149,23 @@ export function Panel({
     var _sideNavRef$current$o, _sideNavRef$current;
     const sideNavWidth = (_sideNavRef$current$o = (_sideNavRef$current = sideNavRef.current) === null || _sideNavRef$current === void 0 ? void 0 : _sideNavRef$current.offsetWidth) !== null && _sideNavRef$current$o !== void 0 ? _sideNavRef$current$o : 0;
     /**
-     * The panel should not resize larger than the page content, equivalent to the `Main` + `Aside` slots.
+     * By default the panel should not resize larger than the page content, equivalent to the `Main` + `Aside` slots.
      *
      * This maximum width is equivalent to half the viewport width, after removing the sidebar width.
+     *
+     * Consumers can opt in to a larger maximum via the `maxWidth` prop.
      */
-    const maxWidth = Math.round((window.innerWidth - sideNavWidth) / 2);
+    const defaultMaxWidth = `${Math.round((window.innerWidth - sideNavWidth) / 2)}px`;
     return {
       min: `${minWidth}px`,
-      max: `${maxWidth}px`
+      max: maxWidth !== null && maxWidth !== void 0 ? maxWidth : defaultMaxWidth
     };
-  }, [minWidth, sideNavRef]);
+  }, [maxWidth, minWidth, sideNavRef]);
   const panelWidthSlotBounds = {
     min: `${minWidth}px`,
     // `sideNavLiveWidthVar` is not defined if the `SideNav` is not mounted, so we fallback to `0px`.
-    max: `round(nearest, calc((100vw - var(${sideNavLiveWidthVar}, 0px)) / 2), 1px)`
+    // Consumers can opt in to a larger maximum via the `maxWidth` prop.
+    max: maxWidth !== null && maxWidth !== void 0 ? maxWidth : `round(nearest, calc((100vw - var(${sideNavLiveWidthVar}, 0px)) / 2), 1px)`
   };
   const panelVariableWidth = `clamp(${panelWidthSlotBounds.min}, ${width}px, ${panelWidthSlotBounds.max})`;
   useResizingWidthCssVarOnRootElement({

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/page-layout/panel.js

@@ -58,7 +58,8 @@ export function Panel(_ref) {
     providedId = _ref.id,
     xcss = _ref.xcss,
     _ref$hasBorder = _ref.hasBorder,
-    hasBorder = _ref$hasBorder === void 0 ? true : _ref$hasBorder;
+    hasBorder = _ref$hasBorder === void 0 ? true : _ref$hasBorder,
+    maxWidth = _ref.maxWidth;
   var dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
   var id = useLayoutId({
     providedId: providedId
@@ -157,20 +158,23 @@ export function Panel(_ref) {
     var _sideNavRef$current$o, _sideNavRef$current;
     var sideNavWidth = (_sideNavRef$current$o = (_sideNavRef$current = sideNavRef.current) === null || _sideNavRef$current === void 0 ? void 0 : _sideNavRef$current.offsetWidth) !== null && _sideNavRef$current$o !== void 0 ? _sideNavRef$current$o : 0;
     /**
-     * The panel should not resize larger than the page content, equivalent to the `Main` + `Aside` slots.
+     * By default the panel should not resize larger than the page content, equivalent to the `Main` + `Aside` slots.
      *
      * This maximum width is equivalent to half the viewport width, after removing the sidebar width.
+     *
+     * Consumers can opt in to a larger maximum via the `maxWidth` prop.
      */
-    var maxWidth = Math.round((window.innerWidth - sideNavWidth) / 2);
+    var defaultMaxWidth = "".concat(Math.round((window.innerWidth - sideNavWidth) / 2), "px");
     return {
       min: "".concat(minWidth, "px"),
-      max: "".concat(maxWidth, "px")
+      max: maxWidth !== null && maxWidth !== void 0 ? maxWidth : defaultMaxWidth
     };
-  }, [minWidth, sideNavRef]);
+  }, [maxWidth, minWidth, sideNavRef]);
   var panelWidthSlotBounds = {
     min: "".concat(minWidth, "px"),
     // `sideNavLiveWidthVar` is not defined if the `SideNav` is not mounted, so we fallback to `0px`.
-    max: "round(nearest, calc((100vw - var(".concat(sideNavLiveWidthVar, ", 0px)) / 2), 1px)")
+    // Consumers can opt in to a larger maximum via the `maxWidth` prop.
+    max: maxWidth !== null && maxWidth !== void 0 ? maxWidth : "round(nearest, calc((100vw - var(".concat(sideNavLiveWidthVar, ", 0px)) / 2), 1px)")
   };
   var panelVariableWidth = "clamp(".concat(panelWidthSlotBounds.min, ", ").concat(width, "px, ").concat(panelWidthSlotBounds.max, ")");
   useResizingWidthCssVarOnRootElement({

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/page-layout/panel.d.ts

@@ -1,4 +1,5 @@
 import type { StrictXCSSProp } from '@atlaskit/css';
+import type { ResizeBound } from './panel-splitter/types';
 import type { CommonSlotProps } from './types';
 /**
  * The Panel layout area is rendered to the right (inline end) of the Main area, or the Aside area if it is present.
@@ -7,7 +8,7 @@ import type { CommonSlotProps } from './types';
  *
  * You can optionally render a `PanelSplitter` as a child to make the panel area resizable.
  */
-export declare function Panel({ children, defaultWidth: defaultWidthProp, label, skipLinkLabel, testId, id: providedId, xcss, hasBorder, }: CommonSlotProps & {
+export declare function Panel({ children, defaultWidth: defaultWidthProp, label, skipLinkLabel, testId, id: providedId, xcss, hasBorder, maxWidth, }: CommonSlotProps & {
     /**
      * The content of the layout area.
      */
@@ -25,6 +26,18 @@ export declare function Panel({ children, defaultWidth: defaultWidthProp, label,
      * in which case `400px` will be used as the minimum resizing width instead.
      */
     defaultWidth?: number;
+    /**
+     * Opt-in override for the maximum width the panel can be resized to, applied to both the rendered
+     * width and the resize bounds (mouse and keyboard).
+     *
+     * When omitted, the panel defaults to half the viewport width (after removing the sidebar width),
+     * which keeps it from growing larger than the page content. Provide a `vw` or `px` value (e.g.
+     * `'70vw'`) to allow a wider panel.
+     *
+     * This is currently used by Jira's Issue Navigator native issue preview panel; other consumers
+     * should leave it unset to keep the default cap.
+     */
+    maxWidth?: ResizeBound;
     /**
      * Bounded style overrides.
      */

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.7.1",
+	"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",
@@ -67,10 +67,10 @@
 		"@atlaskit/platform-feature-flags-react": "^1.1.0",
 		"@atlaskit/popup": "^5.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^2.0.0",
-		"@atlaskit/primitives": "^22.1.0",
+		"@atlaskit/primitives": "^22.2.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/side-nav-items": "^2.3.0",
-		"@atlaskit/tokens": "^16.2.0",
+		"@atlaskit/tokens": "^16.3.0",
 		"@atlaskit/tooltip": "^23.1.0",
 		"@atlaskit/visually-hidden": "^4.2.0",
 		"@babel/runtime": "^7.0.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",