[Storybook] Examples maybe aren’t isolated from storybook implementation

[ry5n]

Issue summary

When tophatting a PR to add the new Sheet component, I discovered some problems that only present themselves in Storybook. When tophatting the same example in Web, the issues aren’t present.

Actual behavior

1. Focus management doesn’t work reliably.

   In the PR mentioned above, the issues is that when a modal context is opened, focus isn’t propertly trapped in the modal area—it’s possible to tab forwards, but especially back and end up outside the modal context (even into the browser UI)

2. Scroll locking doesn’t work.

   The Polaris ScrollLock component works in Web, but has some dependencies on markup structure that are not met when used in Storybook.

3. Extra page padding/strange scroll position?

   Storybook examples are sometimes scrollable when their content doesn’t require it. I may have also seen examples load with their initial scroll position not all the way to the top.

Expected behavior

In some cases, these issues might be mitigated in Polaris React by making components more robust (like ScrollLock), but as far as I can tell, example code is not fully isolated from Storybook. Even though examples are iframed, it looks like Storybook code is still run in that frame. Without full isolation, we can’t be fully confident in manual testing.

cc @danrosenthal @kaelig

[amrocha]

@BPScott Since you worked on the storybook implementation, do you have any insight into this?

[BPScott]

No strong insight, sorry. If somebody can tell me what markup needs to be added/modified to fix the second two issues I might be able to direct you to where to make changes / hint if it's possible..

Storybook renders stories inside an iframe e.g. https://polaris-react.herokuapp.com/iframe.html?id=playground-playground--playground

We can control some of what gets injected with the custom-head file. We can also control what html should wrap the stories with decorators. e.g. https://github.com/Shopify/polaris-react/blob/b8f2aec8819906494fdedae3f8f7c4841f47efd0/.storybook/stories-from-readme.js#L65 is an example of how we wrap everything with the AppProvider. I wonder if that extra div with padding is the causing issues. It was a added to make sure the examples don't butt against the edge of the iframe but we might be able to solve that in a different way, like giving the html/body tag custom css styling in our preview-head.html

[ghost]

This issue has been inactive for 180 days and labeled with Icebox. It will be closed in 7 days if there is no further activity.