Update Edit icon to be more consistent with other icons #49512
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
Co-Authored-By: Joen A. <1204802+jasmussen@users.noreply.github.com> Co-Authored-By: James Koster <846565+jameskoster@users.noreply.github.com>
jameskoster
added
Needs Design Feedback
|
Size Change: -3 B (0%) Total Size: 1.34 MB
ℹ️ View Unchanged
|
|
Love it. This has been on my list of "tiny details" for some time. I've included a couple more screenshots of where this icon is used. I think this works well.
|
richtabor
approved these changes
Mar 31, 2023
|
Thanks for including those screenshots. The tricky thing about balancing this one is the horizontal line at the bottom of the icon. I think that's always going to make things feel a little off because the eye is drawn the pencil primarily, and the line feels like a secondary element. Is it worth exploring options without the line? E.g.:
I suppose it depends on whether we feel the line is crucial to the design. |
javierarce
added
the
Needs Figma Update
aristath
approved these changes
Apr 3, 2023
Sure, as a follow-up probably.
I don't think the line is crucial, though the pencil itself may need to stay relative to the existing filled implementation. |
|
Okay. I'll merge this and update Figma (thanks @javierarce xD). It's easy to revert is @jasmussen objects. |
|
Flaky tests detected in 6905aa8. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4599661039
|
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?
Tweaks the dimensions of the Edit icon to bring it inline with others in the set.
Why?
Most icons are designed to fit inside a 16x16px square. This isn't a hard rule, but the way the Edit icon currently breaks out of that square makes it appear unbalanced in isolation, and inconsistent with other icons:
As you can see above it's fully 3px outside the 16px boundaries on the top side, and half a pixel outside on the bottom side. In the Details panel of the site editor this sizing makes things feel off:
This PR adjusts it to fit full inside the 16x16px square:
This can serve as a starting point to refine. It may need to be slightly larger.
Testing Instructions
Compare the Edit icon on this branch with the one in trunk.