Add a beta indicator for the global styles sidebar #35219
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
youknowriad
added
the
Global Styles
youknowriad
commented
Sep 29, 2021
| @@ -65,3 +65,15 @@ | |||
| .edit-site-global-styles-color-palette-panel { | |||
| padding: $grid-unit-20; | |||
| } | |||
|
|
|||
| .edit-site-global-styles-sidebar__beta { | |||
There was a problem hiding this comment.
This could be some kind of pill component maybe or something.
There was a problem hiding this comment.
I believe @sarayourfriend started working on a Tag component, but the PR (#32214) was closed prematurely
There was a problem hiding this comment.
cc @mtias and @jasmussen in case they have more to add on such a potential component
There was a problem hiding this comment.
This is super temporary, we'll remove it shortly. It doesn't even need to be rendered as a tag, can be just Styles (Beta) in text. If we consider using it more for specific blocks and in the long term we can revisit.
|
Size Change: +88 B (0%) Total Size: 1.07 MB
ℹ️ View Unchanged
|
|
Nice. In my theme, the indicator was offset: It inherited the 1.4em line-height of the body element:
So I pushed a small fix which aligns it correctly:
On a separate note, what colors the two circles in the card? These two: |
Right now, the text and the link color. |
|
Separate to this little beta indicator, I'd like to improve the metrics of the card itself to better match the mockups: The are some things about it that are slightly off, such as the border being outset and therefore 3px when it should be rendered as 2px.
By making it inset it would also semi-transparently overlay the background color, which would bring it closer to the borderless mockup. The "View" container inside should also have line-height: 1 to avoid it inheriting the wrong line-height, just like in this PR:
I'd be happy to push these fixes if you point me in the right direction. |
|
@jasmussen, here's the original PR for Global Styles Preview - #34991. (Hope, it's proper direction). |
mtias
approved these changes
Sep 29, 2021
|
@jasmussen I think some of these changes would require changes to the styles of some components like Card that have CSS in JS styles. I think it should be fine to do but let's think about these things globally and not per case. I think you should feel free to open PRs about these and ping @ciampo in them (and me potentially) |
|
Yep, was definitely thinking of these happening as improvements to the components themselves, not one-offs. The line-height might be the exception, as I think it makes sense for Card and View components to inherit the line height of its context. But for this particular design with the 80px text needing to be vertically centered, it does feel like that (the |
|
Yes, @mtias suggested above that the "tag" or "pill" or whatever stays specific to this for now. So yeah I was more talking about the spacing and border for cards... |
|
Followup for the line height in #35244. |
|
Followup to the Card component in #35245. |
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.
While we iterate during the 5.9 lifecycle, let's add a "beta" indicator to the global styles sidebar to clarify its status. Once it's a decent state for 5.9, we should be able to remove it.