Global Styles Sidebar: wrap the preview box in the CardMedia component #39980
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
added
[Type] Enhancement
ciampo
changed the title
CardMedia component
|
Size Change: +8 B (0%) Total Size: 1.22 MB
ℹ️ View Unchanged
|
|
Nice one! Before: After:
On its own, this is a nice improvement. However there's a small problem — the border radius is correct in the code, 2px, however that is meant to be the box radius or the "inner" radius. When the border or shadow is outset, then the outermost radius becomes border-radius+border-width, i.e. in this case, 3px. The outermost radius should be 2px, to compare with the other elements:
One solution is to account for that and subtract 1px in the border radius. That makes it look like this:
When that happens if you look close enough, the inner background of the card itself cuts into the border. If in the inspector I apply
|
mirka
approved these changes
Apr 4, 2022
|
Thank you @mirka and @jasmussen ! I've opened a follow-up PR #40032 to tweaks the border-radius size at the component level. |
7 tasks
57 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.
What?
This PR aims at improving the way the border around the preview box in the Global Styles sidebar is rendered, as flagged in #38934 under the "Smooth the corners of the styles box." point.
Why?
This is in order to follow the design specs highlighted in #38934
How?
Until now, the
<StylesPreview />component has been a direct child of<Card />. Since the border on theCardcomponent is implemented viabox-shadow(see #35245 for some conversations around that), the<StylesPreview />component has been rendering on top of the rounded corners of the<Card />component, causing those rounded corners to look glitchy.This PR avoids the issue by wrapping
<StylesPreview />in a<CardMedia />component. The<CardMedia />component, in fact, is able to apply the same corner radius to itself and therefore, with the addition of theoverflow: hiddenrule, is able to fix the issue described in the paragraph above.Note: as explained in #35245 and #38934, it's still possible that browser rendering engines can introduce some sub-pixel / anti-aliasing artefacts, especially with the technique that is currently employed by the
Cardcomponent for rendering its border via thebox-shadowproperty.Testing Instructions
On
trunk:Apply the changes from this PR, and this time notice how the borders of the preview box are being rendered in a "smoother" way, without being overlapped by the contents of the box itself.
(Note: this fix may be difficult to appreciate depending on the resolution of the screen used to review them. One way to make the fix more noticeable is to change the value of the
cardBorderRadiusoption to a higher value, e.g.6px)Screenshots or screencast
With a higher value for
border-radius(to demo/highlight the fix better):