adobe / adobe/spectrum-web-components

[Feat]: Add a max-height css property for sp-action-menu / sp-menu

Open
#4,785 1 comment 0 reactions 0 assignees View on GitHub
Component:Action menu Component:Menu Component:Popover Feature needs-jira-ticket
Dominant language
TypeScript
Stars
1.5k
Forks
262
Avg merge
3d 10h
Merged PRs (30d)
68

Description

### Code of conduct

- [X] I agree to follow this project's code of conduct.

### Impacted component(s)

sp-popover

### Description of the requested feature

When using the `sp-action-menu`, there is no accessible way via css property to limit the height of the `sp-menu`.
We would like to add a `max-height` option in cases where we know a user could potentially have hundreds of options to select from. In this scenario, the menu fills the entire height of the available screen which can block/temporarily hide other important, informative and interactive UI.

### Mockups or screenshots

![Screenshot 2024-09-23 at 3 47 28 PM](https://github.com/user-attachments/assets/cfd508dc-1f2e-4a6b-a314-ddce87d410a6)

### Implementation notes or ideas

We have already investigated the `sp-combobox` component and it is not an applicable solution for us at this time. The design implementation is an icon that a user clicks on to open the menu. Then the menu opens with an option to either create a library or save to an existing library. Users could have many libraries which are dynamically fetched and rendered when a user scrolls to the end of the menu.

Contributor guide

Open the contributing guide

Research direction

Start by tracing how sp-action-menu and sp-menu use sp-popover, focusing on where menu sizing is defined. Confirm the intended max-height behavior for dynamically rendered options, then add coverage for a constrained menu and verify that the menu remains usable when many options are present.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.