Storybook: Addon-centered breaks layout in addon-docs

[TheKnarf]

Describe the bug
When using addon-centered together with addon-docs it creates two problems:

• ~addon-docs suddenly says that it no longer finds a component~
• It still renderes the component centered in the page as an overlay over the docs page.

To Reproduce
Setup addon-centered together with addon-docs.

Expected behavior
I expect addons-centered not to affect addon-docs.

Screenshots

System:

Environment Info:

  System:
    OS: macOS 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 12.10.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.11.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 76.0.3809.132
    Safari: 12.1.2
  npmPackages:
    @storybook/addon-a11y: ^5.2.0 => 5.2.0
    @storybook/addon-actions: ^5.2.0 => 5.2.0
    @storybook/addon-centered: ^5.2.0 => 5.2.0
    @storybook/addon-docs: ^5.2.1 => 5.2.1
    @storybook/addon-knobs: ^5.2.0 => 5.2.0
    @storybook/addon-links: ^5.2.0 => 5.2.0
    @storybook/addons: ^5.2.0 => 5.2.0
    @storybook/react: ^5.2.0 => 5.2.0

[TheKnarf]

When disabling addon-centered it still says No component found, so that seems to be a seperate issue. I suspect that it's because I probably haven't configured typescript support correctly so you can look away from that.

So the only real problem is that addon-centered is still active while in the docs-tab.

[hipstersmoothie]

It still renderes the component centered in the page as an overlay over the docs page.

Can confirm, seeing this exact issue

[techieshark]

Seeing same thing.

To Reproduce
Setup addon-docs together with addon-docs.

^ this should say:

To Reproduce
Setup addon-centered together with addon-docs.

[Zenoo]

Same issue here.

"@storybook/addon-centered": "^5.2.1",
"@storybook/addon-docs": "^5.2.1",

[UlanaXY]

Same here.
And this is duplicate of #7227

[UlanaXY]

If anyone needs a quick fix, I've created a copy of this addon with a crude (but working) fix.

import React from 'react';
import { makeDecorator } from '@storybook/addons';
import parameters from '@storybook/addon-centered/dist/parameters';
import styles from '@storybook/addon-centered/dist/styles';

function centered(storyFn) {
  const params = (new URL(document.location)).searchParams;
  const isInDockView = params.get('viewMode') === 'docs';

  if (isInDockView) {
    return storyFn();
  }

  return (
    <div style={styles.style}>
      <div style={styles.innerStyle}>
        {storyFn()}
      </div>
    </div>
  );
}

export default makeDecorator({
  ...parameters,
  wrapper: (getStory) => centered(getStory),
});

if (module && module.hot && module.hot.decline) {
  module.hot.decline();
}

You can import it and use like standard centered addon.

[hipstersmoothie]

This seems like a good opportunity for a pull request @UlanaXY if you don't want to get the ball rolling, I can.

[UlanaXY]

@hipstersmoothie I already cloned the repo to open a PR, unfortunately I was not able to install dependencies on any of my machines (Win10, OSX) - and I do not want to open an untested PR. So if You'd have the time to test the code and open a PR, that would be great.

[kevinSuttle]

I have just been putting a CSS grid inside a flexbox and aligning/justifying everything to center.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[aasili-shoprunner]

Here's a similar, but different, temp fix that @UlanaXY posted. This can be applied globally in config.js. I haven't tested how to resolve in individual story files.

// .storybook/config.js
import { addDecorator } from '@storybook/react';
import centered from '@storybook/addon-centered/react';

// Centered addon causes layout issues on docs page.
// This is a weird hack to fix the layout issues.
addDecorator((...args) => {
    const params = (new URL(document.location)).searchParams;
    const isInDockView = params.get('viewMode') === 'docs';

    if (isInDockView) {
        return args[0]();
    }

    return centered(...args);
});

[sinclairnick]

Ive just replaced it with a full width flexbox with justify center. Lacks the vertical centering, but frankly thats desirable

[ndelangen]

addParameters({
  layout: 'centered',
});

Should make all stories be centered in the preview 👍

This doesn't work in docs, yet. but we could build it?

Would anyone be interested in taking that on?

[luckylooke]

Same problem is also in Vue stories.
Temporary fixed by:
https://github.com/storybookjs/storybook/issues/8128#issuecomment-551868589 👍