search

zeplin / storybook-zeplin

Storybook addon to view Zeplin resources in story panel
https://storybook-zeplin.netlify.app
MIT License
116 stars 16 forks source link

Add pixel diff functionality #2

Closed mertkahyaoglu closed 3 years ago

mertkahyaoglu commented 4 years ago

This feature shows difference between Zeplin designs and rendered components in pixels.

yannbf commented 4 years ago

This sounds incredible! Let me know if I can help somehow! Would be also awesome if it was possible somehow to overlay the design on top of the component, with some transparency and zoom levels. Kind of like this feature from zeplin: https://support.zeplin.io/en/articles/1437093-comparing-app-website-with-designs-using-pop-out

mertkahyaoglu commented 4 years ago

Thanks @yannbf ❤️

Would be also awesome if it was possible somehow to overlay the design on top of the component

It's a really good idea but I don't think it would be possible due to the limitation of Storybook API (opening a new window etc.). I was thinking something like plotting differences in addon panel using a tool like pixelmatch. It can be toggled with a button.

yannbf commented 4 years ago

Yeah, makes sense.. I guess they're using electron or similar, so that provides APIs for such functionality. I really like the idea for the visual diffing, it's kind of what chromatic does. So you'd make a screenshot of the iframe and compare with the design, right?

mertkahyaoglu commented 4 years ago

Yeah, that's right. I'm looking for ways to get the iframe's dom element right now so we can get a screenshot of it.

yannbf commented 4 years ago

Yeah, that's right. I'm looking for ways to get the iframe's dom element right now so we can get a screenshot of it.

document.querySelector('#storybook-preview-iframe').contentDocument should do it!

mertkahyaoglu commented 4 years ago

document.querySelector('#storybook-preview-iframe').contentDocument should do it!

Hmm, that's one way to do it, I guess. I was looking for a solution provided by the API but this can work for now. Thanks 👍

mertkahyaoglu commented 3 years ago

Resolved via #13