@atlaskit/side-navigation 1.10.3 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/side-navigation
 
+## 2.0.0
+
+### Major Changes
+
+- [`cf66b43d67a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf66b43d67a) - Updated spacing of Side Navigation components to ensure token values and fallbacks are matching. When used with space tokens enabled, there is no visual difference with the previous release of Side Navigation. When used without space tokens enabled there will be a slight visual difference; we recommend enabling space tokens if they are not already enabled to resolve this.
+
+## 1.10.4
+
+### Patch Changes
+
+- [`1ed303de3e8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1ed303de3e8) - Updated dependencies
+
 ## 1.10.3
 
 ### Patch Changes

package/dist/cjs/common/styles.js

@@ -57,7 +57,7 @@ var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
     // This padding is set to ensure that the center of the left icon
     // is approximately center aligned with the horizontal app switcher.
     paddingBlock: "var(--ds-space-100, 8px)",
-    paddingInline: "var(--ds-space-100, 10px)",
+    paddingInline: "var(--ds-space-100, 8px)",
     borderRadius: "var(--ds-border-radius, 3px)",
     // -- TODO: DELETE THESE COLOR OVERRIDES WHEN CLEANING UP FALLBACK THEMING --
     // Menu and side navigation are now color aligned so they do not need this!
@@ -71,7 +71,7 @@ var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
 exports.baseSideNavItemStyle = baseSideNavItemStyle;
 var sectionHeaderSpacingStyles = function sectionHeaderSpacingStyles() {
   return {
-    paddingInline: "var(--ds-space-100, 10px)"
+    paddingInline: "var(--ds-space-100, 8px)"
   };
 };
 exports.sectionHeaderSpacingStyles = sectionHeaderSpacingStyles;

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

@@ -34,9 +34,9 @@ var SkeletonItem = function SkeletonItem(props) {
       return _objectSpread(_objectSpread({}, (0, _styles.sectionHeaderSpacingStyles)()), {}, {
         // This doubles up & to get a higher specificity as well as to not overwite the base styles.
         '&&::before': {
-          height: "var(--ds-space-300, 20px)",
-          marginRight: "var(--ds-space-200, 18px)",
-          width: "var(--ds-space-300, 20px)"
+          height: "var(--ds-space-300, 24px)",
+          marginRight: "var(--ds-space-200, 16px)",
+          width: "var(--ds-space-300, 24px)"
         }
       });
     }

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

@@ -121,7 +121,7 @@ var containerCSS = function containerCSS(opts) {
     position: 'relative',
     '& [data-ds--menu--heading-item]': {
       marginBottom: "var(--ds-space-075, 6px)",
-      marginTop: "var(--ds-space-200, 20px)"
+      marginTop: "var(--ds-space-200, 16px)"
     },
     '& [data-ds--menu--skeleton-heading-item]': {
       marginTop: skeletonHeadingTopMargin,

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

@@ -24,7 +24,7 @@ var NavigationFooter = function NavigationFooter(_ref) {
     position: "relative",
     padding: "space.100",
     UNSAFE_style: {
-      paddingBottom: "var(--ds-space-200, 14px)"
+      paddingBottom: "var(--ds-space-200, 16px)"
     }
   }, children);
 };

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

@@ -148,7 +148,7 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
       containerRef.current && containerRef.current.focus();
     }
   };
-  return (0, _react2.jsx)("div", {
+  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
     "data-testid": testId,
     css: nestableNavigationContentStyles,
     ref: containerRef,
@@ -173,7 +173,7 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
       title: "",
       id: ROOT_ID
     }, children)));
-  })));
+  }))));
 };
 var _default = NestableNavigationContent;
 exports.default = _default;

package/dist/es2019/common/styles.js

@@ -44,7 +44,7 @@ export const baseSideNavItemStyle = ({
     // This padding is set to ensure that the center of the left icon
     // is approximately center aligned with the horizontal app switcher.
     paddingBlock: "var(--ds-space-100, 8px)",
-    paddingInline: "var(--ds-space-100, 10px)",
+    paddingInline: "var(--ds-space-100, 8px)",
     borderRadius: "var(--ds-border-radius, 3px)",
     // -- TODO: DELETE THESE COLOR OVERRIDES WHEN CLEANING UP FALLBACK THEMING --
     // Menu and side navigation are now color aligned so they do not need this!
@@ -62,6 +62,6 @@ export const baseSideNavItemStyle = ({
 };
 export const sectionHeaderSpacingStyles = () => {
   return {
-    paddingInline: "var(--ds-space-100, 10px)"
+    paddingInline: "var(--ds-space-100, 8px)"
   };
 };

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

@@ -25,9 +25,9 @@ const SkeletonItem = props => {
       ...sectionHeaderSpacingStyles(),
       // This doubles up & to get a higher specificity as well as to not overwite the base styles.
       '&&::before': {
-        height: "var(--ds-space-300, 20px)",
-        marginRight: "var(--ds-space-200, 18px)",
-        width: "var(--ds-space-300, 20px)"
+        height: "var(--ds-space-300, 24px)",
+        marginRight: "var(--ds-space-200, 16px)",
+        width: "var(--ds-space-300, 24px)"
       }
     })
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props

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

@@ -107,7 +107,7 @@ export const containerCSS = opts => ({
   position: 'relative',
   '& [data-ds--menu--heading-item]': {
     marginBottom: "var(--ds-space-075, 6px)",
-    marginTop: "var(--ds-space-200, 20px)"
+    marginTop: "var(--ds-space-200, 16px)"
   },
   '& [data-ds--menu--skeleton-heading-item]': {
     marginTop: skeletonHeadingTopMargin,

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

@@ -18,7 +18,7 @@ const NavigationFooter = ({
     position: "relative",
     padding: "space.100",
     UNSAFE_style: {
-      paddingBottom: "var(--ds-space-200, 14px)"
+      paddingBottom: "var(--ds-space-200, 16px)"
     }
   }, children);
 };

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { ExitingPersistence } from '@atlaskit/motion';
 import { GoBackItem as GoBackButton } from '../Item';
@@ -131,7 +131,7 @@ const NestableNavigationContent = props => {
       containerRef.current && containerRef.current.focus();
     }
   };
-  return jsx("div", {
+  return jsx(Fragment, null, jsx("div", {
     "data-testid": testId,
     css: nestableNavigationContentStyles,
     ref: containerRef,
@@ -154,6 +154,6 @@ const NestableNavigationContent = props => {
   }, jsx(NestingItem, {
     title: "",
     id: ROOT_ID
-  }, children))))));
+  }, children)))))));
 };
 export default NestableNavigationContent;

