components - isolated OR not ?

[outer cave]

First words, from storybook site: "Storybook is a frontend workshop for building UI components and pages in isolation."
But as I see it, there is no isolation here, for example for css..

Look at 3 demo-components, that comes with storybook. Just open /header/header.css and add style ".storybook-button{background-color:red !important;}".
So, now button component is affected by header component.

Do I miss something obvious in configuration? Or I MUST to use css-modules to solve this issue? What is purpose to render components in iframe, when every components mixed in this iframe?

[winter lintel]

Hi! 👋 Storybook isolates your components from the rest of your app. It's not going to isolate styles artificially. Let's break that down...

In your app, if you added that style you shared above to your app's CSS it would affect any page in which that CSS is loaded. If you added it to header.css (and the Header component imports that file), it'll affect any page in which the Header component is rendered.

If you wish to author styles that ensure no "bleeding", then you need to use a tool to do so: CSS Modules, CSS-in-JS libraries, or carefully-authored styles.

That's true in both your app and in Storybook. If Storybook artificially isolated a component's styles, then it would give a false sense of completion because the styles would be broken in your app.

[outer cave]

Hello @winter lintel , thanks for your answer here 🙂

I see 2 points:

1. With default behavior of storybook lazy-loads my stories: if I open first the button component - there is no styles from header yet. I will see "blue button". And it will be broken "red button" only after I open the header component. That can give me false positive result of testing components.
2. You says: "Storybook isolates your components from the rest of your app." as far as I understand this - not isolating styles = not completely isolating components. I prefer to see how my components looks without any sideEffects (exclude thats I choose myself, by injecting over preview.ts or any global/local decorators/loaders).
   And when I want to check is here any sideEffects between my components - I will render whole page with Header and Button together in template.

[wicked shore]

Hey @outer cave

If i'm understanding your example, you're saying that without loading the header component, your button component will render incorrectly?

This feels like it's highlighting a gap in how the button was built which seems wrong to me.

When we say Storybook let's you render your components in isolation. As you say, the environment let's you control the degree of isolation you want per story so you can test the most atomic parts of your app all the way to pages. If a component requires something outside of itself there is always going to be a need for some amount of global setup.

[outer cave]

Hi, @wicked shore I am saying that storybook from-the-box does not provide isolation to components, that is needed for relevant testing of them.

When we says about isolation - I prefer to see how my component looks like on page where is only that component exists. When I want to check components combination - I will make story about my page, that includes all my components.
Now, as I see, it is working another way.

And yes, I speak about synthetic example, based on 3 components, that come with storybook install.

"it's highlighting a gap in how the button was built" you says. But I see - that it can be highlighted OR not. Behavior is undefined based on storybook, it depends on order in which I check the components 🙂
I prefer to see button every time in one state, when I open it. And see dependency between 2 components only in that stories, where both components are present.

[wicked shore]

Then i'm not sure I understand what you mean. Do you have a better example?

Storybook does provide isolation out of the box. It's rendered in a separate iframe specifically to make sure it is rendered without anything else that might affect it. In that way, it is isolated from the rest of your application and other components.

If components in stories are changing based on what has been lazy loaded into the browser then there is something flawed in how the component was built for that to be the case

In the above example, I start with my blue button in the "Button > Primary" Story.

Then I click on the "Header > Logged In" story where the header uses the secondary variant of the Button component.

Once I click back into the "Button > Primary" Story, I still see a regular blue button as I'd expect because that's what the button defines.