@atlaskit/side-navigation 3.1.1 → 3.1.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/side-navigation
 
+## 3.1.3
+
+### Patch Changes
+
+-   [#102250](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102250)
+    [`ba7dc54866b9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ba7dc54866b9) -
+    Update footer to use logical property for padding. Internal changes to tokenise typography
+    values.
+
+## 3.1.2
+
+### Patch Changes
+
+-   [#98707](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98707)
+    [`7cce9cbf2f08`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7cce9cbf2f08) -
+    Internal changes to how text is rendered. There is no expected visual change.
+
 ## 3.1.1
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -18,9 +18,6 @@
         "../src/**/test.*"
     ],
     "references": [
-        {
-            "path": "../../ds-explorations/afm-cc/tsconfig.json"
-        },
         {
             "path": "../../ds-lib/afm-cc/tsconfig.json"
         },

package/constellation/index/props.mdx

@@ -1,30 +1,35 @@
-import SideNavigationProps from '!!extract-react-types-loader!../../src/components/SideNavigation';
-import HeaderProps from '!!extract-react-types-loader!../../src/components/Header';
-import FooterProps from '!!extract-react-types-loader!../../docs/ert/footer';
-import NavigationContentProps from '!!extract-react-types-loader!../../src/components/NavigationContent';
-import NestableNavigationContentProps from '!!extract-react-types-loader!../../src/components/NestableNavigationContent';
-import SectionProps from '!!extract-react-types-loader!../../src/components/Section';
+---
+props:
+    packageName: '@atlaskit/side-navigation'
+    exports:
+        - SideNavigation
+        - Header
+        - Footer
+        - NavigationContent
+        - NestableNavigationContent
+        - Section
+---
 
 ### Navigation props
 
-<PropsTable heading="" props={SideNavigationProps} />
+<TSMorphProps exportName="SideNavigation" packageName="@atlaskit/side-navigation" />
 
 ### Header props
 
-<PropsTable heading="" props={HeaderProps} />
+<TSMorphProps exportName="Header" packageName="@atlaskit/side-navigation" />
 
 ### Footer props
 
-<PropsTable heading="" props={FooterProps} />
+<TSMorphProps exportName="Footer" packageName="@atlaskit/side-navigation" />
 
 ### Content props
 
-<PropsTable heading="" props={NavigationContentProps} />
+<TSMorphProps exportName="NavigationContent" packageName="@atlaskit/side-navigation" />
 
 ### Nestable content props
 
-<PropsTable heading="" props={NestableNavigationContentProps} />
+<TSMorphProps exportName="NestableNavigationContent" packageName="@atlaskit/side-navigation" />
 
 ### Section props
 
-<PropsTable heading="" props={SectionProps} />
+<TSMorphProps exportName="Section" packageName="@atlaskit/side-navigation" />

package/dist/cjs/common/styles.js

@@ -63,8 +63,8 @@ var baseSideNavItemStyle = exports.baseSideNavItemStyle = function baseSideNavIt
     // See: https://product-fabric.atlassian.net/browse/DSP-1684
     backgroundColor: "var(--ds-background-neutral-subtle, transparent)"
   }, !isDisabled && !isSelected && defaultStyles), !isDisabled && isSelected && selectedStyles), {}, (0, _defineProperty2.default)({}, '& [data-item-elem-before]', {
-    height: "var(--ds-space-300, 24px)",
-    width: "var(--ds-space-300, 24px)"
+    height: '1.5rem',
+    width: '1.5rem'
   }));
 };
 var sectionHeaderSpacingStyles = exports.sectionHeaderSpacingStyles = function sectionHeaderSpacingStyles() {

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
-var _text = _interopRequireDefault(require("@atlaskit/ds-explorations/text"));
 var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
@@ -18,8 +17,8 @@ var _Item = require("../Item");
 
 var iconContainerStyles = (0, _primitives.xcss)({
   display: 'inline-block',
-  width: 'size.200',
-  height: 'size.200'
+  width: '1.5rem',
+  height: '1.5rem'
 });
 /**
  * __Footer__
@@ -43,7 +42,7 @@ var OldFooter = function OldFooter(props) {
       },
       '[data-item-title]': {
         textAlign: 'center',
-        fontSize: 12
+        font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
       },
       '[data-item-description]': {
         textAlign: 'center',
@@ -106,16 +105,15 @@ var Footer = function Footer(_ref2) {
     xcss: iconContainerStyles
   }, iconBefore), /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
     space: "space.075"
-  }, /*#__PURE__*/_react.default.createElement(_text.default, {
-    fontSize: "size.075",
-    textAlign: "center",
-    lineHeight: "lineHeight.100"
-  }, children), description && /*#__PURE__*/_react.default.createElement(_text.default, {
-    lineHeight: "lineHeight.100",
-    as: "div",
-    fontSize: "size.075",
-    textAlign: "center",
-    color: "subtlest"
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    size: "UNSAFE_small",
+    align: "center",
+    color: "inherit"
+  }, children), description && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    size: "UNSAFE_small",
+    as: "p",
+    align: "center",
+    color: "color.text.subtlest"
   }, description))));
 };
 

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

@@ -11,7 +11,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-var _typography = require("@atlaskit/theme/typography");
 var _styles = require("../../common/styles");
 var _Item = require("../Item");
 var _excluded = ["children", "data-testid"],
@@ -69,9 +68,9 @@ var Header = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return _ref3 = {
       userSelect: 'auto'
     }, (0, _defineProperty2.default)(_ref3, '[data-item-title]', {
-      fontSize: _typography.headingSizes.h400.size,
+      fontSize: '0.875rem',
       letterSpacing: '-0.003em',
-      fontWeight: 600,
+      fontWeight: "var(--ds-font-weight-semibold, 600)",
       color: "var(--ds-text, ".concat(_colors.N500, ")")
     }), (0, _defineProperty2.default)(_ref3, 'div&:hover', {
       backgroundColor: "var(--ds-background-neutral-subtle, transparent)",

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, 24px)",
+          height: '1.5rem',
           marginRight: "var(--ds-space-200, 16px)",
-          width: "var(--ds-space-300, 24px)"
+          width: '1.5rem'
         }
       });
     }

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

@@ -11,7 +11,7 @@ var _primitives = require("@atlaskit/primitives");
 var navigationFooterStyles = (0, _primitives.xcss)({
   display: 'block',
   padding: 'space.100',
-  paddingTop: 'space.300'
+  paddingBlockStart: 'space.300'
 });
 /**
  * __Navigation header__

package/dist/es2019/common/styles.js

@@ -55,8 +55,8 @@ export const baseSideNavItemStyle = ({
     // -- END TODO --------------------------------------------------------------
 
     ['& [data-item-elem-before]']: {
-      height: "var(--ds-space-300, 24px)",
-      width: "var(--ds-space-300, 24px)"
+      height: '1.5rem',
+      width: '1.5rem'
     }
   };
 };

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

@@ -1,17 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 /* eslint-disable @repo/internal/react/consistent-props-definitions */
 import React from 'react';
-import Text from '@atlaskit/ds-explorations/text';
 import warnOnce from '@atlaskit/ds-lib/warn-once';
-import { Box, Stack, xcss } from '@atlaskit/primitives';
+import { Box, Stack, Text, xcss } from '@atlaskit/primitives';
 import { N500 } from '@atlaskit/theme/colors';
 import { overrideStyleFunction } from '../../common/styles';
 import { Container } from '../Header';
 import { CustomItem } from '../Item';
 const iconContainerStyles = xcss({
   display: 'inline-block',
-  width: 'size.200',
-  height: 'size.200'
+  width: '1.5rem',
+  height: '1.5rem'
 });
 /**
  * __Footer__
@@ -34,7 +33,7 @@ const OldFooter = props => {
     },
     '[data-item-title]': {
       textAlign: 'center',
-      fontSize: 12
+      font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
     },
     '[data-item-description]': {
       textAlign: 'center',
@@ -97,15 +96,14 @@ const Footer = ({
   }, iconBefore), /*#__PURE__*/React.createElement(Stack, {
     space: "space.075"
   }, /*#__PURE__*/React.createElement(Text, {
-    fontSize: "size.075",
-    textAlign: "center",
-    lineHeight: "lineHeight.100"
+    size: "UNSAFE_small",
+    align: "center",
+    color: "inherit"
   }, children), description && /*#__PURE__*/React.createElement(Text, {
-    lineHeight: "lineHeight.100",
-    as: "div",
-    fontSize: "size.075",
-    textAlign: "center",
-    color: "subtlest"
+    size: "UNSAFE_small",
+    as: "p",
+    align: "center",
+    color: "color.text.subtlest"
   }, description))));
 };
 

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

@@ -3,7 +3,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { N500 } from '@atlaskit/theme/colors';
-import { headingSizes } from '@atlaskit/theme/typography';
 import { overrideStyleFunction } from '../../common/styles';
 import { CustomItem } from '../Item';
 const containerStyles = css({
@@ -56,9 +55,9 @@ const Header = /*#__PURE__*/forwardRef((props, ref) => {
   const cssFn = overrideStyleFunction(() => ({
     userSelect: 'auto',
     ['[data-item-title]']: {
-      fontSize: headingSizes.h400.size,
+      fontSize: '0.875rem',
       letterSpacing: '-0.003em',
-      fontWeight: 600,
+      fontWeight: "var(--ds-font-weight-semibold, 600)",
       color: `var(--ds-text, ${N500})`
     },
     // Will look interactive if the `component` is anything other than a div.

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, 24px)",
+        height: '1.5rem',
         marginRight: "var(--ds-space-200, 16px)",
-        width: "var(--ds-space-300, 24px)"
+        width: '1.5rem'
       }
     })
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props

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

@@ -4,7 +4,7 @@ import { Box, xcss } from '@atlaskit/primitives';
 const navigationFooterStyles = xcss({
   display: 'block',
   padding: 'space.100',
-  paddingTop: 'space.300'
+  paddingBlockStart: 'space.300'
 });
 /**
  * __Navigation header__

package/dist/esm/common/styles.js

@@ -56,8 +56,8 @@ export var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {
     // See: https://product-fabric.atlassian.net/browse/DSP-1684
     backgroundColor: "var(--ds-background-neutral-subtle, transparent)"
   }, !isDisabled && !isSelected && defaultStyles), !isDisabled && isSelected && selectedStyles), {}, _defineProperty({}, '& [data-item-elem-before]', {
-    height: "var(--ds-space-300, 24px)",
-    width: "var(--ds-space-300, 24px)"
+    height: '1.5rem',
+    width: '1.5rem'
   }));
 };
 export var sectionHeaderSpacingStyles = function sectionHeaderSpacingStyles() {

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

@@ -1,17 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 /* eslint-disable @repo/internal/react/consistent-props-definitions */
 import React from 'react';
-import Text from '@atlaskit/ds-explorations/text';
 import warnOnce from '@atlaskit/ds-lib/warn-once';
-import { Box, Stack, xcss } from '@atlaskit/primitives';
+import { Box, Stack, Text, xcss } from '@atlaskit/primitives';
 import { N500 } from '@atlaskit/theme/colors';
 import { overrideStyleFunction } from '../../common/styles';
 import { Container } from '../Header';
 import { CustomItem } from '../Item';
 var iconContainerStyles = xcss({
   display: 'inline-block',
-  width: 'size.200',
-  height: 'size.200'
+  width: '1.5rem',
+  height: '1.5rem'
 });
 /**
  * __Footer__
@@ -35,7 +34,7 @@ var OldFooter = function OldFooter(props) {
       },
       '[data-item-title]': {
         textAlign: 'center',
-        fontSize: 12
+        font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
       },
       '[data-item-description]': {
         textAlign: 'center',
@@ -99,15 +98,14 @@ var Footer = function Footer(_ref2) {
   }, iconBefore), /*#__PURE__*/React.createElement(Stack, {
     space: "space.075"
   }, /*#__PURE__*/React.createElement(Text, {
-    fontSize: "size.075",
-    textAlign: "center",
-    lineHeight: "lineHeight.100"
+    size: "UNSAFE_small",
+    align: "center",
+    color: "inherit"
   }, children), description && /*#__PURE__*/React.createElement(Text, {
-    lineHeight: "lineHeight.100",
-    as: "div",
-    fontSize: "size.075",
-    textAlign: "center",
-    color: "subtlest"
+    size: "UNSAFE_small",
+    as: "p",
+    align: "center",
+    color: "color.text.subtlest"
   }, description))));
 };
 

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

@@ -7,7 +7,6 @@ var _excluded = ["children", "data-testid"],
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { N500 } from '@atlaskit/theme/colors';
-import { headingSizes } from '@atlaskit/theme/typography';
 import { overrideStyleFunction } from '../../common/styles';
 import { CustomItem } from '../Item';
 var containerStyles = css({
@@ -62,9 +61,9 @@ var Header = /*#__PURE__*/forwardRef(function (props, ref) {
     return _ref3 = {
       userSelect: 'auto'
     }, _defineProperty(_ref3, '[data-item-title]', {
-      fontSize: headingSizes.h400.size,
+      fontSize: '0.875rem',
       letterSpacing: '-0.003em',
-      fontWeight: 600,
+      fontWeight: "var(--ds-font-weight-semibold, 600)",
       color: "var(--ds-text, ".concat(N500, ")")
     }), _defineProperty(_ref3, 'div&:hover', {
       backgroundColor: "var(--ds-background-neutral-subtle, transparent)",

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, 24px)",
+          height: '1.5rem',
           marginRight: "var(--ds-space-200, 16px)",
-          width: "var(--ds-space-300, 24px)"
+          width: '1.5rem'
         }
       });
     }

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

@@ -4,7 +4,7 @@ import { Box, xcss } from '@atlaskit/primitives';
 var navigationFooterStyles = xcss({
   display: 'block',
   padding: 'space.100',
-  paddingTop: 'space.300'
+  paddingBlockStart: 'space.300'
 });
 /**
  * __Navigation header__

package/dist/types/common/styles.d.ts

@@ -1,4 +1,4 @@
-import { CSSFn, StatelessCSSFn } from '@atlaskit/menu';
+import { type CSSFn, type StatelessCSSFn } from '@atlaskit/menu';
 /**
  * Allows chaining of style functions on top of base style functions
  * @param baseStyle the base custom cssFn

package/dist/types/components/Footer/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { HeaderProps } from '../Header';
+import { type HeaderProps } from '../Header';
 type NewFooterProps = Omit<HeaderProps, 'cssFn' | 'component' | 'onClick'>;
 type FooterFacadeProps = (HeaderProps & {
     /**

package/dist/types/components/Header/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { jsx } from '@emotion/react';
-import { CSSFn, CustomItemComponentProps } from '@atlaskit/menu';
+import { type CSSFn, type CustomItemComponentProps } from '@atlaskit/menu';
 /**
  * __Container__
  *

package/dist/types/components/Item/skeleton-item.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SkeletonItemProps } from '@atlaskit/menu';
+import { type SkeletonItemProps } from '@atlaskit/menu';
 export type { SkeletonItemProps } from '@atlaskit/menu';
 /**
  * __Skeleton item__

package/dist/types-ts4.5/common/styles.d.ts

@@ -1,4 +1,4 @@
-import { CSSFn, StatelessCSSFn } from '@atlaskit/menu';
+import { type CSSFn, type StatelessCSSFn } from '@atlaskit/menu';
 /**
  * Allows chaining of style functions on top of base style functions
  * @param baseStyle the base custom cssFn

package/dist/types-ts4.5/components/Footer/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { HeaderProps } from '../Header';
+import { type HeaderProps } from '../Header';
 type NewFooterProps = Omit<HeaderProps, 'cssFn' | 'component' | 'onClick'>;
 type FooterFacadeProps = (HeaderProps & {
     /**

package/dist/types-ts4.5/components/Header/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { jsx } from '@emotion/react';
-import { CSSFn, CustomItemComponentProps } from '@atlaskit/menu';
+import { type CSSFn, type CustomItemComponentProps } from '@atlaskit/menu';
 /**
  * __Container__
  *

package/dist/types-ts4.5/components/Item/skeleton-item.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SkeletonItemProps } from '@atlaskit/menu';
+import { type SkeletonItemProps } from '@atlaskit/menu';
 export type { SkeletonItemProps } from '@atlaskit/menu';
 /**
  * __Skeleton item__

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/side-navigation",
-  "version": "3.1.1",
+  "version": "3.1.3",
   "description": "A highly composable side navigation component that supports nested views.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,14 +30,13 @@
     "runReact18": true
   },
   "dependencies": {
-    "@atlaskit/ds-explorations": "^3.5.0",
     "@atlaskit/ds-lib": "^2.3.0",
-    "@atlaskit/icon": "^22.1.0",
-    "@atlaskit/menu": "^2.2.0",
-    "@atlaskit/motion": "^1.5.0",
-    "@atlaskit/primitives": "^6.0.0",
-    "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.45.0",
+    "@atlaskit/icon": "^22.3.0",
+    "@atlaskit/menu": "^2.3.0",
+    "@atlaskit/motion": "^1.6.0",
+    "@atlaskit/primitives": "^6.3.0",
+    "@atlaskit/theme": "^12.8.0",
+    "@atlaskit/tokens": "^1.49.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },