FontSizePicker: Allow custom units #48468
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Updates the
FontSizePicker
to allow the customization of the available units when displaying the custom font size control.Why?
It might benefit theme authors to be able to control the available custom font size units.
How?
units
prop that can be used to set the available units for the custom font size control.size
propNext Steps
This PR came about through a discussion on filtering or disabling units within the custom font size picker for the editor's typography panel. If we add support for custom units to the FontSizePicker component we'll still need to update our typography panel to handle passing the desired units to the component.
Testing Instructions
npm run test:unit packages/components/src/font-size-picker
and ensure everything still passesnpm run storybook:dev
) and check the FontSizePicker examples functionWith Units
example update the preset font sizes to match the allowed unitsunits
prop to the desired units e.g.[ 'em' ]
units
prop.Note: If you do not update the font sizes you might have a value set in the control containing a non-allowed unit such as
px
which would show in the available units until the value is changed or control is reset.Screenshots or screencast
Screen.Recording.2023-02-27.at.1.50.59.pm.mp4