Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Menu] Group and Separator components #535

Merged
merged 16 commits into from
Sep 27, 2024
Merged

[Menu] Group and Separator components #535

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
3e2de49
[Menu] Group and Separator components
michaldudak Jul 23, 2024
633b73d
Merge remote-tracking branch 'upstream/master' into menu-subcomponents
michaldudak Sep 6, 2024
a297cee
Demos
michaldudak Sep 6, 2024
ba63d45
Restart CI
michaldudak Sep 9, 2024
29660a4
Separator component
michaldudak Sep 16, 2024
450e915
Fix issues
michaldudak Sep 16, 2024
680db72
Update packages/mui-base/src/Menu/Group/MenuGroup.tsx
michaldudak Sep 18, 2024
4d26e9d
Feeback
michaldudak Sep 18, 2024
e21346e
MenuGroupLabel
michaldudak Sep 19, 2024
98c6531
Merge remote-tracking branch 'upstream/master' into menu-subcomponents
michaldudak Sep 19, 2024
b340200
Add missing index.barrel
michaldudak Sep 19, 2024
12c57bc
API docs
michaldudak Sep 19, 2024
b3e74cd
Docs
michaldudak Sep 19, 2024
20d7cf5
Fix tests
michaldudak Sep 19, 2024
dcabfe2
GroupLabel in demos
michaldudak Sep 19, 2024
3a9d75d
Add GroupLabel to Anatomy section
michaldudak Sep 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions docs/data/api/menu-group.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
}
20 changes: 20 additions & 0 deletions docs/data/api/menu-separator.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
}
19 changes: 19 additions & 0 deletions docs/data/api/separator-root.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
}
10 changes: 7 additions & 3 deletions docs/data/components/menu/MenuIntroduction/css-modules/Menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,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 (
Expand All @@ -30,3 +30,7 @@ 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} />;
});
11 changes: 10 additions & 1 deletion docs/data/components/menu/MenuIntroduction/css-modules/Menu.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -126,3 +126,12 @@
}
}
}

.separator {
border-top: 1px solid var(--gray-200);
margin: 8px 0;

:global(.dark) & {
border-color: var(--gray-700);
}
}
13 changes: 10 additions & 3 deletions docs/data/components/menu/MenuIntroduction/css-modules/Menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,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<{}>,
Expand All @@ -32,3 +32,10 @@ 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} />;
});
20 changes: 15 additions & 5 deletions docs/data/components/menu/MenuIntroduction/css-modules/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
'use client';

import * as React from 'react';
import { Menu, MenuItems, MenuItem, MenuTrigger } from './Menu';
import {
Menu,
MenuItems,
MenuItem,
MenuTrigger,
MenuSeparator,
MenuGroup,
} from './Menu';

export default function MenuIntroduction() {
const createHandleMenuClick = (menuItem) => {
Expand All @@ -15,10 +22,13 @@ export default function MenuIntroduction() {
<MenuTrigger>My account</MenuTrigger>

<MenuItems>
<MenuItem onClick={createHandleMenuClick('Profile')}>Profile</MenuItem>
<MenuItem onClick={createHandleMenuClick('Language settings')}>
Language settings
</MenuItem>
<MenuGroup>
<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>
Expand Down
20 changes: 15 additions & 5 deletions docs/data/components/menu/MenuIntroduction/css-modules/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
'use client';

import * as React from 'react';
import { Menu, MenuItems, MenuItem, MenuTrigger } from './Menu';
import {
Menu,
MenuItems,
MenuItem,
MenuTrigger,
MenuSeparator,
MenuGroup,
} from './Menu';

export default function MenuIntroduction() {
const createHandleMenuClick = (menuItem: string) => {
Expand All @@ -15,10 +22,13 @@ export default function MenuIntroduction() {
<MenuTrigger>My account</MenuTrigger>

<MenuItems>
<MenuItem onClick={createHandleMenuClick('Profile')}>Profile</MenuItem>
<MenuItem onClick={createHandleMenuClick('Language settings')}>
Language settings
</MenuItem>
<MenuGroup>
<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>
Expand Down
11 changes: 7 additions & 4 deletions docs/data/components/menu/MenuIntroduction/css-modules/index.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,13 @@
<MenuTrigger>My account</MenuTrigger>

<MenuItems>
<MenuItem onClick={createHandleMenuClick('Profile')}>Profile</MenuItem>
<MenuItem onClick={createHandleMenuClick('Language settings')}>
Language settings
</MenuItem>
<MenuGroup>
<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>
18 changes: 14 additions & 4 deletions docs/data/components/menu/MenuIntroduction/system/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,13 @@ 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>
<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>
Expand Down Expand Up @@ -185,3 +188,10 @@ 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;
`,
);
18 changes: 14 additions & 4 deletions docs/data/components/menu/MenuIntroduction/system/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,13 @@ 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>
<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>
Expand Down Expand Up @@ -185,3 +188,10 @@ 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;
`,
);
11 changes: 7 additions & 4 deletions docs/data/components/menu/MenuIntroduction/system/index.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,13 @@
<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>
<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>
Expand Down
21 changes: 17 additions & 4 deletions docs/data/components/menu/MenuIntroduction/tailwind/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,13 @@ export default function MenuIntroduction() {
<MenuButton>My account</MenuButton>
<MenuPositioner>
<MenuPopup>
<MenuItem onClick={createHandleMenuClick('Profile')}>Profile</MenuItem>
<MenuItem onClick={createHandleMenuClick('Language settings')}>
Language settings
</MenuItem>
<Menu.Group>
<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>
</MenuPopup>
</MenuPositioner>
Expand Down Expand Up @@ -75,3 +78,13 @@ const MenuPositioner = React.forwardRef((props, ref) => {
/>
);
});

const MenuSeparator = React.forwardRef((props, ref) => {
return (
<Menu.Separator
ref={ref}
className="border-t border-solid border-slate-200 dark:border-slate-700 my-2"
{...props}
/>
);
});
23 changes: 19 additions & 4 deletions docs/data/components/menu/MenuIntroduction/tailwind/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,13 @@ export default function MenuIntroduction() {
<MenuButton>My account</MenuButton>
<MenuPositioner>
<MenuPopup>
<MenuItem onClick={createHandleMenuClick('Profile')}>Profile</MenuItem>
<MenuItem onClick={createHandleMenuClick('Language settings')}>
Language settings
</MenuItem>
<Menu.Group>
<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>
</MenuPopup>
</MenuPositioner>
Expand Down Expand Up @@ -81,3 +84,15 @@ const MenuPositioner = React.forwardRef<HTMLDivElement, Menu.Positioner.Props>(
);
},
);

const MenuSeparator = React.forwardRef<HTMLDivElement, Menu.Separator.Props>(
(props, ref) => {
return (
<Menu.Separator
ref={ref}
className="border-t border-solid border-slate-200 dark:border-slate-700 my-2"
{...props}
/>
);
},
);
11 changes: 7 additions & 4 deletions docs/data/components/menu/MenuIntroduction/tailwind/index.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,13 @@
<MenuButton>My account</MenuButton>
<MenuPositioner>
<MenuPopup>
<MenuItem onClick={createHandleMenuClick('Profile')}>Profile</MenuItem>
<MenuItem onClick={createHandleMenuClick('Language settings')}>
Language settings
</MenuItem>
<Menu.Group>
<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>
</MenuPopup>
</MenuPositioner>
Expand Down
Loading