WIP: Support dynamic CSS values in the UI #38096
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
|
Size Change: +374 B (0%) Total Size: 1.13 MB
ℹ️ View Unchanged
|
|
This will be completely rewritten to add the (optional) functionality to the existing Before this gets too far into the weeds, though, I'd love to get some design feedback. The button I'm using to toggle between the normal dropdown and the custom text input leaves a lot to be desired -- it takes up a lot of space and I had trouble coming up with a label to toggle off:
We could also use a smaller toggle like this one that's used by the Font Size picker:
Or even make a "custom unit" and adding it to the dropdown as @shaunandrews @jasmussen Do you have any ideas about how this should look? Especially in the context of the BoxControl, where the design could easily get very cluttered. |
stacimc
added
Needs Design Feedback
|
Thanks for working on this. Definitely a tricky one. Just to understand correctly, themes like TT2 have some complex unit definitions in patterns, such as a font size of Is that the problem you're solving for? In that case, would something like the following be possible? That is, add "Custom CSS" as an option in the unit dropdown. |
8 tasks
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.
Description
🚧 Extremely early WIP 🚧
At the moment I'm just using this branch to play around with various approaches for a CustomUnitControl, using the Spacer block to test it out. The purpose is to add support in the UI for complex use cases like the one described here:
Values that accept custom units (like
padding,margin, and the Spacer block'sheightas referenced in that example) can technically support dynamic values, but the UI doesn't provide a way to see or edit those values. (You can manually edit the attribute in the Code editor, for example).ToDo:
100pxcustom-unit-control.mov
How has this been tested?
Screenshots
Types of changes
Checklist:
*.native.jsfiles for terms that need renaming or removal).