Future - Rename Storybook DOM root IDs

[ndelangen]

Issue: #10403

What I did

I changed #root => #storybook-root
I changed #docs-root => #storybook-docs

[ndelangen]

Do we want to put this in v6.0.0?

If we're not doing this now, it'll be 7.0.0 at the earliest.

[ndelangen]

@tmeasday @shilman WDYT, should we push this forward for 6.0.0 or delay for 7.0.0?

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 4a605a4. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 1 target

• nx run-many --target=prepare --all --parallel=8 --max-parallel=15 -- --reset --optimized

---

Sent with 💌 from NxCloud.

[ndelangen]

What pain do you think users or us storybook maintainers would endure if we pushed this into 7.0?

[ndelangen]

So the possible foreseeable pain for users is re seeing to portals that target #root.
That's an anti-pattern anyway, because that can't work for docs.

So I think breaking that is the right thing to do.

Another point is that we don't document what div target storybook renders to at all. The fact we target #root is an implementation detail that's not supposed to be leveraged by users.

I'd expect users to render portals to either document.body OR to use the canvasElement provided in docs OR wrap the story in a decorator setting up a selector to render to.

I think there should be a task to make targeting the current story container real easy for users.

[ndelangen]

So we need 2 things to get this merged/ready for release:

• chromatic needs to be updated, otherwise we lose a very significant part of our testing strategy. @skitterm is this something you could discuss with the apps team?
• we need a change to the migration document @jonniebigodes is this something you could put on your task list?

Additionally we should have a task to create a real api (on the storyContext?) to get the selector for the container of the current story. @shilman that is probably something the CSF team (possibly myself?) will have to do. Let's chat about that soon.

[tmeasday]

@ndelangen - the StoryContext already has CanvasElement which I think is what you want here: https://github.com/ComponentDriven/csf/blob/4566f4da20ea41a599548128cf993d1bae7d1d46/src/story.ts#L106

Also @jmhobbs or @codykaup would be the ones to talk about changing Chromatic's capture to handle a different #root element.

[ndelangen]

@tmeasday @shilman @yannbf shall I merge this?

[ndelangen]

@tmeasday could I get a review on this?

[ndelangen]

@yannbf we need a minor change in the test-runner so it checks both the IDs.