Skip to content

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

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

Supamiu wants to merge 22 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.

This branch was successfully deployed

1 active deployment
staging — 7a83c612 Deployed Sep 28, 2026 by Supamiu via Deploy Lucca Front staging #1333
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