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

chrsep · 2019-09-06T10:25:18Z

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:

Create a div with position: fixed
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

The text was updated successfully, but these errors were encountered:

atanasster · 2019-09-08T09:37:14Z

@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 · 2019-09-08T12:51:15Z

@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 · 2019-09-08T13:28:24Z

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

stale · 2019-09-29T14:16:51Z

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 · 2019-10-29T21:52:44Z

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 · 2019-11-21T10:17:17Z

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 · 2020-09-02T14:55:33Z

@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 · 2020-09-03T00:10:19Z

@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 · 2020-09-03T07:09:34Z

@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 · 2020-09-03T08:54:25Z

@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 · 2020-09-05T01:25:02Z

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

frassinier · 2020-09-11T07:51:03Z

👋 Could please tell me if it works for y'all?
#11350

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

shilman · 2020-09-11T16:53:46Z

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 · 2020-09-15T10:38:22Z

@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 · 2020-09-15T11:53:59Z

@pixelass iFrameHeight => iframeHeight

shilman · 2020-09-15T11:54:32Z

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

pixelass · 2020-09-15T12:22:45Z

@pixelass iFrameHeight => iframeHeight

My bad. I tried iframeHeight too but neither works.

frassinier · 2020-09-15T12:35:24Z

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 · 2020-09-15T13:40:48Z

@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 · 2020-09-15T16:05:14Z

Looks like we're good @frassinier. Thanks!

RenanRossiDias · 2021-09-22T14:08:47Z

@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)

Thank you dude! This worked nicely for me!

vatsalRai · 2022-06-21T13:52:08Z

I tried setting the iframeHeight and inlineStories property but it didnt work for me. I also tried with decorators as suggested but still no success.

this is the code of my mdx file:

<Meta
title="My Title"
decorators={[
storyFn => <div style={
transform: 'scale(1)',
height: '100vh',
}>{storyFn()},
]
})
]}
parameters={{
docs: {
inlineStories: false,
iframeHeight: 500,
}
}}
/>

sandranrivas · 2022-09-01T15:06:04Z

This solved it for me

<Meta
  title="MyComponent"
  parameters={{
    docs: { inlineStories: false, iframeHeight: '425px' },
  }}
  component={mycomponent}
/>

bjankord · 2022-10-30T12:48:10Z

You might try wrapping a div around your story with the following CSS:

<div style="height: 500px; transform: translateZ(0);">
  Your story template code
</div>

- Storybook에서 position: fixed가 제대로 되지 않는 현상이 발생하고 있다. - 따라서 absolute로 임시방편 후 주석을 달아놓았다. - 참고: storybookjs/storybook#8011

EarthlingDavey · 2023-10-29T17:10:40Z

If your file extension is .stories.jsx or .stories.tsx then you can inline a wrapper div like:

const meta = {
  title: "UI/SideBar",
  component: () => (
    <div style={{ minHeight: "200px" }}>
      <SideBar />
    </div>
  ),
...

… vises feil i docs-fanen i storybook Bugen er kjent for Storybook, men de har ikke implementert noen fiks enda: storybookjs/storybook#23586 Det er flere som har laget workarounds, en er å rendre story som en iframe istedenfor inline ved å sette inline false https://storybook.js.org/docs/api/doc-block-story#inline , som foreslått i denne tråden storybookjs/storybook#8011 . Det er noen ulemper med dette, lettest å vise i code review Related work items: #322120

shilman added addon: docs bug labels Sep 6, 2019

shilman added this to the 5.3.0 milestone Sep 8, 2019

shilman added the has workaround label Sep 8, 2019

stale bot added the inactive label Sep 29, 2019

shilman added the todo label Sep 30, 2019

stale bot removed the inactive label Sep 30, 2019

shilman modified the milestones: 5.3.0, 5.3.x Jan 11, 2020

shilman mentioned this issue Apr 29, 2020

Addon-docs: Preview component is not compatible with content that is hidden #8928

Closed

shilman modified the milestones: 5.3.x, 6.0 docs Apr 30, 2020

shilman modified the milestones: 6.0 docs, 6.1 docs Jun 24, 2020

frassinier mentioned this issue Jun 29, 2020

Addon-docs: Fix fixed-position inline stories #11350

Merged

shilman closed this as completed Sep 11, 2020

neldeles mentioned this issue Nov 16, 2021

Setting inlineStories to false causes the documentation code snippet to be generated incorrectly #13139

Open

LimaAkter233 mentioned this issue Apr 18, 2023

The header with css rule - position: fixed gets out of the storybook preview screen #22138

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

chrsep commented Sep 6, 2019

atanasster commented Sep 8, 2019

chrsep commented Sep 8, 2019

shilman commented Sep 8, 2019

stale bot commented Sep 29, 2019

dcods22 commented Oct 29, 2019

morganfeeney commented Nov 21, 2019 •

edited

Loading

pixelass commented Sep 2, 2020

shilman commented Sep 3, 2020 •

edited

Loading

morganfeeney commented Sep 3, 2020

pixelass commented Sep 3, 2020

shilman commented Sep 5, 2020

frassinier commented Sep 11, 2020

shilman commented Sep 11, 2020

pixelass commented Sep 15, 2020 •

edited

Loading

shilman commented Sep 15, 2020

shilman commented Sep 15, 2020

pixelass commented Sep 15, 2020

frassinier commented Sep 15, 2020 •

edited

Loading

pixelass commented Sep 15, 2020

shilman commented Sep 15, 2020

RenanRossiDias commented Sep 22, 2021

vatsalRai commented Jun 21, 2022 •

edited

Loading

sandranrivas commented Sep 1, 2022 •

edited

Loading

bjankord commented Oct 30, 2022

EarthlingDavey commented Oct 29, 2023 •

edited

Loading

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

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

Comments

chrsep commented Sep 6, 2019

atanasster commented Sep 8, 2019

chrsep commented Sep 8, 2019

shilman commented Sep 8, 2019

stale bot commented Sep 29, 2019

dcods22 commented Oct 29, 2019

morganfeeney commented Nov 21, 2019 • edited Loading

pixelass commented Sep 2, 2020

shilman commented Sep 3, 2020 • edited Loading

morganfeeney commented Sep 3, 2020

pixelass commented Sep 3, 2020

shilman commented Sep 5, 2020

frassinier commented Sep 11, 2020

shilman commented Sep 11, 2020

pixelass commented Sep 15, 2020 • edited Loading

shilman commented Sep 15, 2020

shilman commented Sep 15, 2020

pixelass commented Sep 15, 2020

frassinier commented Sep 15, 2020 • edited Loading

pixelass commented Sep 15, 2020

shilman commented Sep 15, 2020

RenanRossiDias commented Sep 22, 2021

vatsalRai commented Jun 21, 2022 • edited Loading

sandranrivas commented Sep 1, 2022 • edited Loading

bjankord commented Oct 30, 2022

EarthlingDavey commented Oct 29, 2023 • edited Loading

morganfeeney commented Nov 21, 2019 •

edited

Loading

shilman commented Sep 3, 2020 •

edited

Loading

pixelass commented Sep 15, 2020 •

edited

Loading

frassinier commented Sep 15, 2020 •

edited

Loading

vatsalRai commented Jun 21, 2022 •

edited

Loading

sandranrivas commented Sep 1, 2022 •

edited

Loading

EarthlingDavey commented Oct 29, 2023 •

edited

Loading