@atlaskit/side-navigation 1.4.2 → 1.5.0

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

@@ -2,29 +2,22 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
+import Box from '@atlaskit/ds-explorations/box';
 import RightArrow from '@atlaskit/icon/glyph/arrow-right-circle';
 import { N10 } from '@atlaskit/theme/colors';
-import { gridSize } from '@atlaskit/theme/constants';
 import { overrideStyleFunction } from '../../common/styles';
 import { ButtonItem, CustomItem, NavigationContent } from '../index';
 import { ROOT_ID } from '../NestableNavigationContent';
 import { NestedContext, useNestedContext } from '../NestableNavigationContent/context';
 import { useChildIdsEffect } from '../utils/hooks';
 import { nestingItemStyle } from './styles';
-const nestingItemStyles = css({
-  marginRight: gridSize(),
-  marginLeft: gridSize(),
-  // This padding bottom needs to match the section margin inside @atlaskit/menu.
-  paddingTop: gridSize() * 0.75,
-  paddingBottom: 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.
  */
-
 const NestingItem = props => {
   const {
     children,
@@ -91,8 +84,11 @@ const NestingItem = props => {
   if (currentStackId === id) {
     return jsx(NestedContext.Provider, {
       value: context
-    }, stack.length >= 1 && jsx("div", {
-      css: nestingItemStyles
+    }, stack.length >= 1 && jsx(Box, {
+      as: "div",
+      display: "block",
+      paddingBlock: "scale.075",
+      paddingInline: "scale.100"
     }, backButton), jsx(NavigationContent, {
       testId: testId,
       showTopScrollIndicator: stack.length >= 1
@@ -104,10 +100,14 @@ const NestingItem = props => {
   }
 
   const componentProps = {
-    iconAfter: jsx(Fragment, null, iconAfter ? jsx("span", {
-      "data-custom-icon": true
-    }, iconAfter) : null, jsx("span", {
-      "data-right-arrow": true
+    iconAfter: jsx(Fragment, null, iconAfter ? jsx(Box, {
+      "data-custom-icon": true,
+      display: "inline",
+      as: "span"
+    }, iconAfter) : null, jsx(Box, {
+      "data-right-arrow": true,
+      display: "inline",
+      as: "span"
     }, jsx(RightArrow, {
       testId: testId && `${testId}--item--right-arrow`,
       secondaryColor: `var(--ds-surface, ${N10})`,

package/dist/es2019/components/Section/heading-item.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { HeadingItem as MenuHeadingItem } from '@atlaskit/menu';
-import { overrideStyleFunction, sectionHeaderStyle } from '../../common/styles';
+import { overrideStyleFunction, sectionHeaderSpacingStyles } from '../../common/styles';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
 
 /**
@@ -19,7 +19,7 @@ const HeadingItem = props => {
     return null;
   }
 
-  const cssFn = overrideStyleFunction(sectionHeaderStyle, props.cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides, @repo/internal/react/no-unsafe-spread-props
+  const cssFn = overrideStyleFunction(sectionHeaderSpacingStyles, props.cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides, @repo/internal/react/no-unsafe-spread-props
 
   return /*#__PURE__*/React.createElement(MenuHeadingItem, _extends({}, props, {
     cssFn: cssFn

package/dist/es2019/components/Section/section.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef } from 'react';
 import { Section as MenuSection } from '@atlaskit/menu';
-import { sectionHeaderStyle } from '../../common/styles';
+import { sectionHeaderSpacingStyles } from '../../common/styles';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
 // Type needed on props to extract types with extract react types.
 
@@ -28,7 +28,7 @@ const Section = /*#__PURE__*/forwardRef((props, ref) => {
     ,
     overrides: {
       HeadingItem: {
-        cssFn: sectionHeaderStyle
+        cssFn: sectionHeaderSpacingStyles
       }
     }
   }));

package/dist/es2019/components/Section/skeleton-heading-item.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { SkeletonHeadingItem as MenuSkeletonHeadingItem } from '@atlaskit/menu';
-import { ITEM_SIDE_PADDING } from '../../common/styles';
+import { sectionHeaderSpacingStyles } from '../../common/styles';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
 
 /**
@@ -22,9 +22,7 @@ const SkeletonHeadingItem = props => {
 
   return /*#__PURE__*/React.createElement(MenuSkeletonHeadingItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
   , _extends({
-    cssFn: () => ({
-      paddingLeft: ITEM_SIDE_PADDING,
-      paddingRight: ITEM_SIDE_PADDING
+    cssFn: () => ({ ...sectionHeaderSpacingStyles()
     }) // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 
   }, props));

package/dist/es2019/components/SideNavigation/index.js

@@ -2,11 +2,11 @@
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { N10, N500 } from '@atlaskit/theme/colors';
-import { gridSize } from '@atlaskit/theme/constants';
+const sidebarMinWidth = '240px';
 const sideNavStyles = css({
   display: 'flex',
   width: '100%',
-  minWidth: gridSize() * 30,
+  minWidth: sidebarMinWidth,
   height: '100%',
   position: 'relative',
   flexDirection: 'column',
@@ -30,11 +30,13 @@ const SideNavigation = /*#__PURE__*/forwardRef((props, ref) => {
     testId,
     label
   } = props;
-  return jsx("nav", {
-    ref: ref,
-    "data-testid": testId,
-    "aria-label": label,
-    css: sideNavStyles
-  }, children);
+  return (// eslint-disable-next-line @repo/internal/react/use-primitives
+    jsx("nav", {
+      ref: ref,
+      "data-testid": testId,
+      "aria-label": label,
+      css: sideNavStyles
+    }, children)
+  );
 });
 export default SideNavigation;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/side-navigation",
-	"version": "1.4.2",
+	"version": "1.5.0",
 	"sideEffects": false
 }

package/dist/esm/common/styles.js

@@ -4,13 +4,9 @@ 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) { _defineProperty(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; }
 
-import { B400, B50, N10, N30, N500 } from '@atlaskit/theme/colors';
-import { borderRadius as borderRadiusFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
-var gridSize = gridSizeFn();
+import { B400, B50, N30, N500 } from '@atlaskit/theme/colors';
+import { borderRadius as borderRadiusFn } from '@atlaskit/theme/constants';
 var borderRadius = borderRadiusFn();
-var itemIconSize = gridSize * 3;
-var leftIconRightSpacing = gridSize * 2;
-export var ITEM_SIDE_PADDING = gridSize * 1.25;
 /**
  * Allows chaining of style functions on top of base style functions
  * @param baseStyle the base custom cssFn
@@ -58,26 +54,27 @@ export 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(N10, ")")
+    backgroundColor: "var(--ds-background-neutral-subtle, transparent)"
   }, !isDisabled && !isSelected && defaultStyles), !isDisabled && isSelected && selectedStyles), {}, _defineProperty({}, '& [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)"
   }));
 };
-export var sectionHeaderStyle = function sectionHeaderStyle() {
+export var sectionHeaderSpacingStyles = function sectionHeaderSpacingStyles() {
   return {
-    paddingLeft: "".concat(ITEM_SIDE_PADDING, "px"),
-    paddingRight: "".concat(ITEM_SIDE_PADDING, "px")
+    paddingInline: "var(--ds-scale-100, 10px)"
   };
 };

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

@@ -2,15 +2,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { N500 } from '@atlaskit/theme/colors';
 import { overrideStyleFunction } from '../../common/styles';
+import { Container } from '../Header';
 import { CustomItem } from '../Item';
 
-var Container = function Container(props) {
-  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  return /*#__PURE__*/React.createElement("div", props);
-};
-
 /**
- * __Header__
+ * __Footer__
  *
  * - [Examples](https://atlassian.design/components/side-navigation/examples#header-and-footer)
  * - [Code](https://atlassian.design/components/side-navigation/code)
@@ -25,8 +21,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]': {
@@ -36,21 +32,36 @@ 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(N500, ")")
       }
     };
-  }, props.cssFn);
-  return /*#__PURE__*/React.createElement(CustomItem // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  , _extends({}, props, {
+  }, 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.createElement(CustomItem, _extends({}, safeProps, {
     component: props.component || Container // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
     ,
     cssFn: cssFn

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

@@ -1,16 +1,54 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children"];
+var _excluded = ["children"],
+    _excluded2 = ["children"];
+
+/* eslint-disable @repo/internal/react/use-primitives */
 import React, { forwardRef } from 'react';
+import Box from '@atlaskit/ds-explorations/box';
 import { N500 } from '@atlaskit/theme/colors';
 import { headingSizes } from '@atlaskit/theme/typography';
 import { overrideStyleFunction } from '../../common/styles';
 import { CustomItem } from '../Item';
+/**
+ * __Container__
+ *
+ * A container for Header and Footer that safely handles props to the child component
+ */
+
+export var Container = function Container(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_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);
 
-var Container = function Container(props) {
-  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  return /*#__PURE__*/React.createElement("div", props);
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: "div",
+    display: "block"
+  }, safeProps), children);
 };
 
 /**
@@ -21,22 +59,22 @@ var Container = function Container(props) {
  */
 var Header = /*#__PURE__*/forwardRef(function (props, ref) {
   var cssFn = overrideStyleFunction(function () {
-    var _ref;
+    var _ref3;
 
-    return _ref = {
+    return _ref3 = {
       userSelect: 'auto'
-    }, _defineProperty(_ref, '[data-item-title]', {
+    }, _defineProperty(_ref3, '[data-item-title]', {
       fontSize: headingSizes.h400.size,
       letterSpacing: '-0.003em',
       fontWeight: 600,
       color: "var(--ds-text, ".concat(N500, ")")
-    }), _defineProperty(_ref, 'div&:hover', {
-      backgroundColor: 'transparent',
+    }), _defineProperty(_ref3, 'div&:hover', {
+      backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
       cursor: 'default'
-    }), _defineProperty(_ref, 'div&:active', {
-      backgroundColor: 'transparent',
+    }), _defineProperty(_ref3, 'div&:active', {
+      backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
       color: "var(--ds-text, ".concat(N500, ")")
-    }), _ref;
+    }), _ref3;
   }, props.cssFn);
   return /*#__PURE__*/React.createElement(CustomItem, _extends({}, props, {
     ref: ref,
@@ -46,9 +84,9 @@ var Header = /*#__PURE__*/forwardRef(function (props, ref) {
     ,
     overrides: {
       Title: {
-        render: function render(_, _ref2) {
-          var children = _ref2.children,
-              props = _objectWithoutProperties(_ref2, _excluded);
+        render: function render(_, _ref4) {
+          var children = _ref4.children,
+              props = _objectWithoutProperties(_ref4, _excluded2);
 
           return /*#__PURE__*/React.createElement("h2", props, children);
         }

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

@@ -1,13 +1,19 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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) { _defineProperty(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; }
+
 import React from 'react';
 import { SkeletonItem as SkelItem } from '@atlaskit/menu';
-import { ITEM_SIDE_PADDING } from '../../common/styles';
+import { sectionHeaderSpacingStyles } from '../../common/styles';
 import { useShouldNestedElementRender } from '../NestableNavigationContent/context';
 
 /**
  * __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)
@@ -23,14 +29,14 @@ var SkeletonItem = function SkeletonItem(props) {
   return /*#__PURE__*/React.createElement(SkelItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis, @repo/internal/react/no-unsafe-overrides
   , _extends({
     cssFn: function cssFn() {
-      return {
-        paddingLeft: ITEM_SIDE_PADDING,
-        paddingRight: ITEM_SIDE_PADDING,
+      return _objectSpread(_objectSpread({}, 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/esm/components/LoadingItems/index.js

@@ -38,10 +38,12 @@ var LoadingItems = function LoadingItems(_ref) {
     key: "loading-section-".concat(isLoading),
     duration: mediumDurationMs
   }, function (motion, state) {
-    return jsx("span", _extends({}, 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
+      jsx("span", _extends({}, motion, {
+        "data-testid": testId && "".concat(testId, "--").concat(state),
+        css: [baseMotionStyles, state === 'entering' && enteringStyles]
+      }), isLoading ? fallback : children)
+    );
   }));
 };
 

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

@@ -1,3 +1,5 @@
+/* eslint-disable @repo/internal/react/use-primitives */
+
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { jsx } from '@emotion/react';
@@ -15,7 +17,8 @@ import { containerCSS, innerContainerCSS, outerContainerCSS } from './styles';
  */
 var NavigationContent = /*#__PURE__*/forwardRef(function (props, ref) {
   var showTopScrollIndicator = props.showTopScrollIndicator,
-      children = props.children;
+      children = props.children,
+      testId = props.testId;
 
   var _useShouldNestedEleme = useShouldNestedElementRender(),
       shouldRender = _useShouldNestedEleme.shouldRender;
@@ -26,12 +29,14 @@ var NavigationContent = /*#__PURE__*/forwardRef(function (props, ref) {
     return children;
   }
 
+  var typedRef = ref;
   return jsx("div", {
-    ref: ref,
+    ref: typedRef,
     css: outerContainerCSS({
       showTopScrollIndicator: showTopScrollIndicator,
       scrollbarWidth: scrollbar.width
-    })
+    }),
+    "data-testid": testId
   }, jsx("div", {
     ref: scrollbar.ref,
     css: innerContainerCSS({

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

@@ -13,17 +13,15 @@ var scrollIndicatorZIndex = 1;
 var scrollIndicatorHeight = 2;
 var scrollIndicatorBorderRadius = 1;
 var containerPadding = gridSize();
-var itemHeadingTopMargin = containerPadding * 2.5;
-var itemHeadingBottomMargin = containerPadding * 0.75; // Skeleton content is slightly shorter than the real content.
+var itemHeadingContentHeight = 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 = 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
@@ -113,13 +111,13 @@ export 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/esm/components/NavigationFooter/index.js

@@ -1,11 +1,7 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/react';
-import { gridSize } from '@atlaskit/theme/constants';
-var footerStyles = css({
-  padding: gridSize(),
-  paddingBottom: gridSize() * 1.75,
-  position: 'relative'
-});
+import { jsx } from '@emotion/react';
+import Box from '@atlaskit/ds-explorations/box';
+
 /**
  * __Navigation footer__
  *
@@ -14,11 +10,15 @@ var footerStyles = 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 jsx("div", {
-    css: footerStyles
+  return jsx(Box, {
+    display: "block",
+    position: "relative",
+    padding: "scale.100",
+    UNSAFE_style: {
+      paddingBottom: "var(--ds-scale-200, 14px)"
+    }
   }, children);
 };
 

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

@@ -1,12 +1,7 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/react';
-import { gridSize } from '@atlaskit/theme/constants';
-var navigationHeaderStyles = css({
-  paddingTop: gridSize() * 3,
-  paddingRight: gridSize(),
-  paddingBottom: gridSize(),
-  paddingLeft: gridSize()
-});
+import { jsx } from '@emotion/react';
+import Box from '@atlaskit/ds-explorations/box';
+
 /**
  * __Navigation header__
  *
@@ -15,12 +10,15 @@ var navigationHeaderStyles = 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 jsx("div", {
+  return jsx(Box, {
+    display: "block",
     "data-navheader": true,
-    css: navigationHeaderStyles
+    padding: "scale.100",
+    UNSAFE_style: {
+      paddingTop: "var(--ds-scale-300, 24px)"
+    }
   }, children);
 };