From 32f31b3c0a54b25a946e9e72dd493466c40166d1 Mon Sep 17 00:00:00 2001 From: julauxen Date: Mon, 19 Jan 2026 16:09:14 +0000 Subject: [PATCH 01/28] Use cases section --- aries-site/src/pages/components/menu.mdx | 50 ++++++++++++++++++++++-- 1 file changed, 47 insertions(+), 3 deletions(-) diff --git a/aries-site/src/pages/components/menu.mdx b/aries-site/src/pages/components/menu.mdx index 3f623a0068..b81dfd30a6 100644 --- a/aries-site/src/pages/components/menu.mdx +++ b/aries-site/src/pages/components/menu.mdx @@ -23,11 +23,55 @@ import { -## Guidance +## Use Cases + +### Presenting application-level navigation and tasks +Use Menu within the header to organize and present application-level navigation or related user tasks in a single, easily accessible location. + + + + + +### Grouping batch actions for data sets +Use Menu within a toolbar to present batch actions for data collection objects or records alongside other controls, ensuring equal prominence and visual alignment. Apply kind="toolbar" in these cases. +In this example, actions are grouped into executing and configuration categories, with executing actions first because they are most frequently used. For more details on grouping and ordering, see [Organizing menu items](#organizing-menu-items). + + + + + +### Grouping item-specific actions +Use a menu within each list item when you need to provide actions for an individual object or record. +When space is limited and actions are easily recognized by their icon, use the icon-only version of the menu. +In this example, actions are grouped into configuration, executing, and dangerous categories, with configuration first and delete last. +For more details on grouping and ordering, see [Organizing menu items](#organizing-menu-items). + + + + + -A Menu is a set of actions that may be used to engage with content on a page or to navigate to other pages. When a menu item is clicked, the action will be executed. -Menu should not be confused with [Select](/components/select). Though visually similar, Select is often used in the context of a Form and used to choose from a set of values rather than actions. ### Usage From c0522fea4895d7351d90b91d2ae3f774fe6d9575 Mon Sep 17 00:00:00 2001 From: julauxen Date: Mon, 19 Jan 2026 16:15:27 +0000 Subject: [PATCH 02/28] Anatomy and Types --- aries-site/src/pages/components/menu.mdx | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/aries-site/src/pages/components/menu.mdx b/aries-site/src/pages/components/menu.mdx index b81dfd30a6..175dc6cf64 100644 --- a/aries-site/src/pages/components/menu.mdx +++ b/aries-site/src/pages/components/menu.mdx @@ -70,20 +70,26 @@ For more details on grouping and ordering, see [Organizing menu items](#organizi +## Anatomy +[Placeholder space for the anatomy] +## Types -### Usage +### Default +A standard dropdown menu that displays a clear, text-based list of actions when triggered. -To create a predictable experience for users, the following are guidelines for using Menu. +[Placeholder space for the example] -**It is recommended that you do not have more than 5 items in a menu.** In order to create the most effective user experience, keep the number of items to a minimum. This allows the user to easily understand the scope of the actions they can perform. +### Icon only +A compact menu represented by an icon, ideal for space-constrained layouts where actions are easily recognized visually. -**Give the menu a clear title.** Instead of labeling the menu as "Menu", provide a name that conveys its purpose. For example, a label of "Account Information" would be appropriate if the menu items associated were actions such as "Change username" or "Reset password". +[Placeholder space for the example] -**Keep labels short.** Using a simple, concise label for menu items, such as "Settings" or "Logout", helps the user easily understand the action that will be performed when they click. Longer labels may clutter the layout and create a more effortful experience for the user. +### Toolbar +A menu styled to integrate seamlessly with a toolbar. -**Avoid creating cascading menus.** Menus with multiple layers creates a confusing experience for the user because relevant actions may become nested and difficult to find. Refining menu items to necessary actions creates a more manageable user experience. +[Placeholder space for the example] ## Organizing menu items From fbb93639cbfb08492dacb61c65edc60c81f08f5e Mon Sep 17 00:00:00 2001 From: julauxen Date: Mon, 19 Jan 2026 16:23:54 +0000 Subject: [PATCH 03/28] Organizing "Organizing menu items" section --- aries-site/src/pages/components/menu.mdx | 79 +++++++++++------------- 1 file changed, 37 insertions(+), 42 deletions(-) diff --git a/aries-site/src/pages/components/menu.mdx b/aries-site/src/pages/components/menu.mdx index 175dc6cf64..9d952dd96d 100644 --- a/aries-site/src/pages/components/menu.mdx +++ b/aries-site/src/pages/components/menu.mdx @@ -93,15 +93,45 @@ A menu styled to integrate seamlessly with a toolbar. ## Organizing menu items -Allow a user to quickly locate the menu item they desire by organizing menu items -through thoughtful ordering and grouping. +Help users quickly locate the desired menu item by applying thoughtful ordering and grouping: + +- Group related items together for easier scanning. Use a divider to seperate groups. +- Prioritize frequently used actions by placing them at the top. +- Place destructive actions last in a distinct, consistent location to ensure intentionality. + +### Common groupings in HPE applications +In many HPE applications, customers configure, modify, and act upon resources in their environment. For these contexts, menu items typically fall into three groups: + +#### Configuring + +Actions allowing a user to set and modify attributes of a resource. + +- View [resource] details +- Edit [resource] +- Add [item] to [resource] +- Remove [item] from [resource] +- Assign [resource] to [another resource] +- Add [resource] to group + +#### Executing + +Actions providing the ability for a user to act upon a resource. + +- Launch [resource] +- Power on/off [resource] +- Reset [resource] +- Update/upgrade software/firmware version for [resource] + +#### Transferring + +Actions enabling a user to share or consume data related to a resource. + +- Download [resource] data +- Share [resource] with [user] +- Send [resource] to [user] +- Notify [user] about [resource] -### Guiding principles -- Make it easy for the user to scan by grouping related items and placing more - frequently used actions at the top of the menu. -- Ensure intentionality, by placing destructive actions in a distinct, consistent - location at the end of the menu. ### Grouping @@ -189,42 +219,7 @@ Selecting a dangerous action should lead to double confirmation. -### Common groupings in HPE applications - -Many HPE applications provide the ability for customers to configure, modify, -and act upon resources in their environment. - -For applications in this context, groups of menu items can be thought of as -[configuring](#configuring), [executing](#executing), or [transferring](#transferring). - -#### Configuring - -Actions allowing a user to set and modify attributes of a resource. - -- View [resource] details -- Edit [resource] -- Add [item] to [resource] -- Remove [item] from [resource] -- Assign [resource] to [another resource] -- Add [resource] to group - -#### Executing -Actions providing the ability for a user to act upon a resource. - -- Launch [resource] -- Power on/off [resource] -- Reset [resource] -- Update/upgrade software/firmware version for [resource] - -#### Transferring - -Actions enabling a user to share or consume data related to a resource. - -- Download [resource] data -- Share [resource] with [user] -- Send [resource] to [user] -- Notify [user] about [resource] #### Batch actions menu related to a selection of servers From df9b6c6c593d68f5ca34c1068e72b97213d5e790 Mon Sep 17 00:00:00 2001 From: julauxen Date: Mon, 19 Jan 2026 16:29:21 +0000 Subject: [PATCH 04/28] Do and donts and cleanup --- aries-site/src/pages/components/menu.mdx | 140 +---------------------- 1 file changed, 4 insertions(+), 136 deletions(-) diff --git a/aries-site/src/pages/components/menu.mdx b/aries-site/src/pages/components/menu.mdx index 9d952dd96d..324a1b8fc9 100644 --- a/aries-site/src/pages/components/menu.mdx +++ b/aries-site/src/pages/components/menu.mdx @@ -131,18 +131,11 @@ Actions enabling a user to share or consume data related to a resource. - Send [resource] to [user] - Notify [user] about [resource] +## Dos and Do nots - -### Grouping - -Group related menu items. Use separator lines to create visually distinct groups -of related menu items. - -Create separate groups for menu items initiating actions and items setting -attributes. Menu items become unpredictable when the behavior of grouped items -varies. - -Menu items should only be grouped if there are two or more related items. +[Placeholder for select DO AND DONT] +[Placeholder for divider DO AND DONT] +[Placeholder for too many items DO AND DONT] -### Ordering - -Frequency of use should guide the order in which menu items are presented. - -When menu items are grouped, order items within that group by frequency. -Additionally, place the most frequently used group at the top of the menu. -This anticipates what the user is looking for and allows them to locate the -item as their eye scans the items top to bottom. - -Exception: [Dangerous actions](#dangerous-actions) should be placed as the -last item in the menu. - -### Dangerous actions - -Dangerous or destructive actions altering a state which cannot -be recovered, such as delete, should be placed as the last item in the menu -with a visual separator for the dangerous actions grouping so that they are -distinct from all other actions. - -Selecting a dangerous action should lead to double confirmation. - - - -#### Batch actions menu related to a selection of servers - -The table menu's batch actions are grouped by executing and configuration actions. -The executing actions group is ordered first because the actions in it are the -most frequently used. - - - - - -#### Actions menu related to an individual record - -Each server group has a menu whose actions have been grouped by configuration, -executing, and dangerous actions. The configuration actions group is ordered first -because adjusting and viewing the group are the most frequently used. The delete -group action is ordered last since deleting the group is a destructive action and -cannot be recovered. - - - - - -## Variants - -There are various places a Menu may be useful within an application. If the user is going to be selecting from a list of options to execute an action, Menu is a good component to use. The usage of labels and icons allow a menu to be versatile for different layout contexts. - -### Within a header - -A menu can be used in a [Header](/components/header) to group related actions. -The default Menu should be used in all instances unless the Menu is contained within a toolbar, in which case see [Menu within a toolbar](#within-a-toolbar) guidance. - - - - - -### Within a toolbar - -Use `kind="toolbar"` when the Menu is placed in row with other toolbar controls like search or filter. -In this situation, a search input, filter button, and action menu are presented as a unified set of controls. The intent is to present each control with equal prominence. - - - - - -### With custom icon - -Adding an icon prop changes the icon that appears on the menu. In some contexts, it may be appropriate to use a more specific or alternate icon. Here is an example Menu being used in a [List](/templates/lists) to indicate actions that can be performed on list items. - - - - - - -### Disabled - -Used to indicate that a Menu cannot be interacted with. - - - - - ## Accessibility Accessibility features such as screen reader messages are automatically built into Menu. By default, these messages are "Open Menu" and "Close Menu". However, if a more specific message is necessary, a custom [a11yTitle](https://v2.grommet.io/menu?theme=hpe#a11yTitle) or [messages](https://v2.grommet.io/menu?theme=hpe#messages) may be applied. From 553159f57fdd1b70409f135ca89fbf8f9210591a Mon Sep 17 00:00:00 2001 From: julauxen Date: Mon, 19 Jan 2026 16:32:19 +0000 Subject: [PATCH 05/28] content guidelines and update to accessibility --- aries-site/src/pages/components/menu.mdx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/aries-site/src/pages/components/menu.mdx b/aries-site/src/pages/components/menu.mdx index 324a1b8fc9..bd0027d0ce 100644 --- a/aries-site/src/pages/components/menu.mdx +++ b/aries-site/src/pages/components/menu.mdx @@ -191,11 +191,14 @@ Actions enabling a user to share or consume data related to a resource. +## Content guidelines +- Give the menu a clear title. Instead of labeling the menu as "Menu", provide a name that conveys its purpose. For example, a label of "Account information" would be appropriate if the menu items associated were actions such as "Change username" or "Reset password". +- Keep labels short. Using a simple, concise label for menu items, such as "Settings" or "Logout", helps the user easily understand the action that will be performed when they click. + ## Accessibility Accessibility features such as screen reader messages are automatically built into Menu. By default, these messages are "Open Menu" and "Close Menu". However, if a more specific message is necessary, a custom [a11yTitle](https://v2.grommet.io/menu?theme=hpe#a11yTitle) or [messages](https://v2.grommet.io/menu?theme=hpe#messages) may be applied. - -An icon may be used on a menu item to provide additional context about the action. It is recommended that an icon is used in conjunction with text to ensure the context of the menu item is clear. However, there may be cases where an icon alone is sufficient. For example, highly familiar action indicators, such as this example of [Menu with custom icon](#with-custom-icon) demonstrate when an icon only may be sufficient. +An icon may be used on the menu button to provide additional context about the action. It is recommended that an icon is used in conjunction with text to ensure the context of the menu button is clear. However, there may be cases where an icon alone is sufficient. For example, highly familiar action indicators, such as this example of [Menu with custom icon](#with-custom-icon) demonstrate when an icon only may be sufficient. ### WCAG compliance From ed911b55ea7383b3be849a8b669ee964ce6c1d97 Mon Sep 17 00:00:00 2001 From: julauxen Date: Mon, 19 Jan 2026 16:34:49 +0000 Subject: [PATCH 06/28] description --- aries-site/src/data/structures/components.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aries-site/src/data/structures/components.js b/aries-site/src/data/structures/components.js index b41ce1fd60..f62e9d5563 100644 --- a/aries-site/src/data/structures/components.js +++ b/aries-site/src/data/structures/components.js @@ -873,7 +873,7 @@ export const components = [ accessibility: 'Passed WCAG 2.2 AA', category: 'Controls', description: - 'Menu is a component that contains a list of actions. When a user clicks an item in the menu, the menu closes and the action is executed.', + 'A menu presents a set of related actions for a user to choose from.', seoDescription: 'Menu contains a list of actions. See some best UX practices .', sections: [ From 28faaddd5adf566b7638a3ff7c11712c18a9b18d Mon Sep 17 00:00:00 2001 From: julauxen Date: Tue, 20 Jan 2026 09:40:53 +0000 Subject: [PATCH 07/28] minor typo --- aries-site/src/pages/components/menu.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aries-site/src/pages/components/menu.mdx b/aries-site/src/pages/components/menu.mdx index bd0027d0ce..2256a5a533 100644 --- a/aries-site/src/pages/components/menu.mdx +++ b/aries-site/src/pages/components/menu.mdx @@ -95,7 +95,7 @@ A menu styled to integrate seamlessly with a toolbar. Help users quickly locate the desired menu item by applying thoughtful ordering and grouping: -- Group related items together for easier scanning. Use a divider to seperate groups. +- Group related items together for easier scanning. Use a divider to separate groups. - Prioritize frequently used actions by placing them at the top. - Place destructive actions last in a distinct, consistent location to ensure intentionality. From ecdb480e1f5dd5dcec679b44f7910c80e8f1b816 Mon Sep 17 00:00:00 2001 From: julauxen Date: Tue, 20 Jan 2026 09:43:29 +0000 Subject: [PATCH 08/28] splitting up the paragraph --- aries-site/src/pages/components/menu.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/aries-site/src/pages/components/menu.mdx b/aries-site/src/pages/components/menu.mdx index 2256a5a533..b185d2ee35 100644 --- a/aries-site/src/pages/components/menu.mdx +++ b/aries-site/src/pages/components/menu.mdx @@ -198,6 +198,7 @@ Actions enabling a user to share or consume data related to a resource. ## Accessibility Accessibility features such as screen reader messages are automatically built into Menu. By default, these messages are "Open Menu" and "Close Menu". However, if a more specific message is necessary, a custom [a11yTitle](https://v2.grommet.io/menu?theme=hpe#a11yTitle) or [messages](https://v2.grommet.io/menu?theme=hpe#messages) may be applied. + An icon may be used on the menu button to provide additional context about the action. It is recommended that an icon is used in conjunction with text to ensure the context of the menu button is clear. However, there may be cases where an icon alone is sufficient. For example, highly familiar action indicators, such as this example of [Menu with custom icon](#with-custom-icon) demonstrate when an icon only may be sufficient. ### WCAG compliance From fb95110dbf4a05e3d979bd4244c99edf6306a6e9 Mon Sep 17 00:00:00 2001 From: julauxen Date: Tue, 20 Jan 2026 10:53:49 +0000 Subject: [PATCH 09/28] detail on icon only copy --- aries-site/src/pages/components/menu.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aries-site/src/pages/components/menu.mdx b/aries-site/src/pages/components/menu.mdx index b185d2ee35..117ae04a3c 100644 --- a/aries-site/src/pages/components/menu.mdx +++ b/aries-site/src/pages/components/menu.mdx @@ -82,7 +82,7 @@ A standard dropdown menu that displays a clear, text-based list of actions when [Placeholder space for the example] ### Icon only -A compact menu represented by an icon, ideal for space-constrained layouts where actions are easily recognized visually. +A compact menu represented by an icon, such as “more” or “settings”, ideal for space-constrained layouts where actions are easily recognized visually. [Placeholder space for the example] From 2bf0aa0889974bfa43683c379e222c91bfc19da6 Mon Sep 17 00:00:00 2001 From: Lucas Speyer Date: Tue, 20 Jan 2026 18:10:18 -0300 Subject: [PATCH 10/28] adding anatomy diagram --- .../examples/components/menu/MenuAnatomy.js | 244 ++++++++++++++++++ .../src/examples/components/menu/index.js | 1 + aries-site/src/pages/components/menu.mdx | 19 +- 3 files changed, 263 insertions(+), 1 deletion(-) create mode 100644 aries-site/src/examples/components/menu/MenuAnatomy.js diff --git a/aries-site/src/examples/components/menu/MenuAnatomy.js b/aries-site/src/examples/components/menu/MenuAnatomy.js new file mode 100644 index 0000000000..90df5ff5a0 --- /dev/null +++ b/aries-site/src/examples/components/menu/MenuAnatomy.js @@ -0,0 +1,244 @@ +import React from 'react'; +import { + Box, + Grid, + Diagram, + Menu, + Stack, +} from 'grommet'; +import { Add } from '@hpe-design/icons-grommet'; +import { Annotation } from '../../../layouts'; + +const color = 'border'; +const thickness = 'hair'; +const type = 'direct'; + +const connections = [ + { + anchor: 'horizontal', + type, + color, + thickness, + fromTarget: '1', + toTarget: 'menu-button', + }, + { + anchor: 'horizontal', + type, + color, + thickness, + fromTarget: '1a', + toTarget: 'menu-label', + }, + { + anchor: 'vertical', + type, + color, + thickness, + fromTarget: '1b', + toTarget: 'menu-icon', + }, + { + anchor: 'horizontal', + type, + color, + thickness, + fromTarget: '2', + toTarget: 'first-item', + }, + { + anchor: 'horizontal', + type, + color, + thickness, + fromTarget: '3', + toTarget: 'menu-item', + }, + { + anchor: 'horizontal', + type, + color, + thickness, + fromTarget: '3a', + toTarget: 'item-label', + }, + { + anchor: 'horizontal', + type, + color, + thickness, + fromTarget: '3b', + toTarget: 'item-icon', + }, + { + anchor: 'horizontal', + type, + color, + thickness, + fromTarget: '4', + toTarget: 'divider', + }, +]; + +const AnatomyGrid = ({ ...rest }) => ( + +); + +export const MenuAnatomy = () => { + const items = [ + [ + { + label: Action, + onClick: () => {}, + }, + { label: 'Action', onClick: () => {} }, + { label: 'Action', onClick: () => {} }, + ], + [ + { label: 'Action', onClick: () => {} }, + { + label: ( + + + Action + + ), + onClick: () => {}, + }, + { + label: ( + + Action + + + ), + onClick: () => {}, + }, + ], + ]; + + return ( + + + {/* Annotations on top */} + + + + + + {/* Annotations on right side */} + + + + + + {/* Annotations below */} + + + + + + {/* Empty boxes for grid spacing */} + + + + + + {/* Menu component */} + e.preventDefault()} + > + + Menu + + + } + items={items} + open + tabIndex={-1} + dropProps={{ + id: 'drop-container', + onClickOutside: () => {}, + onEsc: () => {}, + style: { pointerEvents: 'none' }, + }} + messages={{ + openMenu: 'Open Menu', + }} + /> + {/* Hidden divider marker for annotation */} + + + + + + ); +}; diff --git a/aries-site/src/examples/components/menu/index.js b/aries-site/src/examples/components/menu/index.js index b8bf40e7b1..4e5f95d484 100644 --- a/aries-site/src/examples/components/menu/index.js +++ b/aries-site/src/examples/components/menu/index.js @@ -1,3 +1,4 @@ +export * from './MenuAnatomy'; export * from './MenuBatchActionsExample'; export * from './MenuDangerousExample'; export * from './MenuDisabledExample'; diff --git a/aries-site/src/pages/components/menu.mdx b/aries-site/src/pages/components/menu.mdx index 117ae04a3c..dd366fe85e 100644 --- a/aries-site/src/pages/components/menu.mdx +++ b/aries-site/src/pages/components/menu.mdx @@ -1,6 +1,7 @@ import { Box } from 'grommet'; import { AccessibilitySection, BestPracticeGroup, Example } from '../../layouts'; import { + MenuAnatomy, MenuExample, MenuBatchActionsExample, MenuDangerousExample, @@ -72,7 +73,23 @@ For more details on grouping and ordering, see [Organizing menu items](#organizi ## Anatomy -[Placeholder space for the anatomy] + + + + +| Label | Region | Purpose | Required | Notes | +| :---: | ------------------- | ---------------------------------------------------------------------------------- | :------: | ------------------------------------------------------------------------------------------------------------------------------------------ | +| **1** | **Menu Button** | Opens the menu when clicked. | Required | Can include a label, icon, or both. | +| **1a** | **Button label** | Describes the menu's function or the category of actions. | Optional | -- | +| **1b** | **Button icon** | Provides a visual cue that the menu can be opened or closed. | Optional | Typically an arrow or chevron to indicate expand/collapse. For icon-only menus, the icon represents the menu's purpose or the type of actions (e.g., settings gear, overflow dots). | +| **2** | **Drop container** | Holds and displays the list of menu items when the menu is expanded. | Required | -- | +| **3** | **Menu item** | Represents an individual action within the menu. | Required | Items should be organized logically (see [Organizing Menu Items](#organizing-menu-items)). | +| **3a** | **Item label** | Communicates the specific action to the user. | Required | -- | +| **3b** | **Item icon** | Provides a quick visual reference for the action. | Optional | -- | +| **4** | **Divider** | Separates groups of related actions. | Optional | -- | ## Types From 278cf4bd0b1c6e77b2466240234777cb0eec366f Mon Sep 17 00:00:00 2001 From: Lucas Speyer Date: Tue, 20 Jan 2026 18:16:19 -0300 Subject: [PATCH 11/28] adjunsting arrows --- aries-site/src/examples/components/menu/MenuAnatomy.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/aries-site/src/examples/components/menu/MenuAnatomy.js b/aries-site/src/examples/components/menu/MenuAnatomy.js index 90df5ff5a0..794fdcff20 100644 --- a/aries-site/src/examples/components/menu/MenuAnatomy.js +++ b/aries-site/src/examples/components/menu/MenuAnatomy.js @@ -39,7 +39,7 @@ const connections = [ toTarget: 'menu-icon', }, { - anchor: 'horizontal', + anchor: 'vertical', type, color, thickness, @@ -55,7 +55,7 @@ const connections = [ toTarget: 'menu-item', }, { - anchor: 'horizontal', + anchor: 'vertical', type, color, thickness, @@ -63,7 +63,7 @@ const connections = [ toTarget: 'item-label', }, { - anchor: 'horizontal', + anchor: 'vertical', type, color, thickness, @@ -83,6 +83,7 @@ const connections = [ const AnatomyGrid = ({ ...rest }) => ( Date: Tue, 20 Jan 2026 18:29:31 -0300 Subject: [PATCH 12/28] adjustments --- .../src/examples/components/menu/MenuAnatomy.js | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/aries-site/src/examples/components/menu/MenuAnatomy.js b/aries-site/src/examples/components/menu/MenuAnatomy.js index 794fdcff20..cdda05c5a5 100644 --- a/aries-site/src/examples/components/menu/MenuAnatomy.js +++ b/aries-site/src/examples/components/menu/MenuAnatomy.js @@ -39,7 +39,7 @@ const connections = [ toTarget: 'menu-icon', }, { - anchor: 'vertical', + anchor: 'horizontal', type, color, thickness, @@ -84,15 +84,14 @@ const AnatomyGrid = ({ ...rest }) => ( { {/* Empty boxes for grid spacing */} - - - {/* Menu component */} { style={{ position: 'absolute', top: '225px', - left: '18px', - width: '120px', + left: '26px', + width: '125px', height: '1px', pointerEvents: 'none', }} From 8971f1e53a3245d40e3001506050dd3d91255fb9 Mon Sep 17 00:00:00 2001 From: Lucas Speyer Date: Tue, 20 Jan 2026 18:29:53 -0300 Subject: [PATCH 13/28] Update MenuAnatomy.js --- aries-site/src/examples/components/menu/MenuAnatomy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aries-site/src/examples/components/menu/MenuAnatomy.js b/aries-site/src/examples/components/menu/MenuAnatomy.js index cdda05c5a5..fb8d5b4455 100644 --- a/aries-site/src/examples/components/menu/MenuAnatomy.js +++ b/aries-site/src/examples/components/menu/MenuAnatomy.js @@ -84,7 +84,7 @@ const AnatomyGrid = ({ ...rest }) => ( Date: Tue, 20 Jan 2026 18:53:43 -0300 Subject: [PATCH 14/28] minor adjustments --- .../examples/components/menu/MenuAnatomy.js | 39 ++++++++++++++++++- 1 file changed, 37 insertions(+), 2 deletions(-) diff --git a/aries-site/src/examples/components/menu/MenuAnatomy.js b/aries-site/src/examples/components/menu/MenuAnatomy.js index fb8d5b4455..aa892fb109 100644 --- a/aries-site/src/examples/components/menu/MenuAnatomy.js +++ b/aries-site/src/examples/components/menu/MenuAnatomy.js @@ -23,7 +23,7 @@ const connections = [ toTarget: 'menu-button', }, { - anchor: 'horizontal', + anchor: 'vertical', type, color, thickness, @@ -84,7 +84,7 @@ const AnatomyGrid = ({ ...rest }) => ( { {/* Empty boxes for grid spacing */} + + {/* Hidden reference elements for Diagram annotations */} + + + + + + + {/* Menu component */} Date: Wed, 21 Jan 2026 15:58:51 -0300 Subject: [PATCH 15/28] removed anatomy to move to another branch --- .../examples/components/menu/MenuAnatomy.js | 276 ------------------ .../src/examples/components/menu/index.js | 1 - aries-site/src/pages/components/menu.mdx | 19 +- 3 files changed, 1 insertion(+), 295 deletions(-) delete mode 100644 aries-site/src/examples/components/menu/MenuAnatomy.js diff --git a/aries-site/src/examples/components/menu/MenuAnatomy.js b/aries-site/src/examples/components/menu/MenuAnatomy.js deleted file mode 100644 index aa892fb109..0000000000 --- a/aries-site/src/examples/components/menu/MenuAnatomy.js +++ /dev/null @@ -1,276 +0,0 @@ -import React from 'react'; -import { - Box, - Grid, - Diagram, - Menu, - Stack, -} from 'grommet'; -import { Add } from '@hpe-design/icons-grommet'; -import { Annotation } from '../../../layouts'; - -const color = 'border'; -const thickness = 'hair'; -const type = 'direct'; - -const connections = [ - { - anchor: 'horizontal', - type, - color, - thickness, - fromTarget: '1', - toTarget: 'menu-button', - }, - { - anchor: 'vertical', - type, - color, - thickness, - fromTarget: '1a', - toTarget: 'menu-label', - }, - { - anchor: 'vertical', - type, - color, - thickness, - fromTarget: '1b', - toTarget: 'menu-icon', - }, - { - anchor: 'horizontal', - type, - color, - thickness, - fromTarget: '2', - toTarget: 'first-item', - }, - { - anchor: 'horizontal', - type, - color, - thickness, - fromTarget: '3', - toTarget: 'menu-item', - }, - { - anchor: 'vertical', - type, - color, - thickness, - fromTarget: '3a', - toTarget: 'item-label', - }, - { - anchor: 'vertical', - type, - color, - thickness, - fromTarget: '3b', - toTarget: 'item-icon', - }, - { - anchor: 'horizontal', - type, - color, - thickness, - fromTarget: '4', - toTarget: 'divider', - }, -]; - -const AnatomyGrid = ({ ...rest }) => ( - -); - -export const MenuAnatomy = () => { - const items = [ - [ - { - label: Action, - onClick: () => {}, - }, - { label: 'Action', onClick: () => {} }, - { label: 'Action', onClick: () => {} }, - ], - [ - { label: 'Action', onClick: () => {} }, - { - label: ( - - - Action - - ), - onClick: () => {}, - }, - { - label: ( - - Action - - - ), - onClick: () => {}, - }, - ], - ]; - - return ( - - - {/* Annotations on top */} - - - - - - {/* Annotations on right side */} - - - - - - {/* Annotations below */} - - - - - - {/* Empty boxes for grid spacing */} - - - - {/* Hidden reference elements for Diagram annotations */} - - - - - - - - {/* Menu component */} - e.preventDefault()} - > - - Menu - - - } - items={items} - open - tabIndex={-1} - dropProps={{ - id: 'drop-container', - onClickOutside: () => {}, - onEsc: () => {}, - style: { pointerEvents: 'none' }, - }} - messages={{ - openMenu: 'Open Menu', - }} - /> - {/* Hidden divider marker for annotation */} - - - - - - ); -}; diff --git a/aries-site/src/examples/components/menu/index.js b/aries-site/src/examples/components/menu/index.js index 4e5f95d484..b8bf40e7b1 100644 --- a/aries-site/src/examples/components/menu/index.js +++ b/aries-site/src/examples/components/menu/index.js @@ -1,4 +1,3 @@ -export * from './MenuAnatomy'; export * from './MenuBatchActionsExample'; export * from './MenuDangerousExample'; export * from './MenuDisabledExample'; diff --git a/aries-site/src/pages/components/menu.mdx b/aries-site/src/pages/components/menu.mdx index dd366fe85e..117ae04a3c 100644 --- a/aries-site/src/pages/components/menu.mdx +++ b/aries-site/src/pages/components/menu.mdx @@ -1,7 +1,6 @@ import { Box } from 'grommet'; import { AccessibilitySection, BestPracticeGroup, Example } from '../../layouts'; import { - MenuAnatomy, MenuExample, MenuBatchActionsExample, MenuDangerousExample, @@ -73,23 +72,7 @@ For more details on grouping and ordering, see [Organizing menu items](#organizi ## Anatomy - - - - -| Label | Region | Purpose | Required | Notes | -| :---: | ------------------- | ---------------------------------------------------------------------------------- | :------: | ------------------------------------------------------------------------------------------------------------------------------------------ | -| **1** | **Menu Button** | Opens the menu when clicked. | Required | Can include a label, icon, or both. | -| **1a** | **Button label** | Describes the menu's function or the category of actions. | Optional | -- | -| **1b** | **Button icon** | Provides a visual cue that the menu can be opened or closed. | Optional | Typically an arrow or chevron to indicate expand/collapse. For icon-only menus, the icon represents the menu's purpose or the type of actions (e.g., settings gear, overflow dots). | -| **2** | **Drop container** | Holds and displays the list of menu items when the menu is expanded. | Required | -- | -| **3** | **Menu item** | Represents an individual action within the menu. | Required | Items should be organized logically (see [Organizing Menu Items](#organizing-menu-items)). | -| **3a** | **Item label** | Communicates the specific action to the user. | Required | -- | -| **3b** | **Item icon** | Provides a quick visual reference for the action. | Optional | -- | -| **4** | **Divider** | Separates groups of related actions. | Optional | -- | +[Placeholder space for the anatomy] ## Types From 34d9c839a4015c2563967b91281551ce30fdfde5 Mon Sep 17 00:00:00 2001 From: sulaymon333 Date: Tue, 27 Jan 2026 13:12:10 +0000 Subject: [PATCH 16/28] implement task #5726 for Types section --- .../components/menu/MenuDefaultExample.js | 12 ++++++ .../components/menu/MenuIconExample.js | 37 +++++++------------ .../components/menu/MenuToolbarExample.js | 12 ++++++ .../src/examples/components/menu/index.js | 2 + aries-site/src/pages/components/menu.mdx | 8 ++-- 5 files changed, 44 insertions(+), 27 deletions(-) create mode 100644 aries-site/src/examples/components/menu/MenuDefaultExample.js create mode 100644 aries-site/src/examples/components/menu/MenuToolbarExample.js diff --git a/aries-site/src/examples/components/menu/MenuDefaultExample.js b/aries-site/src/examples/components/menu/MenuDefaultExample.js new file mode 100644 index 0000000000..788b2ef47f --- /dev/null +++ b/aries-site/src/examples/components/menu/MenuDefaultExample.js @@ -0,0 +1,12 @@ +import React from 'react'; +import { Box, Menu } from 'grommet'; + +export const MenuDefaultExample = () => { + const items = [{ label: 'Action' }, { label: 'Action' }, { label: 'Action' }]; + + return ( + + + + ); +}; diff --git a/aries-site/src/examples/components/menu/MenuIconExample.js b/aries-site/src/examples/components/menu/MenuIconExample.js index 96801fe8eb..0a410ccf01 100644 --- a/aries-site/src/examples/components/menu/MenuIconExample.js +++ b/aries-site/src/examples/components/menu/MenuIconExample.js @@ -1,31 +1,20 @@ import React from 'react'; -import { Box, List, Menu } from 'grommet'; -import { More } from '@hpe-design/icons-grommet'; +import { Grid, Menu } from 'grommet'; +import { More, Settings } from '@hpe-design/icons-grommet'; export const MenuIconExample = () => { - const data = ['User 1', 'User 2', 'User 3']; + const items = [{ label: 'Action' }, { label: 'Action' }, { label: 'Action' }]; return ( - - ( - - } - hoverIndicator - items={[{ label: 'Deactivate' }, { label: 'Suspend' }]} - /> - - )} - > - {(datum, index) => ( - - {datum} - - )} - - + + } hoverIndicator items={items} /> + } hoverIndicator items={items} /> + ); }; diff --git a/aries-site/src/examples/components/menu/MenuToolbarExample.js b/aries-site/src/examples/components/menu/MenuToolbarExample.js new file mode 100644 index 0000000000..260afc0d5a --- /dev/null +++ b/aries-site/src/examples/components/menu/MenuToolbarExample.js @@ -0,0 +1,12 @@ +import React from 'react'; +import { Box, Menu } from 'grommet'; + +export const MenuToolbarExample = () => { + const items = [{ label: 'Action' }, { label: 'Action' }, { label: 'Action' }]; + + return ( + + + + ); +}; diff --git a/aries-site/src/examples/components/menu/index.js b/aries-site/src/examples/components/menu/index.js index b8bf40e7b1..dd19223f57 100644 --- a/aries-site/src/examples/components/menu/index.js +++ b/aries-site/src/examples/components/menu/index.js @@ -1,8 +1,10 @@ export * from './MenuBatchActionsExample'; export * from './MenuDangerousExample'; +export * from './MenuDefaultExample'; export * from './MenuDisabledExample'; export * from './MenuExample'; export * from './MenuGroupingExample'; export * from './MenuHeaderExample'; export * from './MenuIconExample'; export * from './MenuRecordActionsExample'; +export * from './MenuToolbarExample'; diff --git a/aries-site/src/pages/components/menu.mdx b/aries-site/src/pages/components/menu.mdx index 117ae04a3c..f59d44183b 100644 --- a/aries-site/src/pages/components/menu.mdx +++ b/aries-site/src/pages/components/menu.mdx @@ -4,11 +4,13 @@ import { MenuExample, MenuBatchActionsExample, MenuDangerousExample, + MenuDefaultExample, MenuDisabledExample, MenuGroupingExample, MenuHeaderExample, MenuIconExample, MenuRecordActionsExample, + MenuToolbarExample, ToolbarButtonExample, } from '../../examples'; @@ -79,17 +81,17 @@ For more details on grouping and ordering, see [Organizing menu items](#organizi ### Default A standard dropdown menu that displays a clear, text-based list of actions when triggered. -[Placeholder space for the example] + ### Icon only A compact menu represented by an icon, such as “more” or “settings”, ideal for space-constrained layouts where actions are easily recognized visually. -[Placeholder space for the example] + ### Toolbar A menu styled to integrate seamlessly with a toolbar. -[Placeholder space for the example] + ## Organizing menu items From d45073daa6ef103e04033359a258ed199a37837f Mon Sep 17 00:00:00 2001 From: sulaymon333 Date: Tue, 27 Jan 2026 17:12:42 +0000 Subject: [PATCH 17/28] fix #5727 for menu page --- .../components/menu/MenuDangerousExample.js | 5 +- .../components/menu/MenuDefaultExample.js | 4 +- .../components/menu/MenuDividersExample.js | 37 ++++++++++ .../components/menu/MenuIconExample.js | 12 +--- .../components/menu/MenuItemCountExample.js | 36 ++++++++++ .../components/menu/MenuSelectValueExample.js | 36 ++++++++++ .../components/menu/MenuToolbarExample.js | 4 +- .../src/examples/components/menu/index.js | 3 + aries-site/src/pages/components/menu.mdx | 72 +++++++++++++++---- 9 files changed, 180 insertions(+), 29 deletions(-) create mode 100644 aries-site/src/examples/components/menu/MenuDividersExample.js create mode 100644 aries-site/src/examples/components/menu/MenuItemCountExample.js create mode 100644 aries-site/src/examples/components/menu/MenuSelectValueExample.js diff --git a/aries-site/src/examples/components/menu/MenuDangerousExample.js b/aries-site/src/examples/components/menu/MenuDangerousExample.js index 0f2e060653..d51a297708 100644 --- a/aries-site/src/examples/components/menu/MenuDangerousExample.js +++ b/aries-site/src/examples/components/menu/MenuDangerousExample.js @@ -9,9 +9,8 @@ export const MenuDangerousExample = ({ bestPractice = true }) => { const [toast, setToast] = useState(false); const items = [ - { label: 'View details', onClick: () => {} }, - { label: 'Edit profile', onClick: () => {} }, - { label: 'Apply blueprint', onClick: () => {} }, + { label: 'Edit' }, + { label: 'View servers' }, { label: 'Delete', onClick: () => { diff --git a/aries-site/src/examples/components/menu/MenuDefaultExample.js b/aries-site/src/examples/components/menu/MenuDefaultExample.js index 788b2ef47f..8ec6f08650 100644 --- a/aries-site/src/examples/components/menu/MenuDefaultExample.js +++ b/aries-site/src/examples/components/menu/MenuDefaultExample.js @@ -5,8 +5,8 @@ export const MenuDefaultExample = () => { const items = [{ label: 'Action' }, { label: 'Action' }, { label: 'Action' }]; return ( - - + + ); }; diff --git a/aries-site/src/examples/components/menu/MenuDividersExample.js b/aries-site/src/examples/components/menu/MenuDividersExample.js new file mode 100644 index 0000000000..eb2489a975 --- /dev/null +++ b/aries-site/src/examples/components/menu/MenuDividersExample.js @@ -0,0 +1,37 @@ +import PropTypes from 'prop-types'; +import { Menu } from 'grommet'; + +export const MenuDividersExample = ({ bestPractice = true }) => ( + +); + +MenuDividersExample.propTypes = { + bestPractice: PropTypes.bool, +}; diff --git a/aries-site/src/examples/components/menu/MenuIconExample.js b/aries-site/src/examples/components/menu/MenuIconExample.js index 0a410ccf01..b0410a1158 100644 --- a/aries-site/src/examples/components/menu/MenuIconExample.js +++ b/aries-site/src/examples/components/menu/MenuIconExample.js @@ -6,15 +6,9 @@ export const MenuIconExample = () => { const items = [{ label: 'Action' }, { label: 'Action' }, { label: 'Action' }]; return ( - - } hoverIndicator items={items} /> - } hoverIndicator items={items} /> + + } hoverIndicator items={items} /> + } hoverIndicator items={items} /> ); }; diff --git a/aries-site/src/examples/components/menu/MenuItemCountExample.js b/aries-site/src/examples/components/menu/MenuItemCountExample.js new file mode 100644 index 0000000000..e9eab16cf6 --- /dev/null +++ b/aries-site/src/examples/components/menu/MenuItemCountExample.js @@ -0,0 +1,36 @@ +import PropTypes from 'prop-types'; +import { Menu } from 'grommet'; + +export const MenuItemCountExample = ({ bestPractice = true }) => ( + +); + +MenuItemCountExample.propTypes = { + bestPractice: PropTypes.bool, +}; diff --git a/aries-site/src/examples/components/menu/MenuSelectValueExample.js b/aries-site/src/examples/components/menu/MenuSelectValueExample.js new file mode 100644 index 0000000000..51fca942af --- /dev/null +++ b/aries-site/src/examples/components/menu/MenuSelectValueExample.js @@ -0,0 +1,36 @@ +import PropTypes from 'prop-types'; +import { Menu } from 'grommet'; + +export const MenuSelectValueExample = ({ bestPractice = true }) => { + return ( + + ); +}; + +MenuSelectValueExample.propTypes = { + bestPractice: PropTypes.bool, +}; diff --git a/aries-site/src/examples/components/menu/MenuToolbarExample.js b/aries-site/src/examples/components/menu/MenuToolbarExample.js index 260afc0d5a..bb70fc74d4 100644 --- a/aries-site/src/examples/components/menu/MenuToolbarExample.js +++ b/aries-site/src/examples/components/menu/MenuToolbarExample.js @@ -5,8 +5,8 @@ export const MenuToolbarExample = () => { const items = [{ label: 'Action' }, { label: 'Action' }, { label: 'Action' }]; return ( - - + + ); }; diff --git a/aries-site/src/examples/components/menu/index.js b/aries-site/src/examples/components/menu/index.js index dd19223f57..d4e739434a 100644 --- a/aries-site/src/examples/components/menu/index.js +++ b/aries-site/src/examples/components/menu/index.js @@ -2,9 +2,12 @@ export * from './MenuBatchActionsExample'; export * from './MenuDangerousExample'; export * from './MenuDefaultExample'; export * from './MenuDisabledExample'; +export * from './MenuDividersExample'; export * from './MenuExample'; export * from './MenuGroupingExample'; export * from './MenuHeaderExample'; export * from './MenuIconExample'; +export * from './MenuItemCountExample'; export * from './MenuRecordActionsExample'; +export * from './MenuSelectValueExample'; export * from './MenuToolbarExample'; diff --git a/aries-site/src/pages/components/menu.mdx b/aries-site/src/pages/components/menu.mdx index f59d44183b..935693f80e 100644 --- a/aries-site/src/pages/components/menu.mdx +++ b/aries-site/src/pages/components/menu.mdx @@ -1,4 +1,4 @@ -import { Box } from 'grommet'; +import { Box, Paragraph, Anchor } from 'grommet'; import { AccessibilitySection, BestPracticeGroup, Example } from '../../layouts'; import { MenuExample, @@ -6,10 +6,13 @@ import { MenuDangerousExample, MenuDefaultExample, MenuDisabledExample, + MenuDividersExample, MenuGroupingExample, MenuHeaderExample, MenuIconExample, + MenuItemCountExample, MenuRecordActionsExample, + MenuSelectValueExample, MenuToolbarExample, ToolbarButtonExample, } from '../../examples'; @@ -135,34 +138,52 @@ Actions enabling a user to share or consume data related to a resource. ## Dos and Do nots -[Placeholder for select DO AND DONT] -[Placeholder for divider DO AND DONT] -[Placeholder for too many items DO AND DONT] + + + {/* Box allows menu to be presented with drop open, overriding Example align/justify center */} + + + + + Don't use menu to select a value. Use instead., + }} + > + {/* Box allows menu to be presented with drop open, overriding Example align/justify center */} + + + + + {/* Box allows menu to be presented with drop open, overriding Example align/justify center */} - - + + {/* Box allows menu to be presented with drop open, overriding Example align/justify center */} - - + + @@ -193,6 +214,31 @@ Actions enabling a user to share or consume data related to a resource. + + + {/* Box allows menu to be presented with drop open, overriding Example align/justify center */} + + + + + + {/* Box allows menu to be presented with drop open, overriding Example align/justify center */} + + + + + + ## Content guidelines - Give the menu a clear title. Instead of labeling the menu as "Menu", provide a name that conveys its purpose. For example, a label of "Account information" would be appropriate if the menu items associated were actions such as "Change username" or "Reset password". - Keep labels short. Using a simple, concise label for menu items, such as "Settings" or "Logout", helps the user easily understand the action that will be performed when they click. From 0fc53e335fb16f842f2ef00cfe516e3231824196 Mon Sep 17 00:00:00 2001 From: sulaymon333 Date: Fri, 30 Jan 2026 10:45:25 +0000 Subject: [PATCH 18/28] revert commits to main PR --- .../components/menu/MenuDangerousExample.js | 5 +- .../components/menu/MenuDefaultExample.js | 12 --- .../components/menu/MenuDividersExample.js | 37 --------- .../components/menu/MenuIconExample.js | 31 +++++-- .../components/menu/MenuItemCountExample.js | 36 --------- .../components/menu/MenuSelectValueExample.js | 36 --------- .../components/menu/MenuToolbarExample.js | 12 --- .../src/examples/components/menu/index.js | 5 -- aries-site/src/pages/components/menu.mdx | 80 ++++--------------- 9 files changed, 43 insertions(+), 211 deletions(-) delete mode 100644 aries-site/src/examples/components/menu/MenuDefaultExample.js delete mode 100644 aries-site/src/examples/components/menu/MenuDividersExample.js delete mode 100644 aries-site/src/examples/components/menu/MenuItemCountExample.js delete mode 100644 aries-site/src/examples/components/menu/MenuSelectValueExample.js delete mode 100644 aries-site/src/examples/components/menu/MenuToolbarExample.js diff --git a/aries-site/src/examples/components/menu/MenuDangerousExample.js b/aries-site/src/examples/components/menu/MenuDangerousExample.js index d51a297708..0f2e060653 100644 --- a/aries-site/src/examples/components/menu/MenuDangerousExample.js +++ b/aries-site/src/examples/components/menu/MenuDangerousExample.js @@ -9,8 +9,9 @@ export const MenuDangerousExample = ({ bestPractice = true }) => { const [toast, setToast] = useState(false); const items = [ - { label: 'Edit' }, - { label: 'View servers' }, + { label: 'View details', onClick: () => {} }, + { label: 'Edit profile', onClick: () => {} }, + { label: 'Apply blueprint', onClick: () => {} }, { label: 'Delete', onClick: () => { diff --git a/aries-site/src/examples/components/menu/MenuDefaultExample.js b/aries-site/src/examples/components/menu/MenuDefaultExample.js deleted file mode 100644 index 8ec6f08650..0000000000 --- a/aries-site/src/examples/components/menu/MenuDefaultExample.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import { Box, Menu } from 'grommet'; - -export const MenuDefaultExample = () => { - const items = [{ label: 'Action' }, { label: 'Action' }, { label: 'Action' }]; - - return ( - - - - ); -}; diff --git a/aries-site/src/examples/components/menu/MenuDividersExample.js b/aries-site/src/examples/components/menu/MenuDividersExample.js deleted file mode 100644 index eb2489a975..0000000000 --- a/aries-site/src/examples/components/menu/MenuDividersExample.js +++ /dev/null @@ -1,37 +0,0 @@ -import PropTypes from 'prop-types'; -import { Menu } from 'grommet'; - -export const MenuDividersExample = ({ bestPractice = true }) => ( - -); - -MenuDividersExample.propTypes = { - bestPractice: PropTypes.bool, -}; diff --git a/aries-site/src/examples/components/menu/MenuIconExample.js b/aries-site/src/examples/components/menu/MenuIconExample.js index b0410a1158..96801fe8eb 100644 --- a/aries-site/src/examples/components/menu/MenuIconExample.js +++ b/aries-site/src/examples/components/menu/MenuIconExample.js @@ -1,14 +1,31 @@ import React from 'react'; -import { Grid, Menu } from 'grommet'; -import { More, Settings } from '@hpe-design/icons-grommet'; +import { Box, List, Menu } from 'grommet'; +import { More } from '@hpe-design/icons-grommet'; export const MenuIconExample = () => { - const items = [{ label: 'Action' }, { label: 'Action' }, { label: 'Action' }]; + const data = ['User 1', 'User 2', 'User 3']; return ( - - } hoverIndicator items={items} /> - } hoverIndicator items={items} /> - + + ( + + } + hoverIndicator + items={[{ label: 'Deactivate' }, { label: 'Suspend' }]} + /> + + )} + > + {(datum, index) => ( + + {datum} + + )} + + ); }; diff --git a/aries-site/src/examples/components/menu/MenuItemCountExample.js b/aries-site/src/examples/components/menu/MenuItemCountExample.js deleted file mode 100644 index e9eab16cf6..0000000000 --- a/aries-site/src/examples/components/menu/MenuItemCountExample.js +++ /dev/null @@ -1,36 +0,0 @@ -import PropTypes from 'prop-types'; -import { Menu } from 'grommet'; - -export const MenuItemCountExample = ({ bestPractice = true }) => ( - -); - -MenuItemCountExample.propTypes = { - bestPractice: PropTypes.bool, -}; diff --git a/aries-site/src/examples/components/menu/MenuSelectValueExample.js b/aries-site/src/examples/components/menu/MenuSelectValueExample.js deleted file mode 100644 index 51fca942af..0000000000 --- a/aries-site/src/examples/components/menu/MenuSelectValueExample.js +++ /dev/null @@ -1,36 +0,0 @@ -import PropTypes from 'prop-types'; -import { Menu } from 'grommet'; - -export const MenuSelectValueExample = ({ bestPractice = true }) => { - return ( - - ); -}; - -MenuSelectValueExample.propTypes = { - bestPractice: PropTypes.bool, -}; diff --git a/aries-site/src/examples/components/menu/MenuToolbarExample.js b/aries-site/src/examples/components/menu/MenuToolbarExample.js deleted file mode 100644 index bb70fc74d4..0000000000 --- a/aries-site/src/examples/components/menu/MenuToolbarExample.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import { Box, Menu } from 'grommet'; - -export const MenuToolbarExample = () => { - const items = [{ label: 'Action' }, { label: 'Action' }, { label: 'Action' }]; - - return ( - - - - ); -}; diff --git a/aries-site/src/examples/components/menu/index.js b/aries-site/src/examples/components/menu/index.js index d4e739434a..b8bf40e7b1 100644 --- a/aries-site/src/examples/components/menu/index.js +++ b/aries-site/src/examples/components/menu/index.js @@ -1,13 +1,8 @@ export * from './MenuBatchActionsExample'; export * from './MenuDangerousExample'; -export * from './MenuDefaultExample'; export * from './MenuDisabledExample'; -export * from './MenuDividersExample'; export * from './MenuExample'; export * from './MenuGroupingExample'; export * from './MenuHeaderExample'; export * from './MenuIconExample'; -export * from './MenuItemCountExample'; export * from './MenuRecordActionsExample'; -export * from './MenuSelectValueExample'; -export * from './MenuToolbarExample'; diff --git a/aries-site/src/pages/components/menu.mdx b/aries-site/src/pages/components/menu.mdx index 935693f80e..117ae04a3c 100644 --- a/aries-site/src/pages/components/menu.mdx +++ b/aries-site/src/pages/components/menu.mdx @@ -1,19 +1,14 @@ -import { Box, Paragraph, Anchor } from 'grommet'; +import { Box } from 'grommet'; import { AccessibilitySection, BestPracticeGroup, Example } from '../../layouts'; import { MenuExample, MenuBatchActionsExample, MenuDangerousExample, - MenuDefaultExample, MenuDisabledExample, - MenuDividersExample, MenuGroupingExample, MenuHeaderExample, MenuIconExample, - MenuItemCountExample, MenuRecordActionsExample, - MenuSelectValueExample, - MenuToolbarExample, ToolbarButtonExample, } from '../../examples'; @@ -84,17 +79,17 @@ For more details on grouping and ordering, see [Organizing menu items](#organizi ### Default A standard dropdown menu that displays a clear, text-based list of actions when triggered. - +[Placeholder space for the example] ### Icon only A compact menu represented by an icon, such as “more” or “settings”, ideal for space-constrained layouts where actions are easily recognized visually. - +[Placeholder space for the example] ### Toolbar A menu styled to integrate seamlessly with a toolbar. - +[Placeholder space for the example] ## Organizing menu items @@ -138,52 +133,34 @@ Actions enabling a user to share or consume data related to a resource. ## Dos and Do nots - - - {/* Box allows menu to be presented with drop open, overriding Example align/justify center */} - - - - - Don't use menu to select a value. Use instead., - }} - > - {/* Box allows menu to be presented with drop open, overriding Example align/justify center */} - - - - - +[Placeholder for select DO AND DONT] +[Placeholder for divider DO AND DONT] +[Placeholder for too many items DO AND DONT] {/* Box allows menu to be presented with drop open, overriding Example align/justify center */} - - + + {/* Box allows menu to be presented with drop open, overriding Example align/justify center */} - - + + @@ -214,31 +191,6 @@ Actions enabling a user to share or consume data related to a resource. - - - {/* Box allows menu to be presented with drop open, overriding Example align/justify center */} - - - - - - {/* Box allows menu to be presented with drop open, overriding Example align/justify center */} - - - - - - ## Content guidelines - Give the menu a clear title. Instead of labeling the menu as "Menu", provide a name that conveys its purpose. For example, a label of "Account information" would be appropriate if the menu items associated were actions such as "Change username" or "Reset password". - Keep labels short. Using a simple, concise label for menu items, such as "Settings" or "Logout", helps the user easily understand the action that will be performed when they click. From 13150670959c616eaa1af188ca50989d9b1dba48 Mon Sep 17 00:00:00 2001 From: Lucas Speyer Date: Thu, 5 Feb 2026 16:09:04 -0300 Subject: [PATCH 19/28] Menu anatomy (#5713) * 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 * adjusting pointers Signed-off-by: Lucas Speyer * adjustments Signed-off-by: Lucas Speyer * [Docs] - Menu anatomy proposed refactoring (#5728) * Proposed implementation cleanup and refactoring * Updated markdown * Fixed spread Signed-off-by: Lucas Speyer * Adding dotted lines and adjusting targets for clarity Signed-off-by: Lucas Speyer * adjusting pointers Signed-off-by: luketa8 * chore: trigger preview Signed-off-by: luketa8 * removing duplicate line * adjusting menu button * adjusting menu button --------- Signed-off-by: Lucas Speyer Signed-off-by: luketa8 Co-authored-by: Matthew Glissmann --- .../examples/components/menu/MenuAnatomy.js | 210 ++++++++++++++++++ .../src/examples/components/menu/index.js | 1 + aries-site/src/pages/components/menu.mdx | 20 +- 3 files changed, 230 insertions(+), 1 deletion(-) create mode 100644 aries-site/src/examples/components/menu/MenuAnatomy.js diff --git a/aries-site/src/examples/components/menu/MenuAnatomy.js b/aries-site/src/examples/components/menu/MenuAnatomy.js new file mode 100644 index 0000000000..70ab6a1bdd --- /dev/null +++ b/aries-site/src/examples/components/menu/MenuAnatomy.js @@ -0,0 +1,210 @@ +import React, { useContext } from 'react'; +import { Box, Button, Grid, Diagram, Stack, ThemeContext } from 'grommet'; +import { Add } from '@hpe-design/icons-grommet'; +import { Annotation } from '../../../layouts'; + +const color = 'border'; +const thickness = 'hair'; +const type = 'direct'; + +const connections = [ + { + anchor: 'horizontal', + type, + color, + thickness, + fromTarget: '1', + toTarget: 'menu-button', + }, + { + anchor: 'vertical', + type, + color, + thickness, + fromTarget: '1a', + toTarget: 'menu-label', + }, + { + anchor: 'vertical', + type, + color, + thickness, + fromTarget: '1b', + toTarget: 'menu-icon', + }, + { + anchor: 'horizontal', + type, + color, + thickness, + fromTarget: '2', + toTarget: 'drop-container', + }, + { + anchor: 'horizontal', + type, + color, + thickness, + fromTarget: '3', + toTarget: 'menu-item-target', + }, + { + anchor: 'vertical', + type, + color, + thickness, + fromTarget: '3a', + toTarget: 'item-label', + }, + { + anchor: 'vertical', + type, + color, + thickness, + fromTarget: '3b', + toTarget: 'item-icon', + }, + { + anchor: 'horizontal', + type, + color, + thickness, + fromTarget: '4', + toTarget: 'divider-target', + }, +]; + +const AnatomyGrid = ({ ...rest }) => ( + +); + +const MenuItem = ({ ...rest }) => { + const theme = useContext(ThemeContext); + + return ( +