search

percy / percy-storybook

Percy's Storybook SDK.
https://docs.percy.io/docs/storybook
MIT License
149 stars 45 forks source link

Support for addon-contexts #146

Closed BPScott closed 2 years ago

BPScott commented 4 years ago

Storybook's addon-contexts is an official plugin that allows users to customize the context their stories are rendered in by allowing customization of a query string parameter in the preview.

For instance you can use it to choose between themes - click the last left-aligned icon in the toolbar to change between themes. The preview frame URLs look like https://storybooks-official.netlify.com/iframe.html?id=addons-contexts--simple-css-theming and https://storybooks-official.netlify.com/iframe.html?id=addons-contexts--simple-css-theming&contexts=CSS%20Themes=Desert

If would be very useful if percy could be configured to take screenshots of a single story in multiple context states - by adding configuration to say "for this story run it multiple times with the following set of context parameters". For instance above we could check for visual differences in both the "Ocean" and "Desert" themes in the above example.

This is very similar to how percy-storybook offers rtl support - by taking a screenshot with and without the direction=rtl parameter, but how that direction parameter is consumed is up to the user.

addon-contexts offers a standard way of providing these variations. Standardizing around it would also remove the need for a dedicated rtl option as instead users would be able to say configure the contexts option with contexts: ['direction=ltr', 'direction=rtl'] to get both variants.

Robdel12 commented 3 years ago

I looks like this is now possible with the SDK rewrite in #301 with query params: https://github.com/percy/percy-storybook#storybook-parameters 🎉

dozortsev commented 3 years ago

Hey @Robdel12

do I understand correctly that now I need read that query param and turn on RTL mode in which ever way it's implemented for my UI in Storybook? if so do you have an example how it should be? or percy should enable RTL itself e.g via <html dir="rtl"> ?

asking because of my new config doesn't do the trick, it run additional set of stories but it doesn't enable RTL on the page

// percy config in .storybook/preview.js
export const parameters = {
  percy: {
    additionalSnapshots: [
      {
        suffix: ' [RTL]',
        queryParams: { direction: 'rtl' },
      },
    ],
  },
};
wwilsman commented 3 years ago

Hi @dozortsev! @Robdel12 is on currently on vacation, but I can try to help here.

The old version of this SDK did exactly that. It added the suffix and query param to the URL:

https://github.com/percy/percy-storybook/blob/v3.3.1/src/selectStories.js#L85-L86

As for how your app/stories handle this query param is up to the implementation. Could be as simple as:

document.body.dir = new URL(window.location).searchParams.get('direction')