<code /> styles doesn't show up in addon-docs storybook@5.3.0-alpha.33

[adrian-potepa]

Describe the bug
In .mdx files if we use CSF Stories with MDX Docs mode (https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#csf-stories-with-mdx-docs) styles doesn't work inside <li>.

Screenshots

That how it looks:

How it should looks:

Code snippets

.mdx file example:

import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
import * as stories from './Icon.stories.tsx';
import { Icon } from '.';

<Meta title="Components|Icon" component={Icon} />

# Icon

An Icon is a piece of visual element, but we must ensure its accessibility while using it.
It can have 2 purposes:
+ *decorative only*: for example, it illustrates a label next to it. We must ensure that it is ignored by screen readers, by setting `aria-hidden` attribute (ex: `<Icon name="article-20" aria-hidden />`)
+ *non-decorative*: it means that it delivers information. For example, an icon as only child in a button. The meaning can be obvious visually, but it must have a proper text alternative via `aria-label` for screen readers. (ex: `<Icon name="article-20" aria-label="Print this document" />`)

Outside of list `code` is correct.

<Preview>
  <Story name="basic">{stories.basic}</Story>
</Preview>

System:

System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 10.15.3 - /usr/local/bin/node
    Yarn: 1.17.0 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 78.0.3904.70
    Firefox: 69.0.1
    Safari: 13.0.2

Additional context
Temporary fix: just add styles to storybook:

code {
    margin: 0 2px;
    padding: 0 5px;
    white-space: nowrap;
    border: 1px solid #EEEEEE;
    background-color: #F8F8F8;
    border-radius: 3px;
    font-size: 13px;
  }

[domyen]

Seems like the fix is in DocumentFormatting.tsx:

• Change order or codeCommon to come before the exported LI component
• Add '& code': codeCommon({ theme }), to the exported LI component

Can you see if that solves your problem @adrian-potepa and make a PR? 🙏

[adrian-potepa]

@domyen it's helped! PR: #8708

[shilman]

ZOMG!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-alpha.39 containing PR #8708 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.6 containing PR #8708 that references this issue. Upgrade today to try it out!