@atlaskit/menu 8.0.8 → 8.1.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/menu
 
+## 8.1.0
+
+### Minor Changes
+
+- [#191911](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/191911)
+  [`c1fc152f611b8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c1fc152f611b8) -
+  Icons will now display consistently in menu items regardless of their spacing
+
+## 8.0.9
+
+### Patch Changes
+
+- [#188621](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/188621)
+  [`94981059e9ba8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/94981059e9ba8) -
+  Added accessible label for MenuGroup in DropdownMenu
+- Updated dependencies
+
 ## 8.0.8
 
 ### Patch Changes

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

@@ -23,7 +23,6 @@ var renderTitle = function renderTitle(Component, props) {
 };
 var styles = {
   root: "_19itidpf _12ji1r31 _1qu2glyw _12y3idpf _4bfu1r31 _1hmsglyw _ajmmnqa1 _kqswh2mm _1e0c1txw _vchhusvi _1bsb1osq _1tke1ylp _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _4cvr1h6o _uiztglyw _80omtlke _ymio1r31 _ypr0glyw _zcxs1o36 _nt75194a _mizu194a _1bg411pw _1ah311pw _49pcnqa1 _ra3xnqa1 _1hvw1bk5 _128m1bk5 _9oik1r31 _1bnxglyw _jf4cnqa1 _1cvmnqa1 _4davt94y",
-  beforeAfterElementOld: "_1e0c1txw _4cvr1h6o _1bah1h6o _1o9zidpf",
   beforeAfterElement: "_1e0c1txw _1ul91tcg _1tke1tcg _4cvr1h6o _1bah1h6o _1o9zidpf",
   content: "_12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bah1h6o _16jlkb7n _y3gn1e5h",
   truncate: "_1reo15vq _18m915vq _1e0c1ule _1bto1l2s _o5721q9c",
@@ -95,7 +94,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
       }, iconBefore && /*#__PURE__*/React.createElement("span", {
         "data-item-elem-before": true,
         "data-testid": testId && "".concat(testId, "--icon-before"),
-        className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform_ads_component_no_icon_spacing_support') && styles.beforeAfterElement, !(0, _platformFeatureFlags.fg)('platform_ads_component_no_icon_spacing_support') && styles.beforeAfterElementOld])
+        className: (0, _runtime.ax)([styles.beforeAfterElement])
       }, iconBefore), title && /*#__PURE__*/React.createElement("div", {
         className: (0, _runtime.ax)([styles.content])
       }, renderTitle(isTitleHeading ? 'h2' : 'span', {
@@ -108,7 +107,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
       }, description)), iconAfter && /*#__PURE__*/React.createElement("span", {
         "data-item-elem-after": true,
         "data-testid": testId && "".concat(testId, "--icon-after"),
-        className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform_ads_component_no_icon_spacing_support') && styles.beforeAfterElement, !(0, _platformFeatureFlags.fg)('platform_ads_component_no_icon_spacing_support') && styles.beforeAfterElementOld])
+        className: (0, _runtime.ax)([styles.beforeAfterElement])
       }, iconAfter))
     });
   }();

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

