Menu content update by julauxen · Pull Request #5702 · grommet/hpe-design-system

julauxen · 2026-01-19T16:36:05Z

Deploy Preview
Actual page: https://deploy-preview-5702--keen-mayer-a86c8b.netlify.app/components/menu

What does this PR do?

Updates the menu content according to this design.

What are the relevant issues?

Closes #5674

Where should the reviewer start?

Menu page

How should this be manually tested?

Any background context you want to provide?

Screenshots (if appropriate)

Should this PR be mentioned in Design System updates?

Is this change backwards compatible or is it a breaking change?

changeset-bot · 2026-01-19T16:36:09Z

⚠️ No Changeset found

Latest commit: 77d23f2

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

netlify · 2026-01-19T16:36:23Z

✅ Deploy Preview for hpe-theme-preview ready!

Name	Link
🔨 Latest commit	`77d23f2`
🔍 Latest deploy log	https://app.netlify.com/projects/hpe-theme-preview/deploys/699c767f1f01d300088b492a
😎 Deploy Preview	https://deploy-preview-5702--hpe-theme-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2026-01-19T16:36:25Z

✅ Deploy Preview for unrivaled-bublanina-3a9bae ready!

Name	Link
🔨 Latest commit	`77d23f2`
🔍 Latest deploy log	https://app.netlify.com/projects/unrivaled-bublanina-3a9bae/deploys/699c767ffad8ca00084c63d8
😎 Deploy Preview	https://deploy-preview-5702--unrivaled-bublanina-3a9bae.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2026-01-19T16:37:10Z

✅ Deploy Preview for hpe-design-icons-grommet ready!

Name	Link
🔨 Latest commit	`77d23f2`
🔍 Latest deploy log	https://app.netlify.com/projects/hpe-design-icons-grommet/deploys/699c767f3e21470008610448
😎 Deploy Preview	https://deploy-preview-5702--hpe-design-icons-grommet.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

luketa8 · 2026-01-20T21:11:20Z

@julauxen Added a first pass at the anatomy diagram. Let's sync tomorrow to move forward.

luketa8 · 2026-01-23T17:19:09Z

Moved anatomy diagram PR here

