From 338d440c1557c5cc974aabb05f0a685de8c70fde Mon Sep 17 00:00:00 2001
From: Andrew Musgrave <andrew.musgrave@shopify.com>
Date: Mon, 9 Dec 2019 17:03:17 -0500
Subject: [PATCH 1/2] Converted MenuGroup to a functional component

---
 .../components/MenuGroup/MenuGroup.tsx        | 82 +++++++++----------
 1 file changed, 39 insertions(+), 43 deletions(-)

diff --git a/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx b/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx
index 698bb7a01fa..d984a2ceb9e 100644
--- a/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx
+++ b/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useCallback} from 'react';
 
 import {MenuGroupDescriptor} from '../../../../types';
 
@@ -19,51 +19,47 @@ export interface MenuGroupProps extends MenuGroupDescriptor {
   onClose(title: string): void;
 }
 
-export class MenuGroup extends React.Component<MenuGroupProps, never> {
-  render() {
-    const {
-      accessibilityLabel,
-      active,
-      actions,
-      details,
-      title,
-      icon,
-    } = this.props;
-
-    if (!actions.length) {
-      return null;
-    }
+export function MenuGroup({
+  accessibilityLabel,
+  active,
+  actions,
+  details,
+  title,
+  icon,
+  onClose,
+  onOpen,
+}: MenuGroupProps) {
+  const handleClose = useCallback(() => {
+    onClose(title);
+  }, [onClose, title]);
 
-    const popoverActivator = (
-      <MenuAction
-        disclosure
-        content={title}
-        icon={icon}
-        accessibilityLabel={accessibilityLabel}
-        onAction={this.handleOpen}
-      />
-    );
+  const handleOpen = useCallback(() => {
+    onOpen(title);
+  }, [onOpen, title]);
 
-    return (
-      <Popover
-        active={Boolean(active)}
-        activator={popoverActivator}
-        preferredAlignment="left"
-        onClose={this.handleClose}
-      >
-        <ActionList items={actions} onActionAnyItem={this.handleClose} />
-        {details && <div className={styles.Details}>{details}</div>}
-      </Popover>
-    );
+  if (!actions.length) {
+    return null;
   }
 
-  private handleClose = () => {
-    const {title, onClose} = this.props;
-    onClose(title);
-  };
+  const popoverActivator = (
+    <MenuAction
+      disclosure
+      content={title}
+      icon={icon}
+      accessibilityLabel={accessibilityLabel}
+      onAction={handleOpen}
+    />
+  );
 
-  private handleOpen = () => {
-    const {title, onOpen} = this.props;
-    onOpen(title);
-  };
+  return (
+    <Popover
+      active={Boolean(active)}
+      activator={popoverActivator}
+      preferredAlignment="left"
+      onClose={handleClose}
+    >
+      <ActionList items={actions} onActionAnyItem={handleClose} />
+      {details && <div className={styles.Details}>{details}</div>}
+    </Popover>
+  );
 }

From ad3e0a9b6e10c747d72882bae741cfcf85b3eb86 Mon Sep 17 00:00:00 2001
From: Andrew Musgrave <andrew.musgrave@shopify.com>
Date: Mon, 16 Dec 2019 13:39:29 -0500
Subject: [PATCH 2/2] changelog

---
 UNRELEASED.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index f50d13b618d..ea67462cd23 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -14,4 +14,6 @@
 
 ### Code quality
 
+- Converted `MenuGroup` into a functional component ([#2536](https://github.com/Shopify/polaris-react/pull/2536))
+
 ### Deprecations