@atlaskit/side-navigation 1.4.3 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/side-navigation
 
+## 1.5.0
+
+### Minor Changes
+
+- [`caa68aad0fd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/caa68aad0fd) - Internal changes around styles:
+
+  - Application of primitives for more declarative code
+  - Application of spacing tokens to internal styles
+
+### Patch Changes
+
+- [`f96f3ebd861`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f96f3ebd861) - [ux] Use color.background.neutral.subtle token to represent transparent background.
+- [`fbe4c12c94b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fbe4c12c94b) - DTR-995 fix move page dialog bg color
+
 ## 1.4.3
 
 ### Patch Changes

package/dist/cjs/common/styles.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sectionHeaderStyle = exports.overrideStyleFunction = exports.baseSideNavItemStyle = exports.ITEM_SIDE_PADDING = void 0;
+exports.sectionHeaderSpacingStyles = exports.overrideStyleFunction = exports.baseSideNavItemStyle = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -17,11 +17,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var gridSize = (0, _constants.gridSize)();
 var borderRadius = (0, _constants.borderRadius)();
-var itemIconSize = gridSize * 3;
-var leftIconRightSpacing = gridSize * 2;
-var ITEM_SIDE_PADDING = gridSize * 1.25;
 /**
  * Allows chaining of style functions on top of base style functions
  * @param baseStyle the base custom cssFn
@@ -30,8 +26,6 @@ var ITEM_SIDE_PADDING = gridSize * 1.25;
  * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
  */
 
-exports.ITEM_SIDE_PADDING = ITEM_SIDE_PADDING;
-
 var overrideStyleFunction = function overrideStyleFunction(baseStyle) {
   var newStyle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
     return {};
@@ -74,31 +68,32 @@ var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
   return _objectSpread(_objectSpread(_objectSpread({
     // This padding is set to ensure that the center of the left icon
     // is approximately center aligned with the horizontal app switcher.
-    padding: "".concat(gridSize, "px ").concat(ITEM_SIDE_PADDING, "px"),
+    padding: "var(--ds-scale-100, 8px)".concat(" ", "var(--ds-scale-100, 10px)"),
     borderRadius: borderRadius,
     // -- TODO: DELETE THESE COLOR OVERRIDES WHEN CLEANING UP FALLBACK THEMING --
     // Menu and side navigation are now color aligned so they do not need this!
     // See: https://product-fabric.atlassian.net/browse/DSP-1684
-    backgroundColor: "var(--ds-surface, ".concat(_colors.N10, ")")
+    backgroundColor: "var(--ds-background-neutral-subtle, transparent)"
   }, !isDisabled && !isSelected && defaultStyles), !isDisabled && isSelected && selectedStyles), {}, (0, _defineProperty2.default)({}, '& [data-item-elem-before]', {
     // TODO: Can this be moved into menu?
     // center align icons with app-switcher regardless of size
     display: 'flex',
-    height: itemIconSize,
-    width: itemIconSize,
+    height: "var(--ds-scale-300, 24px)",
+    width: "var(--ds-scale-300, 24px)",
     alignItems: 'center',
     justifyContent: 'center',
-    marginRight: leftIconRightSpacing
+    // this margin could be removed if the respective item had a more
+    // compositional API so an Inline could be used to separate elements instead
+    marginRight: "var(--ds-scale-200, 16px)"
   }));
 };
 
 exports.baseSideNavItemStyle = baseSideNavItemStyle;
 
