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.

Sign up for GitHub

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

Jump to bottom

In mdx files dont add classes to tags like h1, h2, p, etc. #13816

Closed
MickL opened this issue Feb 4, 2021 · 1 comment
Closed

In mdx files dont add classes to tags like h1, h2, p, etc. #13816

MickL opened this issue Feb 4, 2021 · 1 comment
Labels
has workaround mdx question / support

Comments

@MickL
Copy link

MickL commented Feb 4, 2021 •
edited

Is your feature request related to a problem? Please describe
I would like to use mdx files to document, style and approve html elements that are styled by scss only and dont have an Angular/React/Vue component:

<Meta title="Elements/Typo" />

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, quibusdam.</p>

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>

Unfortunately storybook adds its own classes to the elements:

<h1 class="sbdocs sbdocs-h1 css-1d8ls76">h1. Bootstrap heading</h1>

Describe the solution you'd like
I would like to have html elements in a mdx file that Storybook does not add any classes to. This might be done by a new element, e.g.:

<Html>
   <h1>h1. Bootstrap heading</h1>
   <h2>h2. Bootstrap heading</h2>
   <h3>h3. Bootstrap heading</h3>
   <h4>h4. Bootstrap heading</h4>
   <h5>h5. Bootstrap heading</h5>
   <h6>h6. Bootstrap heading</h6>
</Html>

Additional context
Related to #13783
@MickL
Copy link
Author

MickL commented Feb 4, 2021

Using <Canvas> seems to be a good option. It has multiple options how elements are displayed and even shows the html code snippet:

import { Meta, Canvas } from '@storybook/addon-docs/blocks';

<Meta title="Elements/Typo"/>

<Canvas isColumn={true}>
  <h1>h1. Bootstrap heading</h1>
  <h2>h2. Bootstrap heading</h2>
  <h3>h3. Bootstrap heading</h3>
  <h4>h4. Bootstrap heading</h4>
  <h5>h5. Bootstrap heading</h5>
  <h6>h6. Bootstrap heading</h6>
</Canvas>

@MickL MickL closed this as completed Feb 4, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
has workaround mdx question / support
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@shilman @MickL