search

chromaui / storybook-addon-pseudo-states

CSS pseudo-classes for Storybook
MIT License
90 stars 30 forks source link

Pseudo states not being applied in fullscreen/iframe mode #61

Open harrync opened 1 year ago

harrync commented 1 year ago

Loving this plugin, but am having an issue where the states aren't being applied in iframe mode (I'm using this mode for testing in Cypress)

Works perfectly (i.e. default SB) - http://localhost:6006/?path=/story/atoms-button--primary-medium&globals=pseudo.hover:true

Doesn't work (iframe mode) - http://localhost:6006/iframe.html?globals=pseudo.hover:true&id=atoms-button--primary-medium&viewMode=story

Many thanks

Sidnioulz commented 1 year ago

Cannot repro on SB 7.0.7 with Vite and Vue 3.

@harrync I suspect you're running SB 6? It would help to give information on your framework too, as the code to inject globals and controls in stories is more coupled with frameworks in SB 6 than SB 7.

xsu1010 commented 10 months ago

Sorry to necro this issue, but I just came across the same problem and wanted to share a workaround that worked for me:

If I just pass the globals=pseudo.hover:true to any story's iframe url, the elements don't get a pseudo-hover-all class applied to them, and the hover states aren't applied at all:

image

However, if I create a new story and explicitly set its pseudo.hover parameter, it works as intended, e.g.:

export const VariantHover: Story = {
    render: Variants.render,
    parameters: {
        pseudo: {
            hover: true,
        },
    },
};

The pseudo-hover-all class now gets added to the elements in the iframe page, and the hover state gets applied to them:

image

Now I'm left wondering if this is the intended behaviour? As I have various stories that I need to test, it seems a bit overkill that each of them needs a dedicated story to test the hover/pressed/focused states each 😅