Components: ToggleControl text overflows when it has a long label

[devanshijoshi9]

What?

• Add css properties that resolve the toggle labelled text-overflow.

Why?

ToggleControl text overflows when it has a long label.
As the label gets longer, the text overshadows the toggle button.

How?

• Added new style.scss file in ToggleControl component to add CSS properties.

Testing Instructions

• Go to ToggleControl component For eg. https://wordpress.github.io/gutenberg/?path=/story/components-togglecontrol--default
• Add Long Toggle label

Screenshots or screencast

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[github-actions]

👋 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]

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!

[mirka]

Great, thank you! You can go ahead and run npm run test:unit:update to update the snapshot tests, and we're good to go 👍

[mirka]

Perfect, thanks again for contributing! 🚀

[github-actions]

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!

[devanshijoshi9]

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.