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

CustomSelectControlV2: collapse checkmark space when unchecked #63229

Merged

Conversation

ciampo
Copy link
Contributor

@ciampo ciampo commented Jul 8, 2024

What?

Part of #55023

Extracted from #63179

Allow checkmark wrapper to collapse when not shown

Why?

So that the item's content can go full width in most scenarios, like it does already in the legacy V1 implementation

How?

By setting the font-size to 0 when necessary.

Testing Instructions

  • In Storybook, visit the CustomSelectControlV2 legacy "with long labels" example
  • Open the select popover, and resize the page until the text needs to wrap on two or more lines.
  • Notice how the text goes all the way to the end of the popover (since the checkmark is collapsed)
  • Select that item, and notice how the checkmark appears, causing the text to take less space
  • Make sure this is the same behavior of V1
  • Visit the "With Hints" example, and make sure that the checkmark wrapper never collapses, even for items that are not checked

Screenshots or screencast

Legacy V1 V2 adapter - before (trunk) V2 adapted - after (this PR)
Screenshot 2024-07-08 at 10 16 03 Screenshot 2024-07-08 at 10 15 39 Screenshot 2024-07-08 at 10 19 59
Screenshot 2024-07-08 at 10 16 13 Screenshot 2024-07-08 at 10 15 28 Screenshot 2024-07-08 at 10 20 15

@ciampo ciampo self-assigned this Jul 8, 2024
@ciampo ciampo added [Package] Components /packages/components [Type] Enhancement A suggestion for improvement. labels Jul 8, 2024
@ciampo ciampo requested a review from a team July 8, 2024 08:21
@ciampo ciampo marked this pull request as ready for review July 8, 2024 08:21
@ciampo ciampo requested a review from ajitbohra as a code owner July 8, 2024 08:21
Copy link

github-actions bot commented Jul 8, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Copy link
Member

@tyxla tyxla left a comment

Choose a reason for hiding this comment

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

LGTM and tests well:

Screenshot 2024-07-08 at 12 42 09
Screenshot 2024-07-08 at 12 42 29

@ciampo ciampo changed the title CustomSelectControlV2: allow checkmark wrapper to collapse when not shown CustomSelectControlV2: collapse checkmark space when unchecked Jul 8, 2024
@ciampo ciampo merged commit 90a92cf into trunk Jul 8, 2024
72 checks passed
@ciampo ciampo deleted the fix/custom-select-control-v2-legacy-adapter-checkmark-collaps branch July 8, 2024 09:46
@github-actions github-actions bot added this to the Gutenberg 18.8 milestone Jul 8, 2024
huubl pushed a commit to huubl/gutenberg that referenced this pull request Jul 10, 2024
…ress#63229)

* CustomSelectControlV2: allow checkmark wrapper to collapse when not shown

* CHANGELOG

---

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
carstingaxion pushed a commit to carstingaxion/gutenberg that referenced this pull request Jul 18, 2024
…ress#63229)

* CustomSelectControlV2: allow checkmark wrapper to collapse when not shown

* CHANGELOG

---

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants