Fix panels hiding after resizing

[evgenykochetkov]

Right now if you resize a panel and then try to hide it(by pressing the shortcut), it will only hide panel's contents, the panel itself still occupies space.

This PR fixes it by not using SplitPane when we need to render just one panel.

Another approach would be to add support for hiding panels in react-split-pane. Not sure which one is the best.

[arunoda]

This is great.
I think this approach is fine.

I need only small UI fix before we could get this.
see:

Here we need to add some more margin to the panel in the right.

[benediktvaldez]

This seems to run fine, and fix the issue, so good job on that!

I did try running it on an existing project I have, where I'm using the options addon, and noticed it seems to be causing problems when using either showLeftPanel or showDownPanel, as in the keyboard shortcut won’t work anymore (regardless of the option set, you’re stuck with the option set by the options addon).

I created a repo where you can replicate the problem
https://github.com/benediktvaldez/storybook-ui-67

[benediktvaldez]

Wondering why you changed this style? Doesn't seem to affect the functionality (at first glance) but results in an inconsistency in the layout.

Before: http://d.pr/i/MFLx/4fZwjSJs+

Before	After

[usulpro]

I tried to reproduce this issue with storybook-addon-options and find out that every changing of showLeftPanel or showDownPanel cause the page reloading

It happens when leftPanel() or downPanel() appears in another place of DOM structure.
The result of page reloading is re-running the code from .storybook\config.js.

That's why

you’re stuck with the option set by the options addon

I believe that the page reloading after keyboard shortcut applying is something undesirable 😮

some minor experiments showed that we can prevent reloading if keep the nesting div structure or something around this... maybe it's possible to find any better solution for this..? 😊

Anyway it seems that it's more issue with this PR than with storybook-addon-options?

BTW react-split-pane is now available as a separated package. I didn't try it deeply but maybe the latest version already solves this issue?

[usulpro]

this causes a page reload

[usulpro]

Looks like this PR #59 solved the similar issue

[ndelangen]

Hey @evgenykochetkov

Thank you so much for this PR! We're moving over to a mono-repo, since that makes a lot of sense for a project like this.
We would ❤️ it if you could create a PR here: https://github.com/storybooks/storybook

That'd be awesome, thanks!

[evgenykochetkov]

Oh hi @ndelangen!
I was just about to close this PR anyway because I'd rather try a different approach to this issue.
Great news about the mono-repo, I will gladly do a PR there ❤️