Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RangeControl: add size prop #64536

Open
jameskoster opened this issue Aug 15, 2024 · 2 comments
Open

RangeControl: add size prop #64536

jameskoster opened this issue Aug 15, 2024 · 2 comments
Labels
Design System Issues related to the system of combining components according to best practices. Needs Dev Ready for, and needs developer efforts [Package] Components /packages/components [Type] Enhancement A suggestion for improvement.

Comments

@jameskoster
Copy link
Contributor

Currently the slider in RangeControl renders at 30px height, and there's no way to adjust that outside of manual overrides. In cases where a text field is included this isn't a problem – the container grows to accommodate the text field height. But when there's no text field it means RangeControl will not align with the standard 40px, 32px, 24px sizing convention.

Ideally this is updated so that consumers can specify a size, like many other components, as outlined in #46734

@jameskoster jameskoster added [Type] Enhancement A suggestion for improvement. Needs Dev Ready for, and needs developer efforts [Package] Components /packages/components labels Aug 15, 2024
@t-hamano
Copy link
Contributor

By adding the __next40pxDefaultSize prop, it seems to change to 40px size.

https://wordpress.github.io/gutenberg/?path=/story/components-rangecontrol--default&args=__next40pxDefaultSize:!true;withInputField:!false

image

Does this mean we also need 24px or 32px variations?

@jameskoster
Copy link
Contributor Author

Oh neat, I didn't notice that documented in Storybook.

Does this mean we also need 24px or 32px variations?

Yes, I think it still makes sense to offer the same size options as other inputs / buttons.

@jameskoster jameskoster added the Design System Issues related to the system of combining components according to best practices. label Sep 24, 2024
@auareyou auareyou moved this to Inbox 📥 in Design systems — Backlog Oct 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Design System Issues related to the system of combining components according to best practices. Needs Dev Ready for, and needs developer efforts [Package] Components /packages/components [Type] Enhancement A suggestion for improvement.
Projects
Status: 🔦 Needs triage
Development

No branches or pull requests

2 participants