Skip to content
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

Updated unstyledButton hover selector to change fill of svg and path element #50819

Merged

Conversation

n2erjo00
Copy link
Contributor

@n2erjo00 n2erjo00 commented May 21, 2023

What?

In the sidebar we have list of links to patterns and media files. Inside the button there is text (name of the pattern/name of the file) and svg icon (chevron pointing to right). When hovering over the button fill of svg does not change.

Changed how :focus state is handled to be more consistent with another view.

Why?

Issue(s) were originally mentioned #50758 and in #50757
The goal is to make UX more consistent

How?

Extended button :hover to change fill of svg elements inside the button

Testing Instructions for #50758

  1. Open a Post or Page.
  2. Open the Inserter (blue background plus icon on the top left)
  3. Navigate to "Patters" tab and hover over some button (pattern). See that fill of the svg (icon on the right) changes
  4. Navigate to "Media" repeat the step 3.

Testing Instructions for #50757

  1. Open Post or Page
  2. Open the Inserter (blue background plus icon on the top left)
  3. Navigate to "Patterns" tab and start tabbing the tab to move focus around
  4. Navigate to "Media" and start hitting tab

Testing Instructions for Keyboard

Screenshots or screencast

@n2erjo00 n2erjo00 requested a review from ajitbohra as a code owner May 21, 2023 16:54
Copy link
Member

@mikachan mikachan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is working well for me ✨ I've made one suggestion, let me know what you think!

packages/components/src/item-group/styles.ts Outdated Show resolved Hide resolved
@mikachan mikachan linked an issue May 31, 2023 that may be closed by this pull request
@mikachan mikachan added the [Feature] Inserter The main way to insert blocks using the + button in the editing interface label May 31, 2023
@n2erjo00 n2erjo00 requested a review from mikachan June 4, 2023 06:41
Copy link
Member

@mikachan mikachan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is working great for me. I can see the icon color now matches the text color when the button state changes:

image

Thank you for working on this!

@mikachan
Copy link
Member

mikachan commented Jun 7, 2023

It looks like you may need to run npm run test:unit -- -u to update the related test snapshots. This should allow the tests to pass.

@n2erjo00
Copy link
Contributor Author

n2erjo00 commented Jun 8, 2023

@mikachan Updated snapshot. Let's see what happens

@mikachan
Copy link
Member

mikachan commented Jun 8, 2023

Looks like that fixed the failing test! I've just pushed an update to the changelog too, but I'm not sure it's entirely necessary for this change. I think this is ready to bring in 👍

@mikachan mikachan merged commit 524d6ef into WordPress:trunk Jun 9, 2023
@github-actions github-actions bot added this to the Gutenberg 16.1 milestone Jun 9, 2023
@mikachan mikachan added the [Type] Enhancement A suggestion for improvement. label Jun 16, 2023
sethrubenstein pushed a commit to pewresearch/gutenberg that referenced this pull request Jul 13, 2023
…element (WordPress#50819)

* Updated unstyledButton hover selector to change fill of svg and path elements

* Changed placement svg selector and used css constant currentColor

* Deleted :focus selector since it overrides browser default :focus-visible

* Updated test snapshots

* Update changelog

* Fix PR URL in changelog

* Fix indentation in CHANGELOG.md

---------

Co-authored-by: Sarah Norris <sarah@sekai.co.uk>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Patterns & Media List Items: Apply hover color to icons
2 participants