[email protected] adds unwanted inline styles that turn all my stories into FLEX items

[basher]

I've just upgraded to Storybook V5.0.1 and "storybook-readme" V5.0.0.

I followed the upgrade instructions:

• Added import 'storybook-readme/register'; to .storybook\addons.js.
• Added import { addReadme } from 'storybook-readme'; and addDecorator(addReadme); to .storybook\config.js.

And to each story, I've done the following (the example below is for Button story):

import Button from '../../components/Button/Button';
import README from './README.md';

storiesOf('Button', module)
  .addParameters({
    readme: {
      sidebar: README,
    },
  })
  .add('Button (default)', () => (
    <Button
      /* props go here... */
    />
  ));

The README content renders correctly in the sidebar.

However, all my stories are now wrapped in...

<div class="storybook-readme-story">
  <div style="display: flex; align-items: center; justify-content: center; margin: 32px 0px;">
    /* story content goes here... */
  </div>
</div>

...that turns all my story content into a FLEX item, thereby affecting how it renders.

Is there really a need for these inline styles on the DIV wrapper?

[tuchk4]

This is just default StoryPreview component. By default it just make position centered for story component.

Does it affects on your story's styles?

Here is sources of default StoryPreview -- storybook-readme/src/components/Preview/StoryPreview.js.

Possible solutions(this needs to path storybook-readme sources and publish new version):

• It is possible to don't render StoryPreview wrapper if there are no content docs. Ω
• make story position centered and do not affect on story's styles? (this needs to path storybook-readme sources and publish new version)
• remove all styles by default? (this needs to path storybook-readme sources and publish new version)

Also it is possible to update StorybookPreview wrapper.

Via parameters:

.addParameters({
    readme: {
      /**
       * Wrapper for story. Usually used to set some styles
       */
      StoryPreview: ({ children}) => <div>{children}</div>
    }
})

Or via Global configuration

[basher]

Thanks for the quick reply @tuchk4

I've tried overriding StoryPreview both globally (in config.js) and locally (in my stories), but I still cannot render the wrapper DIV with no inline styles.

By defining this wrapper DIV as a FLEX container, any direct DIV children will be no longer be BLOCK level, and therefore any UI components being rendered inside the story will also inherit this new block formatting context.

What this means in practise is that my UI components no longer take up 100% of the available space within <div class="storybook-readme-story">. They are "_squashed_" and therefore don't give an accurate representation of how they should really behave. So, YES, my story styles are effectively broken.

Can I suggest that any wrapper DIVs that your plugin generates should NOT generate any inline styles, especially those that affect layout of any nested children. I hope you agree? ;)

[tuchk4]

Yes I agree. But I would like default StoryPreview wrapper make story centered horizontally.
As I see current implementation (styles with flex) is wrong so we needs to choose another. I would be happy for any help because I am not so strong in CSS.

For now it is possible to define custom StoryPreview.
I tested with configureReadme and it works fine.

import { configureReadme } from 'storybook-readme';

configureReadme({
  StoryPreview: ({ children }) => <React.Fragment>{children}</React.Fragment>,
});

But you said that this didn't work for you?

[basher]

OK - that works for me now. Thanks.

I still question why you would want to center the story horizontally if someone specifically uses the README plugin?

• You'll be changing the story visual layout, probably in a way the user didn't expect. ;)
• If you decide you still want to do it, simply using <div style="text-align:center;"> will work without affecting BLOCK formatting context of the DIV.

Oh, and thanks for the plugin in the first place!

[joelnet]

I ended up using this block in my .storybook/config.js

import React from "react";
import { configure, addDecorator } from "@storybook/react";
import { addReadme, configureReadme } from "storybook-readme";

addDecorator(addReadme);
configureReadme({
  StoryPreview: ({ children }) => (
    <div style={{ textAlign: "center", padding: "10px" }}>{children}</div>
  )
});

why you would want to center the story horizontally if someone specifically uses the README plugin?

With storybook-readme v4, the component was center aligned, so I set the textAlign to center to be consistent with v4.

[tuchk4]

You'll be changing the story visual layout, probably in a way the user didn't expect. ;)

Yes. Maybe storybook-readme should render story as is. From the beginning I just wanted default story wrapper to work as @storybook/addon-centered addon :)

If you decide you still want to do it, simply using

will work without affecting BLOCK formatting context of the DIV.

text-align will provide the same problem with inheritance :)
The same issue was already opened https://github.com/tuchk4/storybook-readme/issues/122

[basher]

text-align will provide the same problem with inheritance :)
The same issue was already opened #122

Yes, but the important bit is that the DIV wrapper is still BLOCK level, not FLEX, so children will not be squashed.

Flex children, by default, do not expand to fill their parent container. Instead, they just take up as much room as is needed to render their contents. They only grow if they have an explicit width or flex-basis, or have flex-grow set to an integer > 0.

Therefore, the "_safest_" way to center content is just with text-align.

[stevesims]

We just hit this issue in our component library too when trying to upgrade to storybook-readme 5.

We have some components that have quite significantly different appearance on mobile, as there they should expand to be full-width. Unfortunately the recent changes mean that as they've now been placed inside a flex container they're displayed with minimal width and we're not getting to see the component as intended.

I don't want to see my examples centred on page - I'd rather see them exactly as they would be shown when placed on a page. I'd also rather not have text-align being set on the container either, as that is not "safe" as that style can cascade down to affect my components.

It would therefore be preferable if the default container in storybook-readme had no styling placed on it at all.

If folks desire to have their component examples centred on the page then they can use the StoryPreview config option as described above. It is just unfortunate that at this time the StoryPreview component is being placed inside a div that's been styled as a flex container as it removes the freedom to properly control how the preview is displayed.

[VladimirHumeniuk]

@stevesims I totally agree with you. To solve this issue in our storybook I added the next code to config.js:

import React from "react"
import { addReadme, configureReadme } from 'storybook-readme'

addDecorator(addReadme)
configureReadme({
  StoryPreview: ({ children }) => (
    <div style={{ width: "100%", padding: "10px" }}>{children}</div>
  )
});

It will make all your storybook components full width and isolate them from flex inside additional div.

UPD:
Simple pure children return in configureReadme will remove flex wrapper:

configureReadme({
  StoryPreview: ({ children }) => children
});

[tuchk4]

I will remove default wrappepr in 5.0.2.

Going to release today or tomorrow

On Fri, Mar 22, 2019 at 14:28 Vladimir Humeniuk [e-mail]
wrote:

@stevesims https://github.com/stevesims I totally agree with you. To
solve this issue in our storybook I added the next code to config.js:

import React from "react"import { addReadme, configureReadme } from 'storybook-readme'
addDecorator(addReadme)configureReadme({
StoryPreview: ({ children }) => (

)
});

It will make all your storybook components full width and isolate them
from flex inside additional div.

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/tuchk4/storybook-readme/issues/132#issuecomment-475602739,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AE5wg_ENd3xjo4lPRZu7ZJ4jmXjPdfLvks5vZMx1gaJpZM4b5mBC
.

>

---

Regards

Valeriy Sorokobatko

[tuchk4]

FYI: got this fix but still waiting for other bugs preparing for next release

[tuchk4]

published 5.0.2

[citypaul]

~Hi there - I'm still seeing this issue in 5.0.2.~ Looks like this was a local caching issue - when I wiped node_modules and reinstalled, it all worked. Thanks!