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

CustomSelectControl V2 legacy adapter: fix trigger button font size #63131

Merged
merged 2 commits into from
Jul 4, 2024

Conversation

ciampo
Copy link
Contributor

@ciampo ciampo commented Jul 4, 2024

What?

Part of #55023

Update the font size of the CustomSelectControl V2 legacy adapter to use the same underlying logic as V1

Why?

V2 legacy adapter should match V1 styles

How?

The V1 implementation re-uses some SelectControl styles, which in turn use a utility from InputControl to determine the font size.

I've updated CustomSelectControlV2 to use the same utility.

Testing Instructions

In Storybook, open CustomSelectControlV2 legacy adapter examples:

  • Make sure that the font size is 16px regardless of the size prop for screens narrower than 600px
  • Make sure that, for screens wider than 600px, the font size is 11px when the size is small, and 13px otherwise
  • In general, make sure that the behavior is aligned with the V1 version of the component

Note

During my testing, I realised that CustomSelectControl V1 has a bug for which the font size doesn't change as it should according to the size for screens wider than 600px — for some reason, the size doesn't get correctly passed to the fontSizeStyles utility, and as a consequence the default font size is always applied (13px). You can verify the buggy behaviour by setting size="small" on CustomSelectControl V1 and observe how the font size is still 13px instead of 11px.
I don't think we should spend time fixing it, since the V1 implementation is soon going away.

@ciampo ciampo requested a review from ajitbohra as a code owner July 4, 2024 13:39
@ciampo ciampo self-assigned this Jul 4, 2024
@ciampo ciampo added [Type] Bug An existing feature does not function as intended [Package] Components /packages/components labels Jul 4, 2024
Copy link

github-actions bot commented Jul 4, 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.

@ciampo ciampo requested a review from a team July 4, 2024 13:40
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.

Confirmed to always be 16px on mobile layouts, just like on the v1:

Small size:
Screenshot 2024-07-04 at 16 55 36

Default size:
Screenshot 2024-07-04 at 16 55 47

(Unstable) Large size:
Screenshot 2024-07-04 at 16 55 59

Font size is 16px for all: ✅
Screenshot 2024-07-04 at 16 56 19

@ciampo ciampo enabled auto-merge (squash) July 4, 2024 14:01
@ciampo ciampo merged commit 32f12ad into trunk Jul 4, 2024
62 checks passed
@ciampo ciampo deleted the fix/custom-select-control-v2-mobile-font-size branch July 4, 2024 14:18
@github-actions github-actions bot added this to the Gutenberg 18.8 milestone Jul 4, 2024
carstingaxion pushed a commit to carstingaxion/gutenberg that referenced this pull request Jul 18, 2024
* CustomSelectControl V2 legacy adapter: fix trigger button font size

* 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] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants