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

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

Merged
merged 3 commits into from
Aug 20, 2024

Conversation

ghengeveld
Copy link
Member

@ghengeveld ghengeveld commented Jul 31, 2024

Closes storybookjs/storybook#28683

This makes the addon compatible with the upcoming changes in Storybook 8.3. See storybookjs/storybook#28693 and storybookjs/storybook#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
📦 Published PR as canary version: 1.7.0--canary.332.f043bff.0

✨ Test out this PR locally via:

npm install @chromatic-com/storybook@1.7.0--canary.332.f043bff.0
# or 
yarn add @chromatic-com/storybook@1.7.0--canary.332.f043bff.0

@yannbf
Copy link
Contributor

yannbf commented Aug 2, 2024

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 👍

@ghengeveld ghengeveld added release Auto: Create a `latest` release when merged feature Classification: New feature minor Auto: Increment the minor version when merged and removed feature Classification: New feature labels Aug 20, 2024
Copy link
Contributor

@yannbf yannbf left a comment

Choose a reason for hiding this comment

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

LGTM! Let's just make sure to test a canary with different combinations of Storybook versions

@ghengeveld ghengeveld merged commit ba939d9 into main Aug 20, 2024
8 checks passed
@ghengeveld ghengeveld deleted the sb83-compat branch August 20, 2024 13:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
minor Auto: Increment the minor version when merged release Auto: Create a `latest` release when merged
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Migration strategy with different versions of Storybook+VTA (so that there is only one filter UI)
2 participants