@atlaskit/menu 1.4.3 → 1.4.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/menu
 
+## 1.4.5
+
+### Patch Changes
+
+- [`b0f6dd0bc35`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b0f6dd0bc35) - Updated to use typography tokens. There is no expected behaviour or visual change.
+
+## 1.4.4
+
+### Patch Changes
+
+- [`f96f3ebd861`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f96f3ebd861) - [ux] Use color.background.neutral.subtle token to represent transparent background.
+- [`981faeea2ff`](https://bitbucket.org/atlassian/atlassian-frontend/commits/981faeea2ff) - Application of spacing tokens for some internal styles of `MenuPrimitive`.
+- [`bcbd0c5b5bf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bcbd0c5b5bf) - Fix text color styling of disabled descriptions in menu and link items
+
 ## 1.4.3
 
 ### Patch Changes

package/dist/cjs/internal/components/menu-item-primitive.js

@@ -26,22 +26,17 @@ var defaultRender = function defaultRender(Component, props) {
   );
 };
 
-var gridSize = (0, _constants.gridSize)();
 var fontSize = (0, _constants.fontSize)();
-var itemTopBottomPadding = "var(--ds-scale-100, 8px)";
-var itemSidePadding = "var(--ds-scale-250, 20px)";
-var itemElemSpacing = "var(--ds-scale-150, 12px)";
-var itemDescriptionSpacing = gridSize * 0.375;
 var itemMinHeight = "var(--ds-scale-500, 40px)";
 var beforeElementStyles = (0, _react2.css)({
   display: 'flex',
-  marginRight: itemElemSpacing,
+  marginRight: "var(--ds-scale-150, 12px)",
   alignItems: 'center',
   flexShrink: 0
 });
 var afterElementStyles = (0, _react2.css)({
   display: 'flex',
-  marginLeft: itemElemSpacing,
+  marginLeft: "var(--ds-scale-150, 12px)",
   alignItems: 'center',
   flexShrink: 0
 });
@@ -51,6 +46,7 @@ var contentStyles = (0, _react2.css)({
   flexDirection: 'column',
   flexGrow: 1,
   // Fix - avoid clipped text descenders when using standard 16px line-height
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   lineHeight: 1.22,
   outline: 'none',
   overflow: 'hidden',
@@ -66,10 +62,14 @@ var wordBreakStyles = (0, _react2.css)({
   wordBreak: 'break-word'
 });
 var descriptionStyles = (0, _react2.css)({
-  marginTop: itemDescriptionSpacing,
+  marginTop: "var(--ds-scale-050, 3px)",
   color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   fontSize: _typography.headingSizes.h200.size
 });
+var disabledDescriptionStyles = (0, _react2.css)({
+  color: "var(--ds-text-disabled, ".concat(_colors.N200, ")")
+});
 var primitiveStyles = (0, _react2.css)({
   display: 'flex',
   boxSizing: 'border-box',
@@ -77,9 +77,11 @@ var primitiveStyles = (0, _react2.css)({
   minHeight: itemMinHeight,
   // TODO Delete this comment after verifying spacing token -> previous value `0`
   margin: "var(--ds-scale-0, 0px)",
-  padding: "".concat(itemTopBottomPadding, " ").concat(itemSidePadding),
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  padding: "var(--ds-scale-100, 8px)".concat(" ", "var(--ds-scale-250, 20px)"),
   alignItems: 'center',
   border: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   fontSize: fontSize,
   outline: 0,
   textDecoration: 'none',
@@ -95,7 +97,7 @@ var interactiveStyles = (0, _react2.css)({
   cursor: 'pointer'
 });
 var unselectedStyles = (0, _react2.css)({
-  backgroundColor: 'transparent',
+  backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
   color: 'currentColor',
   ':visited': {
     color: 'currentColor'
@@ -113,7 +115,7 @@ var unselectedStyles = (0, _react2.css)({
 var disabledStyles = (0, _react2.css)({
   cursor: 'not-allowed',
   '&, :hover, :active': {
-    backgroundColor: 'transparent',
+    backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
     color: "var(--ds-text-disabled, ".concat(_colors.N200, ")")
   }
 });
@@ -183,7 +185,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
         'data-item-title': true
       }), description && (0, _react2.jsx)("span", {
         "data-item-description": true,
-        css: [descriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
+        css: [descriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
       }, description)), iconAfter && (0, _react2.jsx)("span", {
         "data-item-elem-after": true,
         css: afterElementStyles

package/dist/cjs/menu-item/heading-item.js

@@ -32,7 +32,7 @@ var headingStyles = (0, _react2.css)({
   padding: "0 ".concat(itemSidePadding, "px"),
   color: "var(--ds-text-subtle, ".concat(_colors.N300, ")"),
   fontSize: itemHeadingFontSize,
-  fontWeight: 700,
+  fontWeight: "var(--ds-font-weight-bold, 700)",
   lineHeight: itemHeadingContentHeight / itemHeadingFontSize,
   textTransform: 'uppercase'
 });

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.4.3",
+	"version": "1.4.5",
 	"sideEffects": false
 }

package/dist/es2019/internal/components/menu-item-primitive.js

@@ -3,28 +3,23 @@ import { Fragment } from 'react';
 import { ClassNames, css, jsx } from '@emotion/react';
 import FocusRing from '@atlaskit/focus-ring';
 import { N20, N200, N30 } from '@atlaskit/theme/colors';
-import { fontSize as fontSizeFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
+import { fontSize as fontSizeFn } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
 
 const defaultRender = (Component, props) => // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 jsx(Component, props);
 
-const gridSize = gridSizeFn();
 const fontSize = fontSizeFn();
-const itemTopBottomPadding = "var(--ds-scale-100, 8px)";
-const itemSidePadding = "var(--ds-scale-250, 20px)";
-const itemElemSpacing = "var(--ds-scale-150, 12px)";
-const itemDescriptionSpacing = gridSize * 0.375;
 const itemMinHeight = "var(--ds-scale-500, 40px)";
 const beforeElementStyles = css({
   display: 'flex',
-  marginRight: itemElemSpacing,
+  marginRight: "var(--ds-scale-150, 12px)",
   alignItems: 'center',
   flexShrink: 0
 });
 const afterElementStyles = css({
   display: 'flex',
-  marginLeft: itemElemSpacing,
+  marginLeft: "var(--ds-scale-150, 12px)",
   alignItems: 'center',
   flexShrink: 0
 });
@@ -34,6 +29,7 @@ const contentStyles = css({
   flexDirection: 'column',
   flexGrow: 1,
   // Fix - avoid clipped text descenders when using standard 16px line-height
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   lineHeight: 1.22,
   outline: 'none',
   overflow: 'hidden',
@@ -49,10 +45,14 @@ const wordBreakStyles = css({
   wordBreak: 'break-word'
 });
 const descriptionStyles = css({
-  marginTop: itemDescriptionSpacing,
+  marginTop: "var(--ds-scale-050, 3px)",
   color: `var(--ds-text-subtlest, ${N200})`,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   fontSize: headingSizes.h200.size
 });
+const disabledDescriptionStyles = css({
+  color: `var(--ds-text-disabled, ${N200})`
+});
 const primitiveStyles = css({
   display: 'flex',
   boxSizing: 'border-box',
@@ -60,9 +60,11 @@ const primitiveStyles = css({
   minHeight: itemMinHeight,
   // TODO Delete this comment after verifying spacing token -> previous value `0`
   margin: "var(--ds-scale-0, 0px)",
-  padding: `${itemTopBottomPadding} ${itemSidePadding}`,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  padding: `${"var(--ds-scale-100, 8px)"} ${"var(--ds-scale-250, 20px)"}`,
   alignItems: 'center',
   border: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   fontSize: fontSize,
   outline: 0,
   textDecoration: 'none',
@@ -78,7 +80,7 @@ const interactiveStyles = css({
   cursor: 'pointer'
 });
 const unselectedStyles = css({
-  backgroundColor: 'transparent',
+  backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
   color: 'currentColor',
   ':visited': {
     color: 'currentColor'
@@ -96,7 +98,7 @@ const unselectedStyles = css({
 const disabledStyles = css({
   cursor: 'not-allowed',
   '&, :hover, :active': {
-    backgroundColor: 'transparent',
+    backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
     color: `var(--ds-text-disabled, ${N200})`
   }
 });
@@ -164,7 +166,7 @@ const MenuItemPrimitive = ({
         'data-item-title': true
       }), description && jsx("span", {
         "data-item-description": true,
-        css: [descriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
+        css: [descriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
       }, description)), iconAfter && jsx("span", {
         "data-item-elem-after": true,
         css: afterElementStyles

package/dist/es2019/menu-item/heading-item.js

@@ -15,7 +15,7 @@ const headingStyles = css({
   padding: `0 ${itemSidePadding}px`,
   color: `var(--ds-text-subtle, ${N300})`,
   fontSize: itemHeadingFontSize,
-  fontWeight: 700,
+  fontWeight: "var(--ds-font-weight-bold, 700)",
   lineHeight: itemHeadingContentHeight / itemHeadingFontSize,
   textTransform: 'uppercase'
 });

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.4.3",
+	"version": "1.4.5",
 	"sideEffects": false
 }

package/dist/esm/internal/components/menu-item-primitive.js

@@ -3,7 +3,7 @@ import { Fragment } from 'react';
 import { ClassNames, css, jsx } from '@emotion/react';
 import FocusRing from '@atlaskit/focus-ring';
 import { N20, N200, N30 } from '@atlaskit/theme/colors';
-import { fontSize as fontSizeFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
+import { fontSize as fontSizeFn } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
 
 var defaultRender = function defaultRender(Component, props) {
@@ -12,22 +12,17 @@ var defaultRender = function defaultRender(Component, props) {
   );
 };
 
-var gridSize = gridSizeFn();
 var fontSize = fontSizeFn();
-var itemTopBottomPadding = "var(--ds-scale-100, 8px)";
-var itemSidePadding = "var(--ds-scale-250, 20px)";
-var itemElemSpacing = "var(--ds-scale-150, 12px)";
-var itemDescriptionSpacing = gridSize * 0.375;
 var itemMinHeight = "var(--ds-scale-500, 40px)";
 var beforeElementStyles = css({
   display: 'flex',
-  marginRight: itemElemSpacing,
+  marginRight: "var(--ds-scale-150, 12px)",
   alignItems: 'center',
   flexShrink: 0
 });
 var afterElementStyles = css({
   display: 'flex',
-  marginLeft: itemElemSpacing,
+  marginLeft: "var(--ds-scale-150, 12px)",
   alignItems: 'center',
   flexShrink: 0
 });
@@ -37,6 +32,7 @@ var contentStyles = css({
   flexDirection: 'column',
   flexGrow: 1,
   // Fix - avoid clipped text descenders when using standard 16px line-height
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   lineHeight: 1.22,
   outline: 'none',
   overflow: 'hidden',
@@ -52,10 +48,14 @@ var wordBreakStyles = css({
   wordBreak: 'break-word'
 });
 var descriptionStyles = css({
-  marginTop: itemDescriptionSpacing,
+  marginTop: "var(--ds-scale-050, 3px)",
   color: "var(--ds-text-subtlest, ".concat(N200, ")"),
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   fontSize: headingSizes.h200.size
 });
+var disabledDescriptionStyles = css({
+  color: "var(--ds-text-disabled, ".concat(N200, ")")
+});
 var primitiveStyles = css({
   display: 'flex',
   boxSizing: 'border-box',
@@ -63,9 +63,11 @@ var primitiveStyles = css({
   minHeight: itemMinHeight,
   // TODO Delete this comment after verifying spacing token -> previous value `0`
   margin: "var(--ds-scale-0, 0px)",
-  padding: "".concat(itemTopBottomPadding, " ").concat(itemSidePadding),
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  padding: "var(--ds-scale-100, 8px)".concat(" ", "var(--ds-scale-250, 20px)"),
   alignItems: 'center',
   border: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   fontSize: fontSize,
   outline: 0,
   textDecoration: 'none',
@@ -81,7 +83,7 @@ var interactiveStyles = css({
   cursor: 'pointer'
 });
 var unselectedStyles = css({
-  backgroundColor: 'transparent',
+  backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
   color: 'currentColor',
   ':visited': {
     color: 'currentColor'
@@ -99,7 +101,7 @@ var unselectedStyles = css({
 var disabledStyles = css({
   cursor: 'not-allowed',
   '&, :hover, :active': {
-    backgroundColor: 'transparent',
+    backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
     color: "var(--ds-text-disabled, ".concat(N200, ")")
   }
 });
@@ -169,7 +171,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
         'data-item-title': true
       }), description && jsx("span", {
         "data-item-description": true,
-        css: [descriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
+        css: [descriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
       }, description)), iconAfter && jsx("span", {
         "data-item-elem-after": true,
         css: afterElementStyles

package/dist/esm/menu-item/heading-item.js

@@ -17,7 +17,7 @@ var headingStyles = css({
   padding: "0 ".concat(itemSidePadding, "px"),
   color: "var(--ds-text-subtle, ".concat(N300, ")"),
   fontSize: itemHeadingFontSize,
-  fontWeight: 700,
+  fontWeight: "var(--ds-font-weight-bold, 700)",
   lineHeight: itemHeadingContentHeight / itemHeadingFontSize,
   textTransform: 'uppercase'
 });

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.4.3",
+	"version": "1.4.5",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "description": "A collection of composable menu components that can be used anywhere.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -37,7 +37,7 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/ds-explorations": "^1.6.0",
+    "@atlaskit/ds-explorations": "^1.7.0",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/focus-ring": "^1.2.0",
     "@atlaskit/theme": "^12.2.0",

package/report.api.md

@@ -1,4 +1,4 @@
-<!-- API Report Version: 2.2 -->
+<!-- API Report Version: 2.3 -->
 
 ## API Report File for "@atlaskit/menu"
 
@@ -8,6 +8,7 @@
 ### Table of contents
 
 - [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
 
 ### Main Entry Types
 
@@ -260,3 +261,16 @@ export interface TitleOverrides {
 ```
 
 <!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{
+  "react": "^16.8.0",
+  "react-dom": "^16.8.0"
+}
+```
+
+<!--SECTION END: Peer Dependencies-->