Addon-docs: Fix Preview scaling with transform instead of zoom #12845

Tomastomaslol · 2020-10-21T10:06:51Z

What I did

Replace zoom with transform to be able to support component scaling in browsers that don't support CSS zoom
Add ref around the previewed component to be able to calculate its height
Set the height of the ChildrenContainer based on the height of the previewed component

How to test

Go to a component
Go to the docs tab
Use the zoom in and zoom out buttons in the component preview

ndelangen · 2020-10-26T08:44:16Z

There seems to be some typescript issue preventing a successful build. If those were fixed, I can take a look at the stories in chromatic. Do you need help?

Tomastomaslol · 2020-10-26T09:55:30Z

I think I got it under control! I'm going to do some refactoring to simplify the Zoom component and that should solve all the typescript issues. Thanks for the offer! 🙂

ndelangen · 2020-10-27T14:44:54Z

@Tomastomaslol it seems there's some bug in the zoom component when it comes to snapshotting it in chromatic, could you take a look?
https://www.chromatic.com/snapshot?appId=5a375b97f4b14f0020b0cda3&id=5f97c01b2896dc00223749eb

…oomed out. validate iframe id

…12324_zoom_buttons_in_docs_do_not_work

…an instead of div as componentwrapper

lib/components/src/Zoom/ZoomIFrame.tsx

Tomastomaslol · 2020-10-28T08:43:30Z

@ndelangen It looks like the zoomed out example was too "zoomed out" and caused the UI test to not run. I'm currently getting some unintentional diffs in UI tests. Hopefully, I will figure out a good solution for it soon 🙂

ndelangen · 2020-10-28T17:00:24Z

