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

[fraincs]

Describe the bug
When a component shows content that is absolutely positioned, the content is hidden behind a scrollbar.

To Reproduce

1. Place a component that has hidden absolute positioned element by default
2. Make them appear (onClick, onHover)

Expected behavior
The content would show over the preview.

Screenshots
before clicking the date picker

clicked

What is expected

System:

Environment Info:

System:
OS: macOS Mojave 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Binaries:
Node: 12.7.0 - ~/.nvm/versions/node/v12.7.0/bin/node
Yarn: 1.19.1 - ~/Repos/sg-orbit/node_modules/.bin/yarn
npm: 6.10.0 - ~/.nvm/versions/node/v12.7.0/bin/npm
Browsers:
Chrome: 78.0.3904.108
Firefox: 69.0.1
Safari: 13.0.3
npmPackages:
@storybook/addon-actions: 5.3.0-beta.3 => 5.3.0-beta.3
@storybook/addon-console: 1.2.1 => 1.2.1
@storybook/addon-docs: 5.3.0-beta.3 => 5.3.0-beta.3
@storybook/addon-knobs: 5.3.0-beta.3 => 5.3.0-beta.3
@storybook/react: 5.3.0-beta.3 => 5.3.0-beta.3

[matiasmenker]

The same issue here!

FIX: I override the overflow: hidden; prop of the .css-h1ypda class that correspond to the Preview component on the storybook ui component and set to visible

I think to fix that we need to change the component styled prop from overflow: hidden; to overflow: visible; here i show the code that we have on the actually Preview component.

I hope that helps to fix the problem!

[fraincs]

@matiasmenker it's unfortunately not that easy, when there is a second preview just under.

[stale]

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!

[kikorb]

Hi bot! I am still interested in a solution.

[kikorb]

@matiasmenker it's unfortunately not that easy, when there is a second preview just under.

I understand this is a concern but shouldn't the popable content have a higher z-index than the entire next component? Wouldn't you run on the same issue in your application?

I would prefer for the preview overflown content to be visible than hidden, at least we would be able to fix the issue you are pointing out on a per-page basis.

[stale]

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!

[kumarharsh]

+1 I'd like to be able to tell the <Preview> component that there is some content inside which might be absolutely positioned.

The issue I'm facing is the same as highlighted above, but for React-Select and Popper tooltips. I could override it in a crude way by writing this CSS:

.sbdocs-preview, /* for the preview wrapper */
.sbdocs-preview > div > div { /* for another wrapper within the preview div */
  overflow: visible;
}

Basically the PreviewContainer and ChildrenContainer should have their overflows reset.

storybook/lib/components/src/blocks/Preview.tsx

Lines 52 to 55 in 88381d8

	const PreviewContainer = styled.div<PreviewProps>(
	({ theme, withSource, isExpanded }) => ({
	position: 'relative',
	overflow: 'hidden',

storybook/lib/components/src/blocks/Preview.tsx

Lines 20 to 25 in 88381d8

	const ChildrenContainer = styled.div<PreviewProps>(({ isColumn, columns }) => ({
	display: 'flex',
	position: 'relative',
	flexWrap: 'wrap',
	padding: '10px 20px 30px 20px',
	overflow: 'auto',

Maybe there should be a prop which can be passed to the <Preview> component to control this on a case-by-case basis?

[stale]

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!

[shilman]

@kumarharsh if you have ideas about how to do that, I'd be open to PRs

[kumarharsh]

Okay, will look into it next week :)

[mvirbicianskas]

hey, any chance @kumarharsh you made progress on that? I'm facing same issues, any kind of absolutely positioned popover is broken inside the Prieview block :(

[stale]

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!

[codequistador]

I hacked my way around this. Thought I'd share how. The third child deep off of sbdocs-preview has a transform property on it. Disabling that and setting some choice overflow: visibles did the trick

// preview-head.html
#docs-root .sbdocs-preview {
  overflow: visible;
}

#docs-root .sbdocs-preview > div:first-child > div:first-child {
  overflow: visible;
}

#docs-root .sbdocs-preview > div:first-child > div:first-child > div:first-child {
  transform: none;
}

[shilman]

closing as dupe to #8011