Allow viewport width/height fields to be editable + draggable viewport

[AndrewLeedham]

Describe the solution you'd like
When a viewport is selected, it shows the width and the height and allows them to be swapped, it would be nice if we could also edit those fields as number inputs. It would also be useful to make the right and bottom of the canvas draggable.

Describe alternatives you've considered
I realise there is an add-on called taffy which adds this behaviour, but I am not sure it is maintained and the viewport plugin looks more inline with storybook's design.

Are you able to assist to bring the feature to reality?
Yes I can take a shot at implementing this.

[shilman]

That sounds like a great enhancement. As long as it doesn't complexify the code or the UI too much, would love it if you can contribute a PR for this.

@domyen got any design requests here?

[AndrewLeedham]

@domyen it seems there isn't currently a numeric input in @storybookjs/components. What is the process for adding something like that?

• Use a premade library like react-numeric-input
• Add all the logic like up/down arrows here
• Use the existing input with just inputMode numeric and a pattern regex

[domyen]

Excited! 🤗

@AndrewLeedham we have a SB numeric input as part of the Controls addon. Perhaps you can reference that and add a generic/basic version to storybookjs/components that solves your use case? https://next--storybookjs.netlify.app/official-storybook/?path=/story/controls-number--basic

File path storybook/lib/components/src/controls/Number.tsx

[AndrewLeedham]

@domyen Ah missed that one, thanks. I have a working implementation of the width/height field part, still need to work out the details on the resizable part. Let me know if you have any thoughts: #12627

[domyen]

Nice!

I suspect we'll need to create an input styling for the Toolbar because its dimensions are quite constrained. Our standard Inputs aren't designed to handle out of the box.

If you can get the behavior working, I'll think through the styling/UX changes. wdyt?

[AndrewLeedham]

I suspect we'll need to create an input styling for the Toolbar because its dimensions are quite constrained. Our standard Inputs aren't designed to handle out of the box.

I had a go in that PR, I gave it a min-height of 20px instead of 32px and 3px padding instead of 6px. Happy with whatever changes you want to make to that.

If you can get the behavior working, I'll think through the styling/UX changes. wdyt?

I have the numeric input behaviour all working, are you happy with that implementation in the PR?

---

For the resize stuff I am thinking of moving the Draggable and Handle components to @storybook/components so they can be used here and for the sidebar etc. Does that seem like a good approach, or should I use something different?

[domyen]

Fantastic work @AndrewLeedham!

Tweaks:

• esc should blur the field
• Change padding to 2px 2px 2px 6px (more compact)

re: Draggable and Handle
Need some clarification, are you suggesting to move the Draggable we already use in the Sidebar into @storybook/components so that we can reuse it in multiple places in the UI?

If so, that sounds good to me.

[AndrewLeedham]

Fantastic work @AndrewLeedham!

Tweaks:

• esc should blur the field
• Change padding to 2px 2px 2px 6px (more compact)

👍 will amend, sounds good.

re: Draggable and Handle
Need some clarification, are you suggesting to move the Draggable we already use in the Sidebar into @storybook/components so that we can reuse it in multiple places in the UI?

If so, that sounds good to me.

Yes exactly that. I will see if I can get this working when I get the chance.

[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. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[AndrewLeedham]

Still working on this, just a little short on time atm.

[AndrewLeedham]

This is dropped fairly low on my priority list, if anyone wants to pick it up I can share what I have, or better yet start from scratch because I would probably rewrite what I have anyway :/

[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. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[staminna]

Any progress on this regards?