@atlaskit/menu 1.4.10 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/menu
 
+## 1.5.0
+
+### Minor Changes
+
+- [`93d761786d6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/93d761786d6) - [ux] Default spacing for all menu items has been changed from 20px inline padding to 16px.
+
+  Adds a new spacing prop to on `MenuGroup`. The prop can be used to control the content density of the component and its children.
+
+  Adds a new internal export `SpacingContext`. This should not be used directly.
+
 ## 1.4.10
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -58,10 +58,17 @@ Object.defineProperty(exports, "SkeletonItem", {
     return _skeletonItem.default;
   }
 });
+Object.defineProperty(exports, "SpacingContext", {
+  enumerable: true,
+  get: function get() {
+    return _menuContext.SpacingContext;
+  }
+});
 var _buttonItem = _interopRequireDefault(require("./menu-item/button-item"));
 var _linkItem = _interopRequireDefault(require("./menu-item/link-item"));
 var _customItem = _interopRequireDefault(require("./menu-item/custom-item"));
 var _skeletonItem = _interopRequireDefault(require("./menu-item/skeleton-item"));
+var _menuContext = require("./internal/components/menu-context");
 var _headingItem = _interopRequireDefault(require("./menu-item/heading-item"));
 var _skeletonHeadingItem = _interopRequireDefault(require("./menu-item/skeleton-heading-item"));
 var _section = _interopRequireDefault(require("./menu-section/section"));

package/dist/cjs/internal/components/menu-context.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpacingContext = void 0;
+var _react = require("react");
+/**
+ * __Spacing context__
+ *
+ *  The spacing context is used to provide spacing values to menu item primitives.
+ *
+ * @internal Do not use directly.
+ */
+var SpacingContext = /*#__PURE__*/(0, _react.createContext)('cozy');
+exports.SpacingContext = SpacingContext;

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

@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _inline = _interopRequireDefault(require("@atlaskit/ds-explorations/inline"));
 var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 var _colors = require("@atlaskit/theme/colors");
-var _constants = require("@atlaskit/theme/constants");
-var _typography = require("@atlaskit/theme/typography");
+var _menuContext = require("./menu-context");
 /** @jsx jsx */
 
 var defaultRender = function defaultRender(Component, props) {
@@ -19,18 +19,10 @@ var defaultRender = function defaultRender(Component, props) {
     (0, _react2.jsx)(Component, props)
   );
 };
-var fontSize = (0, _constants.fontSize)();
-var itemMinHeight = "var(--ds-space-500, 40px)";
-var beforeElementStyles = (0, _react2.css)({
+var beforeAfterElementStyles = (0, _react2.css)({
   display: 'flex',
-  marginRight: "var(--ds-space-150, 12px)",
-  alignItems: 'center',
-  flexShrink: 0
-});
-var afterElementStyles = (0, _react2.css)({
-  display: 'flex',
-  marginLeft: "var(--ds-space-150, 12px)",
   alignItems: 'center',
+  justifyContent: 'center',
   flexShrink: 0
 });
 var contentStyles = (0, _react2.css)({
@@ -39,8 +31,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,
+  lineHeight: "var(--ds-font-lineHeight-100, 16px)",
   outline: 'none',
   overflow: 'hidden',
   textAlign: 'left'
@@ -55,10 +46,9 @@ var wordBreakStyles = (0, _react2.css)({
   wordBreak: 'break-word'
 });
 var descriptionStyles = (0, _react2.css)({
-  marginTop: "var(--ds-space-050, 3px)",
+  marginTop: "var(--ds-space-050, 4px)",
   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
+  fontSize: "var(--ds-font-size-075, 12px)"
 });
 var disabledDescriptionStyles = (0, _react2.css)({
   color: "var(--ds-text-disabled, ".concat(_colors.N200, ")")
@@ -67,14 +57,11 @@ var primitiveStyles = (0, _react2.css)({
   display: 'flex',
   boxSizing: 'border-box',
   width: '100%',
-  minHeight: itemMinHeight,
+  minHeight: 40,
   margin: "var(--ds-space-0, 0px)",
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
-  padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-250, 20px)"),
   alignItems: 'center',
   border: 0,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
-  fontSize: fontSize,
+  fontSize: "var(--ds-font-size-100, 14px)",
   outline: 0,
   textDecoration: 'none',
   userSelect: 'none',
@@ -85,6 +72,20 @@ var primitiveStyles = (0, _react2.css)({
     textDecoration: 'none'
   }
 });
+var spacingMapStyles = {
+  cozy: (0, _react2.css)({
+    // 8 * 2 (16) + icon (24) === 40
+    paddingBlock: "var(--ds-space-100, 8px)",
+    paddingInline: "var(--ds-space-200, 16px)"
+  }),
+  compact: (0, _react2.css)({
+    minHeight: 32,
+    maxHeight: 32,
+    // 4 * 2 (8) + icon (24) === 32
+    paddingBlock: "var(--ds-space-050, 4px)",
+    paddingInline: "var(--ds-space-150, 12px)"
+  })
+};
 var interactiveStyles = (0, _react2.css)({
   cursor: 'pointer'
 });
@@ -127,6 +128,10 @@ var selectedStyles = (0, _react2.css)({
     color: "var(--ds-text-selected, currentColor)"
   }
 });
+var gapMap = {
+  compact: 'space.100',
+  cozy: 'space.150'
+};
 
 /**
  * __Menu item primitive__
@@ -158,6 +163,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected;
+  var spacing = (0, _react.useContext)(_menuContext.SpacingContext);
   var renderTitle = overrides && overrides.Title && overrides.Title.render || defaultRender;
   return (0, _react2.jsx)(_react2.ClassNames, null, function (_ref2) {
     var cn = _ref2.css,
@@ -165,10 +171,18 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
     return (0, _react2.jsx)(_focusRing.default, {
       isInset: true
     }, children({
-      className: cx([cn([primitiveStyles, !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && selectedStyles, isDisabled ? disabledStyles : interactiveStyles]), className]),
-      children: (0, _react2.jsx)(_react.Fragment, null, iconBefore && (0, _react2.jsx)("span", {
+      className: cx([cn([primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && selectedStyles, isDisabled ? disabledStyles : interactiveStyles]), className]),
+      children: (0, _react2.jsx)(_inline.default, {
+        justifyContent: "space-between",
+        alignItems: "center",
+        gap: gapMap[spacing],
+        UNSAFE_style: {
+          flexGrow: 1,
+          width: '100%'
+        }
+      }, iconBefore && (0, _react2.jsx)("span", {
         "data-item-elem-before": true,
-        css: beforeElementStyles
+        css: beforeAfterElementStyles
       }, iconBefore), title && (0, _react2.jsx)("span", {
         css: contentStyles
       }, renderTitle('span', {
@@ -180,7 +194,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
         css: [descriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
       }, description)), iconAfter && (0, _react2.jsx)("span", {
         "data-item-elem-after": true,
-        css: afterElementStyles
+        css: beforeAfterElementStyles
       }, iconAfter))
     }));
   });

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

@@ -16,11 +16,12 @@ var _excluded = ["children", "testId", "id", "cssFn"];
 var itemHeadingContentHeight = _typography.headingSizes.h100.lineHeight;
 var itemHeadingFontSize = _typography.headingSizes.h100.size;
 var headingStyles = (0, _react2.css)({
-  padding: "0 ".concat("var(--ds-space-250, 20px)"),
   color: "var(--ds-text-subtle, ".concat(_colors.N300, ")"),
   fontSize: itemHeadingFontSize,
   fontWeight: "var(--ds-font-weight-bold, 700)",
   lineHeight: itemHeadingContentHeight / itemHeadingFontSize,
+  paddingBlock: "var(--ds-space-0, 0px)",
+  paddingInline: "var(--ds-space-200, 16px)",
   textTransform: 'uppercase'
 });
 

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

@@ -12,7 +12,8 @@ var _skeletonShimmer = _interopRequireDefault(require("../internal/components/sk
 /** @jsx jsx */
 
 var skeletonStyles = (0, _react.css)({
-  padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-250, 20px)"),
+  paddingBlock: "var(--ds-space-0, 0px)",
+  paddingInline: "var(--ds-space-200, 16px)",
   '::after': {
     display: 'block',
     width: '30%',

package/dist/cjs/menu-section/menu-group.js

@@ -9,7 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("@emotion/react");
 var _dsExplorations = require("@atlaskit/ds-explorations");
-var _excluded = ["maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "role"];
+var _menuContext = require("../internal/components/menu-context");
+var _excluded = ["maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "role", "spacing"];
 /**
  * __Menu group__
  *
@@ -25,25 +26,26 @@ var MenuGroup = function MenuGroup(_ref) {
     maxHeight = _ref.maxHeight,
     testId = _ref.testId,
     role = _ref.role,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? 'cozy' : _ref$spacing,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (
-    // @ts-ignore type of rest/children needs to be made stricter to fit in Box -- string shouldn't be allowed
-    (0, _react.jsx)(_dsExplorations.UNSAFE_Box, (0, _extends2.default)({
-      UNSAFE_style: {
-        minWidth: minWidth,
-        maxWidth: maxWidth,
-        minHeight: minHeight,
-        maxHeight: maxHeight
-      },
-      display: "flex",
-      flexDirection: "column",
-      overflow: "auto",
-      testId: testId,
-      role: role,
-      position: "static"
-      // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    }, rest))
-  );
+  return (0, _react.jsx)(_menuContext.SpacingContext.Provider, {
+    value: spacing
+  }, (0, _react.jsx)(_dsExplorations.UNSAFE_Box, (0, _extends2.default)({
+    UNSAFE_style: {
+      minWidth: minWidth,
+      maxWidth: maxWidth,
+      minHeight: minHeight,
+      maxHeight: maxHeight
+    },
+    display: "flex",
+    flexDirection: "column",
+    overflow: "auto",
+    testId: testId,
+    role: role,
+    position: "static"
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, rest)));
 };
 var _default = MenuGroup;
 exports.default = _default;

package/dist/cjs/version.json

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

package/dist/es2019/index.js

@@ -2,6 +2,7 @@ export { default as ButtonItem } from './menu-item/button-item';
 export { default as LinkItem } from './menu-item/link-item';
 export { default as CustomItem } from './menu-item/custom-item';
 export { default as SkeletonItem } from './menu-item/skeleton-item';
+export { SpacingContext } from './internal/components/menu-context';
 export { default as HeadingItem } from './menu-item/heading-item';
 export { default as SkeletonHeadingItem } from './menu-item/skeleton-heading-item';
 export { default as Section } from './menu-section/section';

package/dist/es2019/internal/components/menu-context.js

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+/**
+ * __Spacing context__
+ *
+ *  The spacing context is used to provide spacing values to menu item primitives.
+ *
+ * @internal Do not use directly.
+ */
+export const SpacingContext = /*#__PURE__*/createContext('cozy');

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

@@ -1,25 +1,17 @@
 /** @jsx jsx */
-import { Fragment } from 'react';
+import { useContext } from 'react';
 import { ClassNames, css, jsx } from '@emotion/react';
+import Inline from '@atlaskit/ds-explorations/inline';
 import FocusRing from '@atlaskit/focus-ring';
 import { N20, N200, N30 } from '@atlaskit/theme/colors';
-import { fontSize as fontSizeFn } from '@atlaskit/theme/constants';
-import { headingSizes } from '@atlaskit/theme/typography';
+import { SpacingContext } from './menu-context';
 const defaultRender = (Component, props) =>
 // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 jsx(Component, props);
-const fontSize = fontSizeFn();
-const itemMinHeight = "var(--ds-space-500, 40px)";
-const beforeElementStyles = css({
+const beforeAfterElementStyles = css({
   display: 'flex',
-  marginRight: "var(--ds-space-150, 12px)",
-  alignItems: 'center',
-  flexShrink: 0
-});
-const afterElementStyles = css({
-  display: 'flex',
-  marginLeft: "var(--ds-space-150, 12px)",
   alignItems: 'center',
+  justifyContent: 'center',
   flexShrink: 0
 });
 const contentStyles = css({
@@ -28,8 +20,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,
+  lineHeight: "var(--ds-font-lineHeight-100, 16px)",
   outline: 'none',
   overflow: 'hidden',
   textAlign: 'left'
@@ -44,10 +35,9 @@ const wordBreakStyles = css({
   wordBreak: 'break-word'
 });
 const descriptionStyles = css({
-  marginTop: "var(--ds-space-050, 3px)",
+  marginTop: "var(--ds-space-050, 4px)",
   color: `var(--ds-text-subtlest, ${N200})`,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
-  fontSize: headingSizes.h200.size
+  fontSize: "var(--ds-font-size-075, 12px)"
 });
 const disabledDescriptionStyles = css({
   color: `var(--ds-text-disabled, ${N200})`
@@ -56,14 +46,11 @@ const primitiveStyles = css({
   display: 'flex',
   boxSizing: 'border-box',
   width: '100%',
-  minHeight: itemMinHeight,
+  minHeight: 40,
   margin: "var(--ds-space-0, 0px)",
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
-  padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-250, 20px)"}`,
   alignItems: 'center',
   border: 0,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
-  fontSize: fontSize,
+  fontSize: "var(--ds-font-size-100, 14px)",
   outline: 0,
   textDecoration: 'none',
   userSelect: 'none',
@@ -74,6 +61,20 @@ const primitiveStyles = css({
     textDecoration: 'none'
   }
 });
+const spacingMapStyles = {
+  cozy: css({
+    // 8 * 2 (16) + icon (24) === 40
+    paddingBlock: "var(--ds-space-100, 8px)",
+    paddingInline: "var(--ds-space-200, 16px)"
+  }),
+  compact: css({
+    minHeight: 32,
+    maxHeight: 32,
+    // 4 * 2 (8) + icon (24) === 32
+    paddingBlock: "var(--ds-space-050, 4px)",
+    paddingInline: "var(--ds-space-150, 12px)"
+  })
+};
 const interactiveStyles = css({
   cursor: 'pointer'
 });
@@ -116,6 +117,10 @@ const selectedStyles = css({
     color: "var(--ds-text-selected, currentColor)"
   }
 });
+const gapMap = {
+  compact: 'space.100',
+  cozy: 'space.150'
+};
 
 /**
  * __Menu item primitive__
@@ -144,6 +149,7 @@ const MenuItemPrimitive = ({
   isDisabled = false,
   isSelected = false
 }) => {
+  const spacing = useContext(SpacingContext);
   const renderTitle = overrides && overrides.Title && overrides.Title.render || defaultRender;
   return jsx(ClassNames, null, ({
     css: cn,
@@ -152,10 +158,18 @@ const MenuItemPrimitive = ({
     return jsx(FocusRing, {
       isInset: true
     }, children({
-      className: cx([cn([primitiveStyles, !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && selectedStyles, isDisabled ? disabledStyles : interactiveStyles]), className]),
-      children: jsx(Fragment, null, iconBefore && jsx("span", {
+      className: cx([cn([primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && selectedStyles, isDisabled ? disabledStyles : interactiveStyles]), className]),
+      children: jsx(Inline, {
+        justifyContent: "space-between",
+        alignItems: "center",
+        gap: gapMap[spacing],
+        UNSAFE_style: {
+          flexGrow: 1,
+          width: '100%'
+        }
+      }, iconBefore && jsx("span", {
         "data-item-elem-before": true,
-        css: beforeElementStyles
+        css: beforeAfterElementStyles
       }, iconBefore), title && jsx("span", {
         css: contentStyles
       }, renderTitle('span', {
@@ -167,7 +181,7 @@ const MenuItemPrimitive = ({
         css: [descriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
       }, description)), iconAfter && jsx("span", {
         "data-item-elem-after": true,
-        css: afterElementStyles
+        css: beforeAfterElementStyles
       }, iconAfter))
     }));
   });

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

@@ -8,11 +8,12 @@ import { headingSizes } from '@atlaskit/theme/typography';
 const itemHeadingContentHeight = headingSizes.h100.lineHeight;
 const itemHeadingFontSize = headingSizes.h100.size;
 const headingStyles = css({
-  padding: `0 ${"var(--ds-space-250, 20px)"}`,
   color: `var(--ds-text-subtle, ${N300})`,
   fontSize: itemHeadingFontSize,
   fontWeight: "var(--ds-font-weight-bold, 700)",
   lineHeight: itemHeadingContentHeight / itemHeadingFontSize,
+  paddingBlock: "var(--ds-space-0, 0px)",
+  paddingInline: "var(--ds-space-200, 16px)",
   textTransform: 'uppercase'
 });
 

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

@@ -5,7 +5,8 @@ import noop from '@atlaskit/ds-lib/noop';
 import { N20A } from '@atlaskit/theme/colors';
 import SkeletonShimmer from '../internal/components/skeleton-shimmer';
 const skeletonStyles = css({
-  padding: `${"var(--ds-space-0, 0px)"} ${"var(--ds-space-250, 20px)"}`,
+  paddingBlock: "var(--ds-space-0, 0px)",
+  paddingInline: "var(--ds-space-200, 16px)",
   '::after': {
     display: 'block',
     width: '30%',

package/dist/es2019/menu-section/menu-group.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
+import { SpacingContext } from '../internal/components/menu-context';
 /**
  * __Menu group__
  *
@@ -17,10 +18,11 @@ const MenuGroup = ({
   maxHeight,
   testId,
   role,
+  spacing = 'cozy',
   ...rest
-}) =>
-// @ts-ignore type of rest/children needs to be made stricter to fit in Box -- string shouldn't be allowed
-jsx(Box, _extends({
+}) => jsx(SpacingContext.Provider, {
+  value: spacing
+}, jsx(Box, _extends({
   UNSAFE_style: {
     minWidth,
     maxWidth,
@@ -34,5 +36,5 @@ jsx(Box, _extends({
   role: role,
   position: "static"
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-}, rest));
+}, rest)));
 export default MenuGroup;

package/dist/es2019/version.json

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

package/dist/esm/index.js

@@ -2,6 +2,7 @@ export { default as ButtonItem } from './menu-item/button-item';
 export { default as LinkItem } from './menu-item/link-item';
 export { default as CustomItem } from './menu-item/custom-item';
 export { default as SkeletonItem } from './menu-item/skeleton-item';
+export { SpacingContext } from './internal/components/menu-context';
 export { default as HeadingItem } from './menu-item/heading-item';
 export { default as SkeletonHeadingItem } from './menu-item/skeleton-heading-item';
 export { default as Section } from './menu-section/section';

package/dist/esm/internal/components/menu-context.js

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+/**
+ * __Spacing context__
+ *
+ *  The spacing context is used to provide spacing values to menu item primitives.
+ *
+ * @internal Do not use directly.
+ */
+export var SpacingContext = /*#__PURE__*/createContext('cozy');

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

@@ -1,28 +1,20 @@
 /** @jsx jsx */
-import { Fragment } from 'react';
+import { useContext } from 'react';
 import { ClassNames, css, jsx } from '@emotion/react';
+import Inline from '@atlaskit/ds-explorations/inline';
 import FocusRing from '@atlaskit/focus-ring';
 import { N20, N200, N30 } from '@atlaskit/theme/colors';
-import { fontSize as fontSizeFn } from '@atlaskit/theme/constants';
-import { headingSizes } from '@atlaskit/theme/typography';
+import { SpacingContext } from './menu-context';
 var defaultRender = function defaultRender(Component, props) {
   return (
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     jsx(Component, props)
   );
 };
-var fontSize = fontSizeFn();
-var itemMinHeight = "var(--ds-space-500, 40px)";
-var beforeElementStyles = css({
+var beforeAfterElementStyles = css({
   display: 'flex',
-  marginRight: "var(--ds-space-150, 12px)",
-  alignItems: 'center',
-  flexShrink: 0
-});
-var afterElementStyles = css({
-  display: 'flex',
-  marginLeft: "var(--ds-space-150, 12px)",
   alignItems: 'center',
+  justifyContent: 'center',
   flexShrink: 0
 });
 var contentStyles = css({
@@ -31,8 +23,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,
+  lineHeight: "var(--ds-font-lineHeight-100, 16px)",
   outline: 'none',
   overflow: 'hidden',
   textAlign: 'left'
@@ -47,10 +38,9 @@ var wordBreakStyles = css({
   wordBreak: 'break-word'
 });
 var descriptionStyles = css({
-  marginTop: "var(--ds-space-050, 3px)",
+  marginTop: "var(--ds-space-050, 4px)",
   color: "var(--ds-text-subtlest, ".concat(N200, ")"),
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
-  fontSize: headingSizes.h200.size
+  fontSize: "var(--ds-font-size-075, 12px)"
 });
 var disabledDescriptionStyles = css({
   color: "var(--ds-text-disabled, ".concat(N200, ")")
@@ -59,14 +49,11 @@ var primitiveStyles = css({
   display: 'flex',
   boxSizing: 'border-box',
   width: '100%',
-  minHeight: itemMinHeight,
+  minHeight: 40,
   margin: "var(--ds-space-0, 0px)",
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
-  padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-250, 20px)"),
   alignItems: 'center',
   border: 0,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
-  fontSize: fontSize,
+  fontSize: "var(--ds-font-size-100, 14px)",
   outline: 0,
   textDecoration: 'none',
   userSelect: 'none',
@@ -77,6 +64,20 @@ var primitiveStyles = css({
     textDecoration: 'none'
   }
 });
+var spacingMapStyles = {
+  cozy: css({
+    // 8 * 2 (16) + icon (24) === 40
+    paddingBlock: "var(--ds-space-100, 8px)",
+    paddingInline: "var(--ds-space-200, 16px)"
+  }),
+  compact: css({
+    minHeight: 32,
+    maxHeight: 32,
+    // 4 * 2 (8) + icon (24) === 32
+    paddingBlock: "var(--ds-space-050, 4px)",
+    paddingInline: "var(--ds-space-150, 12px)"
+  })
+};
 var interactiveStyles = css({
   cursor: 'pointer'
 });
@@ -119,6 +120,10 @@ var selectedStyles = css({
     color: "var(--ds-text-selected, currentColor)"
   }
 });
+var gapMap = {
+  compact: 'space.100',
+  cozy: 'space.150'
+};
 
 /**
  * __Menu item primitive__
@@ -150,6 +155,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected;
+  var spacing = useContext(SpacingContext);
   var renderTitle = overrides && overrides.Title && overrides.Title.render || defaultRender;
   return jsx(ClassNames, null, function (_ref2) {
     var cn = _ref2.css,
@@ -157,10 +163,18 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
     return jsx(FocusRing, {
       isInset: true
     }, children({
-      className: cx([cn([primitiveStyles, !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && selectedStyles, isDisabled ? disabledStyles : interactiveStyles]), className]),
-      children: jsx(Fragment, null, iconBefore && jsx("span", {
+      className: cx([cn([primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && selectedStyles, isDisabled ? disabledStyles : interactiveStyles]), className]),
+      children: jsx(Inline, {
+        justifyContent: "space-between",
+        alignItems: "center",
+        gap: gapMap[spacing],
+        UNSAFE_style: {
+          flexGrow: 1,
+          width: '100%'
+        }
+      }, iconBefore && jsx("span", {
         "data-item-elem-before": true,
-        css: beforeElementStyles
+        css: beforeAfterElementStyles
       }, iconBefore), title && jsx("span", {
         css: contentStyles
       }, renderTitle('span', {
@@ -172,7 +186,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
         css: [descriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
       }, description)), iconAfter && jsx("span", {
         "data-item-elem-after": true,
-        css: afterElementStyles
+        css: beforeAfterElementStyles
       }, iconAfter))
     }));
   });

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

@@ -10,11 +10,12 @@ import { headingSizes } from '@atlaskit/theme/typography';
 var itemHeadingContentHeight = headingSizes.h100.lineHeight;
 var itemHeadingFontSize = headingSizes.h100.size;
 var headingStyles = css({
-  padding: "0 ".concat("var(--ds-space-250, 20px)"),
   color: "var(--ds-text-subtle, ".concat(N300, ")"),
   fontSize: itemHeadingFontSize,
   fontWeight: "var(--ds-font-weight-bold, 700)",
   lineHeight: itemHeadingContentHeight / itemHeadingFontSize,
+  paddingBlock: "var(--ds-space-0, 0px)",
+  paddingInline: "var(--ds-space-200, 16px)",
   textTransform: 'uppercase'
 });
 

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

@@ -5,7 +5,8 @@ import noop from '@atlaskit/ds-lib/noop';
 import { N20A } from '@atlaskit/theme/colors';
 import SkeletonShimmer from '../internal/components/skeleton-shimmer';
 var skeletonStyles = css({
-  padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-250, 20px)"),
+  paddingBlock: "var(--ds-space-0, 0px)",
+  paddingInline: "var(--ds-space-200, 16px)",
   '::after': {
     display: 'block',
     width: '30%',

package/dist/esm/menu-section/menu-group.js

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "role"];
+var _excluded = ["maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "role", "spacing"];
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
+import { SpacingContext } from '../internal/components/menu-context';
 /**
  * __Menu group__
  *
@@ -19,24 +20,25 @@ var MenuGroup = function MenuGroup(_ref) {
     maxHeight = _ref.maxHeight,
     testId = _ref.testId,
     role = _ref.role,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? 'cozy' : _ref$spacing,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return (
-    // @ts-ignore type of rest/children needs to be made stricter to fit in Box -- string shouldn't be allowed
-    jsx(Box, _extends({
-      UNSAFE_style: {
-        minWidth: minWidth,
-        maxWidth: maxWidth,
-        minHeight: minHeight,
-        maxHeight: maxHeight
-      },
-      display: "flex",
-      flexDirection: "column",
-      overflow: "auto",
-      testId: testId,
-      role: role,
-      position: "static"
-      // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    }, rest))
-  );
+  return jsx(SpacingContext.Provider, {
+    value: spacing
+  }, jsx(Box, _extends({
+    UNSAFE_style: {
+      minWidth: minWidth,
+      maxWidth: maxWidth,
+      minHeight: minHeight,
+      maxHeight: maxHeight
+    },
+    display: "flex",
+    flexDirection: "column",
+    overflow: "auto",
+    testId: testId,
+    role: role,
+    position: "static"
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, rest)));
 };
 export default MenuGroup;

package/dist/esm/version.json

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

package/dist/types/index.d.ts

@@ -2,6 +2,7 @@ export { default as ButtonItem } from './menu-item/button-item';
 export { default as LinkItem } from './menu-item/link-item';
 export { default as CustomItem } from './menu-item/custom-item';
 export { default as SkeletonItem } from './menu-item/skeleton-item';
+export { SpacingContext } from './internal/components/menu-context';
 export { default as HeadingItem } from './menu-item/heading-item';
 export { default as SkeletonHeadingItem } from './menu-item/skeleton-heading-item';
 export { default as Section } from './menu-section/section';

package/dist/types/internal/components/menu-context.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare type SpacingMode = 'compact' | 'cozy';
+/**
+ * __Spacing context__
+ *
+ *  The spacing context is used to provide spacing values to menu item primitives.
+ *
+ * @internal Do not use directly.
+ */
+export declare const SpacingContext: import("react").Context<SpacingMode>;

package/dist/types/menu-section/menu-group.d.ts

@@ -9,5 +9,5 @@ import type { MenuGroupProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/menu-group)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const MenuGroup: ({ maxWidth, minWidth, minHeight, maxHeight, testId, role, ...rest }: MenuGroupProps) => jsx.JSX.Element;
+declare const MenuGroup: ({ maxWidth, minWidth, minHeight, maxHeight, testId, role, spacing, ...rest }: MenuGroupProps) => jsx.JSX.Element;
 export default MenuGroup;

package/dist/types/types.d.ts

@@ -1,5 +1,6 @@
 import { ComponentType, ReactNode, Ref } from 'react';
 import { CSSObject } from '@emotion/react';
+import type { SpacingMode } from './internal/components/menu-context';
 export interface RenderFunction<TProps = {}> {
     (Component: ComponentType | string, props: TProps): React.ReactNode;
 }
@@ -45,6 +46,10 @@ export interface MenuGroupProps extends MenuGroupSizing {
      * should generally be `Section` components.
      */
     children: React.ReactNode;
+    /**
+     * Configure the density of the MenuGroup content.
+     */
+    spacing?: SpacingMode;
     /**
      * Used to override the accessibility role for the element.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "1.4.10",
+  "version": "1.5.0",
   "description": "A collection of composable menu components that can be used anywhere.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -41,7 +41,7 @@
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/focus-ring": "^1.2.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^1.1.0",
+    "@atlaskit/tokens": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },