Granular control of zoom feature in canvas, to avoid breaking fixed positioning

[konsalex]

Is your feature request related to a problem? Please describe.

Positioning in Docs page is broken for elements with fixed positioning.

Examples:
Working deployment (7.0.6): https://storybook-7-0-6-reproduction.surge.sh/?path=/docs/uicomponents-date-picker-date-range--docs

Issue (7.1.0): https://storybook-7-1-0-reproduction.surge.sh/?path=/docs/uicomponents-date-picker-date-range--docs

Component that are using position: fixed are:

1. Being cut-off (can work-around this with bigger canvas size)
2. Positioning is breaking because of the transform styling applied

An option would be to avoid zooming per story, and disable it for those components.

More info about the context of this feature request here: #23586

Describe the solution you'd like

Usually the components that use fixed positioning are very few in a Component Library, so I would expect this setting to be inside a CSF rather than the Preview file.

Would a parameter on the component meta work? I can see also from docs that some addons may rely to parameters.

Example usage I am thinking:

export default {
  title: 'UIComponents/Dropdown',
  component: Dropdown,
  tags: ['docsPage'],
  parameters: {
    disableZoom: true // Zoom is enabled by default  
  },
} as Meta<ComponentProps<typeof Dropdown>>;

Usability wise, the best would be to also include a message on why we disable zoom in specific components, so users will not be confused by having some stories with and some without zoom.

Last, maybe we could use a global parameter in Preview file if we want this feature disabled everywhere in our Storybook.

Describe alternatives you've considered

Increasing size of canvas to avoid cutoff, but then on zooming-in, the positioning breaks.

Are you able to assist to bring the feature to reality?

no

Additional context

More info about the context of this feature request here: #23586

[marcinzarycki]

This is a larger issue when a component uses a library that has popovers with fixed positioning, and the top/left position of the popover is calculated based on the parent component's position on the page, because the lower the component is on the screen, the further below the popover is rendered.

I have a code editor component built using the CodeMirror library, and the Autocompletion popover, which should show up right below the active line, ends up being several hundred pixels below the editor because it uses fixed positioning, which doesn't work due to the transform property. Making the canvas larger isn't a valid solution for this case.

[etlovett]

I'm upgrading from v6.5.13 to v7.6.7 for a relatively large design system that uses Storybook to generate a documentation site for internal usage, and I'm finding this issue to be a major headache during this upgrade. Lots of different types of components used to overflow their canvas bounds in our docs: dropdowns, menus, tooltips, modals, takeovers, dialogs, etc. For any component that uses any of these features, we must now specify a hardcoded larger height for the story. These hardcoded values have to then be hand-tuned for nearly every story, to ensure that the story contents fit in the canvas without excessive extra whitespace in our docs. We also can no longer test modals and takeovers full-screen to properly see behavior like the background page scroll becoming disabled.

Please consider adding some way to allow stories to overflow their canvas bounds to allow us to opt out of this hassle.

Thanks for an otherwise-great product!

[valentinpalkovic]

Closing in favour of #23586