Add icons to navigation sidebar items #36893
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
talldan
added
[Type] Enhancement
talldan
added
the
Backport to WP 6.7 Beta/RC
38 tasks
|
Size Change: +234 B (0%) Total Size: 1.1 MB
ℹ️ View Unchanged
|
kevin940726
approved these changes
Nov 26, 2021
| @@ -182,6 +182,10 @@ export const ItemUI = styled.div` | |||
| width: 100%; | |||
| color: inherit; | |||
| opacity: 0.7; | |||
|
|
|||
| > svg:first-of-type { | |||
There was a problem hiding this comment.
This selector seems a little bit fragile. Could we add a className to the <Icon> component or wrap it with a <span>?
There was a problem hiding this comment.
Yeah, this is what I was unsure about. I guess BEM style classnames aren't generally used in components that use css-in-js.
Adding another wrapper isn't great either, but that's what I've gone for here to remove this fragile selector.
If there's another way I'm open to more feedback and can fix it in a follow-up.
|
Looks good:
|
noisysocks
removed
the
Backport to WP 6.7 Beta/RC
noisysocks
pushed a commit
that referenced
this pull request
Nov 29, 2021
* Add icons to navigation sidebar items * Add storybook example * Move icon into main item file and add margin * Target first child * Use first-of-type * Switch to using the sybmolFilled icon for template parts * Add another wrapper to replace fragile class
This was referenced Apr 19, 2022
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
Adds icons to navigation sidebar items:
This required adding an
iconprop to the navigation item component.I'm not completely familiar with how these components are written (particularly the styles), so this may need some feedback.
This works fine in the Navigation Sidebar in the site editor at the moment.
In terms of the navigation component itself, there are a few things to think about, like how an implementer would mix navigation items that have icons with those that don't:
But it doesn't have to be solved straight away.
How has this been tested?
Screenshots
Types of changes
Enhancement
Checklist:
*.native.jsfiles for terms that need renaming or removal).