Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged

Conversation

alazurenko
Copy link
Contributor

#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
Copy link

vercel bot commented Sep 12, 2019

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

Copy link
Member

@shilman shilman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Contributor Author

@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
Copy link
Member

domyen commented Sep 12, 2019

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:
image

Or using !important.

@shilman
Copy link
Member

shilman commented Sep 13, 2019

@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 alazurenko requested a review from usulpro as a code owner September 16, 2019 07:57
@alazurenko
Copy link
Contributor Author

alazurenko commented Sep 16, 2019

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.

@alazurenko alazurenko requested a review from shilman September 16, 2019 09:14
@shilman shilman changed the title Add static CSS classes for DocsWrapper and DocsContent Addon-docs: CSS classes for escape-hatch theming wrapper/content Sep 23, 2019
@shilman shilman added bug patch:yes Bugfix & documentation PR that need to be picked to main branch and removed feature request labels Sep 23, 2019
Copy link
Member

@shilman shilman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@shilman shilman merged commit d8a57dd into storybookjs:next Sep 23, 2019
@shilman shilman added the patch:done Patch/release PRs already cherry-picked to main/release branch label Oct 7, 2019
shilman added a commit that referenced this pull request Oct 7, 2019
Addon-docs: CSS classes for escape-hatch theming wrapper/content
@kevinSuttle
Copy link
Contributor

Thanks! Will this be documented somewhere?

@shilman
Copy link
Member

shilman commented Oct 7, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
addon: docs bug patch:done Patch/release PRs already cherry-picked to main/release branch patch:yes Bugfix & documentation PR that need to be picked to main branch theming
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants