gutenberg icon indicating copy to clipboard operation
gutenberg copied to clipboard

CustomSelectControlV2: fix item styles

Open ciampo opened this issue 1 year ago • 1 comments

What?

Part of #55023

Fix items (options) styles of CustomSelectControlV2 component

Why?

  • To fix visual bugs
  • To match more closely look of V1 component
  • To add quality of life improvements

How?

  • Update V2 items in order to match the same line height of the V1 version
  • Add disabled styles
  • Added user-select: none to trigger button and option items
  • Added scroll-margin to improve scroll experience when selecting items that are out of view in the popover

Testing Instructions

  • Compare V1 and V2 (legacy) of CustomSelectControl, make sure that the items in the select popover now render with the same line height (28px).
  • Try to select with the cursor the text of the items in the select popover — V2 should prevent text selection
V1 V2 before (trunk) V2 after (this PR)
Screenshot 2024-06-25 at 13 13 47 Screenshot 2024-06-25 at 13 14 27 Screenshot 2024-06-25 at 13 23 21

ciampo avatar Jun 25 '24 11:06 ciampo

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 <[email protected]>
Co-authored-by: mirka <[email protected]>
Co-authored-by: tyxla <[email protected]>

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

github-actions[bot] avatar Jun 25 '24 11:06 github-actions[bot]