Skip to content

feat(select): open panel as dialog on smaller screens - #5313

Open
Supamiu wants to merge 15 commits into
release/22.1from
feat/small-display-select
Open

Supamiu wants to merge 15 commits into
release/22.1from
feat/small-display-select

Conversation

@Supamiu

@Supamiu Supamiu commented Sep 7, 2026

Copy link
Copy Markdown
Contributor

Description

Select now opens in a dialog when display it too small.

Partially made with Claude, especially for the base structure, as it's basically "reuse what I did for filter pill but on a dialog".

I opened a draft so we can check for conflicts and have a public storybook to play with


Optionally, technical or more in-depth description for reviewers.
Keep an empty line under your text, as well as the 5 lines that follow it.


Supamiu and others added 2 commits August 31, 2026 16:42
Below the `S` breakpoint (800px), simple, multi and tree selects open their
panel as a full-width bottom sheet pinned to the viewport edge (solid backdrop,
blocked page scroll, slide-up) instead of a popover anchored to the field.

Mirroring filter pills, the sheet embeds its own search input, with the field
label as a title, a close button and a leading search icon, while the field
stays in the form, covered by the backdrop. Filter-pill selects keep their
existing overlay and desktop (>= S) is unchanged.

Closes #2495

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@Supamiu Supamiu added this to the 22.1 milestone Sep 7, 2026
@Supamiu Supamiu added 🔖✨ Feature New feature (even a very small one) 🤖 Produced by AI Some code was produced by AI. (Autocompleted code doesn't require to be labeled) labels Sep 7, 2026
@Supamiu Supamiu changed the title Feat/small display select feat(select): open panel as dialog on smaller screens Sep 7, 2026
@github-actions

github-actions Bot commented Sep 8, 2026

Copy link
Copy Markdown

🚀 Storybook preview deployed: https://pub-dc6d99acd6874e2aaff6219dd8a13ae2.r2.dev/PR-5313/index.html

@c-3po c-3po Bot added the 📖 Documentation changes Requires a Prisme update label Sep 9, 2026
@c-3po c-3po Bot added the 🔨 Technical Doesn't affect the output (refactor, dependencies update, cleaning, etc.) label Sep 10, 2026
@Supamiu
Supamiu marked this pull request as ready for review September 10, 2026 13:20
@Supamiu
Supamiu requested review from a team as code owners September 10, 2026 13:20
JeSuisCharlie1
JeSuisCharlie1 previously approved these changes Sep 14, 2026
Comment on lines +74 to +75
style.setProperty('--components-dialog-visibleViewportHeight', `${viewport.height}px`);
style.setProperty('--components-dialog-visibleViewportBottomOffset', `${window.innerHeight - viewport.height - viewport.offsetTop}px`);

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Wouldn't this affect existing dialogs too? Say we have a select inside a dialog, because it's a generic var, I assume it's used by every dialog.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I'm pushing one more commit.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

📖 Documentation changes Requires a Prisme update 🔖✨ Feature New feature (even a very small one) 🔨 Technical Doesn't affect the output (refactor, dependencies update, cleaning, etc.) 🤖 Produced by AI Some code was produced by AI. (Autocompleted code doesn't require to be labeled)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants