1809457 - in-content/common.css styles conflict with Storybook's input styles

Status: RESOLVED FIXED

(Toolkit :: UI Widgets, defect, P3)

Description

[Hanna Jones [:hjones]]

We've been loading in-content/common.css in the Storybook preview-head.html file to make it available to all our stories, but the styles from that file are conflicting with Storybook's own styles for various inputs. This impacts the usability of Storybook's controls.

One option for a fix is to create a custom element/shadow DOM wrapper around our stories and only load our in-content CSS there so it doesn't interfere with Storybook's global styles.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Toolkit::XUL Widgets' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Hanna Jones [:hjones]]

Attachment: Bug 1809457 - Add decorator/wrapper component to fix Storybook style conflicts r=tgiles,mstriemer

This fixes the style leakage/conflict issue @tgiles identified by using @mstriemer's WithCommonStyles component as a Storybook decorator.

Comment 3

[Hanna Jones [:hjones]]

Attachment: Bug 1809457 - use getRootNode in named-deck so it works in shadow DOM r=mstriemer

When named-deck is used in the shadow DOM we need to add listeners, check for activeElement, and query for elements on the shadow root rather than document.

Comment 4

[Hanna Jones [:hjones]]

Attachment: Bug 1809457 - make panel-list work in shadow DOM r=mstriemer

Similar to named-deck listeners and activeElement checks needed to be updated to use getRootNode for cases where panel-list is used in the shadow DOM. parentElement also doesn't account for shadow roots, but swapping out shadowRoot.host seems to work the same. I also pulled in the changes from https://phabricator.services.mozilla.com/D166376.

Depends on D166700

Comment 5

[Hanna Jones [:hjones]]

Attachment: Bug 1809457 - disable wonky Storybook addons r=mstriemer

These addons either no longer work with our custom element wrapper, or never really worked:

• backgrounds - isn't super useful because it doesn't follow theme and now doesn't have any visible effect
• mesaure - this one breaks when you click on it, it seems to be looking for a specific root element
• outline - this stil works on the docs page but isn't really useful on the main story page anymore

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/628664fcb1a5
use getRootNode in named-deck so it works in shadow DOM r=mstriemer
https://hg.mozilla.org/integration/autoland/rev/5eca10cd82c2
make panel-list work in shadow DOM r=mstriemer
https://hg.mozilla.org/integration/autoland/rev/24528f1f21bd
Add decorator/wrapper component to fix Storybook style conflicts r=mstriemer
https://hg.mozilla.org/integration/autoland/rev/12ca538c258c
1809457, 1809457: apply code formatting via Lando

Comment 7

[Marian-Vasile Laza]

https://hg.mozilla.org/mozilla-central/rev/628664fcb1a5
https://hg.mozilla.org/mozilla-central/rev/5eca10cd82c2
https://hg.mozilla.org/mozilla-central/rev/24528f1f21bd
https://hg.mozilla.org/mozilla-central/rev/12ca538c258c

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/6ee128add6a9
disable wonky Storybook addons r=mstriemer

Comment 9

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/6ee128add6a9