Components: ToggleControl text overflows when it has a long label#45962
Components: ToggleControl text overflows when it has a long label#45962mirka merged 5 commits intoWordPress:trunkfrom devanshijoshi9:fix/component-togglecontrol-text-overflow
Conversation
|
|
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @devanshijoshi9! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other. If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information. |
mirka
left a comment
There was a problem hiding this comment.
Thank you for contributing! 😃
The solution in this PR is absolutely correct, but it turns out there is also a component called FlexBlock that is exactly for this purpose (impossible to discover, sorry!). Since ToggleControl is stylesheet-free at the moment, it might be cleaner to use that component instead of adding a new stylesheet just for this.
So basically like (here):
<FlexBlock
as="label"
htmlFor={ id }
className="components-toggle-control__label"
>
{ label }
</FlexBlock>What do you think?
And it would be great if you could add a quick changelog before merging, thanks!
|
Great, thank you! You can go ahead and run |
mirka
left a comment
There was a problem hiding this comment.
Perfect, thanks again for contributing! 🚀
|
Congratulations on your first merged pull request, @devanshijoshi9! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts: https://profiles.wordpress.org/me/profile/edit/ And if you don't have a WordPress.org account, you can create one on this page: https://login.wordpress.org/register Kudos! |
|
Thanks, @mirka for your time and guidance 🙂 I have linked my GitHub account with my wordpress.org account and I am able to see this contribution in my activity section. Thanks a lot for the credit. |
What?
Why?
ToggleControl text overflows when it has a long label.
As the label gets longer, the text overshadows the toggle button.
How?
Testing Instructions
Screenshots or screencast