MenuItemGroup example

Author: Lukas742

packages/main/src/webComponents/Menu/Menu.mdx

@@ -2,6 +2,7 @@ import { ArgTypesWithNote, ControlsWithNote, DocsHeader, Footer } from '@sb/comp
 import { Canvas, Description, Markdown, Meta } from '@storybook/blocks';
 import * as ComponentStories from './Menu.stories';
 import { MenuItem } from '../MenuItem';
+import { MenuItemGroup } from '../MenuItemGroup';
 import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw';
 import { excludePropsForAbstract } from '@sb/utils';
 
@@ -60,4 +61,9 @@ const MyComponentWithMenu = () => {
 <Description of={MenuItem} />
 <ArgTypesWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={MenuItem} />
 
+## MenuItemGroup
+
+<Description of={MenuItemGroup} />
+<ArgTypesWithNote hideHTMLPropsNote exclude={excludePropsForAbstract} of={MenuItemGroup} />
+
 <Footer />

packages/main/src/webComponents/Menu/Menu.stories.tsx

@@ -1,8 +1,17 @@
 import { isChromatic } from '@sb/utils.js';
 import type { Meta, StoryObj } from '@storybook/react';
+import addDocumentIcon from '@ui5/webcomponents-icons/dist/add-document.js';
+import boldTextIcon from '@ui5/webcomponents-icons/dist/bold-text.js';
+import italicTextIcon from '@ui5/webcomponents-icons/dist/italic-text.js';
+import lockedIcon from '@ui5/webcomponents-icons/dist/locked.js';
+import textAlignCenterIcon from '@ui5/webcomponents-icons/dist/text-align-center.js';
+import textAlignLeftIcon from '@ui5/webcomponents-icons/dist/text-align-left.js';
+import textAlignRightIcon from '@ui5/webcomponents-icons/dist/text-align-right.js';
+import underlineTextIcon from '@ui5/webcomponents-icons/dist/underline-text.js';
 import { useEffect, useRef, useState } from 'react';
 import { Button } from '../Button/index.js';
 import { MenuItem } from '../MenuItem/index.js';
+import { MenuItemGroup } from '../MenuItemGroup/index.js';
 import { MenuSeparator } from '../MenuSeparator/index.js';
 import { Menu } from './index.js';
 
@@ -113,3 +122,55 @@ export const WithSubMenu: Story = {
     );
   },
 };
+
+export const WithMenuItemGroup: Story = {
+  name: 'with MenuItemGroup',
+  render(args) {
+    const [open, setOpen] = useState(args.open);
+    const btnRef = useRef(null);
+
+    useEffect(() => {
+      setOpen(args.open);
+    }, [args.open]);
+    return (
+      <>
+        <Button
+          ref={btnRef}
+          onClick={() => {
+            setOpen((prev) => !prev);
+          }}
+        >
+          Show Menu
+        </Button>
+        <Menu
+          {...args}
+          open={open}
+          opener={btnRef.current}
+          onClose={(e) => {
+            args.onClose(e);
+            setOpen(false);
+          }}
+        >
+          <MenuItem text="New Paragraph" icon={addDocumentIcon} />
+          <MenuItem text="New Text" />
+          <MenuSeparator />
+          <MenuItemGroup checkMode="Single">
+            <MenuItem text="Left Alignment" icon={textAlignLeftIcon} checked />
+            <MenuItem text="Center Alignment" icon={textAlignCenterIcon} checked />
+            <MenuItem text="Right Alignment" icon={textAlignRightIcon} checked />
+          </MenuItemGroup>
+          <MenuSeparator />
+          <MenuItemGroup checkMode="Multiple">
+            <MenuItem text="Bold" icon={boldTextIcon} checked>
+              <Button id="newLock2" slot="endContent" icon={lockedIcon} design="Transparent" />
+            </MenuItem>
+            <MenuItem text="Italic" icon={italicTextIcon} additionalText="Cursive Text" checked />
+            <MenuItem text="Underline" icon={underlineTextIcon} checked />
+          </MenuItemGroup>
+          <MenuSeparator />
+          <MenuItem text="Exit" />
+        </Menu>
+      </>
+    );
+  },
+};