Apply elevation scale in components package #65159
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
|
Size Change: +7 B (0%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
jameskoster
added
[Package] Components
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @crisbusquets. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
ciampo
reviewed
Sep 10, 2024
|
I'm going to apply the values from Figma and see how that goes :) |
|
Separate from the work, but possibly relevant when tuning any values, it'd be nice to make the scrim itself a bit lighter. |
Let's try that separately as it's part of the Modal component. This PR is about applying elevation (shadows) to the components listed in the OP, according to the scale defined in #64108. |
tyxla
approved these changes
Sep 11, 2024
|
BTW, let's add a CHANGELOG entry. This is definitely worth mentioning. |
ciampo
reviewed
Sep 16, 2024
ciampo
reviewed
Sep 16, 2024
packages/base-styles/_variables.scss
Outdated
| @@ -55,16 +55,16 @@ $radius-round: 50%; // For circles and ovals. | |||
| */ | |||
|
|
|||
| // For sections and containers that group related content and controls, which may overlap other content. Example: Preview Frame. | |||
| $elevation-x-small: 0 0.7px 1px rgba($black, 0.1), 0 1.2px 1.7px -0.2px rgba($black, 0.1), 0 2.3px 3.3px -0.5px rgba($black, 0.1); | |||
| $elevation-x-small: 0 1px 1px rgba(0,0,0, 0.03), 0 1px 2px rgba(0,0,0, 0.02), 0 3px 3px rgba(0,0,0, 0.02), 0 4px 4px rgba(0,0,0, 0.01); | |||
There was a problem hiding this comment.
What's the reason for switching from $black to 0, 0, 0 ?
There was a problem hiding this comment.
Oh, I was copy / pasting between _variables.scss and config-values.js. $black doesn't work in the latter :)
I'll revert to $black once we're happy with the values.
|
Should we go ahead with the current values (after switching back to |
|
It'd be good to get feedback from someone in @WordPress/gutenberg-design . But if we don't hear anything in the next day or so then yes. It's easy to revisit the values if necessary. |
|
Flaky tests detected in f39f163. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/10899747313
|
keoshi
approved these changes
Sep 17, 2024
There was a problem hiding this comment.
The changes look great and definitely add a more tactile touch to these elements!
Unrelated to this PR, but I had to isolate the shadow in these two elements to check if my eyes weren't deceiving me.
The much darker border makes the shadow in "Custom Select Control v2" look a lot more subtle and even anatomically different, even though they share the same box-shadow attributes.
|
Thank for the review @keoshi. I agree, the dark border in Custom Select Control V2 is definitely a bit off visually. We should consider swapping that to |
|
FYI, |
|
Works for me! 🚀 Thanks for working on this @jameskoster ! I like how it's now easier to see the layering, where the popover rises above the content, improving the overall hierarchy. 😄 |
|
Thanks all. Let's merge this one, we can easily revisit the values later if we need to :) |
jameskoster
added
the
Design System
This was referenced Sep 26, 2024
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.
Follow up to #64108
What?
This PR applies the recently-added elevation scale to components in the core package.
Important
This PR gives visibility to new steps in the elevation scale for the first time, most notably
mediumelevation applied to menus / popovers. If we're unhappy with the appearance, or even where certain components are placed, now would be a good time to adjust. For me,mediumelevation probably needs to be toned down a bit.Why?
See #63757
Updated components
Custom Select Control v2
Applied
mediumelevationDropdownMenu v2
Applied
mediumelevationForm Toggle
Applied
x-smallelevation to handlePopover
Applied
mediumelevationRange Control
Applied
x-smallelevation to handleResizeable Box
Applied
x-smallelevation to handlesSnackbar
Applied
smallelevationTooltip
Applied
smallelevationTesting Instructions
npm run storybook:devNote
This PR does not touch the
Elevationcomponent. So far as I can tell it is not frequently used – it might be good to discuss it's long-term future.