lib/components/src/Zoom/ZoomIFrame.tsx

  setIframeInnerZoom(scale: number) {
    try {
      if (browserSupportsCssZoom()) {
+        Object.assign(this.iframe.contentDocument.body.style, {


iframe.contentDocument can't work cross origin.. but I'm guessing addressing that is out of scope.

can we use useRef() to get the current element instead though?

…nt to allow target css

…12324_zoom_buttons_in_docs_do_not_work

shilman · 2020-11-01T06:09:20Z

lib/components/src/Zoom/ZoomIFrame.tsx

+  active?: boolean;
+};
+
+export default class ZoomIFrame extends Component<IZoomIFrameProps> {


Small nit -- we've stopped using default exports in new code. Can you make these named exports instead?

Looking great otherwise! 💯

yes names exports are easier to trace and refactor 👍

This should now be resolved! 🙂

…12324_zoom_buttons_in_docs_do_not_work

…omastomaslol/storybook into 12324_zoom_buttons_in_docs_do_not_work

shilman

😍

shilman · 2020-11-09T08:50:33Z

Hi @Tomastomaslol ! Can you check the Chromatic snapshots and see if they match your expectations? There are a bunch that look the same ...

Tomastomaslol · 2020-11-09T21:43:21Z

To me, it looks like the chromatic snapshots are picking up some changes to props. This PR shouldn't introduce any visual diff for chrome and to the best of my knowledge, there is nothing in the Chromatic test that would indicate that a visual diff has been introduced.

Please let me know if there are any other scenarios you would like me to verify before we merge this code! 🙂

shilman · 2020-11-10T05:14:23Z

@Tomastomaslol I'm not talking about the args differences, I'm talking about the various zoom mode stories that you added. Do they look good to you?

Tomastomaslol · 2020-11-10T08:53:31Z

Hi @shilman! Sorry, I misunderstood what you were asking. Looking at the Iframe examples it doesn't look like the scale parameter has any effect on the scale of the content within the <Zoom.Iframe /> when used in a story. I spent some time trying to fix the examples and understand why this is happening. But so far I have been unable to explain the behaviour.

It possible it might be quite difficult to achieve a good example of the scaling levels due to the meta nature of this story. (Loading an example of itself into itself) and so far I have been unable to create any good examples demonstrating the scaling of the component. I will give it another go tomorrow with fresh eyes and see what I can come up with.

Any suggestions or ideas on how to resolve this would be welcomed! 🙂

Tomastomaslol · 2020-11-12T11:40:11Z

I have been spending some more time trying to figuring out why the iframe zoom examples didn't work.

To me, it looks like the component gets recreated each time the controls are updated. because of that, the Zoom Iframe component will never set the scale: https://github.com/storybookjs/storybook/pull/12845/files#diff-b03e456200be1b58f1ba7f6b26405348ad11c73e5e7281b8601ff50c7b7dcb76R22

Example not using controls to set the scale:

const TemplateIFrame = (args) => {
  const iFrameRef = React.useRef<HTMLIFrameElement>(null);
  const [scale, setScale] = useState(1);
  return (
    <div>
      <input type="number" onChange={(e) => setScale(parseInt(e.target.value))} value={scale} />
      <Zoom.IFrame iFrameRef={iFrameRef} scale={scale} active={true}>
        <iframe
          id="iframe"
          title="UI Panel"
          src="/iframe.html?id=ui-panel--default&viewMode=story"
          style={style}
          ref={iFrameRef}
          allowFullScreen
        />
      </Zoom.IFrame>
    </div>
  );
};

Results in:

My current suggested solution applies the scale after the iframe content has loaded which make it possible to demonstrate the functionality within a story.

The Zoom Iframe examples in chromatic look good now!

Please let me know if this makes sense or if there is a better way to solve this issue!

…12324_zoom_buttons_in_docs_do_not_work

shilman · 2020-11-19T01:36:21Z

Tested and it's looking great. Thanks for your patience on this @Tomastomaslol 🙏

use transform instead of zoom to scale component in Preview

30d1ea1

Tomastomaslol mentioned this pull request Oct 21, 2020

storybook 6: zoom buttons in docs do not work #12324

Closed

shilman added addon: docs block: other bug labels Oct 22, 2020

shilman added this to the 6.1 docs milestone Oct 22, 2020

Tomastomaslol and others added 5 commits October 24, 2020 18:10

Add new zoom component and use it in Preview blocks

9c681dc

removed unused imports

704d91e

add support to be able to zoom on a iframe

7a9575a

add Element to children props for Zoom

6e969b5

fix Zoom Props

f31bf0d

ndelangen assigned Tomastomaslol Oct 26, 2020

split zoom element and iframe in seperate Zoom components

16e86e7

Tomastomaslol added 4 commits October 28, 2020 08:11

do not pass id to Zoom iframe. make initial zommed stories out less z…

69e4e78

…oomed out. validate iframe id

Merge branch 'next' of https://github.com/storybookjs/storybook into …

d60370b

…12324_zoom_buttons_in_docs_do_not_work

only wrap element in ZoomElement if css Zoom is not supported. Use sp…

c875d45

…an instead of div as componentwrapper

re-add css zoom to target all child elements for ZoomElement

09e5fdd

Tomastomaslol commented Oct 28, 2020

View reviewed changes

lib/components/src/Zoom/ZoomIFrame.tsx Outdated Show resolved Hide resolved

ndelangen reviewed Oct 28, 2020

View reviewed changes

Tomastomaslol added 2 commits October 29, 2020 22:23

access iframe as a ref in Zoom.Iframe. add innerWrapper for ZoomEleme…

50e7385

…nt to allow target css

Merge branch 'next' of https://github.com/storybookjs/storybook into …

79d755e

…12324_zoom_buttons_in_docs_do_not_work

Tomastomaslol marked this pull request as ready for review October 29, 2020 11:49

Tomastomaslol requested review from igor-dv and tmeasday as code owners October 29, 2020 11:49

Merge branch 'next' into pr/12845

bb9f95d

shilman requested changes Nov 1, 2020

View reviewed changes

Tomastomaslol added 3 commits November 9, 2020 17:29

do not use default exports for Zoom component

4e65bd6

Merge branch 'next' of https://github.com/storybookjs/storybook into …

57c83c9

…12324_zoom_buttons_in_docs_do_not_work

Merge branch '12324_zoom_buttons_in_docs_do_not_work' of github.com:T…

7f79f75

…omastomaslol/storybook into 12324_zoom_buttons_in_docs_do_not_work

shilman approved these changes Nov 9, 2020

View reviewed changes

fix zoom iframe story. make udateable using controls

de43e6e

Merge branch 'next' of https://github.com/storybookjs/storybook into …

790b371

…12324_zoom_buttons_in_docs_do_not_work

ghengeveld assigned shilman and ndelangen Nov 18, 2020

shilman changed the title ~~Fix: use transform instead of zoom to scale component in Preview~~ Addon-docs: Fix Preview scaling with transform instead of zoom Nov 19, 2020

shilman merged commit 4747fea into storybookjs:next Nov 19, 2020

Tomastomaslol deleted the 12324_zoom_buttons_in_docs_do_not_work branch November 19, 2020 02:40

stu039 mentioned this pull request Nov 25, 2020

New Zoom component breaks IE11 support in v6.1.x #13272

Closed

idesigncode mentioned this pull request Nov 24, 2021

Firefox zoom implementation breaks position: fixed elements in Docs #16774

Open

lili2311 mentioned this pull request Sep 20, 2023

[Snyk-dev] Fix for 8 vulnerabilities lili2311/storybook#150

Open

lili2311 mentioned this pull request Nov 25, 2023

[Snyk-dev] Fix for 10 vulnerabilities lili2311/storybook#219

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Addon-docs: Fix Preview scaling with transform instead of zoom #12845

Addon-docs: Fix Preview scaling with transform instead of zoom #12845

Tomastomaslol commented Oct 21, 2020

ndelangen commented Oct 26, 2020

Tomastomaslol commented Oct 26, 2020

ndelangen commented Oct 27, 2020

Tomastomaslol commented Oct 28, 2020

ndelangen Oct 28, 2020

shilman Nov 1, 2020

shilman Nov 1, 2020

ndelangen Nov 2, 2020

Tomastomaslol Nov 9, 2020

shilman left a comment

shilman commented Nov 9, 2020

Tomastomaslol commented Nov 9, 2020

shilman commented Nov 10, 2020

Tomastomaslol commented Nov 10, 2020

Tomastomaslol commented Nov 12, 2020

shilman commented Nov 19, 2020

Addon-docs: Fix Preview scaling with transform instead of zoom #12845

Addon-docs: Fix Preview scaling with transform instead of zoom #12845

Conversation

Tomastomaslol commented Oct 21, 2020

What I did

How to test

ndelangen commented Oct 26, 2020

Tomastomaslol commented Oct 26, 2020

ndelangen commented Oct 27, 2020

Tomastomaslol commented Oct 28, 2020

ndelangen Oct 28, 2020

Choose a reason for hiding this comment

shilman Nov 1, 2020

Choose a reason for hiding this comment

shilman Nov 1, 2020

Choose a reason for hiding this comment

ndelangen Nov 2, 2020

Choose a reason for hiding this comment

Tomastomaslol Nov 9, 2020

Choose a reason for hiding this comment

shilman left a comment

Choose a reason for hiding this comment

shilman commented Nov 9, 2020

Tomastomaslol commented Nov 9, 2020

shilman commented Nov 10, 2020

Tomastomaslol commented Nov 10, 2020

Tomastomaslol commented Nov 12, 2020

shilman commented Nov 19, 2020