Support for Storybook v7 - Root element renamed

[lsemerini]

There is a problem with this addon using Storybook v7.

The root element was modified to storybook-root. See change here

In withPseudoState.js it is hardcoded as root so the addon doesn't work.

[lsemerini]

I don't have permissions to open a PR but here is a fix that works

diff --git a/src/withPseudoState.js b/src/withPseudoState.js
index a85ee46..9cb0143 100644
--- a/src/withPseudoState.js
+++ b/src/withPseudoState.js
@@ -80,7 +80,8 @@ export const withPseudoState = (StoryFn, { viewMode, parameters, id, globals: gl
   // Then update each shadow host to redetermine its own pseudo classnames.
   useEffect(() => {
     const timeout = setTimeout(() => {
-      const element = document.getElementById(viewMode === "docs" ? `story--${id}` : `root`)
+      const rootElement = parameters.rootElement || `root`
+      const element = document.getElementById(viewMode === "docs" ? `story--${id}` : rootElement)
       applyParameter(element, globals || parameter)
       shadowHosts.forEach(updateShadowHost)
     }, 0)

Then simply adding rootElement: "storybook-root" to parameters makes it compatible with v7:

PrimaryButtonHover.parameters = {
  pseudo: { hover: true },
  rootElement: 'storybook-root',
};

[konsalex]

Instead of passing explicitly on every story a rootElement, a reflection method on the lib to check if it's v6 or v7 would help I think 🤔 @ghengeveld any plan on supporting this any time soon or do you need an external contribution?

[wladpaiva]

It still breaks the docs

[avinean]

any news? @ghengeveld

[ghengeveld]

Sorry for the delay. I originally built this on my own time but maintenance goes on the regular backlog at Chromatic, which is why it takes a bit longer. I've planned it for the next cycle. Happy to accept a PR too (you'll have to fork the repo to do that).

[ghengeveld]

For Storybook 7 support, use 2.0.0-next.0 available under the next tag: storybook-addon-pseudo-states@next This will be released as 2.0.0 (latest) once Storybook 7 is out of beta.