Enter Full Screen mode without a keyboard

[aray12]

I'd love to be able to test certain items on my phone, but I can't enter full screen without the keyboard. I know I can test most items by just resizing the window, but I'd also like to test how certain items look with a keyboard taking up 1/3 of the screen etc.

Thoughts?

[arunoda]

Yeah I know. This is a pain. We will need to implement a mobile UI.

[arunoda]

cc @mnmtanish

[aray12]

Do you want me to repost in storybook-ui? After some digging, I realize now that is the repo where this change would happen. I don't think the problem is getting into fullscreen (make the icon in the popup a button) but then getting back out

[arunoda]

@aray12 Good question. May be we need to support the shake event or a long press event on the screen.

[aray12]

After some thought, it might be a good idea to completely rethink the approach for mobile. Responsive development is only becoming more important and in a perfect world I would see my components in both desktop and mobile (using something like browser-sync) simultaneously as I build for the basic visual testing. I noticed in #378 that you use storybook to match design which is exactly how we use it as well. But the mobile experience is lacking in storybook

1. the use of shortcuts means that browser-sync cannot keep them in sync (it syncs clicks)
2. the iframe has broken some of my css in mobile (banging my head over a bug that was gone as soon as I used the component in the actual app)
3. UI just wasn't built for mobile

I love using storybook and it has tremendously improved productivity and transparency, but I have found myself considering building a custom implementation. But that would take a bit of work to be as useful. One idea I had was, what if you guys extracted the logic that pulls together all of the stories into its own package so that people could build their own UI on top of that.

Pros

1. People could have their own branded version
2. No need for iframes

Con

1. Not as plug and play as the current setup

This is obviously not fully thought through. The point is rethinking approach for mobile. Any thoughts? Also how do you guys dev for mobile?

[Gnito]

Iframe certainly is problematic with Storybook. To me it would make more sense to

1. have general page with navigation column where React components are rendered to some container (main column)
2. have component specific page (pure component -> i.e. what currently is shown inside iframe).

-> addon related info etc. should be showed on off-screen canvas.
CSS Modules should help if someone is afraid that styles might affect each others.

[usulpro]

It could be solved by adding this #867 feature.
At the moment I'm working on moving storybook-eol/storybook-ui#69 into a monorepo

[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. We do try to do some housekeeping every once in a while so inactive issues will get closed after 90 days. Thanks!

[stale]

Hey there, it's me again! I am going to help our maintainers close this issue so they can focus on development efforts instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!