package/dist/esm/common/styles.js

@@ -49,7 +49,7 @@ export var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
     // This padding is set to ensure that the center of the left icon
     // is approximately center aligned with the horizontal app switcher.
     paddingBlock: "var(--ds-space-100, 8px)",
-    paddingInline: "var(--ds-space-100, 10px)",
+    paddingInline: "var(--ds-space-100, 8px)",
     borderRadius: "var(--ds-border-radius, 3px)",
     // -- TODO: DELETE THESE COLOR OVERRIDES WHEN CLEANING UP FALLBACK THEMING --
     // Menu and side navigation are now color aligned so they do not need this!
@@ -62,6 +62,6 @@ export var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
 };
 export var sectionHeaderSpacingStyles = function sectionHeaderSpacingStyles() {
   return {
-    paddingInline: "var(--ds-space-100, 10px)"
+    paddingInline: "var(--ds-space-100, 8px)"
   };
 };

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

@@ -27,9 +27,9 @@ var SkeletonItem = function SkeletonItem(props) {
       return _objectSpread(_objectSpread({}, sectionHeaderSpacingStyles()), {}, {
         // This doubles up & to get a higher specificity as well as to not overwite the base styles.
         '&&::before': {
-          height: "var(--ds-space-300, 20px)",
-          marginRight: "var(--ds-space-200, 18px)",
-          width: "var(--ds-space-300, 20px)"
+          height: "var(--ds-space-300, 24px)",
+          marginRight: "var(--ds-space-200, 16px)",
+          width: "var(--ds-space-300, 24px)"
         }
       });
     }

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

@@ -113,7 +113,7 @@ export var containerCSS = function containerCSS(opts) {
     position: 'relative',
     '& [data-ds--menu--heading-item]': {
       marginBottom: "var(--ds-space-075, 6px)",
-      marginTop: "var(--ds-space-200, 20px)"
+      marginTop: "var(--ds-space-200, 16px)"
     },
     '& [data-ds--menu--skeleton-heading-item]': {
       marginTop: skeletonHeadingTopMargin,

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

@@ -17,7 +17,7 @@ var NavigationFooter = function NavigationFooter(_ref) {
     position: "relative",
     padding: "space.100",
     UNSAFE_style: {
-      paddingBottom: "var(--ds-space-200, 14px)"
+      paddingBottom: "var(--ds-space-200, 16px)"
     }
   }, children);
 };

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { ExitingPersistence } from '@atlaskit/motion';
 import { GoBackItem as GoBackButton } from '../Item';
@@ -139,7 +139,7 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
       containerRef.current && containerRef.current.focus();
     }
   };
-  return jsx("div", {
+  return jsx(Fragment, null, jsx("div", {
     "data-testid": testId,
     css: nestableNavigationContentStyles,
     ref: containerRef,
@@ -164,6 +164,6 @@ var NestableNavigationContent = function NestableNavigationContent(props) {
       title: "",
       id: ROOT_ID
     }, children)));
-  })));
+  }))));
 };
 export default NestableNavigationContent;

package/dist/types/components/Section/section.d.ts

@@ -21,7 +21,8 @@ export interface SectionProps {
      */
     testId?: string;
     /**
-     * Specifically adds <ul> and <li> elements around the items for better semantic markup if it is a list of items
+     * Adds `<ul>` and `<li>` tags around the items for better semantic markup in a list of items.
+     *
      */
     isList?: boolean;
 }

package/dist/types-ts4.5/components/Section/section.d.ts

@@ -21,7 +21,8 @@ export interface SectionProps {
      */
     testId?: string;
     /**
-     * Specifically adds <ul> and <li> elements around the items for better semantic markup if it is a list of items
+     * Adds `<ul>` and `<li>` tags around the items for better semantic markup in a list of items.
+     *
      */
     isList?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/side-navigation",
-  "version": "1.10.3",
+  "version": "2.0.0",
   "description": "A highly composable side navigation component that supports nested views.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -37,9 +37,9 @@
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/menu": "^1.9.0",
     "@atlaskit/motion": "^1.4.0",
-    "@atlaskit/primitives": "^1.0.0",
+    "@atlaskit/primitives": "^1.2.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.11.0",
+    "@atlaskit/tokens": "^1.14.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -47,15 +47,16 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
+    "@af/accessibility-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/feature-flags-test-utils": "*",
     "@testing-library/react": "^12.1.5",
-    "@types/jest-axe": "^3.5.0",
+    "@types/jest-axe": "^3.5.5",
     "ast-types": "^0.13.3",
-    "jest-axe": "^4.0.0",
+    "jest-axe": "^8.0.0",
     "jest-emotion": "^10.0.32",
     "jscodeshift": "^0.13.0",
     "raf-stub": "^2.0.1",

package/dist/cjs/version.json

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

package/dist/es2019/version.json

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

package/dist/esm/version.json

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