Prerequisites
Proposal
As a user,
I want to access my applications through a customizable menu that supports both grid and list layouts,
So that I can view, organize, and launch my available apps in a format that makes sense for my workflow.
Acceptance Criteria
- Layout & Views
Grid View: The menu must display items in a multi-column layout (ideally implemented via CSS Grid for strict column alignment).
List View: The menu must display items in a single-column vertical list.
Grouping: In List view, items must be groupable with a "Title," an optional "Subtitle," and a horizontal divider. Group headers should be visually clustered closer to the items beneath them than the divider above them.
Configurable Dividers: The Grid view must support optional, configurable horizontal dividers to separate groups without breaking the column structure.
- Sizing & Scrolling
Max Height Constraint: The menu component must have a maximum fixed height of 568px by default.
Custom Scrollbar: When content exceeds the height of the component , a vertical scrollbar must appear.
- Item Display & Truncation
Logo Constraints: Application icons/logos must be rendered using a dedicated Logo component with strictly enforced bounding boxes (e.g., width, height, and object-fit: contain) so varying aspect ratios do not distort the grid/list rows.
Text Truncation: Long application names (e.g., "Works Manager") must truncate gracefully with an ellipsis (...) to prevent layout breaking.
Tooltips: Any truncated text must reveal the full application name on hover via a native tooltip or custom UI tooltip.
- Interactivity & Customization (Reordering)
Drag & Drop: Users must be able to change the order of the apps via drag-and-drop in both views.
Visual Cues: Draggable items must show a grab cursor on hover. While being dragged, the cursor must change to grabbing and the active item should display a subtle drop-shadow to indicate elevation.
- Accessibility (a11y)
Screen Readers: Truncated items must include aria-labels containing the full application name.
Keyboard Reordering: Reordering must be fully keyboard accessible (e.g., focus via Tab, select via Space/Enter, move via Arrow Keys, and drop via Space/Enter).
https://www.figma.com/design/y9H5ucQKBjzI8JLuVrGcb3/Modus-2.0---Atomic-Design-System?node-id=16700-180008&p=f&m=dev
Motivation and context
No response
What is the issue regarding?
@trimble-oss/modus-wc
Priority
Medium
What product/project are you using Modus Components for?
Modus
What is your team/division name?
Modus
Are you willing to contribute?
None
Are you using Modus Web Components in production?
No response
Prerequisites
Proposal
As a user,
I want to access my applications through a customizable menu that supports both grid and list layouts,
So that I can view, organize, and launch my available apps in a format that makes sense for my workflow.
Acceptance Criteria
Grid View: The menu must display items in a multi-column layout (ideally implemented via CSS Grid for strict column alignment).
List View: The menu must display items in a single-column vertical list.
Grouping: In List view, items must be groupable with a "Title," an optional "Subtitle," and a horizontal divider. Group headers should be visually clustered closer to the items beneath them than the divider above them.
Configurable Dividers: The Grid view must support optional, configurable horizontal dividers to separate groups without breaking the column structure.
Max Height Constraint: The menu component must have a maximum fixed height of 568px by default.
Custom Scrollbar: When content exceeds the height of the component , a vertical scrollbar must appear.
Logo Constraints: Application icons/logos must be rendered using a dedicated Logo component with strictly enforced bounding boxes (e.g., width, height, and object-fit: contain) so varying aspect ratios do not distort the grid/list rows.
Text Truncation: Long application names (e.g., "Works Manager") must truncate gracefully with an ellipsis (...) to prevent layout breaking.
Tooltips: Any truncated text must reveal the full application name on hover via a native tooltip or custom UI tooltip.
Drag & Drop: Users must be able to change the order of the apps via drag-and-drop in both views.
Visual Cues: Draggable items must show a grab cursor on hover. While being dragged, the cursor must change to grabbing and the active item should display a subtle drop-shadow to indicate elevation.
Screen Readers: Truncated items must include aria-labels containing the full application name.
Keyboard Reordering: Reordering must be fully keyboard accessible (e.g., focus via Tab, select via Space/Enter, move via Arrow Keys, and drop via Space/Enter).
https://www.figma.com/design/y9H5ucQKBjzI8JLuVrGcb3/Modus-2.0---Atomic-Design-System?node-id=16700-180008&p=f&m=dev
Motivation and context
No response
What is the issue regarding?
@trimble-oss/modus-wc
Priority
Medium
What product/project are you using Modus Components for?
Modus
What is your team/division name?
Modus
Are you willing to contribute?
None
Are you using Modus Web Components in production?
No response