1838720 - Add mixin to handle link tag injection in lit template

Status: RESOLVED FIXED

(Firefox :: about:logins, task, P4)

Description

[Issam Mani [:issammani]]

The current way we inject our link tags is not ideal. Each time we write a component, we have to check if the browsing context is storybook or not and also add the <link> tag inside the html template. Ideally we don't want to think about this each time we write a component. To do this we can write a mixin that takes in a class and css filename and does this for us: withStyles(SomeComponent, ["some-file.css"]). Alternatively we could also have the style files defined inside the class (static stylesheetUrls = [...]) instead of passing it to the mixin, but this makes us think about styles in two places instead of one.

Comment 1

[Issam Mani [:issammani]]

Attachment: Bug 1838720 - P1. Add mixin to inject link tags into template. r=mtigley!

Comment 2

[Issam Mani [:issammani]]

Attachment: Bug 1838720 - P2. Use mixin inside about:logins components. r=mtigley!

Depends on D181144

Comment 4

[Hanna Jones [:hjones]]

Got an email about the spam comment and realized we should probably close this out as the underlying issue of individual components needing to be aware of browsing context was fixed by the Storybook CSS import/bundling implemented in Bug 1810890.