Components: improve vertical and RTL support for Divider
#36579
Merged
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
ciampo
changed the title
vertical and RTL support for Dividervertical and RTL support for Divider
ciampo
added
[Feature] Component System
|
Size Change: +97 B (0%) Total Size: 1.1 MB
ℹ️ View Unchanged
|
|
Thanks so much for the improvement. I'll defer to other reviewers for the more technical bits, but as a tool in our toolbox this one seems stronger now. Whether we find a need for the component I'm not yet sure — I think we will as part of a block toolbar refactor. One question about this part: I'm always anxious about hardcoded colors, even if they can be updated everywhere by editing a single component. But beyond the hard coded color (which could become a variable), I'm also starting to think about what we'll have to do when we can start bringing dark mode to the editor, how will that be handled? One potentially hacky solution could be to replace the color value with |
That override of the border color is there specifically for the Storybook example to make the With regards to theming and dark mode, there are many ways to tackle this problem, using a mix of CSS APIs (like CSS variables and the |
I think so, but I also think its default color should be currentColor and not a semitransparent black. Those defaults in general feel worth looking at (separately), as none of them feel very compatible with the design language of the block editor (for which there are some decent examples in #34574). To an extent, those defaults should look a bit more like those defined in our base styles: colors, other metrics.
👌 |
|
Thanks for the feedback, @jasmussen ! I've updated this PR and followed your advice:
|
ciampo
force-pushed
the
feat/components-divider-vertical
branch
from
b83639e
to
a7f1bcb
Compare
mirka
reviewed
Nov 22, 2021
ciampo
commented
Nov 22, 2021
ciampo
force-pushed
the
feat/components-divider-vertical
branch
from
a4b1793
to
5502a35
Compare
|
Hey @mirka , your initial feedback should have all been addressed! I also rebased on top of |
ciampo
force-pushed
the
feat/components-divider-vertical
branch
from
5502a35
to
0722821
Compare
|
Will merge once the PHP unit tests won't fail 😅 (unrelated to this PR) |
…/end margin props
ciampo
force-pushed
the
feat/components-divider-vertical
branch
from
0722821
to
b160690
Compare
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
Following up some feedback from #36302, This PR brings a bunch of improvements to the
Dividercomponents:verticalorientationmarginTopandmarginBottomprops withmarginStartandmarginEnd(which are a better abstraction regardless of the orientation). Added RTL support in the processborder-coloroverride to black from Storybook, and changed the defaultDivider'sborder-colorto becurrentColorHow has this been tested?
Unit tests pass, storybook works as expected
Types of changes
New feature (vertical styles), Refactor (margin top/bottom => start/end)
Checklist:
*.native.jsfiles for terms that need renaming or removal).