UnitControl: Add support for complex CSS in the UI #38341
Draft
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Previously we would get the allValue and consider values to be mixed if it was non-numeric, which breaks if the allValue is a custom CSS string. We should be able to just check if the allValue is null, as getAlLValue should return null whenever values are mixed.
|
Size Change: +3.51 kB (0%) Total Size: 1.14 MB
ℹ️ View Unchanged
|
This is necessary when the customUnit is supplied in the units list but the legacy unit prop is provided: in that case we remove custom css support.
|
This is working pretty well for a first draft, although it needs much more testing. Unit tests need to be added, and additional storybook examples. Here's a rough breakdown of major concerns: Design considerations
Lack of validation of CSS:
Thoughts about
|
stacimc
added
the
[Feature] Design Tools
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
This is an alternative implementation to #38096, which explored adding an actual button to the UnitControl that would toggle open a custom CSS input (as opposed to the dropdown).
Description
Adds support for a
css"unit" to the UnitControl which can be used to add complex CSS values likemax...orclamp...through the UI. Themes can configure whether or not to support the unit by its inclusion in thespacingsettings intheme.json:These types of values are already technically supported by attributes that accept custom units (like padding, margin, and the Spacer block's height), in the sense that you can manually set those attributes (using the Code editor, for example). But since the
UnitControldoesn't currently support these arbitrary strings, you'll see an empty input in the UI and you won't be able to edit the value through the control panel.This can lead to strange scenarios. For example, the space beneath the header in Twenty Twenty-Two uses a spacer with height
max(1.25rem, 5vw)as defined in the theme. If a user goes to edit that spacer, they won't see that value in the Inspector Controls (the height input appears empty). If they set their own value in the controls, they may not realize what they're overriding. It would be nice to be able to quickly see what values are set and tweak them yourself.Notes:
valueandunitare passed as separate props, for example in the Min Height control for the Cover block, it's usually because those values are stored in separate attributes. In Cover's case,heightis an attribute with typenumber, and arbitrary custom CSS strings simply can't be stored in it. The best way I can think of handling this is by assuming all uses of the legacy unit prop cannot support custom CSS, and removing the unit even if it is otherwise supported intheme.json.Testing Instructions
Screenshots
Video below also has changes from #38340 applied
custom-css.mov
Types of changes
Checklist:
*.native.jsfiles for terms that need renaming or removal).