Split panel

[bjarnef]

Description

Split panel to split an area into a start and end area.
Currently named <uui-split-panel> but considered <uui-split-view> as well, but not sure if it will collide with the split view concept (compare language/segments) in Umbraco.

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Motivation and context

How to test?

Screenshots (if appropriate)

Checklist

• If my change requires a change to the documentation, I have updated the documentation in this pull request.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.

[github-actions]

Hi there @bjarnef, thank you for this contribution! 👍

While we wait for the team to have a look at your work, we wanted to let you know about that we have a checklist for some of the things we will consider during review:

• It's clear what problem this is solving, there's a connected issue or a description of what the changes do and how to test them
• The automated tests all pass (see "Checks" tab on this PR)
• The level of security for this contribution is the same or improved
• The level of performance for this contribution is the same or improved
• Avoids creating breaking changes; note that behavioral changes might also be perceived as breaking
• If this is a new feature, Umbraco HQ provided guidance on the implementation beforehand
• 💡 The contribution looks original and the contributor is presumably allowed to share it

Don't worry if you got something wrong. We like to think of a pull request as the start of a conversation, we're happy to provide guidance on improving your contribution.

If you realize that you might want to make some changes then you can do that by adding new commits to the branch you created for this work and pushing new commits. They should then automatically show up as updates to this pull request.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

[bjarnef]

@iOvergaard I think the <uui-resize-observer> is a bit related and would be useful to resize any slotted content (a bit similar to native textarea has a resize option).
https://shoelace.style/components/resize-observer

[bjarnef]

@iOvergaard would CustomEvent be better instead of a UUIResizeEvent?

[iOvergaard]

We tend to use UUI-events inside the library. They ultimately extend Event. I think it's perfectly fine what you are doing here.

[nielslyngsoe]

Hi @bjarnef Thanks for your input. I would love to hear some more of the back story for such features. We are not trying to build a full UI Library to accommodate everything — The goal is to accommodate the needs of Backoffice and Extensions of Backoffice. And by this as well guide developers to build UI in a certain way.

With that said I see two different components here, could we split them into two PRs with a description of the purpose and why we need this in the UI Library?

So we have a split view in Backoffice, which cannot scale/move the split in its current state — this could be nice to have a component to solve, so we easily can make that possible.

We also have a sidebar in Backoffice, which in the current Backoffice can be scaled. Could one of these components be used to solve this? If so that could be nice to demonstrate in a story — underlining the purpose not only for us but also other developers looking for components for their packages.

I also noticed in code there is a option to do vertical split, but I'm not sure about such use case. We have to be aware that if we make something possible we might have package developers using it — and I'm not sure in which case we want any developers to do so, please enligthen me. But if not super clear need then I would say we should not provide such feature. Even though I understand its not much code. But simply to keep the features simple, so we have less to maintain. :-)

Thanks :-)

[bjarnef]

@nielslyngsoe I imagine something like this: https://shoelace.style/components/split-panel

The current backoffice allows to drag size of tree area, the new backoffice doesn't (yet).

Besides that it could eventually be used in splitview or other parts on the UI.

I also like the feature to have an initial position, horizontal/vertical, disabled, min and max size of panels.
Maybe also the nested split panels.

Currently the split view feature in Umbraco backoffice is horizontal, but no all property editor works well on a small width, e.g. Image Cropper. In that case maybe splitted vertical would be better?

[iOvergaard]

Hi @bjarnef
We have started building a split panel component in the new backoffice repository. We'd like to keep it there for now and then eventually move it upstream to the UI library for others to enjoy.

You can check it out here: umbraco/Umbraco.CMS.Backoffice#1174

Resize observer could be interesting to have as a component, but not sure how well we can use it. We just implemented a resize observer on uui-tab-group so if we could generalize that a little bit, that would be interesting to explore. Do you have any thoughts in that regard?

I am going to close this draft PR and would like to see the efforts continued on the other repository, so please if you have anything to offer on that component, feel free to have a look!