Pseudo states not being applied in fullscreen/iframe mode

[harrync]

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]

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]

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:

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:

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 😅