fix!: Place sort handle inside k-item boundaries

[distantnative]

Description

• fix: Small fixes for sortable items  #7390
• feat: selected items & radio choice #7516

This PR improves drag'n'drop sorting of k-items for list layout: Instead of positioning the sort handle absolute outside of the k-items boundaries, it is now positioned relatively inside the container. This is necessary as SortableJS gets tripped up by the absolute positioning outside. To achieve the same look/style as before, a new .k-item-wrapper div was added and the main styles applied to this.

Changelog

Fixes

• Fixed sorting via drag (e.g. pages and files sections) in list layout
  Problem changing order of page list items in panel #7349

Breaking changes

• DOM structure of k-item has been changes. An additional wrapper .k-item-box div was added.

For review team

• Add lab and/or sandbox examples (wherever helpful)
• Add changes & docs to release notes draft in Notion

[bastianallgeier]

This is the kind of change where I wonder if we would actually need to call it "breaking". At least in terms of the markup and CSS for items. Unfortunately the items are so dominant in the panel that I can see how this could be an issue.

[distantnative]

I totally understand that point. At the same time I am not sure we can leave sorting pretty broken in the list layout for all of v5.

[bastianallgeier]

I tried a couple more things to get this done via a CSS-only solution, but it all feels like a hack. I think your solution really is the most stable one. It's nitpicky, but maybe we can find a better name for the wrapper? Something like k-item-box maybe?

[distantnative]

I just saw a comment on the sortablejs repo that position absolute would work as long as the same z-index. Maybe we could try that.

Otherwise, open to any name for the new div .

[distantnative]

Nevermind, that was also only true when the handle is placed absolute but inside the parent. So I think we really have to restructure it like in this PR. But not sure if in v5.x or v6.

[bastianallgeier]

Can we maybe split the PR? All your non-destructive changes to the items component could be immediately merged and I think they already help to fix a few things. With the other parts, we might think again if there's a CSS-only solution for v5 and then a more drastic solution for v6?

[bastianallgeier]

@distantnative I think you can resolve the conflicts better than me, but the PR definitely looks good.

[distantnative]

@bastianallgeier I will wait for the multi-select PR first, to not have to do it twice.