Storybook: Info addon doesn't inherit styling

[zoltanbedi]

Describe the bug
In v4 the info inherited the base font-family and stylings. In v5 it does not.

To Reproduce
Steps to reproduce the behavior:
Use info addon.

Expected behavior
I expect the behavior from v4 where the font-family is the same as in the outer panels.

Screenshots
v5

v4

System:

• Addons: Info
• Version: 5.0.0-rc.4

[shilman]

@B3zo0 Thanks for the report. Bugfix PRs are welcome for this!

[mateoholman]

@shilman I'll take a crack at this one if no one else is working on it.

[shilman]

Awesome @mateoholman, thanks for taking this on! Our storybook dev setup is documented here https://github.com/storybooks/storybook/blob/next/CONTRIBUTING.md#development-guide and feel free to get help here or on our Storybook Discord/Slack if you run into issues. 🙇

[zoltanbedi]

I was able to workaround this with this code in config.js:

addDecorator(storyFn => (
  <ThemeProvider theme={themes.normal}>
    <Global styles={createReset} />
    {storyFn()}
  </ThemeProvider>
))

[shilman]

Yo-ho-ho!! I just released https://github.com/storybooks/storybook/releases/tag/v5.0.0-rc.8 containing PR #5759 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

[mfellner]

Unfortunately this appears to be still an issue in the current version 5.0.0. 😕

[SteffenGorenflo]

I experience the same issue. I found that if the info is rendered with the options: {info: {inline: false}} the styles get applied:

But the problem persists when rendering the info inline

[SteffenGorenflo]

I think, I found the commit responsible for this issue: https://github.com/storybooks/storybook/pull/5444/commits/c7f624e54afa50622b4b45313ede89f9571f65b2#diff-36f288162c3cc9bd518d680f366bbe54L54

You can add the font family to that .infoBody css class just like in https://github.com/storybooks/storybook/pull/5759/files but I don't know if thats the right way, since you may have some global styling/theming/fonts system which should be used?!

[tomspeak]

Facing the same issue, when passing in a custom styles object that is mapped from https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19. - some, but not all styles are applied.

Notably, I am trying to apply display: none to a lot of the styles to reduce noise.

[shilman]

Ta-da!! I just released https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.12 containing PR #6186 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

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

[shilman]

w00t!! I just released https://github.com/storybooks/storybook/releases/tag/v5.0.4 containing PR #6186 that references this issue. Upgrade today to try it out!