From b1c13dad7a09fedb7b3363c4006a225eb52dbfc6 Mon Sep 17 00:00:00 2001
From: Karel Hala <khala@redhat.com>
Date: Thu, 13 Oct 2022 13:41:27 +0200
Subject: [PATCH] fix(MenuGroup): Add option to use React component and Node in
 groupMenu

---
 .../src/components/Menu/MenuGroup.tsx         | 31 ++++++++++++-------
 .../Select/__tests__/Select.test.tsx          |  2 +-
 .../cypress/integration/menu.spec.ts          |  2 ++
 .../components/demos/MenuDemo/MenuDemo.tsx    | 23 ++++++++++++++
 4 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/packages/react-core/src/components/Menu/MenuGroup.tsx b/packages/react-core/src/components/Menu/MenuGroup.tsx
index d7fc072b332..bc2e244f6e9 100644
--- a/packages/react-core/src/components/Menu/MenuGroup.tsx
+++ b/packages/react-core/src/components/Menu/MenuGroup.tsx
@@ -2,13 +2,13 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
 import { css } from '@patternfly/react-styles';
 
-export interface MenuGroupProps extends React.HTMLProps<HTMLElement> {
+export interface MenuGroupProps extends Omit<React.HTMLProps<HTMLElement>, 'label'> {
   /** Items within group */
   children?: React.ReactNode;
   /** Additional classes added to the MenuGroup */
   className?: string;
   /** Group label */
-  label?: string;
+  label?: React.ReactNode | React.FC;
   /** ID for title label */
   titleId?: string;
   /** Forwarded ref */
@@ -25,16 +25,23 @@ const MenuGroupBase: React.FunctionComponent<MenuGroupProps> = ({
   innerRef,
   labelHeadingLevel: HeadingLevel = 'h1',
   ...props
-}: MenuGroupProps) => (
-  <section {...props} className={css('pf-c-menu__group', className)} ref={innerRef}>
-    {label && (
-      <HeadingLevel className={css(styles.menuGroupTitle)} id={titleId}>
-        {label}
-      </HeadingLevel>
-    )}
-    {children}
-  </section>
-);
+}: MenuGroupProps) => {
+  const Wrapper = typeof label === 'function' ? label : HeadingLevel;
+  return (
+    <section {...props} className={css('pf-c-menu__group', className)} ref={innerRef}>
+      <>
+        {['function', 'string'].includes(typeof label) ? (
+          <Wrapper className={css(styles.menuGroupTitle)} id={titleId}>
+            {label as React.ReactNode}
+          </Wrapper>
+        ) : (
+          label
+        )}
+        {children}
+      </>
+    </section>
+  );
+};
 
 export const MenuGroup = React.forwardRef((props: MenuGroupProps, ref: React.Ref<HTMLElement>) => (
   <MenuGroupBase {...props} innerRef={ref} />
diff --git a/packages/react-core/src/components/Select/__tests__/Select.test.tsx b/packages/react-core/src/components/Select/__tests__/Select.test.tsx
index 1309ee434fa..31cb1db960c 100644
--- a/packages/react-core/src/components/Select/__tests__/Select.test.tsx
+++ b/packages/react-core/src/components/Select/__tests__/Select.test.tsx
@@ -591,4 +591,4 @@ test('prepends create option to list of options if isCreateOptionOnTop flag is s
 
   const createOption = screen.getAllByRole('option')[0];
   expect(createOption).toHaveTextContent('Create "m"');
-});
\ No newline at end of file
+});
diff --git a/packages/react-integration/cypress/integration/menu.spec.ts b/packages/react-integration/cypress/integration/menu.spec.ts
index cfdf2976712..b90037c27fd 100644
--- a/packages/react-integration/cypress/integration/menu.spec.ts
+++ b/packages/react-integration/cypress/integration/menu.spec.ts
@@ -62,6 +62,8 @@ describe('Menu Test', () => {
   it('Verify Menu with Titled Groups', () => {
     cy.get('#group-1.pf-c-menu__group > h1').should('contain', 'Group 1');
     cy.get('#group-2.pf-c-menu__group > h1').should('contain', 'Group 2');
+    cy.get('#group-3.pf-c-menu__group > div > h1').should('contain', 'Group 3');
+    cy.get('#group-4.pf-c-menu__group > div > h1.my-awesome-style').should('contain', 'Group 4');
   });
 
   it('Verify Menu with Description', () => {
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/MenuDemo/MenuDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/MenuDemo/MenuDemo.tsx
index cecf01aacd4..682f71ed101 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/MenuDemo/MenuDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/MenuDemo/MenuDemo.tsx
@@ -322,6 +322,12 @@ export class MenuDemo extends Component {
   renderMenuWithTitledGroups() {
     const { activeItem } = this.state;
 
+    const GroupMenuExampleCmp: React.FC<{ className: string }> = ({ className }) => (
+      <div>
+        <h1 className={`${className} my-awesome-style`}>Group 4</h1>
+      </div>
+    );
+
     return (
       <StackItem>
         <Title headingLevel="h2" size="2xl">
@@ -355,6 +361,23 @@ export class MenuDemo extends Component {
               </MenuItem>
             </MenuList>
           </MenuGroup>
+          <MenuGroup
+            id="group-3"
+            label={
+              <div>
+                <h1 className="pf-c-menu__group-title">Group 3</h1>
+              </div>
+            }
+          >
+            <MenuItem to="#" itemId={1}>
+              Link 1
+            </MenuItem>
+          </MenuGroup>
+          <MenuGroup id="group-4" label={GroupMenuExampleCmp}>
+            <MenuItem to="#" itemId={1}>
+              Link 1
+            </MenuItem>
+          </MenuGroup>
         </Menu>
       </StackItem>
     );