* Refactored for clarity and consistency with other anatomies * adjusting pointers * adjustments * [Docs] - Menu anatomy proposed refactoring (#5728) * Proposed implementation cleanup and refactoring * Updated markdown * Fixed spread * Adding dotted lines and adjusting targets for clarity * Refactored for clarity and consistency with other anatomies Signed-off-by: Lucas Speyer <lucas.speyer@gmail.com> * adjusting pointers Signed-off-by: Lucas Speyer <lucas.speyer@gmail.com> * adjustments Signed-off-by: Lucas Speyer <lucas.speyer@gmail.com> * [Docs] - Menu anatomy proposed refactoring (#5728) * Proposed implementation cleanup and refactoring * Updated markdown * Fixed spread Signed-off-by: Lucas Speyer <lucas.speyer@gmail.com> * Adding dotted lines and adjusting targets for clarity Signed-off-by: Lucas Speyer <lucas.speyer@gmail.com> * adjusting pointers Signed-off-by: luketa8 <lucas.speyer@gmail.com> * chore: trigger preview Signed-off-by: luketa8 <lucas.speyer@gmail.com> * removing duplicate line * adjusting menu button * adjusting menu button --------- Signed-off-by: Lucas Speyer <lucas.speyer@gmail.com> Signed-off-by: luketa8 <lucas.speyer@gmail.com> Co-authored-by: Matthew Glissmann <mdglissmann@gmail.com>

Content updated according to comments on #5745

* [Docs site] Layout - Refactored DocLayout to make future enhancements to site page Layout.js (#5685) * Moved PageContent to be part of AppHeader for readability * Refactored creating a DocsLayout for enhanced readability * tweaked skipto target label * Update aries-site/src/layouts/content/DocsLayout.js Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Fixed falsy condition * Removed hardcoded container width * Moved Box layout direction to be responsibility of DocsLayout * Removed MainContentWrapper for greater clarity --> placed PageContent within DocsLayout * Moved location of Page wrapper * Removed uneccessary props from AppHeader * Removed unused import * syntax formatting and removed commented out line --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Storybook cleanup controls and dark mode (#5722) * storybook cleanup controls and dark mode * address comments * address comments * Update icons-grommet README.md (#5697) * Update icons-grommet README.md * Add icons figma link * Update README.md * Update packages/icons-grommet/README.md Co-authored-by: Brittany <42451602+britt6612@users.noreply.github.com> * Update packages/icons-grommet/README.md --------- Co-authored-by: Brittany <42451602+britt6612@users.noreply.github.com> * add chromatic to the workflow (#5723) * add chromatic to the workflow * remove token * update file * Trigger Chromatic workflow with updated token * Update shared/aries-core/package.json Co-authored-by: Jessica Rosenquist <54560994+jcfilben@users.noreply.github.com> * Update package.json * remove build search script --------- Co-authored-by: Jessica Rosenquist <54560994+jcfilben@users.noreply.github.com> * Standardize Card Preview Backgrounds (#5699) * removing overrides and adding padding where needed * adding padding and adjustments on background change * remove disabled * change background * make components in cards non focusable * make components in cards non focusable --------- Co-authored-by: britt6612 <brittany.archibeque@hpe.com> * DS storybook - add Box story (#5724) * box story * Update shared/aries-core/src/stories/utils/commonArgs.js Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * pull common args from the theme * alphabetize argTypes in Box * added skeleton prop * move more items to common args --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * [Docs] Tutorials - Grid fundamentals update (#5652) * initial commit - Changed to 6 items in grid example for harmony in grid reflow - Added background-front and padding to Grid demo background to make card style visible. - Minor updates to card example to save vertical space * Updated description on card & header * Updated bg color Modified bg color to 'background-info' this resolved TODO note and matches code in 'step 1' example * Updated based on review Deleted unused image (from removed 7th card. Updated example files to 1- Remove unnecessary background={{ color: 'transparent' }} on <Grommet> 2- Standardize format of initial <b Box> * remove background=transparent on Grommet for stepFive.js * Replace background value with correct semantic one. * docs: added TODO, replace staic image with link to coded example of finished grid * reformat files * replace heading for text * Updated per feedback Wrapped <ProductPage> in examples. Updated aria for button icon. Removed unused vars * Added overflow to fix mobile view when switched * address feedback * address Matts comments * add overflow auto * add back image * Update StarterTemplate.js * Reorder import statements in StepFive.js * add back image --------- Co-authored-by: sulaymon333 <tjsulaymon@gmail.com> Co-authored-by: britt6612 <brittany.archibeque@hpe.com> Co-authored-by: Brittany <42451602+britt6612@users.noreply.github.com> * Standardize spacing between sections on pages (#5684) * Standardize spacing between sections on pages * refactoring for simplicity * Fixing inconsistent gap below titles * address Matts comments * added subsection and content section to learn and templates * Update index.js * added subsection and content section to learn and templates --------- Co-authored-by: britt6612 <brittany.archibeque@hpe.com> Co-authored-by: Brittany <42451602+britt6612@users.noreply.github.com> * [Docs-site] Convert datatable status and state images to code (#5664) * convert static images to code * delete static datatable images * more fixes * update content and replace images with code * increase anatomy width * update grommet doc link from data to datafilters * update status and state table headings * fix combined status and state column status column label * revert anatomy changes * remove DataTableFilterExample inline example * convert statusIcon util to a component * remove instructions from status only colum table title * unlist filter list item link under narrowing a result set section * reduce datatable height and no fill * fix status and state tables row height and standardize detail page namevalues into two columns * remove Server name: from table header for status only column detail table * Update aries-site/src/examples/components/datatable/DataTableStatusOnlyExample.js Co-authored-by: Matthew Glissmann <mdglissmann@gmail.com> * Update aries-site/src/examples/components/datatable/DataTableCombinedStatusStateExample.js Co-authored-by: Matthew Glissmann <mdglissmann@gmail.com> * Update aries-site/src/examples/components/datatable/DataTableSeparateStatusStateExample.js Co-authored-by: Matthew Glissmann <mdglissmann@gmail.com> * Update aries-site/src/examples/components/datatable/DataTableStatusOnlyExample.js Co-authored-by: Matthew Glissmann <mdglissmann@gmail.com> --------- Co-authored-by: Matthew Glissmann <mdglissmann@gmail.com> * fix menu types section - #5726 issue * Added SelectMultiple to all-components page (#5747) * update menu label * fix typo on status indicator page (#5756) * DS storybook - More layout stories (#5731) * box story * Update shared/aries-core/src/stories/utils/commonArgs.js Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * pull common args from the theme * alphabetize argTypes in Box * added skeleton prop * move more props to commonArgs * remaining layout stories * address feedback * Fix accessibility issue * add aria-hidden to icon * remove boxArgs from Page * update args after devdiscussion * adjust card argTypes * removed elevation form foot and header stories * remove plain from buttons in header story * incorporate changes from review --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * remove gap between icons only menus * add anchor storybook (#5743) * add anchor storybook * add icons to anchor story * address Jessicas comment * remove pad * remove pad * make panel on right side * remove addon * address matts comments * address Jessica's comments * set addons panel to default to the right side of the screen (#5759) * remove space from icons only menu Grid -> Box * remove wrapping Box comp. * Revert "Merge branch 'master' into menu-types" This reverts commit 89fa64d, reversing changes made to 39309f7. * remove hoverIndicator prop * update menu items --------- Co-authored-by: Matthew Glissmann <mdglissmann@gmail.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Jessica Rosenquist <54560994+jcfilben@users.noreply.github.com> Co-authored-by: Brittany <42451602+britt6612@users.noreply.github.com> Co-authored-by: Lucas Speyer <lucas.speyer@gmail.com> Co-authored-by: britt6612 <brittany.archibeque@hpe.com> Co-authored-by: SeamusLeonardHPE <135040188+SeamusLeonardHPE@users.noreply.github.com>

…nu-content-update

* fix menu do-donts section #5727 * restore original file name MenuDividersExample --> MenuGroupingExample * update menu items * updatemenu item group and text * Update aries-site/src/examples/components/menu/MenuMock.js Co-authored-by: Brittany <42451602+britt6612@users.noreply.github.com> * Update aries-site/src/examples/components/menu/MenuMock.js Co-authored-by: Brittany <42451602+britt6612@users.noreply.github.com> * update profiles to server * updated menu.mdx from main PR * Update aries-site/src/examples/components/menu/MenuMock.js Co-authored-by: Matthew Glissmann <mdglissmann@gmail.com> * refactor mock menu * rename and restructure files for MenuMock and fix error from MenMockButton inside MenuAnatomy --------- Co-authored-by: Brittany <42451602+britt6612@users.noreply.github.com> Co-authored-by: Matthew Glissmann <mdglissmann@gmail.com> Co-authored-by: britt6612 <brittany.archibeque@hpe.com>

small changes to content

apps/docs/src/data/structures/components.js

halocline · 2026-02-20T00:23:51Z

apps/docs/src/pages/components/menu.mdx

+  github="https://github.com/grommet/hpe-design-system/blob/master/aries-site/src/examples/components/menu/MenuRecordActionsExample.js"
+  height={{ min: 'medium' }}
+>
+  <MenuRecordActionsExample />


I'm feeling like these server groups need to be contained. Present in a container on "background-front"? Right now the menus feel like they are floating and lack affordance to the thing to which they relate.

cc: @oliverHPE

Yes, the menu button and content appear to be too far apart to be obviously associated. Each item could be

contained or

the content could be rearranged so the 'Title', 'server count' and 'status' sit in a row. The direction may then form continuity to the menu button and make it feel more naturally belonging to the item.

Added containment with background-back

apps/docs/src/pages/components/menu.mdx

halocline · 2026-02-20T00:31:55Z

apps/docs/src/pages/components/menu.mdx

+| **3b** | **Item icon**      | Provides a quick visual reference for the action.                    |                         Optional                         | --                                                                                                                                                                                  |
+| **4**  | **Divider**        | Separates groups of related actions.                                 |                         Optional                         | --                                                                                                                                                                                  |
+
+## Types


The lack of spacing above our section headings is making the headings feel equally related, if not more associated, with the content above them.

I'm okay with creating an issue to address this.

Weird, I have the impression that this was not the case before. Did we change anything on the layout? Either way, I'll create a ticket to investigate: #5834

Likely an effect caused by: #5684

halocline · 2026-02-20T00:38:08Z

apps/docs/src/pages/components/menu.mdx

+## Types

-To create a predictable experience for users, the following are guidelines for using Menu.
+### Default


Where did we land on showing a menu other than the default button treatment? If I were to consume this page, I would not pick up on that menus can use any button kind styles.

Can we repurpose the "Toolbar" type and show a variety of menu kinds?

Also, I feel like folks are reaching for secondary instead of toolbar when adding menus to toolbars because the menu doesn't have enough affordance and users are not seeing it. Should we consider modifying the toolbar treatment.

cc: @oliverHPE

hey @halocline I added you previous comments about the different button types to the phase 2 ticket (#5683) since we do not have that representation on our current docs and for phase 1 we are avoiding adding. Does that sound fair?

Given where we are in the sprint, I think that is fine. If we were mid-sprint, I'd say add now because we are already in that headspace and its cheap and easy to implement.

Co-authored-by: Matthew Glissmann <mdglissmann@gmail.com>

britt6612

Looks good!

julauxen added 6 commits January 19, 2026 16:09

Use cases section

32f31b3

Anatomy and Types

c0522fe

Organizing "Organizing menu items" section

fbb9363

Do and donts and cleanup

df9b6c6

content guidelines and update to accessibility

553159f

description

ed911b5

julauxen marked this pull request as draft January 19, 2026 16:36

julauxen and others added 4 commits January 20, 2026 09:40

minor typo

28faadd

splitting up the paragraph

ecdb480

detail on icon only copy

fb95110

adding anatomy diagram

2bf0aa0

luketa8 added 5 commits January 20, 2026 18:16

adjunsting arrows

278cf4b

adjustments

a7d6eb0

Update MenuAnatomy.js

8971f1e

minor adjustments

156f100

removed anatomy to move to another branch

22b5866

This was referenced Jan 26, 2026

Menu - Types visual examples #5726

Closed

Menu - Dos and Do nots visual examples #5727

Closed

Sulaymon333 and others added 4 commits January 27, 2026 13:12

implement task #5726 for Types section

34d9c83

fix #5727 for menu page

d45073d

revert commits to main PR

0fc53e3

julauxen mentioned this pull request Feb 6, 2026

[Docs] Menu types section update #5745

Merged

Update menu.mdx

fde60c6

Content updated according to comments on #5745

Sulaymon333 and others added 7 commits February 9, 2026 13:55

remove unused imports

b4cbcc7

merge with master

44d86f9

Merge branch 'master' of github.com:grommet/hpe-design-system into Me…

1fba711

…nu-content-update

restore MenuAnatomy section inside menu.mdx

d970794

Update menu.mdx

1fe99e3

small changes to content

julauxen marked this pull request as ready for review February 19, 2026 11:32

julauxen requested review from britt6612 and halocline February 19, 2026 11:33

halocline reviewed Feb 20, 2026

View reviewed changes

julauxen and others added 2 commits February 20, 2026 10:17

Update apps/docs/src/data/structures/components.js

07a4d4c

Co-authored-by: Matthew Glissmann <mdglissmann@gmail.com>

Update apps/docs/src/pages/components/menu.mdx

9fcfaa5

Co-authored-by: Matthew Glissmann <mdglissmann@gmail.com>

julauxen mentioned this pull request Feb 20, 2026

Investigate and fix headings spacing issue #5834

Open

julauxen requested a review from halocline February 20, 2026 17:05

added background-back to example

77d23f2

halocline approved these changes Feb 23, 2026

View reviewed changes

britt6612 approved these changes Feb 23, 2026

View reviewed changes

britt6612 merged commit ff2d665 into master Feb 23, 2026
21 checks passed

Conversation

julauxen commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

What are the relevant issues?

Where should the reviewer start?

How should this be manually tested?

Any background context you want to provide?

Screenshots (if appropriate)

Should this PR be mentioned in Design System updates?

Is this change backwards compatible or is it a breaking change?

Uh oh!

changeset-bot bot commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

netlify bot commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for hpe-theme-preview ready!

Uh oh!

netlify bot commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for unrivaled-bublanina-3a9bae ready!

Uh oh!

netlify bot commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for hpe-design-icons-grommet ready!

Uh oh!

luketa8 commented Jan 20, 2026

Uh oh!

luketa8 commented Jan 23, 2026

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oliverHPE Feb 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

britt6612 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

julauxen commented Jan 19, 2026 •

edited

Loading

changeset-bot bot commented Jan 19, 2026 •

edited

Loading

netlify bot commented Jan 19, 2026 •

edited

Loading

netlify bot commented Jan 19, 2026 •

edited

Loading

netlify bot commented Jan 19, 2026 •

edited

Loading

oliverHPE Feb 20, 2026 •

edited

Loading