@@ -24,9 +24,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/button-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-var ButtonItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
-// Type needed on props to extract types with extract react types.
-function (props, ref) {
+var ButtonItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
     description = props.description,
     iconAfter = props.iconAfter,

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

@@ -31,9 +31,7 @@ var preventEvent = function preventEvent(e) {
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/link-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-var LinkItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
-// Type needed on props to extract types with extract react types.
-function (props, ref) {
+var LinkItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
     href = props.href,
     description = props.description,

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

@@ -13,7 +13,7 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _menuContext = require("../internal/components/menu-context");
-var _excluded = ["isLoading", "maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "role", "spacing", "className"];
+var _excluded = ["isLoading", "maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "role", "spacing", "menuLabel", "className"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var baseStyles = null;
 
@@ -35,6 +35,7 @@ var MenuGroup = function MenuGroup(_ref) {
     role = _ref.role,
     _ref$spacing = _ref.spacing,
     spacing = _ref$spacing === void 0 ? 'cozy' : _ref$spacing,
+    menuLabel = _ref.menuLabel,
     UNSAFE_className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/React.createElement(_menuContext.SpacingContext.Provider, {
@@ -53,7 +54,8 @@ var MenuGroup = function MenuGroup(_ref) {
     role: role
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: (0, _runtime.ax)(["_1reo1wug _18m91wug _1e0c1txw _kqswpfqs _2lx21bp4", UNSAFE_className])
+    className: (0, _runtime.ax)(["_1reo1wug _18m91wug _1e0c1txw _kqswpfqs _2lx21bp4", UNSAFE_className]),
+    "aria-label": menuLabel
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, rest))));
 };

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

@@ -12,7 +12,6 @@ const renderTitle = (Component, props) =>
 React.createElement(Component, props);
 const styles = {
   root: "_19itidpf _12ji1r31 _1qu2glyw _12y3idpf _4bfu1r31 _1hmsglyw _ajmmnqa1 _kqswh2mm _1e0c1txw _vchhusvi _1bsb1osq _1tke1ylp _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _4cvr1h6o _uiztglyw _80omtlke _ymio1r31 _ypr0glyw _zcxs1o36 _nt75194a _mizu194a _1bg411pw _1ah311pw _49pcnqa1 _ra3xnqa1 _1hvw1bk5 _128m1bk5 _9oik1r31 _1bnxglyw _jf4cnqa1 _1cvmnqa1 _4davt94y",
-  beforeAfterElementOld: "_1e0c1txw _4cvr1h6o _1bah1h6o _1o9zidpf",
   beforeAfterElement: "_1e0c1txw _1ul91tcg _1tke1tcg _4cvr1h6o _1bah1h6o _1o9zidpf",
   content: "_12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bah1h6o _16jlkb7n _y3gn1e5h",
   truncate: "_1reo15vq _18m915vq _1e0c1ule _1bto1l2s _o5721q9c",
@@ -80,7 +79,7 @@ const MenuItemPrimitive = ({
       }, iconBefore && /*#__PURE__*/React.createElement("span", {
         "data-item-elem-before": true,
         "data-testid": testId && `${testId}--icon-before`,
-        className: ax([fg('platform_ads_component_no_icon_spacing_support') && styles.beforeAfterElement, !fg('platform_ads_component_no_icon_spacing_support') && styles.beforeAfterElementOld])
+        className: ax([styles.beforeAfterElement])
       }, iconBefore), title && /*#__PURE__*/React.createElement("div", {
         className: ax([styles.content])
       }, renderTitle(isTitleHeading ? 'h2' : 'span', {
@@ -93,7 +92,7 @@ const MenuItemPrimitive = ({
       }, description)), iconAfter && /*#__PURE__*/React.createElement("span", {
         "data-item-elem-after": true,
         "data-testid": testId && `${testId}--icon-after`,
-        className: ax([fg('platform_ads_component_no_icon_spacing_support') && styles.beforeAfterElement, !fg('platform_ads_component_no_icon_spacing_support') && styles.beforeAfterElementOld])
+        className: ax([styles.beforeAfterElement])
       }, iconAfter))
     });
   })();

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

@@ -13,9 +13,7 @@ import MenuItemPrimitive from '../internal/components/menu-item-primitive';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/button-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-const ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
-// Type needed on props to extract types with extract react types.
-(props, ref) => {
+const ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, ref) => {
   const {
     children,
     description,

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

@@ -20,9 +20,7 @@ const preventEvent = e => {
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/link-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-const LinkItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
-// Type needed on props to extract types with extract react types.
-(props, ref) => {
+const LinkItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, ref) => {
   const {
     children,
     href,

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

@@ -23,6 +23,7 @@ const MenuGroup = ({
   testId,
   role,
   spacing = 'cozy',
+  menuLabel,
   // Although this isn't defined on props it is available because we've used
   // Spread props below and on the jsx element. To forcibly block usage I've
   // picked it out and supressed the expected type error.
@@ -45,7 +46,8 @@ const MenuGroup = ({
   role: role
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   ,
-  className: ax(["_1reo1wug _18m91wug _1e0c1txw _kqswpfqs _2lx21bp4", UNSAFE_className])
+  className: ax(["_1reo1wug _18m91wug _1e0c1txw _kqswpfqs _2lx21bp4", UNSAFE_className]),
+  "aria-label": menuLabel
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 }, rest))));
 export default MenuGroup;

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

@@ -15,7 +15,6 @@ var renderTitle = function renderTitle(Component, props) {
 };
 var styles = {
   root: "_19itidpf _12ji1r31 _1qu2glyw _12y3idpf _4bfu1r31 _1hmsglyw _ajmmnqa1 _kqswh2mm _1e0c1txw _vchhusvi _1bsb1osq _1tke1ylp _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _4cvr1h6o _uiztglyw _80omtlke _ymio1r31 _ypr0glyw _zcxs1o36 _nt75194a _mizu194a _1bg411pw _1ah311pw _49pcnqa1 _ra3xnqa1 _1hvw1bk5 _128m1bk5 _9oik1r31 _1bnxglyw _jf4cnqa1 _1cvmnqa1 _4davt94y",
-  beforeAfterElementOld: "_1e0c1txw _4cvr1h6o _1bah1h6o _1o9zidpf",
   beforeAfterElement: "_1e0c1txw _1ul91tcg _1tke1tcg _4cvr1h6o _1bah1h6o _1o9zidpf",
   content: "_12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bah1h6o _16jlkb7n _y3gn1e5h",
   truncate: "_1reo15vq _18m915vq _1e0c1ule _1bto1l2s _o5721q9c",
@@ -87,7 +86,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
       }, iconBefore && /*#__PURE__*/React.createElement("span", {
         "data-item-elem-before": true,
         "data-testid": testId && "".concat(testId, "--icon-before"),
-        className: ax([fg('platform_ads_component_no_icon_spacing_support') && styles.beforeAfterElement, !fg('platform_ads_component_no_icon_spacing_support') && styles.beforeAfterElementOld])
+        className: ax([styles.beforeAfterElement])
       }, iconBefore), title && /*#__PURE__*/React.createElement("div", {
         className: ax([styles.content])
       }, renderTitle(isTitleHeading ? 'h2' : 'span', {
@@ -100,7 +99,7 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
       }, description)), iconAfter && /*#__PURE__*/React.createElement("span", {
         "data-item-elem-after": true,
         "data-testid": testId && "".concat(testId, "--icon-after"),
-        className: ax([fg('platform_ads_component_no_icon_spacing_support') && styles.beforeAfterElement, !fg('platform_ads_component_no_icon_spacing_support') && styles.beforeAfterElementOld])
+        className: ax([styles.beforeAfterElement])
       }, iconAfter))
     });
   }();

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

@@ -15,9 +15,7 @@ import MenuItemPrimitive from '../internal/components/menu-item-primitive';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/button-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-var ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
-// Type needed on props to extract types with extract react types.
-function (props, ref) {
+var ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
     description = props.description,
     iconAfter = props.iconAfter,

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

@@ -22,9 +22,7 @@ var preventEvent = function preventEvent(e) {
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/link-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-var LinkItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
-// Type needed on props to extract types with extract react types.
-function (props, ref) {
+var LinkItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
     href = props.href,
     description = props.description,

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

@@ -1,7 +1,7 @@
 /* menu-group.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["isLoading", "maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "role", "spacing", "className"];
+var _excluded = ["isLoading", "maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "role", "spacing", "menuLabel", "className"];
 import "./menu-group.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -26,6 +26,7 @@ var MenuGroup = function MenuGroup(_ref) {
     role = _ref.role,
     _ref$spacing = _ref.spacing,
     spacing = _ref$spacing === void 0 ? 'cozy' : _ref$spacing,
+    menuLabel = _ref.menuLabel,
     UNSAFE_className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(SpacingContext.Provider, {
@@ -44,7 +45,8 @@ var MenuGroup = function MenuGroup(_ref) {
     role: role
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: ax(["_1reo1wug _18m91wug _1e0c1txw _kqswpfqs _2lx21bp4", UNSAFE_className])
+    className: ax(["_1reo1wug _18m91wug _1e0c1txw _kqswpfqs _2lx21bp4", UNSAFE_className]),
+    "aria-label": menuLabel
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, rest))));
 };

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

@@ -8,5 +8,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: ({ isLoading, maxWidth, minWidth, minHeight, maxHeight, testId, role, spacing, className: UNSAFE_className, ...rest }: MenuGroupProps) => JSX.Element;
+declare const MenuGroup: ({ isLoading, maxWidth, minWidth, minHeight, maxHeight, testId, role, spacing, menuLabel, className: UNSAFE_className, ...rest }: MenuGroupProps) => JSX.Element;
 export default MenuGroup;

package/dist/types/types.d.ts

@@ -54,6 +54,10 @@ export interface MenuGroupProps extends MenuGroupSizing {
      * Useful when needing to stop propagation of child events.
      */
     onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * Provide an accessible label via `aria-label` for the menu element for assistive technology.
+     */
+    menuLabel?: string;
 }
 export interface SectionProps {
     /**

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

@@ -8,5 +8,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: ({ isLoading, maxWidth, minWidth, minHeight, maxHeight, testId, role, spacing, className: UNSAFE_className, ...rest }: MenuGroupProps) => JSX.Element;
+declare const MenuGroup: ({ isLoading, maxWidth, minWidth, minHeight, maxHeight, testId, role, spacing, menuLabel, className: UNSAFE_className, ...rest }: MenuGroupProps) => JSX.Element;
 export default MenuGroup;

package/dist/types-ts4.5/types.d.ts

@@ -54,6 +54,10 @@ export interface MenuGroupProps extends MenuGroupSizing {
      * Useful when needing to stop propagation of child events.
      */
     onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * Provide an accessible label via `aria-label` for the menu element for assistive technology.
+     */
+    menuLabel?: string;
 }
 export interface SectionProps {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "8.0.8",
+	"version": "8.1.0",
 	"description": "A list of options to help users navigate, or perform actions.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -40,13 +40,13 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/app-provider": "^2.2.0",
+		"@atlaskit/app-provider": "^2.3.0",
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/interaction-context": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.10.0",
 		"@atlaskit/theme": "^19.0.0",
-		"@atlaskit/tokens": "^5.5.0",
+		"@atlaskit/tokens": "^5.6.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3"
 	},
@@ -58,14 +58,14 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/button": "^23.2.0",
+		"@atlaskit/button": "^23.3.0",
 		"@atlaskit/docs": "^11.0.0",
-		"@atlaskit/ds-lib": "^4.0.0",
-		"@atlaskit/icon": "^27.3.0",
+		"@atlaskit/ds-lib": "^5.0.0",
+		"@atlaskit/icon": "^27.7.0",
 		"@atlaskit/icon-file-type": "^7.0.0",
 		"@atlaskit/icon-object": "^7.1.0",
 		"@atlaskit/link": "^3.2.0",
-		"@atlaskit/section-message": "^8.2.0",
+		"@atlaskit/section-message": "^8.5.0",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@testing-library/react": "^13.4.0",
 		"ast-types": "^0.13.3",
@@ -118,9 +118,6 @@
 		".": "./src/index.tsx"
 	},
 	"platform-feature-flags": {
-		"platform_ads_component_no_icon_spacing_support": {
-			"type": "boolean"
-		},
 		"platform_fix_a11y_selected_and_hovered_state_color": {
 			"type": "boolean"
 		}