@atlaskit/side-navigation 1.2.3 → 1.2.6

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/side-navigation
 
+## 1.2.6
+
+### Patch Changes
+
+- [`62edf20ab1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62edf20ab1e) - Migrates all usage of brand tokens to either selected or information tokens. This change is purely for semantic reasons, there are no visual or behavioural changes.
+- Updated dependencies
+
+## 1.2.5
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.2.4
+
+### Patch Changes
+
+- [`0f8fe0b80aa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0f8fe0b80aa) - Adds deprecated status to `cssFn` prop. Please avoid using this prop as we intend to remove the prop completely in a future release.
+- Updated dependencies
+
 ## 1.2.3
 
 ### Patch Changes

package/dist/cjs/common/styles.js

@@ -26,6 +26,8 @@ var ITEM_SIDE_PADDING = gridSize * 1.25;
  * Allows chaining of style functions on top of base style functions
  * @param baseStyle the base custom cssFn
  * @param newStyle a new cssFn to be applied after the base style
+ *
+ * @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;
@@ -51,18 +53,18 @@ var defaultStyles = {
   }
 };
 var selectedStyles = {
-  backgroundColor: "var(--ds-background-brand, ".concat(_colors.N30, ")"),
-  color: "var(--ds-text-brand, ".concat(_colors.B400, ")"),
+  backgroundColor: "var(--ds-background-selected, ".concat(_colors.N30, ")"),
+  color: "var(--ds-text-selected, ".concat(_colors.B400, ")"),
   ':visited': {
-    color: "var(--ds-text-brand, ".concat(_colors.B400, ")")
+    color: "var(--ds-text-selected, ".concat(_colors.B400, ")")
   },
   '&:hover': {
-    backgroundColor: "var(--ds-background-brand-hovered, ".concat(_colors.N30, ")"),
-    color: "var(--ds-text-brand, ".concat(_colors.N500, ")")
+    backgroundColor: "var(--ds-background-selected-hovered, ".concat(_colors.N30, ")"),
+    color: "var(--ds-text-selected, ".concat(_colors.N500, ")")
   },
   '&:active': {
-    backgroundColor: "var(--ds-background-brand-pressed, ".concat(_colors.B50, ")"),
-    color: "var(--ds-text-brand, ".concat(_colors.B400, ")")
+    backgroundColor: "var(--ds-background-selected-pressed, ".concat(_colors.B50, ")"),
+    color: "var(--ds-text-selected, ".concat(_colors.B400, ")")
   }
 };
 

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

@@ -39,7 +39,8 @@ function (_ref, ref) {
     return null;
   }
 
-  var cssOverride = (0, _styles.overrideStyleFunction)(_styles.baseSideNavItemStyle, cssFn);
+  var cssOverride = (0, _styles.overrideStyleFunction)(_styles.baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+
   return /*#__PURE__*/_react.default.createElement(_menu.ButtonItem, (0, _extends2.default)({
     ref: ref,
     cssFn: cssOverride

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

@@ -43,7 +43,8 @@ function (_ref, ref) {
     return null;
   }
 
-  var cssOverride = (0, _styles.overrideStyleFunction)(_styles.baseSideNavItemStyle, cssFn);
+  var cssOverride = (0, _styles.overrideStyleFunction)(_styles.baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+
   return /*#__PURE__*/_react.default.createElement(_menu.CustomItem, (0, _extends2.default)({
     ref: ref,
     cssFn: cssOverride

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

@@ -39,7 +39,8 @@ function (_ref, ref) {
     return null;
   }
 
-  var cssOverride = (0, _styles.overrideStyleFunction)(_styles.baseSideNavItemStyle, cssFn);
+  var cssOverride = (0, _styles.overrideStyleFunction)(_styles.baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+
   return /*#__PURE__*/_react.default.createElement(_menu.LinkItem, (0, _extends2.default)({
     ref: ref,
     cssFn: cssOverride

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

@@ -25,7 +25,8 @@ var SkeletonItem = function SkeletonItem(props) {
     return null;
   }
 
-  return /*#__PURE__*/_react.default.createElement(_menu.SkeletonItem, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_menu.SkeletonItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+  , (0, _extends2.default)({
     cssFn: function cssFn() {
       return {
         paddingLeft: _styles.ITEM_SIDE_PADDING,

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

@@ -25,7 +25,8 @@ var HeadingItem = function HeadingItem(props) {
     return null;
   }
 
-  var cssFn = (0, _styles.overrideStyleFunction)(_styles.sectionHeaderStyle, props.cssFn);
+  var cssFn = (0, _styles.overrideStyleFunction)(_styles.sectionHeaderStyle, props.cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+
   return /*#__PURE__*/_react.default.createElement(_menu.HeadingItem, (0, _extends2.default)({}, props, {
     cssFn: cssFn
   }));

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

@@ -33,7 +33,8 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }
 
   return /*#__PURE__*/_react.default.createElement(_menu.Section, (0, _extends2.default)({}, props, {
-    ref: ref,
+    ref: ref // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+    ,
     overrides: {
       HeadingItem: {
         cssFn: _styles.sectionHeaderStyle

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

@@ -25,7 +25,8 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(props) {
     return null;
   }
 
-  return /*#__PURE__*/_react.default.createElement(_menu.SkeletonHeadingItem, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_menu.SkeletonHeadingItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+  , (0, _extends2.default)({
     cssFn: function cssFn() {
       return {
         paddingLeft: _styles.ITEM_SIDE_PADDING,

package/dist/cjs/version.json

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

package/dist/es2019/common/styles.js

@@ -9,6 +9,8 @@ export const ITEM_SIDE_PADDING = gridSize * 1.25;
  * Allows chaining of style functions on top of base style functions
  * @param baseStyle the base custom cssFn
  * @param newStyle a new cssFn to be applied after the base style
+ *
+ * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
  */
 
 export const overrideStyleFunction = (baseStyle, newStyle = () => ({})) => {
@@ -27,18 +29,18 @@ const defaultStyles = {
   }
 };
 const selectedStyles = {
-  backgroundColor: `var(--ds-background-brand, ${N30})`,
-  color: `var(--ds-text-brand, ${B400})`,
+  backgroundColor: `var(--ds-background-selected, ${N30})`,
+  color: `var(--ds-text-selected, ${B400})`,
   ':visited': {
-    color: `var(--ds-text-brand, ${B400})`
+    color: `var(--ds-text-selected, ${B400})`
   },
   '&:hover': {
-    backgroundColor: `var(--ds-background-brand-hovered, ${N30})`,
-    color: `var(--ds-text-brand, ${N500})`
+    backgroundColor: `var(--ds-background-selected-hovered, ${N30})`,
+    color: `var(--ds-text-selected, ${N500})`
   },
   '&:active': {
-    backgroundColor: `var(--ds-background-brand-pressed, ${B50})`,
-    color: `var(--ds-text-brand, ${B400})`
+    backgroundColor: `var(--ds-background-selected-pressed, ${B50})`,
+    color: `var(--ds-text-selected, ${B400})`
   }
 };
 export const baseSideNavItemStyle = ({

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

@@ -16,7 +16,8 @@ const ButtonItem = /*#__PURE__*/forwardRef( // Type needed on props to extract t
     return null;
   }
 
-  const cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn);
+  const cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+
   return /*#__PURE__*/React.createElement(Button, _extends({
     ref: ref,
     cssFn: cssOverride

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

@@ -21,7 +21,8 @@ const CustomItem = /*#__PURE__*/forwardRef( // Type needed on props to extract t
     return null;
   }
 
-  const cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn);
+  const cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+
   return /*#__PURE__*/React.createElement(Custom, _extends({
     ref: ref,
     cssFn: cssOverride

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

@@ -16,7 +16,8 @@ const LinkItem = /*#__PURE__*/forwardRef( // Type needed on props to extract typ
     return null;
   }
 
-  const cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn);
+  const cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+
   return /*#__PURE__*/React.createElement(Link, _extends({
     ref: ref,
     cssFn: cssOverride

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

@@ -13,7 +13,8 @@ const SkeletonItem = props => {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(SkelItem, _extends({
+  return /*#__PURE__*/React.createElement(SkelItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+  , _extends({
     cssFn: () => ({
       paddingLeft: ITEM_SIDE_PADDING,
       paddingRight: ITEM_SIDE_PADDING,

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

@@ -13,7 +13,8 @@ const HeadingItem = props => {
     return null;
   }
 
-  const cssFn = overrideStyleFunction(sectionHeaderStyle, props.cssFn);
+  const cssFn = overrideStyleFunction(sectionHeaderStyle, props.cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+
   return /*#__PURE__*/React.createElement(MenuHeadingItem, _extends({}, props, {
     cssFn: cssFn
   }));

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

@@ -14,7 +14,8 @@ const Section = /*#__PURE__*/forwardRef((props, ref) => {
   }
 
   return /*#__PURE__*/React.createElement(MenuSection, _extends({}, props, {
-    ref: ref,
+    ref: ref // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+    ,
     overrides: {
       HeadingItem: {
         cssFn: sectionHeaderStyle

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

@@ -13,7 +13,8 @@ const SkeletonHeadingItem = props => {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(MenuSkeletonHeadingItem, _extends({
+  return /*#__PURE__*/React.createElement(MenuSkeletonHeadingItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+  , _extends({
     cssFn: () => ({
       paddingLeft: ITEM_SIDE_PADDING,
       paddingRight: ITEM_SIDE_PADDING

package/dist/es2019/version.json

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

package/dist/esm/common/styles.js

@@ -15,6 +15,8 @@ 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
  * @param newStyle a new cssFn to be applied after the base style
+ *
+ * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
  */
 
 export var overrideStyleFunction = function overrideStyleFunction(baseStyle) {
@@ -36,18 +38,18 @@ var defaultStyles = {
   }
 };
 var selectedStyles = {
-  backgroundColor: "var(--ds-background-brand, ".concat(N30, ")"),
-  color: "var(--ds-text-brand, ".concat(B400, ")"),
+  backgroundColor: "var(--ds-background-selected, ".concat(N30, ")"),
+  color: "var(--ds-text-selected, ".concat(B400, ")"),
   ':visited': {
-    color: "var(--ds-text-brand, ".concat(B400, ")")
+    color: "var(--ds-text-selected, ".concat(B400, ")")
   },
   '&:hover': {
-    backgroundColor: "var(--ds-background-brand-hovered, ".concat(N30, ")"),
-    color: "var(--ds-text-brand, ".concat(N500, ")")
+    backgroundColor: "var(--ds-background-selected-hovered, ".concat(N30, ")"),
+    color: "var(--ds-text-selected, ".concat(N500, ")")
   },
   '&:active': {
-    backgroundColor: "var(--ds-background-brand-pressed, ".concat(B50, ")"),
-    color: "var(--ds-text-brand, ".concat(B400, ")")
+    backgroundColor: "var(--ds-background-selected-pressed, ".concat(B50, ")"),
+    color: "var(--ds-text-selected, ".concat(B400, ")")
   }
 };
 export var baseSideNavItemStyle = function baseSideNavItemStyle(_ref) {

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

@@ -17,7 +17,8 @@ function (_ref, ref) {
     return null;
   }
 
-  var cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn);
+  var cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+
   return /*#__PURE__*/React.createElement(Button, _extends({
     ref: ref,
     cssFn: cssOverride

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

@@ -22,7 +22,8 @@ function (_ref, ref) {
     return null;
   }
 
-  var cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn);
+  var cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+
   return /*#__PURE__*/React.createElement(Custom, _extends({
     ref: ref,
     cssFn: cssOverride

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

@@ -17,7 +17,8 @@ function (_ref, ref) {
     return null;
   }
 
-  var cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn);
+  var cssOverride = overrideStyleFunction(baseSideNavItemStyle, cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+
   return /*#__PURE__*/React.createElement(Link, _extends({
     ref: ref,
     cssFn: cssOverride

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

@@ -12,7 +12,8 @@ var SkeletonItem = function SkeletonItem(props) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(SkelItem, _extends({
+  return /*#__PURE__*/React.createElement(SkelItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+  , _extends({
     cssFn: function cssFn() {
       return {
         paddingLeft: ITEM_SIDE_PADDING,

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

@@ -12,7 +12,8 @@ var HeadingItem = function HeadingItem(props) {
     return null;
   }
 
-  var cssFn = overrideStyleFunction(sectionHeaderStyle, props.cssFn);
+  var cssFn = overrideStyleFunction(sectionHeaderStyle, props.cssFn); // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+
   return /*#__PURE__*/React.createElement(MenuHeadingItem, _extends({}, props, {
     cssFn: cssFn
   }));

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

@@ -13,7 +13,8 @@ var Section = /*#__PURE__*/forwardRef(function (props, ref) {
   }
 
   return /*#__PURE__*/React.createElement(MenuSection, _extends({}, props, {
-    ref: ref,
+    ref: ref // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+    ,
     overrides: {
       HeadingItem: {
         cssFn: sectionHeaderStyle

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

@@ -12,7 +12,8 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(props) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(MenuSkeletonHeadingItem, _extends({
+  return /*#__PURE__*/React.createElement(MenuSkeletonHeadingItem // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+  , _extends({
     cssFn: function cssFn() {
       return {
         paddingLeft: ITEM_SIDE_PADDING,

package/dist/esm/version.json

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

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

@@ -4,6 +4,8 @@ export declare const ITEM_SIDE_PADDING: number;
  * Allows chaining of style functions on top of base style functions
  * @param baseStyle the base custom cssFn
  * @param newStyle a new cssFn to be applied after the base style
+ *
+ * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
  */
 export declare const overrideStyleFunction: <TState>(baseStyle: CSSFn<TState>, newStyle?: CSSFn<TState> | undefined) => CSSFn<TState>;
 export declare const baseSideNavItemStyle: CSSFn;

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

@@ -4,6 +4,7 @@ export interface HeaderProps {
     /**
      * A function that can be used to override the styles of the component.
      * It receives the current styles and state and expects a styles object.
+     * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
      */
     cssFn?: CSSFn;
     /**

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

@@ -39,6 +39,8 @@ export interface NestableNavigationContentProps {
     onChange?: (stack: string[]) => void;
     /**
      * Custom overrides for the composed components.
+     *
+     * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.
      */
     overrides?: {
         /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/side-navigation",
-  "version": "1.2.3",
+  "version": "1.2.6",
   "description": "A highly composable side navigation component that supports nested views.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -23,12 +23,12 @@
     }
   },
   "dependencies": {
-    "@atlaskit/ds-lib": "^1.1.0",
+    "@atlaskit/ds-lib": "^1.4.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/menu": "^1.2.0",
+    "@atlaskit/menu": "^1.3.0",
     "@atlaskit/motion": "^1.0.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.6.0",
+    "@atlaskit/tokens": "^0.8.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -36,8 +36,8 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/atlassian-navigation": "^2.0.0",
-    "@atlaskit/button": "^16.0.0",
+    "@atlaskit/atlassian-navigation": "^2.1.0",
+    "@atlaskit/button": "^16.2.0",
     "@atlaskit/docs": "*",
     "@atlaskit/logo": "^13.5.0",
     "@atlaskit/onboarding": "^10.3.0",