@atlaskit/navigation-system 10.8.0 → 10.9.1

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @atlassian/navigation-system
 
+## 10.9.1
+
+### Patch Changes
+
+- [`ae45184d2cd0b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ae45184d2cd0b) -
+  Fix `Panel` enter/exit animation so a panel with a default width of `0` starts hidden instead of
+  flashing visible. The panel now uses `useMotion`'s new `initialState` to begin in the `hidden`
+  state (behind the `platform-dst-motion-uplift-panel` gate). The `animationFillMode` overrides on
+  the entering/exiting styles have been removed, as this is now set within the motion tokens
+  themselves.
+
+  Additionally, a `overflow: hidden` rule is now applied to the page layout root (behind the same
+  `platform-dst-motion-uplift-panel` gate) so that the panel transforming off screen no longer
+  causes scroll bars to appear.
+
+- Updated dependencies
+
+## 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/page-layout/panel.compiled.css

@@ -7,8 +7,6 @@
 ._18m91wug{overflow-y:auto}
 ._1bsb1dxx{width:min(90%,var(--minWidth))}
 ._1e0cglyw{display:none}
-._1o51eoah{animation-fill-mode:backwards}
-._1o51q7pw{animation-fill-mode:forwards}
 ._1pbykb7n{z-index:1}
 ._1reo1wug{overflow-x:auto}
 ._4t3i1osq{height:100%}

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

@@ -44,8 +44,8 @@ var styles = {
   border: "_191wglyw _16qs130s _1w6eia51 _scbpglyw",
   scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
   hidden: "_1e0cglyw",
-  entering: "_y44v1s3l _1o51eoah",
-  exiting: "_y44vqhwn _1o51q7pw"
+  entering: "_y44v1s3l",
+  exiting: "_y44vqhwn"
 };
 
 /**
@@ -73,6 +73,12 @@ function Panel(_ref) {
   var id = (0, _useLayoutId.useLayoutId)({
     providedId: providedId
   });
+  var isMotionUpliftEnabled = (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-panel');
+  var defaultWidth = (0, _useSafeDefaultWidth.useSafeDefaultWidth)({
+    defaultWidthProp: defaultWidthProp,
+    fallbackDefaultWidth: fallbackDefaultWidth,
+    slotName: 'Panel'
+  });
 
   // useMotion is applied only when the `platform-dst-motion-uplift-panel` gate is enabled.
   var _useMotion = (0, _useMotion2.useMotion)({
@@ -81,17 +87,12 @@ function Panel(_ref) {
           // Set width to 0 as animation is complete
           setWidth(0);
         }
-      }
+      },
+      initialState: defaultWidth === 0 ? 'hidden' : undefined
     }),
     state = _useMotion.state,
     motionRef = _useMotion.ref,
     reanimate = _useMotion.reanimate;
-  var isMotionUpliftEnabled = (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-panel');
-  var defaultWidth = (0, _useSafeDefaultWidth.useSafeDefaultWidth)({
-    defaultWidthProp: defaultWidthProp,
-    fallbackDefaultWidth: fallbackDefaultWidth,
-    slotName: 'Panel'
-  });
 
   /**
    * Don't show the skip link if the slot has 0 width.
@@ -199,7 +200,7 @@ function Panel(_ref) {
     ,
     className: (0, _runtime.ax)([styles.root, !isMotionUpliftEnabled && defaultWidth === 0 && styles.hidden, hasBorder && styles.border, isMotionUpliftEnabled ?
     // eslint-disable-next-line @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    (0, _react2.cx)(xcss, state === 'entering' && styles.entering, state === 'exiting' && styles.exiting) : xcss]),
+    (0, _react2.cx)(xcss, state === 'hidden' && styles.hidden, state === 'entering' && styles.entering, state === 'exiting' && styles.exiting) : xcss]),
     style: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _constants.panelVar, panelVariableWidth), '--minWidth', "".concat(minWidth, "px")),
     "data-testid": testId,
     ref: mergedRef

package/dist/cjs/ui/page-layout/root.compiled.css

@@ -1,6 +1,8 @@
+._18m915vq{overflow-y:hidden}
 ._1ciragmp >:not([data-layout-slot]){display:none!important}
 ._1e0c11p5{display:grid}
 ._1lmcq9em{grid-template-areas:"banner" "top-bar" "main" "aside"}
+._1reo15vq{overflow-x:hidden}
 ._1tke1kxc{min-height:100vh}
 ._1tvnagmp >:not([data-layout-slot]):not(dialog):not([popover]){display:none!important}
 ._2z0516ab{grid-template-rows:auto auto 1fr auto}

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

@@ -25,7 +25,8 @@ var gridRootId = exports.gridRootId = 'unsafe-design-system-page-layout-root';
 var styles = {
   root: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco",
   safetyRail: "_1ciragmp",
-  safetyRailWithTopLayer: "_1tvnagmp"
+  safetyRailWithTopLayer: "_1tvnagmp",
+  panelUplift: "_1reo15vq _18m915vq"
 };
 
 /**
@@ -74,7 +75,7 @@ function Root(_ref) {
     testId: testId
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
-    className: (0, _runtime.ax)([styles.root, (0, _platformFeatureFlags.fg)('platform-dst-top-layer') ? styles.safetyRailWithTopLayer : styles.safetyRail, xcss]),
+    className: (0, _runtime.ax)([styles.root, (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-panel') && styles.panelUplift, (0, _platformFeatureFlags.fg)('platform-dst-top-layer') ? styles.safetyRailWithTopLayer : styles.safetyRail, xcss]),
     id: gridRootId,
     "data-testid": testId
   }, children)))))))));

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.compiled.css

@@ -7,8 +7,6 @@
 ._18m91wug{overflow-y:auto}
 ._1bsb1dxx{width:min(90%,var(--minWidth))}
 ._1e0cglyw{display:none}
-._1o51eoah{animation-fill-mode:backwards}
-._1o51q7pw{animation-fill-mode:forwards}
 ._1pbykb7n{z-index:1}
 ._1reo1wug{overflow-x:auto}
 ._4t3i1osq{height:100%}

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

@@ -33,8 +33,8 @@ const styles = {
   border: "_191wglyw _16qs130s _1w6eia51 _scbpglyw",
   scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
   hidden: "_1e0cglyw",
-  entering: "_y44v1s3l _1o51eoah",
-  exiting: "_y44vqhwn _1o51q7pw"
+  entering: "_y44v1s3l",
+  exiting: "_y44vqhwn"
 };
 
 /**
@@ -59,6 +59,12 @@ export function Panel({
   const id = useLayoutId({
     providedId
   });
+  const isMotionUpliftEnabled = fg('platform-dst-motion-uplift-panel');
+  const defaultWidth = useSafeDefaultWidth({
+    defaultWidthProp,
+    fallbackDefaultWidth,
+    slotName: 'Panel'
+  });
 
   // useMotion is applied only when the `platform-dst-motion-uplift-panel` gate is enabled.
   const {
@@ -71,13 +77,8 @@ export function Panel({
         // Set width to 0 as animation is complete
         setWidth(0);
       }
-    }
-  });
-  const isMotionUpliftEnabled = fg('platform-dst-motion-uplift-panel');
-  const defaultWidth = useSafeDefaultWidth({
-    defaultWidthProp,
-    fallbackDefaultWidth,
-    slotName: 'Panel'
+    },
+    initialState: defaultWidth === 0 ? 'hidden' : undefined
   });
 
   /**
@@ -181,7 +182,7 @@ export function Panel({
     ,
     className: ax([styles.root, !isMotionUpliftEnabled && defaultWidth === 0 && styles.hidden, hasBorder && styles.border, isMotionUpliftEnabled ?
     // eslint-disable-next-line @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    cx(xcss, state === 'entering' && styles.entering, state === 'exiting' && styles.exiting) : xcss]),
+    cx(xcss, state === 'hidden' && styles.hidden, state === 'entering' && styles.entering, state === 'exiting' && styles.exiting) : xcss]),
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values
       [panelVar]: panelVariableWidth,

package/dist/es2019/ui/page-layout/root.compiled.css

@@ -1,6 +1,8 @@
+._18m915vq{overflow-y:hidden}
 ._1ciragmp >:not([data-layout-slot]){display:none!important}
 ._1e0c11p5{display:grid}
 ._1lmcq9em{grid-template-areas:"banner" "top-bar" "main" "aside"}
+._1reo15vq{overflow-x:hidden}
 ._1tke1kxc{min-height:100vh}
 ._1tvnagmp >:not([data-layout-slot]):not(dialog):not([popover]){display:none!important}
 ._2z0516ab{grid-template-rows:auto auto 1fr auto}

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

@@ -17,7 +17,8 @@ export const gridRootId = 'unsafe-design-system-page-layout-root';
 const styles = {
   root: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco",
   safetyRail: "_1ciragmp",
-  safetyRailWithTopLayer: "_1tvnagmp"
+  safetyRailWithTopLayer: "_1tvnagmp",
+  panelUplift: "_1reo15vq _18m915vq"
 };
 
 /**
@@ -72,7 +73,7 @@ This message will not be displayed in production.
     testId: testId
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    className: ax([styles.root, fg('platform-dst-top-layer') ? styles.safetyRailWithTopLayer : styles.safetyRail, xcss]),
+    className: ax([styles.root, fg('platform-dst-motion-uplift-panel') && styles.panelUplift, fg('platform-dst-top-layer') ? styles.safetyRailWithTopLayer : styles.safetyRail, xcss]),
     id: gridRootId,
     "data-testid": testId
   }, children)))))))));

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.compiled.css

@@ -7,8 +7,6 @@
 ._18m91wug{overflow-y:auto}
 ._1bsb1dxx{width:min(90%,var(--minWidth))}
 ._1e0cglyw{display:none}
-._1o51eoah{animation-fill-mode:backwards}
-._1o51q7pw{animation-fill-mode:forwards}
 ._1pbykb7n{z-index:1}
 ._1reo1wug{overflow-x:auto}
 ._4t3i1osq{height:100%}

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

@@ -35,8 +35,8 @@ var styles = {
   border: "_191wglyw _16qs130s _1w6eia51 _scbpglyw",
   scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
   hidden: "_1e0cglyw",
-  entering: "_y44v1s3l _1o51eoah",
-  exiting: "_y44vqhwn _1o51q7pw"
+  entering: "_y44v1s3l",
+  exiting: "_y44vqhwn"
 };
 
 /**
@@ -64,6 +64,12 @@ export function Panel(_ref) {
   var id = useLayoutId({
     providedId: providedId
   });
+  var isMotionUpliftEnabled = fg('platform-dst-motion-uplift-panel');
+  var defaultWidth = useSafeDefaultWidth({
+    defaultWidthProp: defaultWidthProp,
+    fallbackDefaultWidth: fallbackDefaultWidth,
+    slotName: 'Panel'
+  });
 
   // useMotion is applied only when the `platform-dst-motion-uplift-panel` gate is enabled.
   var _useMotion = useMotion({
@@ -72,17 +78,12 @@ export function Panel(_ref) {
           // Set width to 0 as animation is complete
           setWidth(0);
         }
-      }
+      },
+      initialState: defaultWidth === 0 ? 'hidden' : undefined
     }),
     state = _useMotion.state,
     motionRef = _useMotion.ref,
     reanimate = _useMotion.reanimate;
-  var isMotionUpliftEnabled = fg('platform-dst-motion-uplift-panel');
-  var defaultWidth = useSafeDefaultWidth({
-    defaultWidthProp: defaultWidthProp,
-    fallbackDefaultWidth: fallbackDefaultWidth,
-    slotName: 'Panel'
-  });
 
   /**
    * Don't show the skip link if the slot has 0 width.
@@ -190,7 +191,7 @@ export function Panel(_ref) {
     ,
     className: ax([styles.root, !isMotionUpliftEnabled && defaultWidth === 0 && styles.hidden, hasBorder && styles.border, isMotionUpliftEnabled ?
     // eslint-disable-next-line @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    cx(xcss, state === 'entering' && styles.entering, state === 'exiting' && styles.exiting) : xcss]),
+    cx(xcss, state === 'hidden' && styles.hidden, state === 'entering' && styles.entering, state === 'exiting' && styles.exiting) : xcss]),
     style: _defineProperty(_defineProperty({}, panelVar, panelVariableWidth), '--minWidth', "".concat(minWidth, "px")),
     "data-testid": testId,
     ref: mergedRef

package/dist/esm/ui/page-layout/root.compiled.css

@@ -1,6 +1,8 @@
+._18m915vq{overflow-y:hidden}
 ._1ciragmp >:not([data-layout-slot]){display:none!important}
 ._1e0c11p5{display:grid}
 ._1lmcq9em{grid-template-areas:"banner" "top-bar" "main" "aside"}
+._1reo15vq{overflow-x:hidden}
 ._1tke1kxc{min-height:100vh}
 ._1tvnagmp >:not([data-layout-slot]):not(dialog):not([popover]){display:none!important}
 ._2z0516ab{grid-template-rows:auto auto 1fr auto}

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

@@ -17,7 +17,8 @@ export var gridRootId = 'unsafe-design-system-page-layout-root';
 var styles = {
   root: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _12fk1aio _12qzrxre _1rqteala _xkmgks3h _jbc7rxre _tyve1nco",
   safetyRail: "_1ciragmp",
-  safetyRailWithTopLayer: "_1tvnagmp"
+  safetyRailWithTopLayer: "_1tvnagmp",
+  panelUplift: "_1reo15vq _18m915vq"
 };
 
 /**
@@ -66,7 +67,7 @@ export function Root(_ref) {
     testId: testId
   }, /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    className: ax([styles.root, fg('platform-dst-top-layer') ? styles.safetyRailWithTopLayer : styles.safetyRail, xcss]),
+    className: ax([styles.root, fg('platform-dst-motion-uplift-panel') && styles.panelUplift, fg('platform-dst-top-layer') ? styles.safetyRailWithTopLayer : styles.safetyRail, xcss]),
     id: gridRootId,
     "data-testid": testId
   }, children)))))))));

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-splitter/get-width-from-drag-location.d.ts

@@ -3,6 +3,6 @@ export declare const getWidthFromDragLocation: ({ initialWidth, location, initia
     initialWidth: number;
     location: DragLocationHistory;
     initialClientX: number;
-    direction: "ltr" | "rtl";
-    position: "start" | "end";
+    direction: 'ltr' | 'rtl';
+    position: 'start' | 'end';
 }) => number;

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.1",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -55,23 +55,23 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^12.3.0",
 		"@atlaskit/app-provider": "^5.1.0",
-		"@atlaskit/avatar": "^26.2.0",
+		"@atlaskit/avatar": "^26.4.0",
 		"@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",
+		"@atlaskit/motion": "^8.0.0",
 		"@atlaskit/platform-feature-flags": "^2.1.0",
 		"@atlaskit/platform-feature-flags-react": "^1.1.0",
-		"@atlaskit/popup": "^5.1.0",
+		"@atlaskit/popup": "^5.2.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^2.0.0",
 		"@atlaskit/primitives": "^22.2.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/side-nav-items": "^2.3.0",
 		"@atlaskit/tokens": "^16.3.0",
-		"@atlaskit/tooltip": "^23.1.0",
+		"@atlaskit/tooltip": "^23.2.0",
 		"@atlaskit/visually-hidden": "^4.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.0",
@@ -90,28 +90,28 @@
 		"@atlaskit/badge": "^19.1.0",
 		"@atlaskit/banner": "^15.1.0",
 		"@atlaskit/breadcrumbs": "^17.5.0",
-		"@atlaskit/dropdown-menu": "^17.1.0",
+		"@atlaskit/dropdown-menu": "^17.2.0",
 		"@atlaskit/flag": "^18.2.0",
 		"@atlaskit/form": "^16.1.0",
 		"@atlaskit/heading": "^6.2.0",
-		"@atlaskit/inline-dialog": "^19.1.0",
+		"@atlaskit/inline-dialog": "^19.2.0",
 		"@atlaskit/link": "^4.3.0",
 		"@atlaskit/lozenge": "^14.1.0",
 		"@atlaskit/menu": "^9.2.0",
-		"@atlaskit/modal-dialog": "^16.1.0",
+		"@atlaskit/modal-dialog": "^16.2.0",
 		"@atlaskit/onboarding": "^15.1.0",
 		"@atlaskit/page-header": "^13.1.0",
 		"@atlaskit/page-layout": "^5.2.0",
-		"@atlaskit/popper": "^8.3.0",
+		"@atlaskit/popper": "^8.4.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
-		"@atlaskit/select": "^22.5.0",
+		"@atlaskit/select": "^22.6.0",
 		"@atlaskit/skeleton": "^4.2.0",
 		"@atlaskit/spotlight": "^3.0.0",
 		"@atlaskit/textfield": "^9.1.0",
-		"@atlaskit/top-layer": "^1.10.0",
+		"@atlaskit/top-layer": "^2.0.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",