google / google/site-kit-wp

Update `Button.stories.js` To Include Hover Effects of the Buttons Correctly

Open
#9,111 0 comments 0 reactions 0 assignees View on GitHub
P2 Type: Infrastructure
Dominant language
JavaScript
Stars
1.4k
Forks
383
Avg merge
4d 14h
Merged PRs (30d)
77

Description

## Feature Description

I noticed we have unused story https://github.com/google/site-kit-wp/blob/2a6f107c6e6069a0499c30e12d5b640ffaa82a97/assets/js/googlesitekit/components-gm2/Button.stories.js#L36-L41, as this one is not included in the VRT, and does nothing, since the `googlesitekit-button--hover` class is not included in `hoverSelector`, only one having hover applied to it is the variation with an icon.

While updating this file to add additional buttons, I tried to have a quick look and potentially fix it, but it was behaving in a weird way, even one class is applied to few buttons, they are not going to be hovered during VRT, only the first one will. I also experimented with no/additional timeouts, but without timeouts not event first hover is captured.

We should adapt this, so we can capture hover styles as well, it will be useful for catching early any change to the hover style of any button.

---------------

_Do not alter or remove anything below. The following sections will be managed by moderators only._

## Acceptance criteria

*

## Implementation Brief

* [ ]

### Test Coverage

*

## QA Brief

*

## Changelog entry

*

Contributor guide

Open the contributing guide

Research direction

Start with assets/js/googlesitekit/components-gm2/Button.stories.js and inspect the existing hoverSelector and button stories. Reproduce the visual regression test behavior for multiple buttons sharing a hover class, then adjust the story or VRT setup so each button's hover styles are captured. Done means the unused story is included and hover effects for all relevant buttons appear correctly in VRT.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, storybook
Domain
frontend, testing
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.