[Menu] Group and Separator components (#535)

Co-authored-by: atomiks <[email protected]>
mui · Sep 27, 2024 · af5339d · af5339d
1 parent f4bed5a
commit af5339d
Show file tree

Hide file tree

Showing 46 changed files with 796 additions and 89 deletions.
diff --git a/docs/data/api/menu-group-label.json b/docs/data/api/menu-group-label.json
@@ -0,0 +1,19 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "MenuGroupLabel",
+  "imports": [
+    "import * as Menu from '@base_ui/react/Menu';\nconst MenuGroupLabel = Menu.GroupLabel;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "MenuGroupLabel",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/Menu/GroupLabel/MenuGroupLabel.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-menu/\">Menu</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/data/api/menu-group.json b/docs/data/api/menu-group.json
@@ -0,0 +1,18 @@
+{
+  "props": {
+    "children": { "type": { "name": "node" } },
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "MenuGroup",
+  "imports": ["import * as Menu from '@base_ui/react/Menu';\nconst MenuGroup = Menu.Group;"],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "MenuGroup",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/Menu/Group/MenuGroup.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-menu/\">Menu</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/data/api/menu-separator.json b/docs/data/api/menu-separator.json
@@ -0,0 +1,20 @@
+{
+  "props": {
+    "children": { "type": { "name": "node" } },
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "MenuSeparator",
+  "imports": [
+    "import * as Menu from '@base_ui/react/Menu';\nconst MenuSeparator = Menu.Separator;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "MenuSeparator",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/Menu/Separator/MenuSeparator.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-menu/\">Menu</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/data/api/separator-root.json b/docs/data/api/separator-root.json
@@ -0,0 +1,19 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "SeparatorRoot",
+  "imports": [
+    "import * as Separator from '@base_ui/react/Separator';\nconst SeparatorRoot = Separator.Root;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "SeparatorRoot",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/Separator/Root/SeparatorRoot.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-separator/\">Separator</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/data/components/menu/MenuIntroduction/css-modules/Menu.js b/docs/data/components/menu/MenuIntroduction/css-modules/Menu.js
@@ -4,9 +4,9 @@ import PropTypes from 'prop-types';
 import * as BaseMenu from '@base_ui/react/Menu';
 import classes from './Menu.module.css';
 
-export const Menu = function Menu(props) {
-  return <BaseMenu.Root {...props} />;
-};
+export const Menu = BaseMenu.Root;
+
+export const MenuGroup = BaseMenu.Group;
 
 const MenuItems = React.forwardRef(function MenuItems(props, ref) {
   return (
@@ -29,3 +29,11 @@ export const MenuItem = React.forwardRef(function MenuItem(props, ref) {
 export const MenuTrigger = React.forwardRef(function MenuTrigger(props, ref) {
   return <BaseMenu.Trigger {...props} ref={ref} className={classes.trigger} />;
 });
+
+export const MenuSeparator = React.forwardRef(function MenuSeparator(props, ref) {
+  return <BaseMenu.Separator {...props} ref={ref} className={classes.separator} />;
+});
+
+export const MenuGroupLabel = React.forwardRef(function MenuGroupLabel(props, ref) {
+  return <BaseMenu.GroupLabel {...props} ref={ref} className={classes.groupLabel} />;
+});
diff --git a/docs/data/components/menu/MenuIntroduction/css-modules/Menu.module.css b/docs/data/components/menu/MenuIntroduction/css-modules/Menu.module.css
@@ -22,7 +22,7 @@
   outline: 0;
   background: #fff;
   border: 1px solid var(--gray-200);
-  color: var(--gray-300);
+  color: var(--gray-900);
   box-shadow: 0px 4px 30px var(--gray-200);
   transform-origin: var(--transform-origin);
 
@@ -126,3 +126,25 @@
     }
   }
 }
+
+.separator {
+  border-top: 1px solid var(--gray-200);
+  margin: 8px 0;
+
+  :global(.dark) & {
+    border-color: var(--gray-700);
+  }
+}
+
+.groupLabel {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--gray-700);
+  padding: 8px;
+  user-select: none;
+
+  :global(.dark) & {
+    color: var(--gray-200);
+  }
+}
diff --git a/docs/data/components/menu/MenuIntroduction/css-modules/Menu.tsx b/docs/data/components/menu/MenuIntroduction/css-modules/Menu.tsx
@@ -3,9 +3,9 @@ import * as React from 'react';
 import * as BaseMenu from '@base_ui/react/Menu';
 import classes from './Menu.module.css';
 
-export const Menu = function Menu(props: BaseMenu.Root.Props) {
-  return <BaseMenu.Root {...props} />;
-};
+export const Menu = BaseMenu.Root;
+
+export const MenuGroup = BaseMenu.Group;
 
 export const MenuItems = React.forwardRef(function MenuItems(
   props: React.PropsWithChildren<{}>,
@@ -31,3 +31,17 @@ export const MenuTrigger = React.forwardRef(function MenuTrigger(
 ) {
   return <BaseMenu.Trigger {...props} ref={ref} className={classes.trigger} />;
 });
+
+export const MenuSeparator = React.forwardRef(function MenuSeparator(
+  props: BaseMenu.Separator.Props,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  return <BaseMenu.Separator {...props} ref={ref} className={classes.separator} />;
+});
+
+export const MenuGroupLabel = React.forwardRef(function MenuGroupLabel(
+  props: BaseMenu.GroupLabel.Props,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  return <BaseMenu.GroupLabel {...props} ref={ref} className={classes.groupLabel} />;
+});
diff --git a/docs/data/components/menu/MenuIntroduction/css-modules/index.js b/docs/data/components/menu/MenuIntroduction/css-modules/index.js
@@ -1,6 +1,14 @@
 'use client';
 import * as React from 'react';
-import { Menu, MenuItems, MenuItem, MenuTrigger } from './Menu';
+import {
+  Menu,
+  MenuItems,
+  MenuItem,
+  MenuTrigger,
+  MenuSeparator,
+  MenuGroup,
+  MenuGroupLabel,
+} from './Menu';
 
 export default function MenuIntroduction() {
   const createHandleMenuClick = (menuItem) => {
@@ -14,10 +22,14 @@ export default function MenuIntroduction() {
       <MenuTrigger>My account</MenuTrigger>
 
       <MenuItems>
-        <MenuItem onClick={createHandleMenuClick('Profile')}>Profile</MenuItem>
-        <MenuItem onClick={createHandleMenuClick('Language settings')}>
-          Language settings
-        </MenuItem>
+        <MenuGroup>
+          <MenuGroupLabel>Settings</MenuGroupLabel>
+          <MenuItem onClick={createHandleMenuClick('Profile')}>Profile</MenuItem>
+          <MenuItem onClick={createHandleMenuClick('Language settings')}>
+            Language settings
+          </MenuItem>
+        </MenuGroup>
+        <MenuSeparator />
         <MenuItem onClick={createHandleMenuClick('Log out')}>Log out</MenuItem>
       </MenuItems>
     </Menu>

diff --git a/docs/data/components/menu/MenuIntroduction/css-modules/index.tsx b/docs/data/components/menu/MenuIntroduction/css-modules/index.tsx
@@ -1,6 +1,14 @@
 'use client';
 import * as React from 'react';
-import { Menu, MenuItems, MenuItem, MenuTrigger } from './Menu';
+import {
+  Menu,
+  MenuItems,
+  MenuItem,
+  MenuTrigger,
+  MenuSeparator,
+  MenuGroup,
+  MenuGroupLabel,
+} from './Menu';
 
 export default function MenuIntroduction() {
   const createHandleMenuClick = (menuItem: string) => {
@@ -14,10 +22,14 @@ export default function MenuIntroduction() {
       <MenuTrigger>My account</MenuTrigger>
 
       <MenuItems>
-        <MenuItem onClick={createHandleMenuClick('Profile')}>Profile</MenuItem>
-        <MenuItem onClick={createHandleMenuClick('Language settings')}>
-          Language settings
-        </MenuItem>
+        <MenuGroup>
+          <MenuGroupLabel>Settings</MenuGroupLabel>
+          <MenuItem onClick={createHandleMenuClick('Profile')}>Profile</MenuItem>
+          <MenuItem onClick={createHandleMenuClick('Language settings')}>
+            Language settings
+          </MenuItem>
+        </MenuGroup>
+        <MenuSeparator />
         <MenuItem onClick={createHandleMenuClick('Log out')}>Log out</MenuItem>
       </MenuItems>
     </Menu>

diff --git a/docs/data/components/menu/MenuIntroduction/css-modules/index.tsx.preview b/docs/data/components/menu/MenuIntroduction/css-modules/index.tsx.preview
@@ -2,10 +2,14 @@
   <MenuTrigger>My account</MenuTrigger>
 
   <MenuItems>
-    <MenuItem onClick={createHandleMenuClick('Profile')}>Profile</MenuItem>
-    <MenuItem onClick={createHandleMenuClick('Language settings')}>
-      Language settings
-    </MenuItem>
+    <MenuGroup>
+      <MenuGroupLabel>Settings</MenuGroupLabel>
+      <MenuItem onClick={createHandleMenuClick('Profile')}>Profile</MenuItem>
+      <MenuItem onClick={createHandleMenuClick('Language settings')}>
+        Language settings
+      </MenuItem>
+    </MenuGroup>
+    <MenuSeparator />
     <MenuItem onClick={createHandleMenuClick('Log out')}>Log out</MenuItem>
   </MenuItems>
 </Menu>
diff --git a/docs/data/components/menu/MenuIntroduction/system/index.js b/docs/data/components/menu/MenuIntroduction/system/index.js
@@ -15,10 +15,14 @@ export default function MenuIntroduction() {
       <MenuButton>My account</MenuButton>
       <MenuPositioner alignment="start" sideOffset={8}>
         <MenuPopup>
-          <MenuItem onClick={createHandleMenuClick('Profile')}>Profile</MenuItem>
-          <MenuItem onClick={createHandleMenuClick('Language settings')}>
-            Language settings
-          </MenuItem>
+          <Menu.Group>
+            <MenuGroupLabel>Settings</MenuGroupLabel>
+            <MenuItem onClick={createHandleMenuClick('Profile')}>Profile</MenuItem>
+            <MenuItem onClick={createHandleMenuClick('Language settings')}>
+              Language settings
+            </MenuItem>
+          </Menu.Group>
+          <MenuSeparator />
           <MenuItem onClick={createHandleMenuClick('Log out')}>Log out</MenuItem>
           <MenuArrow />
         </MenuPopup>
@@ -184,3 +188,21 @@ export const MenuArrow = styled(Menu.Arrow)(
   }
 `,
 );
+
+const MenuSeparator = styled(Menu.Separator)(
+  ({ theme }) => `
+  border-top: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  margin: 8px 0;
+`,
+);
+
+const MenuGroupLabel = styled(Menu.GroupLabel)(
+  ({ theme }) => `
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
+  padding: 8px;
+  user-select: none;
+`,
+);
diff --git a/docs/data/components/menu/MenuIntroduction/system/index.tsx b/docs/data/components/menu/MenuIntroduction/system/index.tsx
@@ -15,10 +15,14 @@ export default function MenuIntroduction() {
       <MenuButton>My account</MenuButton>
       <MenuPositioner alignment="start" sideOffset={8}>
         <MenuPopup>
-          <MenuItem onClick={createHandleMenuClick('Profile')}>Profile</MenuItem>
-          <MenuItem onClick={createHandleMenuClick('Language settings')}>
-            Language settings
-          </MenuItem>
+          <Menu.Group>
+            <MenuGroupLabel>Settings</MenuGroupLabel>
+            <MenuItem onClick={createHandleMenuClick('Profile')}>Profile</MenuItem>
+            <MenuItem onClick={createHandleMenuClick('Language settings')}>
+              Language settings
+            </MenuItem>
+          </Menu.Group>
+          <MenuSeparator />
           <MenuItem onClick={createHandleMenuClick('Log out')}>Log out</MenuItem>
           <MenuArrow />
         </MenuPopup>
@@ -184,3 +188,21 @@ export const MenuArrow = styled(Menu.Arrow)(
   }
 `,
 );
+
+const MenuSeparator = styled(Menu.Separator)(
+  ({ theme }) => `
+  border-top: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+  margin: 8px 0;
+`,
+);
+
+const MenuGroupLabel = styled(Menu.GroupLabel)(
+  ({ theme }) => `
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: ${theme.palette.mode === 'dark' ? grey[200] : grey[700]};
+  padding: 8px;
+  user-select: none;
+`,
+);
diff --git a/docs/data/components/menu/MenuIntroduction/system/index.tsx.preview b/docs/data/components/menu/MenuIntroduction/system/index.tsx.preview