search

chromaui / addon-visual-tests

Visual Tests addon for Storybook
MIT License
28 stars 1 forks source link

Spotlight UX #234

Closed ghengeveld closed 2 months ago

ghengeveld commented 3 months ago

From AP-4137

How is the user affected? And what is the expected behavior?

There are times when the spotlight button renders nothing. The image that we take for spotlighting is fully transparent. This is a poor experience because it looks like the feature is broken.

It seems to happen on snapshots with modest dimensions.

https://www.loom.com/share/be3fbefb44cd43fe823e99eea9c873d6

Potential solutions?

Can we tell if the spotlight image is empty or transparent and NOT show the button if so.

What are the steps for reproducing the issue?

In the default Storybook example, make a change to the button component. I added border: 10px solid green. Run tests. See that Chromatic detects changes but doesn't show anything when "spotlight" is clicked.

ghengeveld commented 3 months ago

This happens because the spotlight image extends some 10px outside the actual changed pixels, which in this case is outside the bounds of the snapshot image. This effectively spotlights the entire image, causing there to be no visual difference between the enabled and disabled view.

I'm pretty sure this issue doesn't just apply to the VTA but also the webapp, and I think is not something we can easily fix nor detect right now.

ghengeveld commented 2 months ago

Closing this as it can only realistically be fixed by not generating a focus image during diffing when there is nothing to focus on. It's a backend issue.