1878761 - Firefox Source Docs should be able to display Storybook docs that have custom CSS

Status: NEW

(Toolkit :: UI Widgets, task)

Description

[Jules Simplicio [:jules]]

Today we mirror docs written for/in Storybook to Firefox Source Docs. However, if there are any custom CSS written on top of these Storybook docs, Firefox Source Docs can't have access to it, resulting in visual issues. We should look into solving this problem since some of our latest documentation on typography and design tokens have relied on custom CSS for charts and tables.

We haven't added these new docs to Firefox Source Docs yet but, as a first step in order to preview these visual issues, we could push a patch up that adds their path to https://searchfox.org/mozilla-central/source/browser/docs/index.rst and that should build a link to the new docs that can be previewed for a week or so.

Comment 1

[Hanna Jones [:hjones]]

Hey :jules thinking on this some more how do you feel about just creating image assets for some of the graphics in the design tokens docs? We could even just screenshot what we have there now. It's not ideal, but it would be an easy way to guarantee things look the same between source docs and storybook, and is more in line with how other docs look.

Comment 2

[Jules Simplicio [:jules]]

Hey :hjones, I think that could be a good idea for now, thanks!

I just want to also acknowledging in here the follow up you suggested upon our conversation around screen reader accessibility on these diagrams to file a bug to investigate using an accessible layout instead (potentially a table).