Library

React Components / v9 (@fluentui/react-components)

System Info

.

Are you reporting an Accessibility issue?

no

Reproduction

https://react.fluentui.dev/?path=/docs/components-drawer--docs#separator

Bug Description

Some elements inside the stories examples are affected by global CSS used to style main global Storybook elements. This was not the case for Storybook 6 since it uses iframes. Now with Storybook 7, some styles are broken.

For example, global styles applied to h2 titles are affecting stories that contain a v9 component that renders a h2 tag:

Current:

Expected:

For this specific issue, the culprit is the selector #storybook-docs .sbdocs h2, but our docs-root.css file has several global styles that applies to all storybook examples.

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.