@atlaskit/side-navigation 3.4.1 → 3.5.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/side-navigation
 
+## 3.5.0
+
+### Minor Changes
+
+- [#137781](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137781)
+  [`21bfb50836bad`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/21bfb50836bad) -
+  Migrated to use new iconography behind a feature flag.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 3.4.2
+
+### Patch Changes
+
+- [#129726](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/129726)
+  [`778c15c1d279a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/778c15c1d279a) -
+  [ux] Removed feature flag
+  `platform.design-system-team.side-navigation-tokenised-typography-styles` resulting in minor
+  visual changes to typography.
+
 ## 3.4.1
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -30,9 +30,6 @@
         {
             "path": "../../motion/afm-cc/tsconfig.json"
         },
-        {
-            "path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
-        },
         {
             "path": "../../primitives/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -29,9 +29,6 @@
     {
       "path": "../../motion/afm-jira/tsconfig.json"
     },
-    {
-      "path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
-    },
     {
       "path": "../../primitives/afm-jira/tsconfig.json"
     },

package/afm-post-office/tsconfig.json

@@ -29,9 +29,6 @@
     {
       "path": "../../motion/afm-post-office/tsconfig.json"
     },
-    {
-      "path": "../../../platform/feature-flags/afm-post-office/tsconfig.json"
-    },
     {
       "path": "../../primitives/afm-post-office/tsconfig.json"
     },

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

@@ -10,7 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _styles = require("../../common/styles");
 var _Item = require("../Item");
@@ -21,8 +20,6 @@ var _excluded = ["children", "data-testid"],
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var containerStyles = (0, _react2.css)({
   display: 'block',
   position: 'relative'
@@ -74,15 +71,10 @@ var Header = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var _ref3;
     return _ref3 = {
       userSelect: 'auto'
-    }, (0, _defineProperty2.default)(_ref3, '[data-item-title]', _objectSpread(_objectSpread({}, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.side-navigation-tokenised-typography-styles') ? {
-      font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-    } : {
-      fontSize: '0.875rem',
-      letterSpacing: '-0.003em',
-      fontWeight: "var(--ds-font-weight-semibold, 600)"
-    }), {}, {
+    }, (0, _defineProperty2.default)(_ref3, '[data-item-title]', {
+      font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
       color: "var(--ds-text, ".concat(_colors.N500, ")")
-    })), (0, _defineProperty2.default)(_ref3, 'div&:hover', {
+    }), (0, _defineProperty2.default)(_ref3, 'div&:hover', {
       backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
       cursor: 'default'
     }), (0, _defineProperty2.default)(_ref3, 'div&:active', {

package/dist/cjs/components/Item/go-back-item.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _arrowLeftCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-left-circle"));
+var _arrowLeftArrowLeftCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/arrow-left--arrow-left-circle"));
 var _colors = require("@atlaskit/theme/colors");
 var _buttonItem = _interopRequireDefault(require("./button-item"));
 var _excluded = ["cssFn", "iconBefore", "onClick", "isSelected"];
@@ -28,8 +28,9 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var GoBackItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var cssFn = _ref.cssFn,
     _ref$iconBefore = _ref.iconBefore,
-    iconBefore = _ref$iconBefore === void 0 ? /*#__PURE__*/_react.default.createElement(_arrowLeftCircle.default, {
-      secondaryColor: "var(--ds-surface, ".concat(_colors.N10, ")"),
+    iconBefore = _ref$iconBefore === void 0 ? /*#__PURE__*/_react.default.createElement(_arrowLeftArrowLeftCircle.default, {
+      color: "currentColor",
+      LEGACY_secondaryColor: "var(--ds-surface, ".concat(_colors.N10, ")"),
       label: ""
     }) : _ref$iconBefore,
     onClick = _ref.onClick,

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

@@ -13,7 +13,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
-var _arrowRightCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-right-circle"));
+var _arrowRightArrowRightCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/arrow-right--arrow-right-circle"));
 var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _styles = require("../../common/styles");
@@ -130,9 +130,10 @@ var NestingItem = function NestingItem(props) {
       "data-right-arrow": true,
       xcss: iconContainerStyles,
       as: "span"
-    }, (0, _react2.jsx)(_arrowRightCircle.default, {
+    }, (0, _react2.jsx)(_arrowRightArrowRightCircle.default, {
       testId: testId && "".concat(testId, "--item--right-arrow"),
-      secondaryColor: "var(--ds-surface, ".concat(_colors.N10, ")"),
+      color: "currentColor",
+      LEGACY_secondaryColor: "var(--ds-surface, ".concat(_colors.N10, ")"),
       label: ""
     }))),
     onClick: onClickHandler,

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

@@ -7,7 +7,6 @@ import { forwardRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N500 } from '@atlaskit/theme/colors';
 import { overrideStyleFunction } from '../../common/styles';
 import { CustomItem } from '../Item';
@@ -61,13 +60,7 @@ const Header = /*#__PURE__*/forwardRef((props, ref) => {
   const cssFn = overrideStyleFunction(() => ({
     userSelect: 'auto',
     ['[data-item-title]']: {
-      ...(getBooleanFF('platform.design-system-team.side-navigation-tokenised-typography-styles') ? {
-        font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-      } : {
-        fontSize: '0.875rem',
-        letterSpacing: '-0.003em',
-        fontWeight: "var(--ds-font-weight-semibold, 600)"
-      }),
+      font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
       color: `var(--ds-text, ${N500})`
     },
     // Will look interactive if the `component` is anything other than a div.

package/dist/es2019/components/Item/go-back-item.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef, useCallback, useState } from 'react';
-import LeftArrow from '@atlaskit/icon/glyph/arrow-left-circle';
+import ArrowLeftIcon from '@atlaskit/icon/core/migration/arrow-left--arrow-left-circle';
 import { N10 } from '@atlaskit/theme/colors';
 import ButtonItem from './button-item';
 /**
@@ -14,8 +14,9 @@ import ButtonItem from './button-item';
  */
 const GoBackItem = /*#__PURE__*/forwardRef(({
   cssFn,
-  iconBefore = /*#__PURE__*/React.createElement(LeftArrow, {
-    secondaryColor: `var(--ds-surface, ${N10})`,
+  iconBefore = /*#__PURE__*/React.createElement(ArrowLeftIcon, {
+    color: "currentColor",
+    LEGACY_secondaryColor: `var(--ds-surface, ${N10})`,
     label: ""
   }),
   onClick,

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

@@ -7,7 +7,7 @@ import React, { Fragment, useCallback, useMemo, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import RightArrow from '@atlaskit/icon/glyph/arrow-right-circle';
+import ArrowRightIcon from '@atlaskit/icon/core/migration/arrow-right--arrow-right-circle';
 import { Box, xcss } from '@atlaskit/primitives';
 import { N10 } from '@atlaskit/theme/colors';
 import { overrideStyleFunction } from '../../common/styles';
@@ -110,9 +110,10 @@ const NestingItem = props => {
       "data-right-arrow": true,
       xcss: iconContainerStyles,
       as: "span"
-    }, jsx(RightArrow, {
+    }, jsx(ArrowRightIcon, {
       testId: testId && `${testId}--item--right-arrow`,
-      secondaryColor: `var(--ds-surface, ${N10})`,
+      color: "currentColor",
+      LEGACY_secondaryColor: `var(--ds-surface, ${N10})`,
       label: ""
     }))),
     onClick: onClickHandler,

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

@@ -3,8 +3,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "data-testid"],
   _excluded2 = ["children"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -13,7 +11,6 @@ import { forwardRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N500 } from '@atlaskit/theme/colors';
 import { overrideStyleFunction } from '../../common/styles';
 import { CustomItem } from '../Item';
@@ -68,15 +65,10 @@ var Header = /*#__PURE__*/forwardRef(function (props, ref) {
     var _ref3;
     return _ref3 = {
       userSelect: 'auto'
-    }, _defineProperty(_ref3, '[data-item-title]', _objectSpread(_objectSpread({}, getBooleanFF('platform.design-system-team.side-navigation-tokenised-typography-styles') ? {
-      font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-    } : {
-      fontSize: '0.875rem',
-      letterSpacing: '-0.003em',
-      fontWeight: "var(--ds-font-weight-semibold, 600)"
-    }), {}, {
+    }, _defineProperty(_ref3, '[data-item-title]', {
+      font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
       color: "var(--ds-text, ".concat(N500, ")")
-    })), _defineProperty(_ref3, 'div&:hover', {
+    }), _defineProperty(_ref3, 'div&:hover', {
       backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
       cursor: 'default'
     }), _defineProperty(_ref3, 'div&:active', {

package/dist/esm/components/Item/go-back-item.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["cssFn", "iconBefore", "onClick", "isSelected"];
 import React, { forwardRef, useCallback, useState } from 'react';
-import LeftArrow from '@atlaskit/icon/glyph/arrow-left-circle';
+import ArrowLeftIcon from '@atlaskit/icon/core/migration/arrow-left--arrow-left-circle';
 import { N10 } from '@atlaskit/theme/colors';
 import ButtonItem from './button-item';
 /**
@@ -18,8 +18,9 @@ import ButtonItem from './button-item';
 var GoBackItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var cssFn = _ref.cssFn,
     _ref$iconBefore = _ref.iconBefore,
-    iconBefore = _ref$iconBefore === void 0 ? /*#__PURE__*/React.createElement(LeftArrow, {
-      secondaryColor: "var(--ds-surface, ".concat(N10, ")"),
+    iconBefore = _ref$iconBefore === void 0 ? /*#__PURE__*/React.createElement(ArrowLeftIcon, {
+      color: "currentColor",
+      LEGACY_secondaryColor: "var(--ds-surface, ".concat(N10, ")"),
       label: ""
     }) : _ref$iconBefore,
     onClick = _ref.onClick,

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

@@ -14,7 +14,7 @@ import React, { Fragment, useCallback, useMemo, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import RightArrow from '@atlaskit/icon/glyph/arrow-right-circle';
+import ArrowRightIcon from '@atlaskit/icon/core/migration/arrow-right--arrow-right-circle';
 import { Box, xcss } from '@atlaskit/primitives';
 import { N10 } from '@atlaskit/theme/colors';
 import { overrideStyleFunction } from '../../common/styles';
@@ -121,9 +121,10 @@ var NestingItem = function NestingItem(props) {
       "data-right-arrow": true,
       xcss: iconContainerStyles,
       as: "span"
-    }, jsx(RightArrow, {
+    }, jsx(ArrowRightIcon, {
       testId: testId && "".concat(testId, "--item--right-arrow"),
-      secondaryColor: "var(--ds-surface, ".concat(N10, ")"),
+      color: "currentColor",
+      LEGACY_secondaryColor: "var(--ds-surface, ".concat(N10, ")"),
       label: ""
     }))),
     onClick: onClickHandler,

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

@@ -66,7 +66,7 @@ export interface NestingItemProps<TCustomComponentProps = CustomItemComponentPro
     /**
      * Event that is triggered when a person clicks the element.
      */
-    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    onClick?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
     /**
      * Description of the item.
      * This will render smaller text below the primary text of the item as well as slightly increasing the height of the item.

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

@@ -66,7 +66,7 @@ export interface NestingItemProps<TCustomComponentProps = CustomItemComponentPro
     /**
      * Event that is triggered when a person clicks the element.
      */
-    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    onClick?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
     /**
      * Description of the item.
      * This will render smaller text below the primary text of the item as well as slightly increasing the height of the item.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/side-navigation",
-	"version": "3.4.1",
+	"version": "3.5.0",
 	"description": "A highly composable side navigation component that supports nested views.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -19,10 +19,6 @@
 	},
 	"atlassian": {
 		"team": "Design System Team",
-		"releaseModel": "continuous",
-		"productPushConsumption": [
-			"jira"
-		],
 		"website": {
 			"name": "Side navigation",
 			"category": "Components"
@@ -30,14 +26,13 @@
 		"runReact18": true
 	},
 	"dependencies": {
-		"@atlaskit/ds-lib": "^2.4.0",
-		"@atlaskit/icon": "^22.12.0",
+		"@atlaskit/ds-lib": "^2.5.0",
+		"@atlaskit/icon": "^22.16.0",
 		"@atlaskit/menu": "^2.12.0",
 		"@atlaskit/motion": "^1.9.0",
-		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/primitives": "^12.0.0",
+		"@atlaskit/primitives": "^12.1.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tokens": "^1.58.0",
+		"@atlaskit/tokens": "^1.59.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
@@ -89,10 +84,5 @@
 			]
 		}
 	},
-	"homepage": "https://atlassian.design/components/side-navigation/",
-	"platform-feature-flags": {
-		"platform.design-system-team.side-navigation-tokenised-typography-styles": {
-			"type": "boolean"
-		}
-	}
+	"homepage": "https://atlassian.design/components/side-navigation/"
 }