Storybook: [addon-docs] Component with position:fixed leaks out from Preview

[chrsep]

Describe the bug
When a component with css position:fixed is displayed on the Docs page, it's fixed to the viewport, leaks out of the preview box, and does not scroll with the page. I've noticed that adding transform: scale(1) to the parent of the position:fixed component (tried it by pressing the the zoom button) clips and bound the position:fixed element correctly.

To Reproduce
Steps to reproduce the behavior:

1. Create a div with position: fixed
2. Display it on the docs-page

Expected behavior
All element of the component that is rendered inside the Docs preview should be contained inside the preview.

Screenshots
The Bug

Expected (this is with transform:scale(1))

System:

Environment Info:

  System:
    OS: Linux 5.0 Ubuntu 19.04 (Disco Dingo)
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
  Binaries:
    Node: 12.4.0 - ~/.nvm/versions/node/v12.4.0/bin/node
    Yarn: 1.17.3 - /usr/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v12.4.0/bin/npm
  Browsers:
    Chrome: 76.0.3809.132
  npmPackages:
    @storybook/addon-a11y: ^5.2.0-rc.6 => 5.2.0-rc.6 
    @storybook/addon-actions: ^5.2.0-rc.6 => 5.2.0-rc.6 
    @storybook/addon-backgrounds: ^5.2.0-rc.6 => 5.2.0-rc.6 
    @storybook/addon-console: ^1.2.1 => 1.2.1 
    @storybook/addon-docs: ^5.2.0-rc.6 => 5.2.0-rc.6 
    @storybook/addon-knobs: ^5.2.0-rc.6 => 5.2.0-rc.6 
    @storybook/addon-links: ^5.2.0-rc.6 => 5.2.0-rc.6 
    @storybook/addon-viewport: ^5.2.0-rc.6 => 5.2.0-rc.6 
    @storybook/addons: ^5.2.0-rc.6 => 5.2.0-rc.6 
    @storybook/react: ^5.2.0-rc.6 => 5.2.0-rc.6 
    @storybook/theming: ^5.2.0-rc.6 => 5.2.0-rc.6 

Additional context
Source Code
Live Storybook

[atanasster]

@chrsep not sure, but can you wrap your component in a container with styling as needed instead of storybooks adding styles that can interfere with other types of components?

[chrsep]

@atanasster Yes, i can do that. I can see why adding styles directly to storybook can be problematic.

But I feel that this might be something that would be better solved directly on storybook, other people might get confused when their components jumps out of the preview block. It kinda surprises me when that happen, i didn't expect my component to be able to affect or be affected by stuffs outside the preview block. I guess i sort of expected it to work like a miniaturized canvas page that have iframe that fully contained my code.

[shilman]

@chrsep i'm open to styling the container differently. i'll play around with your solution!

