@atlaskit/menu 3.0.0 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/menu
 
+## 3.1.0
+
+### Minor Changes
+
+- [#118691](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/118691)
+  [`fe3551cf3dd67`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fe3551cf3dd67) -
+  We are testing improvements behind a feature flag. Menu items will support icons regardless of
+  their spacing. If this fix is successful it will be available in a later release.
+
 ## 3.0.0
 
 ### Major Changes

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

@@ -9,6 +9,7 @@ var _react = require("react");
 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 _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _menuContext = require("./menu-context");
@@ -25,8 +26,16 @@ var defaultRender = function defaultRender(Component, props) {
     (0, _react2.jsx)(Component, props)
   );
 };
+var beforeAfterElementStylesOld = (0, _react2.css)({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0
+});
 var beforeAfterElementStyles = (0, _react2.css)({
   display: 'flex',
+  minWidth: 24,
+  minHeight: 24,
   alignItems: 'center',
   justifyContent: 'center',
   flexShrink: 0
@@ -214,7 +223,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
         testId: testId && "".concat(testId, "--container")
       }, iconBefore && (0, _react2.jsx)("span", {
         "data-item-elem-before": true,
-        css: beforeAfterElementStyles,
+        css: (0, _platformFeatureFlags.fg)('platform_ads_component_no_icon_spacing_support') ? beforeAfterElementStyles : beforeAfterElementStylesOld,
         "data-testid": testId && "".concat(testId, "--icon-before")
       }, iconBefore), title && (0, _react2.jsx)(_primitives.Stack, {
         alignBlock: "center",
@@ -229,7 +238,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: beforeAfterElementStyles,
+        css: (0, _platformFeatureFlags.fg)('platform_ads_component_no_icon_spacing_support') ? beforeAfterElementStyles : beforeAfterElementStylesOld,
         "data-testid": testId && "".concat(testId, "--icon-after")
       }, iconAfter))
     }));

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

@@ -8,14 +8,23 @@ import { useContext } from 'react';
 import { ClassNames, css, jsx } from '@emotion/react';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import FocusRing from '@atlaskit/focus-ring';
+import { fg } from '@atlaskit/platform-feature-flags';
 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) =>
 // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 jsx(Component, props);
+const beforeAfterElementStylesOld = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0
+});
 const beforeAfterElementStyles = css({
   display: 'flex',
+  minWidth: 24,
+  minHeight: 24,
   alignItems: 'center',
   justifyContent: 'center',
   flexShrink: 0
@@ -201,7 +210,7 @@ const MenuItemPrimitive = ({
         testId: testId && `${testId}--container`
       }, iconBefore && jsx("span", {
         "data-item-elem-before": true,
-        css: beforeAfterElementStyles,
+        css: fg('platform_ads_component_no_icon_spacing_support') ? beforeAfterElementStyles : beforeAfterElementStylesOld,
         "data-testid": testId && `${testId}--icon-before`
       }, iconBefore), title && jsx(Stack, {
         alignBlock: "center",
@@ -216,7 +225,7 @@ const MenuItemPrimitive = ({
         css: [descriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
       }, description)), iconAfter && jsx("span", {
         "data-item-elem-after": true,
-        css: beforeAfterElementStyles,
+        css: fg('platform_ads_component_no_icon_spacing_support') ? beforeAfterElementStyles : beforeAfterElementStylesOld,
         "data-testid": testId && `${testId}--icon-after`
       }, iconAfter))
     }));

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

@@ -8,6 +8,7 @@ import { useContext } from 'react';
 import { ClassNames, css, jsx } from '@emotion/react';
 import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
 import FocusRing from '@atlaskit/focus-ring';
+import { fg } from '@atlaskit/platform-feature-flags';
 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';
@@ -17,8 +18,16 @@ var defaultRender = function defaultRender(Component, props) {
     jsx(Component, props)
   );
 };
+var beforeAfterElementStylesOld = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0
+});
 var beforeAfterElementStyles = css({
   display: 'flex',
+  minWidth: 24,
+  minHeight: 24,
   alignItems: 'center',
   justifyContent: 'center',
   flexShrink: 0
@@ -206,7 +215,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
         testId: testId && "".concat(testId, "--container")
       }, iconBefore && jsx("span", {
         "data-item-elem-before": true,
-        css: beforeAfterElementStyles,
+        css: fg('platform_ads_component_no_icon_spacing_support') ? beforeAfterElementStyles : beforeAfterElementStylesOld,
         "data-testid": testId && "".concat(testId, "--icon-before")
       }, iconBefore), title && jsx(Stack, {
         alignBlock: "center",
@@ -221,7 +230,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
         css: [descriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
       }, description)), iconAfter && jsx("span", {
         "data-item-elem-after": true,
-        css: beforeAfterElementStyles,
+        css: fg('platform_ads_component_no_icon_spacing_support') ? beforeAfterElementStyles : beforeAfterElementStylesOld,
         "data-testid": testId && "".concat(testId, "--icon-after")
       }, iconAfter))
     }));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "3.0.0",
+	"version": "3.1.0",
 	"description": "A list of options to help users navigate, or perform actions.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -46,9 +46,9 @@
 		"@atlaskit/focus-ring": "^3.0.0",
 		"@atlaskit/interaction-context": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.0.0",
+		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/theme": "^17.0.0",
-		"@atlaskit/tokens": "^4.0.0",
+		"@atlaskit/tokens": "^4.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
@@ -60,9 +60,9 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/button": "^21.0.0",
+		"@atlaskit/button": "^21.1.0",
 		"@atlaskit/docs": "*",
-		"@atlaskit/icon": "^24.0.0",
+		"@atlaskit/icon": "^24.1.0",
 		"@atlaskit/icon-file-type": "^7.0.0",
 		"@atlaskit/icon-object": "^7.0.0",
 		"@atlaskit/link": "*",
@@ -121,6 +121,9 @@
 		".": "./src/index.tsx"
 	},
 	"platform-feature-flags": {
+		"platform_ads_component_no_icon_spacing_support": {
+			"type": "boolean"
+		},
 		"platform_button_item-add-ufo-metrics": {
 			"type": "boolean"
 		}