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

Jump to bottom

Add MenuGroup design documentation #14466

Merged
merged 2 commits into from
Mar 15, 2019
Merged

Add MenuGroup design documentation #14466

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a264af5
Update MenuGroup Readme.
kjellr Mar 15, 2019
036d108
Adjust introduction to be more concise.
kjellr Mar 15, 2019
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
33 changes: 32 additions & 1 deletion packages/components/src/menu-group/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,31 @@
# MenuGroup

## Usage
`MenuGroup` wraps a series of related `MenuItem` components into a common section.

![MenuGroup Example](https://wordpress.org/gutenberg/files/2019/03/MenuGroup.png)

1. MenuGroup

## Table of Contents

1. [Design guidelines](#design-guidelines)
2. [Development guidelines](#development-guidelines)
3. [Related components](#related-components)

## Design guidelines

### Usage

A `MenuGroup` should be used to indicate that two or more individual MenuItems are related. When other menu items exist above or below a `MenuGroup`, the group should have a divider line between it and the adjacent item. A MenuGroup can optionally include a label to describe its contents.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No tick marks around MenuGroup for some reason

Suggested change
A `MenuGroup` should be used to indicate that two or more individual MenuItems are related. When other menu items exist above or below a `MenuGroup`, the group should have a divider line between it and the adjacent item. A MenuGroup can optionally include a label to describe its contents.
A `MenuGroup` should be used to indicate that two or more individual MenuItems are related. When other menu items exist above or below a `MenuGroup`, the group should have a divider line between it and the adjacent item. A `MenuGroup` can optionally include a label to describe its contents.

Should "MenuItems" have tick marks?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, it should. Good catch! I've opened #14490 as a quick fix for that. 🙂


![MenuGroup diagram with label and dividers](https://wordpress.org/gutenberg/files/2019/03/MenuGroup-Anatomy.png)

1. MenuGroup label
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"MenuGroup" may be redundant, but it is a bit more clear since you mention other components above. I'll leave that up to you.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I think it's fine to repeat that there, for clarity's sake. Those should have tick marks like the other mentions of the components though. 👍

2. MenuGroup dividers

## Development guidelines

### Usage

```jsx
import { MenuGroup, MenuItem } from '@wordpress/components';
Expand All @@ -12,3 +37,9 @@ const MyMenuGroup = () => (
</MenuGroup>
);
```

## Related Components

- `MenuGroup`s are intended to be used in a `DropDownMenu`.
- To use a single button in a menu, use `MenuItem`.
- To allow users to toggle between a set of menu options, use `MenuItemsChoice` inside of a `MenuGroup`.