-var sectionHeaderStyle = function sectionHeaderStyle() {
+var sectionHeaderSpacingStyles = function sectionHeaderSpacingStyles() {
   return {
-    paddingLeft: "".concat(ITEM_SIDE_PADDING, "px"),
-    paddingRight: "".concat(ITEM_SIDE_PADDING, "px")
+    paddingInline: "var(--ds-scale-100, 10px)"
   };
 };
 
-exports.sectionHeaderStyle = sectionHeaderStyle;
+exports.sectionHeaderSpacingStyles = sectionHeaderSpacingStyles;

package/dist/cjs/components/Footer/index.js

@@ -15,15 +15,12 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _styles = require("../../common/styles");
 
-var _Item = require("../Item");
+var _Header = require("../Header");
 
-var Container = function Container(props) {
-  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  return /*#__PURE__*/_react.default.createElement("div", props);
-};
+var _Item = require("../Item");
 
 /**
- * __Header__
+ * __Footer__
  *
  * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
  * - [Code](https://atlassian.design/components/side-navigation/code)
@@ -38,8 +35,8 @@ var Footer = function Footer(props) {
       alignItems: 'center',
       width: '100%',
       '[data-item-elem-before]': {
-        marginRight: 0,
-        marginBottom: '8px',
+        marginRight: "var(--ds-scale-0, 0px)",
+        marginBottom: "var(--ds-scale-100, 8px)",
         display: 'inline-block'
       },
       '[data-item-title]': {
@@ -49,22 +46,37 @@ var Footer = function Footer(props) {
       '[data-item-description]': {
         textAlign: 'center',
         display: 'inline-block',
-        margin: '6px'
+        margin: "var(--ds-scale-075, 6px)"
       },
       // Will look interactive if the `component` is anything other than a div.
       'div&:hover': {
-        backgroundColor: 'transparent',
+        backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
         cursor: 'default'
       },
       'div&:active': {
-        backgroundColor: 'transparent',
+        backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
         color: "var(--ds-text-subtle, ".concat(_colors.N500, ")")
       }
     };
-  }, props.cssFn);
-  return /*#__PURE__*/_react.default.createElement(_Item.CustomItem // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  , (0, _extends2.default)({}, props, {
-    component: props.component || Container // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+  }, props.cssFn); // https://stackoverflow.com/a/39333479
+
+  var safeProps = function (_ref) {
+    var iconBefore = _ref.iconBefore,
+        onClick = _ref.onClick,
+        description = _ref.description,
+        children = _ref.children,
+        testId = _ref.testId;
+    return {
+      iconBefore: iconBefore,
+      onClick: onClick,
+      description: description,
+      children: children,
+      testId: testId
+    };
+  }(props);
+
+  return /*#__PURE__*/_react.default.createElement(_Item.CustomItem, (0, _extends2.default)({}, safeProps, {
+    component: props.component || _Header.Container // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     ,
     cssFn: cssFn
   }));

package/dist/cjs/components/Header/index.js

@@ -7,16 +7,18 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Container = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
 
+var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
+
 var _colors = require("@atlaskit/theme/colors");
 
 var _typography = require("@atlaskit/theme/typography");
@@ -25,17 +27,54 @@ var _styles = require("../../common/styles");
 
 var _Item = require("../Item");
 
-var _excluded = ["children"];
+var _excluded = ["children"],
+    _excluded2 = ["children"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var Container = function Container(props) {
-  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  return /*#__PURE__*/_react.default.createElement("div", props);
+/**
+ * __Container__
+ *
+ * A container for Header and Footer that safely handles props to the child component
+ */
+var Container = function Container(_ref) {
+  var children = _ref.children,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  // https://stackoverflow.com/a/39333479
+  var safeProps = function (_ref2) {
+    var className = _ref2.className,
+        testId = _ref2['data-testid'],
+        onClick = _ref2.onClick,
+        onMouseDown = _ref2.onMouseDown,
+        onDragStart = _ref2.onDragStart,
+        draggable = _ref2.draggable,
+        ref = _ref2.ref,
+        tabIndex = _ref2.tabIndex,
+        disabled = _ref2.disabled;
+    return {
+      className: className,
+      testId: testId,
+      onClick: onClick,
+      onMouseDown: onMouseDown,
+      onDragStart: onDragStart,
+      draggable: draggable,
+      ref: ref,
+      tabIndex: tabIndex,
+      disabled: disabled
+    };
+  }(props);
+
+  return /*#__PURE__*/_react.default.createElement(_box.default, (0, _extends2.default)({
+    as: "div",
+    display: "block"
+  }, safeProps), children);
 };
 
+exports.Container = Container;
+
 /**
  * __Header__
  *
@@ -44,22 +83,22 @@ var Container = function Container(props) {
  */
 var Header = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var cssFn = (0, _styles.overrideStyleFunction)(function () {
-    var _ref;
+    var _ref3;
 
-    return _ref = {
+    return _ref3 = {
       userSelect: 'auto'
-    }, (0, _defineProperty2.default)(_ref, '[data-item-title]', {
+    }, (0, _defineProperty2.default)(_ref3, '[data-item-title]', {
       fontSize: _typography.headingSizes.h400.size,
       letterSpacing: '-0.003em',
       fontWeight: 600,
       color: "var(--ds-text, ".concat(_colors.N500, ")")
-    }), (0, _defineProperty2.default)(_ref, 'div&:hover', {
-      backgroundColor: 'transparent',
+    }), (0, _defineProperty2.default)(_ref3, 'div&:hover', {
+      backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
       cursor: 'default'
-    }), (0, _defineProperty2.default)(_ref, 'div&:active', {
-      backgroundColor: 'transparent',
+    }), (0, _defineProperty2.default)(_ref3, 'div&:active', {
+      backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
       color: "var(--ds-text, ".concat(_colors.N500, ")")
-    }), _ref;
+    }), _ref3;
   }, props.cssFn);
   return /*#__PURE__*/_react.default.createElement(_Item.CustomItem, (0, _extends2.default)({}, props, {
     ref: ref,
@@ -69,9 +108,9 @@ var Header = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ,
     overrides: {
       Title: {
-        render: function render(_, _ref2) {
-          var children = _ref2.children,
-              props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+        render: function render(_, _ref4) {
+          var children = _ref4.children,
+              props = (0, _objectWithoutProperties2.default)(_ref4, _excluded2);
           return /*#__PURE__*/_react.default.createElement("h2", props, children);
         }
       }

package/dist/cjs/components/Item/skeleton-item.js

@@ -9,6 +9,8 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _menu = require("@atlaskit/menu");
@@ -17,10 +19,14 @@ var _styles = require("../../common/styles");
 
 var _context = require("../NestableNavigationContent/context");
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 /**
  * __Skeleton item__
  *
- * A skeleton item can be used to reduce the perceived laoding time.
+ * A skeleton item can be used to reduce the perceived loading time.
  *
  * - [Examples](https://atlassian.design/components/side-navigation/examples#loading)
  * - [Code](https://atlassian.design/components/side-navigation/code)
@@ -36,14 +42,14 @@ var SkeletonItem = function SkeletonItem(props) {
   return /*#__PURE__*/_react.default.createElement(_menu.SkeletonItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
   , (0, _extends2.default)({
     cssFn: function cssFn() {
-      return {
-        paddingLeft: _styles.ITEM_SIDE_PADDING,
-        paddingRight: _styles.ITEM_SIDE_PADDING,
+      return _objectSpread(_objectSpread({}, (0, _styles.sectionHeaderSpacingStyles)()), {}, {
+        // This doubles up & to get a higher specificity as well as to not overwite the base styles.
         '&&::before': {
-          // This doubles up & to get a higher specificity as well as to not overwite the base styles.
-          marginRight: 18
+          height: "var(--ds-scale-300, 20px)",
+          marginRight: "var(--ds-scale-200, 18px)",
+          width: "var(--ds-scale-300, 20px)"
         }
-      };
+      });
     } // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 
   }, props));

package/dist/cjs/components/LoadingItems/index.js

@@ -50,10 +50,12 @@ var LoadingItems = function LoadingItems(_ref) {
     key: "loading-section-".concat(isLoading),
     duration: _motion.mediumDurationMs
   }, function (motion, state) {
-    return (0, _react.jsx)("span", (0, _extends2.default)({}, motion, {
-      "data-testid": testId && "".concat(testId, "--").concat(state),
-      css: [baseMotionStyles, state === 'entering' && enteringStyles]
-    }), isLoading ? fallback : children);
+    return (// eslint-disable-next-line @repo/internal/react/use-primitives
+      (0, _react.jsx)("span", (0, _extends2.default)({}, motion, {
+        "data-testid": testId && "".concat(testId, "--").concat(state),
+        css: [baseMotionStyles, state === 'entering' && enteringStyles]
+      }), isLoading ? fallback : children)
+    );
   }));
 };
 

package/dist/cjs/components/NavigationContent/index.js

@@ -17,6 +17,8 @@ var _context = require("../NestableNavigationContent/context");
 
 var _styles = require("./styles");
 
+/* eslint-disable @repo/internal/react/use-primitives */
+
 /** @jsx jsx */
 
 /**
@@ -29,7 +31,8 @@ var _styles = require("./styles");
  */
 var NavigationContent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var showTopScrollIndicator = props.showTopScrollIndicator,
-      children = props.children;
+      children = props.children,
+      testId = props.testId;
 
   var _useShouldNestedEleme = (0, _context.useShouldNestedElementRender)(),
       shouldRender = _useShouldNestedEleme.shouldRender;
@@ -40,12 +43,14 @@ var NavigationContent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref
     return children;
   }
 
+  var typedRef = ref;
   return (0, _react2.jsx)("div", {
-    ref: ref,
+    ref: typedRef,
     css: (0, _styles.outerContainerCSS)({
       showTopScrollIndicator: showTopScrollIndicator,
       scrollbarWidth: scrollbar.width
-    })
+    }),
+    "data-testid": testId
   }, (0, _react2.jsx)("div", {
     ref: scrollbar.ref,
     css: (0, _styles.innerContainerCSS)({

package/dist/cjs/components/NavigationContent/styles.js

@@ -26,17 +26,15 @@ var scrollIndicatorZIndex = 1;
 var scrollIndicatorHeight = 2;
 var scrollIndicatorBorderRadius = 1;
 var containerPadding = (0, _constants.gridSize)();
-var itemHeadingTopMargin = containerPadding * 2.5;
-var itemHeadingBottomMargin = containerPadding * 0.75; // Skeleton content is slightly shorter than the real content.
+var itemHeadingContentHeight = _typography.headingSizes.h100.lineHeight;
+var skeletonHeadingHeight = containerPadding;
+var skeletonHeadingMarginOffset = 3; // Skeleton content is slightly shorter than the real content.
 // Because of that we slightly increase the top margin to offset this so the
 // containing size both real and skeleton always equal approx 30px.
 
-var itemHeadingContentHeight = _typography.headingSizes.h100.lineHeight;
-var skeletonHeadingHeight = containerPadding;
-var skeletonHeadingMarginOffset = 3;
-var skeletonHeadingTopMargin = itemHeadingTopMargin + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset; // We want to move the entire body up by 3px without affecting the height of the skeleton container.
+var skeletonHeadingTopMargin = containerPadding * 2.5 + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset; // We want to move the entire body up by 3px without affecting the height of the skeleton container.
 
-var skeletonHeadingBottomMargin = itemHeadingBottomMargin + skeletonHeadingMarginOffset;
+var skeletonHeadingBottomMargin = containerPadding * 0.75 + skeletonHeadingMarginOffset;
 
 /**
  * This outer container css contains the "real" scroll indicators which are
@@ -132,13 +130,13 @@ var containerCSS = function containerCSS(opts) {
     // so the spacing between matches what it would be if the indicator was a "block" element.
     // We use margin here so any child absolutely positioned elements are positioned correctly.
     marginTop: opts.showTopScrollIndicator ? scrollIndicatorHeight : 0,
-    marginLeft: containerPadding,
-    marginRight: containerPadding,
+    marginLeft: "var(--ds-scale-100, 8px)",
+    marginRight: "var(--ds-scale-100, 8px)",
     // Enables child absolutely positioned elements to be positioned relative to this element.
     position: 'relative',
     '& [data-ds--menu--heading-item]': {
-      marginTop: itemHeadingTopMargin,
-      marginBottom: itemHeadingBottomMargin
+      marginBottom: "var(--ds-scale-075, 6px)",
+      marginTop: "var(--ds-scale-200, 20px)"
     },
     '& [data-ds--menu--skeleton-heading-item]': {
       marginTop: skeletonHeadingTopMargin,

package/dist/cjs/components/NavigationFooter/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -7,14 +9,10 @@ exports.default = void 0;
 
 var _react = require("@emotion/react");
 
-var _constants = require("@atlaskit/theme/constants");
+var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
 
 /** @jsx jsx */
-var footerStyles = (0, _react.css)({
-  padding: (0, _constants.gridSize)(),
-  paddingBottom: (0, _constants.gridSize)() * 1.75,
-  position: 'relative'
-});
+
 /**
  * __Navigation footer__
  *
@@ -23,11 +21,15 @@ var footerStyles = (0, _react.css)({
  * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-
 var NavigationFooter = function NavigationFooter(_ref) {
   var children = _ref.children;
-  return (0, _react.jsx)("div", {
-    css: footerStyles
+  return (0, _react.jsx)(_box.default, {
+    display: "block",
+    position: "relative",
+    padding: "scale.100",
+    UNSAFE_style: {
+      paddingBottom: "var(--ds-scale-200, 14px)"
+    }
   }, children);
 };
 

package/dist/cjs/components/NavigationHeader/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -7,15 +9,10 @@ exports.default = void 0;
 
 var _react = require("@emotion/react");
 
-var _constants = require("@atlaskit/theme/constants");
+var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
 
 /** @jsx jsx */
-var navigationHeaderStyles = (0, _react.css)({
-  paddingTop: (0, _constants.gridSize)() * 3,
-  paddingRight: (0, _constants.gridSize)(),
-  paddingBottom: (0, _constants.gridSize)(),
-  paddingLeft: (0, _constants.gridSize)()
-});
+
 /**
  * __Navigation header__
  *
@@ -24,12 +21,15 @@ var navigationHeaderStyles = (0, _react.css)({
  * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
  * - [Code](https://atlassian.design/components/side-navigation/code)
  */
-
 var NavigationHeader = function NavigationHeader(props) {
   var children = props.children;
-  return (0, _react.jsx)("div", {
+  return (0, _react.jsx)(_box.default, {
+    display: "block",
     "data-navheader": true,
-    css: navigationHeaderStyles
+    padding: "scale.100",
+    UNSAFE_style: {
+      paddingTop: "var(--ds-scale-300, 24px)"
+    }
   }, children);
 };
 

package/dist/cjs/components/NestableNavigationContent/index.js

@@ -169,31 +169,35 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
     }
   };
 
-  return (0, _react2.jsx)("div", {
-    "data-testid": testId,
-    css: nestableNavigationContentStyles,
-    ref: containerRef,
-    tabIndex: -1,
-    onClick: manageFocus
-  }, (0, _react2.jsx)(_motion.ExitingPersistence, null, (0, _react2.jsx)(_nestingMotion.NestingMotion // Key is needed to have a unique react instance per stack name.
-  // This enables us to easily animate it in & out with exiting persistence.
-  , {
-    key: currentStackId,
-    enterFrom: transition === 'nesting' ? 'right' : 'left',
-    exitTo: transition === 'nesting' ? 'left' : 'right',
-    testId: testId && "".concat(testId, "-anim")
-  }, function (motion) {
-    return (0, _react2.jsx)("div", (0, _extends2.default)({
-      css: nestingRootStyles
-    }, motion), (0, _react2.jsx)(_context.NestedContext.Provider, {
-      // This provider is inside the NestingMotion to ensure it keeps a stale
-      // reference to the previous value.
-      value: context
-    }, (0, _react2.jsx)(_NestingItem.default, {
-      title: "",
-      id: ROOT_ID
-    }, children)));
-  })));
+  return (// eslint-disable-next-line @repo/internal/react/use-primitives
+    (0, _react2.jsx)("div", {
+      "data-testid": testId,
+      css: nestableNavigationContentStyles,
+      ref: containerRef,
+      tabIndex: -1,
+      onClick: manageFocus
+    }, (0, _react2.jsx)(_motion.ExitingPersistence, null, (0, _react2.jsx)(_nestingMotion.NestingMotion // Key is needed to have a unique react instance per stack name.
+    // This enables us to easily animate it in & out with exiting persistence.
+    , {
+      key: currentStackId,
+      enterFrom: transition === 'nesting' ? 'right' : 'left',
+      exitTo: transition === 'nesting' ? 'left' : 'right',
+      testId: testId && "".concat(testId, "-anim")
+    }, function (motion) {
+      return (// eslint-disable-next-line @repo/internal/react/use-primitives
+        (0, _react2.jsx)("div", (0, _extends2.default)({
+          css: nestingRootStyles
+        }, motion), (0, _react2.jsx)(_context.NestedContext.Provider, {
+          // This provider is inside the NestingMotion to ensure it keeps a stale
+          // reference to the previous value.
+          value: context
+        }, (0, _react2.jsx)(_NestingItem.default, {
+          title: "",
+          id: ROOT_ID
+        }, children)))
+      );
+    })))
+  );
 };
 
 var _default = NestableNavigationContent;

package/dist/cjs/components/NestingItem/index.js

@@ -23,12 +23,12 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@emotion/react");
 
+var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
+
 var _arrowRightCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-right-circle"));
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _constants = require("@atlaskit/theme/constants");
-
 var _styles = require("../../common/styles");
 
 var _index = require("../index");
@@ -51,19 +51,11 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var nestingItemStyles = (0, _react2.css)({
-  marginRight: (0, _constants.gridSize)(),
-  marginLeft: (0, _constants.gridSize)(),
-  // This padding bottom needs to match the section margin inside @atlaskit/menu.
-  paddingTop: (0, _constants.gridSize)() * 0.75,
-  paddingBottom: (0, _constants.gridSize)() * 0.75
-});
 /**
  * NestingItem will render itself differently depending in what context it is rendered in.
  * When not open - it will render itself as an item.
  * When open - it will render its children.
  */
-
 var NestingItem = function NestingItem(props) {
   var children = props.children,
       iconAfter = props.iconAfter,
@@ -138,8 +130,11 @@ var NestingItem = function NestingItem(props) {
   if (currentStackId === id) {
     return (0, _react2.jsx)(_context.NestedContext.Provider, {
       value: context
-    }, stack.length >= 1 && (0, _react2.jsx)("div", {
-      css: nestingItemStyles
+    }, stack.length >= 1 && (0, _react2.jsx)(_box.default, {
+      as: "div",
+      display: "block",
+      paddingBlock: "scale.075",
+      paddingInline: "scale.100"
     }, backButton), (0, _react2.jsx)(_index.NavigationContent, {
       testId: testId,
       showTopScrollIndicator: stack.length >= 1
@@ -151,10 +146,14 @@ var NestingItem = function NestingItem(props) {
   }
 
   var componentProps = _objectSpread(_objectSpread({
-    iconAfter: (0, _react2.jsx)(_react.Fragment, null, iconAfter ? (0, _react2.jsx)("span", {
-      "data-custom-icon": true
-    }, iconAfter) : null, (0, _react2.jsx)("span", {
-      "data-right-arrow": true
+    iconAfter: (0, _react2.jsx)(_react.Fragment, null, iconAfter ? (0, _react2.jsx)(_box.default, {
+      "data-custom-icon": true,
+      display: "inline",
+      as: "span"
+    }, iconAfter) : null, (0, _react2.jsx)(_box.default, {
+      "data-right-arrow": true,
+      display: "inline",
+      as: "span"
     }, (0, _react2.jsx)(_arrowRightCircle.default, {
       testId: testId && "".concat(testId, "--item--right-arrow"),
       secondaryColor: "var(--ds-surface, ".concat(_colors.N10, ")"),