Pill:Variants

Build 5641 on wb1670.1.react18
BaselineBuild 4843 on sb-reorg
View Storybook
LatestBuild 5641 on wb1670.1.react18
View Storybook
Baseline History
Build 56414762186 current baseline
Current build. Accepted by Juan Andrade with 1 comment.
Build 4843fdef4af
Accepted by Juan Andrade.
Jeff Yates
Jeff Yates
1y ago on build 5638

Hmm, there's something not quite right here. , is that focus ring on the left supposed to be there for that one item? Or are things now correct and wrong before?

Jeff Yates
Jeff Yates
1y ago on build 5638

Everything appears right to me when interacting. Side effect of the tests that have been commented out?

Juan Andrade
Juan Andrade
1y ago on build 5638

I was noticing the same thing. It's probably a side effect of the tests. TBH I would comment the whole play function to avoid this and instead rely on how the story is initially rendered in Storybook.


For some context, chromatic takes the screenshot only after the play function is invoked.


More on that here: https://www.chromatic.com/docs/snapshots...

Juan Andrade
Juan Andrade
1y ago on build 5638

The goal for WB-1809 is to remove that play() function, so I see very low priority to try fixing these snapshots at this point. I think that with that new ticket, we'll be able to have a more consistent snapshotting experience.


With the new approach, this is how the Pill variants would look like: https://5e1bf4b385e3fb0020b7073c-rxhxqwz...


The idea there is to capture every state (resting/default, hover, focus, hover+focus, active/pressed, disabled, etc) for every pill variant and let chromatic handle visual regressions for us.

Juan Andrade
Juan Andrade
1y ago on build 5641

Now with the last change, we can ensure that this snapshot will always the same (preventing any future flaky behaviors with the play() function in play). Thanks for the fix!