| CARVIEW |
Navigation Menu
-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Visual Refactor: Add Chevron Icon for Shadows in Global Styles #67720
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Visual Refactor: Add Chevron Icon for Shadows in Global Styles #67720
Conversation
|
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 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. |
| > | ||
| { shadow.name } | ||
| <HStack direction="row"> | ||
| <FlexItem className="edit-site-shadows-panel__item"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think there's no need for this class. The editor doesn't target this element with custom styles. What was the reason for introducing it?
Now that the navigation button doesn't display the icon, we can simplify the markup.
<HStack>
<FlexItem>{ shadow.name }</FlexItem>
<FlexItem display="flex">
<Icon icon={ isRTL() ? chevronLeft : chevronRight } />
</FlexItem>
</HStack>There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @Mamaduka, done with the changes. The PR is now ready to be reviewed again. Thanks.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, @yogeshbhutkar! Let's wait for final feedback on the issue, and then I think we'll be good to merge.
Mamaduka
added
[Type] Bug
| { size.name } | ||
| </FlexItem> | ||
| <FlexItem> | ||
| <HStack justify="flex-end"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this extra HStack still needed? Why not use the same pattern used for the shadows item?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @afercia, I've implemented the suggested changes in the latest commit. Thanks!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks in the right direction to me. I left a note for a small potential simplification.
| <HStack> | ||
| <FlexItem>{ shadow.name }</FlexItem> | ||
| <FlexItem display="flex"> | ||
| <FlexItem> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The FlexItem needs display="flex"; otherwise, the icon isn't correctly aligned. I've not tested it, but the same is probably true for the font sizes component.
Screenshots
| without flex | with flex |
|---|---|
 |
 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the suggestion. Implemented in the latest commit 🚀.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is ready to be merged ✅
…ress#67720) Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: afercia <afercia@git.wordpress.org> Co-authored-by: richtabor <richtabor@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Fixes: #67696
What?
This PR addresses the following improvements:
These updates align the implementation with the expected design and functionality specifications.
Testing Instructions
Screenshots ( After the changes made )