[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!

[dcods22]

Id want to add to this. We have a component that is a navigation which has a fixed position and top: 0; left: 0. We want this component to be fixed to the top of the screen at all times. This looks great when we have the component in the canvas, but when trying to leverage docs it looks very weird.

Screenshot:

Ideally this would somehow be contained in the preview window. This causes issues because of navigation component has 3 different examples of the options as stories and they all overlay ontop of each other.

[morganfeeney]

I found decorators useful here as a temp fix:

import React from 'react';
import { action } from '@storybook/addon-actions';
import bagItems from '../../../lib/bagItems';
import MiniBag from './Header__minibag';

const styles = {
  transform: 'scale(1)',
  height: '100vh',
};

export default {
  title: 'Components|Header/Minibag',
  component: MiniBag,
  decorators: [storyFn => <div style={styles}>{storyFn()}</div>],
};

export const basic = () => (
  <MiniBag
    minibagItems={bagItems[0]}
    active
    toggleMinibag={action('toggleMinibag')}
  />
);

basic.story = {
  name: 'Default',
};

They can be used to add some Story Book _only_ styles so you don't see styling issues when using position: fixed on a component.

[pixelass]

@morganfeeney Thank you for your suggestion. Sadly this also breaks the CSS logic of fixed elements since they will now be fixed to that container and not the viewport.

I think the only valid solution would be to render each preview in an iframe otherwise there is no way to support fixed elements (this is just how CSS works)

[shilman]

@pixelass you can force Storybook to render your Docs story in an iframe, globally, per component, or per story

https://storybook.js.org/docs/react/writing-docs/doc-blocks#inline-rendering

[morganfeeney]

@pixelass you are welcome, but it is only a suggestion, a mere workaround to help people out if they get here and are in a hurry to get things working quickly.

You got me thinking about CSS, what I found is that adding a transform is a valid way to change the _containing block_ from the _viewport_: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed

[pixelass]

@morganfeeney Thank you. I did not know that one can force iframe rendering. I did hit another issue though and I have the feeling this is not documented anywhere: https://storybook.js.org/docs/react/writing-docs/docs-page#inline-stories-vs-iframe-stories

[...] But using an iframe has disadvantages. You have to explicitly set the height of iframe stories or you’ll see a scroll bar. [...]

It neither states how to set the height nor does it link to a section of the docs where it is documented. Searching for "height" within the docs also returned no results.

I would be willing to fix the missing parts in the documentation once I find a solution.

I tried this without success:

function withWrapper(style: React.CSSProperties) {
    return f => <div style={style}>{f()}</div>;
}

const story = {
    component: MyComponent,
    title: "Foo/Bar/My Component",
    decorators: [ withWrapper({
        height: 500,
    })]
};

I ended up disabling "docs" for the components with this issue for now. Since we have a separation of docs and examples this doesn't bother us too much right now.

const story = {
    component: MyComponent,
    title: "Foo/Bar/My Component",
    parameters: {
        docs: {
            page: null
        }
    }
};

Also to answer your statement:

You got me thinking about CSS, what I found is that adding a transform is a valid way to change the containing block from the viewport: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed

That is in fact true but changing the containing block causes other features to not work as expected. Fixing the element to the top would be the biggest impact. Obviously there are ways to rewrite the components to fix this issue but I strongly suggest against adjusting styles "only to support" that the Components can be rendered inline.

Features that will not work or experience issues could be:

• position: fixed works as expected
• scroll listeners will return the result as expected
• animations/performance

[shilman]

@pixelass you can force the iframe height using the docs.story.iframeHeight parameter.

[frassinier]

👋 Could please tell me if it works for y'all?
https://github.com/storybookjs/storybook/pull/11350

Demo is here
https://5a375b97f4b14f0020b0cda3-qwtnrhmjkl.chromatic.com/?path=/docs/addons-docs-mdx-id--fixed-layout-example

[shilman]

w00t!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.8 containing PR #11350 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.

[pixelass]

@shilman I updated @storybook/docs to v6.1.0-alpha.9 but the issue persists.

I also tried this code: (but the height is not applied).

const story: Meta = {
    component: Grid,
    title: "Design System/Layout/Grid",
    parameters: {
        docs: {
            inlineStories: false,
            story: {
                iFrameHeight: 500,
            },
        },
    },
};

[shilman]

@pixelass iFrameHeight => iframeHeight

[shilman]

@frassinier can you help @pixelass with the original issue?

[pixelass]

@pixelass iFrameHeight => iframeHeight

My bad. I tried iframeHeight too but neither works.

[frassinier]

Actually, it's not designed to be used with CSF but with MDX:

<Story name="custom-height" height="500px">
  <YourComponentUsingFixingPosition />
</story>

@shilman I can try to add it to this interface, in addition?

[pixelass]

@frassinier you just found the issue... 💯
@shilman

The issue was

{docs: {story: { iframeHeight: 500}}}

should be

{docs: { iframeHeight: 500}}

(not nested under the story property)

[shilman]

Looks like we're good @frassinier. Thanks!