Creating a better Developer experience for creating UIs inside PluginSidebar slotfill.

[ryanwelcher]

What problem does this address?

When creating a new PluginSidebar, the default UI experience is not ideal.

Any items inside the panel are pushed right up against the edges:

To address this, the contents need to be wrapped in a <PanelBody> component. This adds some unnecessary friction and boilerplate and is overall a frustating experience especially for developers who are just getting started.

What is your proposed solution?

I propose that we add a new prop to the PluginSidebar component called wrapContents that would default to false to allow for backwards compatibility for current implements.

When passed, the contents of the fill will be automatically wrapped in a <PanelBody> component. This is a much better DevEx for those looking to just have the panel contents render nicely while also allowing for much more control over the UI leaving value false and building out the UI manually.

This approach could also be applied to other slots as well.