Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug] New styles from #339 cause issues for components added to body #343

Closed
ChrisW-B opened this issue Apr 19, 2022 · 4 comments · Fixed by #346
Closed

[Bug] New styles from #339 cause issues for components added to body #343

ChrisW-B opened this issue Apr 19, 2022 · 4 comments · Fixed by #346
Labels
bug Something isn't working

Comments

@ChrisW-B
Copy link

Describe the bug

The style rule added to prevent FOUC hides all direct children of the body, which means elements appended to the body no longer display. This means things such as the radix-ui drawer component are no longer visible in Storybook.

This seems to be a result of

    body > * {
      display: none !important;
    }

Steps to reproduce the behavior

  1. Create an element which uses a root element on body that doesn't have id #root
  2. Attempt to view in Storybook.
  3. It will have the property display: none !important on its root element

Expected behavior

Element should be visible.

Screenshots and/or logs

Screen Shot 2022-04-19 at 10 23 08 AM

Environment

  • OS: MacOS
  • Node.js version: v16.14.2
  • NPM version: 8.7.0
  • Browser (if applicable): chrome, firefox
  • Browser version (if applicable): 103.0.5010.0, 101.0a1 (2022-04-18)
@ChrisW-B ChrisW-B added the bug Something isn't working label Apr 19, 2022
@ChrisW-B ChrisW-B changed the title [Bug] New styles from #339 cause issues for portaled components [Bug] New styles from #339 cause issues for components added to body Apr 19, 2022
@IanVS
Copy link
Member

IanVS commented Apr 19, 2022

Hmm, thanks. I'll need to go back to the drawing board it sounds like.

@Walkeezy Walkeezy mentioned this issue Apr 20, 2022
Merged
@IanVS IanVS mentioned this issue Apr 22, 2022
Merged
@IanVS
Copy link
Member

IanVS commented Apr 22, 2022

@ChrisW-B I believe I have a solution, in #346. If you'd like to test it out, you can make the same change from the PR in the dist folder of your node_modules/@storybook/builder-vite. But, I think it's a much better approach than what we currently have.

@samydoesit
Copy link

We do have the same problem, i tried the suggested fix from #346 and it works in our case.

@ChrisW-B
Copy link
Author

@IanVS perfect, thank you!

IanVS added a commit that referenced this issue Apr 22, 2022
@IanVS
Avoid hiding all non-storybook body children (#346)
0491c33 
Fixes #343

This replaces the blunt hammer of 

```css
body > * {
  display: none !important;
}
```

with something a bit more nuanced, taken from the storybook default head styles.  

This is only necessary until vitejs/vite#7786 is released, then we can remove the workaround and ask users to update vite in order to avoid this flash.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Avoid hiding all non-storybook body children storybookjs/builder-vite
3 participants
@ChrisW-B @IanVS @samydoesit