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

FontSizePicker: Fix FontSizePicker Storybook control type and improve documentation #68936

Conversation

himanshupathak95
Copy link
Contributor

@himanshupathak95 himanshupathak95 commented Jan 29, 2025

What?

Closes: #68553

This PR fixes an issue with the FontSizePicker component in Storybook where changing the units prop was causing an error. It also clarifies the documentation around the component's unitless mode.

Why?

When trying to change the units prop in Storybook, an error was occurring: allowedUnitValues.includes is not a function. This happened because clicking the Set object button in Storybook initialized the value as an empty object instead of an array. Additionally, the documentation didn't clearly explain when the units prop would actually have an effect.

How?

  • Changes the Storybook control type for the units prop from the default to inline-check with predefined options
  • Improves the README documentation to clearly explain the relationship between string/number font-size values and the unitless mode

Testing Instructions

  • Run Storybook with npm run storybook:dev
  • Navigate to the FontSizePicker component
  • Verify you can select different unit options using the checkboxes without any errors
  • Verify that the component's documentation explains that the units property only works when font sizes are specified as strings with units

Screencast

Screen.Recording.2025-02-26.at.12.43.14.mov

@himanshupathak95
Copy link
Contributor Author

Hi, @t-hamano I have currently applied your fix and it seems to solve the issue but I am finding better possibilities.
This might not be the final solution but I think this is a discussion starter.
I will be updating the README and the storybook in the following commits.

Meanwhile, if we find any better solutions, we can explore them here.

@shail-mehta shail-mehta added [Type] Developer Documentation Documentation for developers [Package] Components /packages/components Storybook Storybook and its stories for components labels Jan 30, 2025
@himanshupathak95 himanshupathak95 force-pushed the fix/68553-font-size-picker-unit-filtering branch from 746016f to 32086da Compare February 26, 2025 06:56
@himanshupathak95 himanshupathak95 marked this pull request as ready for review February 26, 2025 07:17
Copy link

github-actions bot commented Feb 26, 2025

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: himanshupathak95 <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: mirka <[email protected]>
Co-authored-by: ciampo <[email protected]>
Co-authored-by: SainathPoojary <[email protected]>
Co-authored-by: im3dabasia <[email protected]>
Co-authored-by: slaFFik <[email protected]>

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

@himanshupathak95 himanshupathak95 changed the title Components: Improve FontSizePicker units documentation and fix unit filtering FontSizePicker: Fix FontSizePicker Storybook control type and improve documentation Feb 26, 2025
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

LGTM 👍

@t-hamano t-hamano merged commit d8de061 into WordPress:trunk Feb 27, 2025
62 checks passed
@github-actions github-actions bot added this to the Gutenberg 20.4 milestone Feb 27, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components Storybook Storybook and its stories for components [Type] Developer Documentation Documentation for developers
Projects
None yet
Development

Successfully merging this pull request may close these issues.

FontSizePicker: units property does not work in Block Editor
5 participants