@atlaskit/menu 2.2.1 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/menu
 
+## 2.3.0
+
+### Minor Changes
+
+-   [#100991](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100991)
+    [`364a95234076`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/364a95234076) -
+    [ux] We are testing a visual change behind a feature flag. The line height of menu item title
+    changes. If this change is successful it will be available in a later release.
+
 ## 2.2.1
 
 ### Patch Changes

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

@@ -10,7 +10,7 @@ var _react2 = require("@emotion/react");
 var _deprecationWarning = require("@atlaskit/ds-lib/deprecation-warning");
 var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _inline = _interopRequireDefault(require("@atlaskit/primitives/inline"));
+var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _menuContext = require("./menu-context");
 /** @jsx jsx */
@@ -27,29 +27,35 @@ var beforeAfterElementStyles = (0, _react2.css)({
   justifyContent: 'center',
   flexShrink: 0
 });
-var contentStyles = (0, _react2.css)({
-  display: 'flex',
-  justifyContent: 'center',
-  flexDirection: 'column',
-  flexGrow: 1,
-  lineHeight: "var(--ds-font-lineHeight-100, 16px)",
+var contentStyles = (0, _primitives.xcss)({
   outline: 'none',
   overflow: 'hidden',
   textAlign: 'left'
 });
+var baseContentStyles = (0, _primitives.xcss)({
+  lineHeight: "var(--ds-font-lineHeight-100, 16px)"
+});
 var truncateStyles = (0, _react2.css)({
   display: 'block',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
+var titleStyles = (0, _react2.css)({
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+});
 var wordBreakStyles = (0, _react2.css)({
   wordBreak: 'break-word'
 });
 var descriptionStyles = (0, _react2.css)({
-  marginTop: "var(--ds-space-050, 4px)",
-  color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
-  fontSize: "var(--ds-font-size-075, 12px)"
+  color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
+});
+var baseDescriptionStyles = (0, _react2.css)({
+  fontSize: "var(--ds-font-size-075, 12px)",
+  marginBlockStart: "var(--ds-space-050, 4px)"
+});
+var tokenizedDescriptionStyles = (0, _react2.css)({
+  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)"
 });
 var disabledDescriptionStyles = (0, _react2.css)({
   color: "var(--ds-text-disabled, ".concat(_colors.N200, ")")
@@ -65,7 +71,6 @@ var primitiveStyles = (0, _react2.css)({
   margin: "var(--ds-space-0, 0px)",
   alignItems: 'center',
   border: 0,
-  fontSize: "var(--ds-font-size-100, 14px)",
   outline: 0,
   textDecoration: 'none',
   userSelect: 'none',
@@ -76,6 +81,9 @@ var primitiveStyles = (0, _react2.css)({
     textDecoration: 'none'
   }
 });
+var primitiveBaseStyles = (0, _react2.css)({
+  fontSize: "var(--ds-font-size-100, 14px)"
+});
 var spacingMapStyles = {
   cozy: (0, _react2.css)({
     // 8 * 2 (16) + icon (24) === 40
@@ -119,23 +127,23 @@ var selectedBorderStyles = (0, _react2.css)({
   '&::before': {
     width: 2,
     position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
     background: "var(--ds-border-selected, transparent)",
-    content: '""'
+    content: '""',
+    insetBlockEnd: 0,
+    insetBlockStart: 0,
+    insetInlineStart: 0
   }
 });
 var selectedNotchStyles = (0, _react2.css)({
   '&::before': {
     width: 4,
     position: 'absolute',
-    top: "var(--ds-space-150, 12px)",
-    bottom: "var(--ds-space-150, 12px)",
-    left: 0,
     background: "var(--ds-border-selected, transparent)",
     borderRadius: "0 ".concat("var(--ds-border-radius, 4px)", " ", "var(--ds-border-radius, 4px)", " 0"),
-    content: '""'
+    content: '""',
+    insetBlockEnd: "var(--ds-space-150, 12px)",
+    insetBlockStart: "var(--ds-space-150, 12px)",
+    insetInlineStart: 0
   }
 });
 var selectedStyles = (0, _react2.css)({
@@ -202,8 +210,8 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
     return (0, _react2.jsx)(_focusRing.default, {
       isInset: true
     }, children({
-      className: cx([cn([positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
-      children: (0, _react2.jsx)(_inline.default, {
+      className: cx([cn([positionRelativeStyles, primitiveStyles, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.menu-tokenised-typography-styles') ? undefined : primitiveBaseStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
+      children: (0, _react2.jsx)(_primitives.Inline, {
         as: "span",
         spread: "space-between",
         alignBlock: "center",
@@ -214,15 +222,17 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
         "data-item-elem-before": true,
         css: beforeAfterElementStyles,
         "data-testid": testId && "".concat(testId, "--icon-before")
-      }, iconBefore), title && (0, _react2.jsx)("span", {
-        css: contentStyles
+      }, iconBefore), title && (0, _react2.jsx)(_primitives.Stack, {
+        alignBlock: "center",
+        grow: "fill",
+        xcss: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.menu-tokenised-typography-styles') ? contentStyles : [contentStyles, baseContentStyles]
       }, renderTitle('span', {
         children: title,
-        className: cn(shouldTitleWrap ? wordBreakStyles : truncateStyles),
+        className: cn((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.menu-tokenised-typography-styles') ? titleStyles : undefined, shouldTitleWrap ? wordBreakStyles : truncateStyles),
         'data-item-title': true
       }), description && (0, _react2.jsx)("span", {
         "data-item-description": true,
-        css: [descriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
+        css: [descriptionStyles, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.menu-tokenised-typography-styles') ? tokenizedDescriptionStyles : baseDescriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
       }, description)), iconAfter && (0, _react2.jsx)("span", {
         "data-item-elem-after": true,
         css: beforeAfterElementStyles,

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

@@ -20,13 +20,18 @@ var itemHeadingContentHeight = _typography.headingSizes.h100.lineHeight;
 var itemHeadingFontSize = _typography.headingSizes.h100.size;
 var headingStyles = (0, _react2.css)({
   color: "var(--ds-text-subtle, ".concat(_colors.N300, ")"),
+  paddingBlock: "var(--ds-space-0, 0px)",
+  paddingInline: "var(--ds-space-200, 16px)"
+});
+var baseHeadingStyles = (0, _react2.css)({
   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'
 });
+var tokenizedHeadingStyles = (0, _react2.css)({
+  font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+});
 
 /**
  * __Heading item__
@@ -50,7 +55,7 @@ var HeadingItem = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   );
   var UNSAFE_overrides = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : (0, _react2.css)(cssFn(undefined));
   return (0, _react2.jsx)("div", (0, _extends2.default)({
-    css: [headingStyles,
+    css: [headingStyles, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.menu-tokenised-typography-styles') ? tokenizedHeadingStyles : baseHeadingStyles,
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     UNSAFE_overrides],
     role: "heading",

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

@@ -4,7 +4,7 @@ import { ClassNames, css, jsx } from '@emotion/react';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import FocusRing from '@atlaskit/focus-ring';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import Inline from '@atlaskit/primitives/inline';
+import { Inline, Stack, xcss } from '@atlaskit/primitives';
 import { N20, N200, N30 } from '@atlaskit/theme/colors';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE, SpacingContext } from './menu-context';
 const defaultRender = (Component, props) =>
@@ -16,29 +16,35 @@ const beforeAfterElementStyles = css({
   justifyContent: 'center',
   flexShrink: 0
 });
-const contentStyles = css({
-  display: 'flex',
-  justifyContent: 'center',
-  flexDirection: 'column',
-  flexGrow: 1,
-  lineHeight: "var(--ds-font-lineHeight-100, 16px)",
+const contentStyles = xcss({
   outline: 'none',
   overflow: 'hidden',
   textAlign: 'left'
 });
+const baseContentStyles = xcss({
+  lineHeight: "var(--ds-font-lineHeight-100, 16px)"
+});
 const truncateStyles = css({
   display: 'block',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
+const titleStyles = css({
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+});
 const wordBreakStyles = css({
   wordBreak: 'break-word'
 });
 const descriptionStyles = css({
-  marginTop: "var(--ds-space-050, 4px)",
-  color: `var(--ds-text-subtlest, ${N200})`,
-  fontSize: "var(--ds-font-size-075, 12px)"
+  color: `var(--ds-text-subtlest, ${N200})`
+});
+const baseDescriptionStyles = css({
+  fontSize: "var(--ds-font-size-075, 12px)",
+  marginBlockStart: "var(--ds-space-050, 4px)"
+});
+const tokenizedDescriptionStyles = css({
+  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)"
 });
 const disabledDescriptionStyles = css({
   color: `var(--ds-text-disabled, ${N200})`
@@ -54,7 +60,6 @@ const primitiveStyles = css({
   margin: "var(--ds-space-0, 0px)",
   alignItems: 'center',
   border: 0,
-  fontSize: "var(--ds-font-size-100, 14px)",
   outline: 0,
   textDecoration: 'none',
   userSelect: 'none',
@@ -65,6 +70,9 @@ const primitiveStyles = css({
     textDecoration: 'none'
   }
 });
+const primitiveBaseStyles = css({
+  fontSize: "var(--ds-font-size-100, 14px)"
+});
 const spacingMapStyles = {
   cozy: css({
     // 8 * 2 (16) + icon (24) === 40
@@ -108,23 +116,23 @@ const selectedBorderStyles = css({
   '&::before': {
     width: 2,
     position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
     background: "var(--ds-border-selected, transparent)",
-    content: '""'
+    content: '""',
+    insetBlockEnd: 0,
+    insetBlockStart: 0,
+    insetInlineStart: 0
   }
 });
 const selectedNotchStyles = css({
   '&::before': {
     width: 4,
     position: 'absolute',
-    top: "var(--ds-space-150, 12px)",
-    bottom: "var(--ds-space-150, 12px)",
-    left: 0,
     background: "var(--ds-border-selected, transparent)",
     borderRadius: `0 ${"var(--ds-border-radius, 4px)"} ${"var(--ds-border-radius, 4px)"} 0`,
-    content: '""'
+    content: '""',
+    insetBlockEnd: "var(--ds-space-150, 12px)",
+    insetBlockStart: "var(--ds-space-150, 12px)",
+    insetInlineStart: 0
   }
 });
 const selectedStyles = css({
@@ -189,7 +197,7 @@ const MenuItemPrimitive = ({
     return jsx(FocusRing, {
       isInset: true
     }, children({
-      className: cx([cn([positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
+      className: cx([cn([positionRelativeStyles, primitiveStyles, getBooleanFF('platform.design-system-team.menu-tokenised-typography-styles') ? undefined : primitiveBaseStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
       children: jsx(Inline, {
         as: "span",
         spread: "space-between",
@@ -201,15 +209,17 @@ const MenuItemPrimitive = ({
         "data-item-elem-before": true,
         css: beforeAfterElementStyles,
         "data-testid": testId && `${testId}--icon-before`
-      }, iconBefore), title && jsx("span", {
-        css: contentStyles
+      }, iconBefore), title && jsx(Stack, {
+        alignBlock: "center",
+        grow: "fill",
+        xcss: getBooleanFF('platform.design-system-team.menu-tokenised-typography-styles') ? contentStyles : [contentStyles, baseContentStyles]
       }, renderTitle('span', {
         children: title,
-        className: cn(shouldTitleWrap ? wordBreakStyles : truncateStyles),
+        className: cn(getBooleanFF('platform.design-system-team.menu-tokenised-typography-styles') ? titleStyles : undefined, shouldTitleWrap ? wordBreakStyles : truncateStyles),
         'data-item-title': true
       }), description && jsx("span", {
         "data-item-description": true,
-        css: [descriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
+        css: [descriptionStyles, getBooleanFF('platform.design-system-team.menu-tokenised-typography-styles') ? tokenizedDescriptionStyles : baseDescriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
       }, description)), iconAfter && jsx("span", {
         "data-item-elem-after": true,
         css: beforeAfterElementStyles,

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

@@ -11,13 +11,18 @@ const itemHeadingContentHeight = headingSizes.h100.lineHeight;
 const itemHeadingFontSize = headingSizes.h100.size;
 const headingStyles = css({
   color: `var(--ds-text-subtle, ${N300})`,
+  paddingBlock: "var(--ds-space-0, 0px)",
+  paddingInline: "var(--ds-space-200, 16px)"
+});
+const baseHeadingStyles = css({
   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'
 });
+const tokenizedHeadingStyles = css({
+  font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+});
 
 /**
  * __Heading item__
@@ -44,7 +49,7 @@ const HeadingItem = /*#__PURE__*/memo(({
   );
   const UNSAFE_overrides = getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : css(cssFn(undefined));
   return jsx("div", _extends({
-    css: [headingStyles,
+    css: [headingStyles, getBooleanFF('platform.design-system-team.menu-tokenised-typography-styles') ? tokenizedHeadingStyles : baseHeadingStyles,
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     UNSAFE_overrides],
     role: "heading",

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

@@ -4,7 +4,7 @@ import { ClassNames, css, jsx } from '@emotion/react';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import FocusRing from '@atlaskit/focus-ring';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import Inline from '@atlaskit/primitives/inline';
+import { Inline, Stack, xcss } from '@atlaskit/primitives';
 import { N20, N200, N30 } from '@atlaskit/theme/colors';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE, SpacingContext } from './menu-context';
 var defaultRender = function defaultRender(Component, props) {
@@ -19,29 +19,35 @@ var beforeAfterElementStyles = css({
   justifyContent: 'center',
   flexShrink: 0
 });
-var contentStyles = css({
-  display: 'flex',
-  justifyContent: 'center',
-  flexDirection: 'column',
-  flexGrow: 1,
-  lineHeight: "var(--ds-font-lineHeight-100, 16px)",
+var contentStyles = xcss({
   outline: 'none',
   overflow: 'hidden',
   textAlign: 'left'
 });
+var baseContentStyles = xcss({
+  lineHeight: "var(--ds-font-lineHeight-100, 16px)"
+});
 var truncateStyles = css({
   display: 'block',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
+var titleStyles = css({
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+});
 var wordBreakStyles = css({
   wordBreak: 'break-word'
 });
 var descriptionStyles = css({
-  marginTop: "var(--ds-space-050, 4px)",
-  color: "var(--ds-text-subtlest, ".concat(N200, ")"),
-  fontSize: "var(--ds-font-size-075, 12px)"
+  color: "var(--ds-text-subtlest, ".concat(N200, ")")
+});
+var baseDescriptionStyles = css({
+  fontSize: "var(--ds-font-size-075, 12px)",
+  marginBlockStart: "var(--ds-space-050, 4px)"
+});
+var tokenizedDescriptionStyles = css({
+  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)"
 });
 var disabledDescriptionStyles = css({
   color: "var(--ds-text-disabled, ".concat(N200, ")")
@@ -57,7 +63,6 @@ var primitiveStyles = css({
   margin: "var(--ds-space-0, 0px)",
   alignItems: 'center',
   border: 0,
-  fontSize: "var(--ds-font-size-100, 14px)",
   outline: 0,
   textDecoration: 'none',
   userSelect: 'none',
@@ -68,6 +73,9 @@ var primitiveStyles = css({
     textDecoration: 'none'
   }
 });
+var primitiveBaseStyles = css({
+  fontSize: "var(--ds-font-size-100, 14px)"
+});
 var spacingMapStyles = {
   cozy: css({
     // 8 * 2 (16) + icon (24) === 40
@@ -111,23 +119,23 @@ var selectedBorderStyles = css({
   '&::before': {
     width: 2,
     position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
     background: "var(--ds-border-selected, transparent)",
-    content: '""'
+    content: '""',
+    insetBlockEnd: 0,
+    insetBlockStart: 0,
+    insetInlineStart: 0
   }
 });
 var selectedNotchStyles = css({
   '&::before': {
     width: 4,
     position: 'absolute',
-    top: "var(--ds-space-150, 12px)",
-    bottom: "var(--ds-space-150, 12px)",
-    left: 0,
     background: "var(--ds-border-selected, transparent)",
     borderRadius: "0 ".concat("var(--ds-border-radius, 4px)", " ", "var(--ds-border-radius, 4px)", " 0"),
-    content: '""'
+    content: '""',
+    insetBlockEnd: "var(--ds-space-150, 12px)",
+    insetBlockStart: "var(--ds-space-150, 12px)",
+    insetInlineStart: 0
   }
 });
 var selectedStyles = css({
@@ -194,7 +202,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
     return jsx(FocusRing, {
       isInset: true
     }, children({
-      className: cx([cn([positionRelativeStyles, primitiveStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
+      className: cx([cn([positionRelativeStyles, primitiveStyles, getBooleanFF('platform.design-system-team.menu-tokenised-typography-styles') ? undefined : primitiveBaseStyles, spacingMapStyles[spacing], !isDisabled && !isSelected && unselectedStyles, !isDisabled && isSelected && [selectedStyles, [selectionStyle === 'border' && selectedBorderStyles, selectionStyle === 'notch' && selectedNotchStyles]], isDisabled ? disabledStyles : interactiveStyles]), UNSAFE_className]),
       children: jsx(Inline, {
         as: "span",
         spread: "space-between",
@@ -206,15 +214,17 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
         "data-item-elem-before": true,
         css: beforeAfterElementStyles,
         "data-testid": testId && "".concat(testId, "--icon-before")
-      }, iconBefore), title && jsx("span", {
-        css: contentStyles
+      }, iconBefore), title && jsx(Stack, {
+        alignBlock: "center",
+        grow: "fill",
+        xcss: getBooleanFF('platform.design-system-team.menu-tokenised-typography-styles') ? contentStyles : [contentStyles, baseContentStyles]
       }, renderTitle('span', {
         children: title,
-        className: cn(shouldTitleWrap ? wordBreakStyles : truncateStyles),
+        className: cn(getBooleanFF('platform.design-system-team.menu-tokenised-typography-styles') ? titleStyles : undefined, shouldTitleWrap ? wordBreakStyles : truncateStyles),
         'data-item-title': true
       }), description && jsx("span", {
         "data-item-description": true,
-        css: [descriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
+        css: [descriptionStyles, getBooleanFF('platform.design-system-team.menu-tokenised-typography-styles') ? tokenizedDescriptionStyles : baseDescriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
       }, description)), iconAfter && jsx("span", {
         "data-item-elem-after": true,
         css: beforeAfterElementStyles,

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

@@ -13,13 +13,18 @@ var itemHeadingContentHeight = headingSizes.h100.lineHeight;
 var itemHeadingFontSize = headingSizes.h100.size;
 var headingStyles = css({
   color: "var(--ds-text-subtle, ".concat(N300, ")"),
+  paddingBlock: "var(--ds-space-0, 0px)",
+  paddingInline: "var(--ds-space-200, 16px)"
+});
+var baseHeadingStyles = css({
   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'
 });
+var tokenizedHeadingStyles = css({
+  font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+});
 
 /**
  * __Heading item__
@@ -43,7 +48,7 @@ var HeadingItem = /*#__PURE__*/memo(function (_ref) {
   );
   var UNSAFE_overrides = getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : css(cssFn(undefined));
   return jsx("div", _extends({
-    css: [headingStyles,
+    css: [headingStyles, getBooleanFF('platform.design-system-team.menu-tokenised-typography-styles') ? tokenizedHeadingStyles : baseHeadingStyles,
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     UNSAFE_overrides],
     role: "heading",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "A list of options to help users navigate, or perform actions.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -46,9 +46,9 @@
     "@atlaskit/ds-lib": "^2.3.0",
     "@atlaskit/focus-ring": "^1.4.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^6.0.0",
-    "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.45.0",
+    "@atlaskit/primitives": "^6.2.0",
+    "@atlaskit/theme": "^12.8.0",
+    "@atlaskit/tokens": "^1.48.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -126,6 +126,9 @@
     },
     "platform.design-system-team.section-1px-seperator-borders": {
       "type": "boolean"
+    },
+    "platform.design-system-team.menu-tokenised-typography-styles": {
+      "type": "boolean"
     }
   },
   "homepage": "https://atlassian.design/components/menu/",