addon-visual-tests icon indicating copy to clipboard operation
addon-visual-tests copied to clipboard

Update story status reporting for Storybook 8.3 and use new `SET_FILTER` event

Open ghengeveld opened this issue 1 year ago • 1 comments

Closes https://github.com/storybookjs/storybook/issues/28683

This makes the addon compatible with the upcoming changes in Storybook 8.3. See https://github.com/storybookjs/storybook/pull/28693 and https://github.com/storybookjs/storybook/pull/28739

  • The experimental_updateStatus API now accepts an onClick property. This is used to open the Visual Tests panel when clicking an error/warning status in the sidebar.
  • The experimental_SIDEBAR_BOTTOM API is deprecated and ignored in SB 8.3. The VTA will continue to use this API for backwards compatibility, but will eventually be removed. When using the VTA with Storybook 8.3, it will rely on Storybook's own sidebar filtering UI.
  • Storybook 8.3 emits a setFilter event when a filter is set, similar to the VTA's chromaui/addon-visual-tests/enableFilter event. Both events are listened for in order to be compatible with Storybook <8.3 and Storybook >=8.3.

Compatibility is as follows:

  • Old VTA in SB >=8.3 will use the Storybook filter UI with no issue because the Storybook filter UI is based on the experimental_updateStatus API which the VTA has always used. The VTA's filter UI is ignored (not applied).
  • New VTA in SB <=8.2 will still apply the VTA filter UI, and that will work as it used to. It will send an onClick property for the story statuses, but that will be ignored by Storybook 8.2 and earlier.
  • New VTA in SB >=8.3 will try to apply the VTA filter UI but it will be ignored. Instead it will use the Storybook filter UI.

Filter UI in Storybook 8.3 is mostly identical to the VTA filter UI, but it's likely to change in a later version.

Screenshot 2024-07-23 at 16 34 07

ghengeveld avatar Jul 31 '24 11:07 ghengeveld

Given that this PR is not strictly necessary right now, let's leave it open until you're back from holidays so we can test it properly 👍

yannbf avatar Aug 02 '24 13:08 yannbf