Addon-docs: CSS classes for escape-hatch theming wrapper/content

[alazurenko]

#8051

What I did

Created CSS classes for DocsWrapper and DocsContent so it could be customised by end-user of addon-docs by adding specific rules.

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://monorepo-git-fork-alazurenko-feature-addon-docs-do-5a1852.storybook.now.sh

[shilman]

Thanks @alazurenko, this is great!

One request is that the DocsWrapper and DocsContent components get their default styling from Emotion, so we don't need to add those styles to base-preview-head. The classes simply allow users to override that styling. Maybe we can add an example of that to official-storybook?

[alazurenko]

@shilman
That is true Emotion adds autogenerated CSS class and places it after our static thus it is not possible to overwrite properties that was generated. I haven't found a way to place autogenerated class before static 😞

Here is an example: https://codepen.io/alazurenko/pen/yLBEyME

When it comes to example, should it be in the form of documentation? What would be the most efficient way to show this feature?

[domyen]

Thanks @alazurenko! We definitely should keep the styles in Emotion as @shilman said. The css classnames are an escape hatch for additional targeting.

IIRC you can force override by adding more specificity in CSS like so:

Or using !important.

[shilman]

@alazurenko Yeah adding it to official-storybook makes it an e2e test for the feature, and also a demo for people who want to use this feature.

[alazurenko]

Hi @shilman ,
I've fixed the remarks. However, I haven't found a way to import CSS file to a specific docs-styles.mdx file, to show an outcome of the change to container's CSS class in one story file. If I'd add this, those changes are going to show for every story. This is exactly what I wanted to have in terms of feature, as it would be consistent across all stories.

[shilman]

LGTM! I hijacked your PR and added some stuff to it. Thanks for kicking this off!

[kevinSuttle]

Thanks! Will this be documented somewhere?

[shilman]

@kevinSuttle https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/theming.md#css-escape-hatches