Suggested changes to sl-split-panel

[andyjessop]

The panel works really well, I just have a few suggestions to improve the aesthetics.

1. Expose --divider-color, --divider-color-hover, and --divider-color-dragging so that the look and feel can be customised.
2. Overwrite the cursor for the whole document when dragging to indicate that the dragging is still active.

See both of these new behaviours here:

with-improvements.mov

Current behaviour here:

current.mov

I was able to get this working with the following changes:

1. Add a state property to the component, either dragging or idle.
2. Conditionally add a .dragging class dependent on the above state.
3. Expose the colors like this:

  :host {
    --divider-color: var(--cx-color-neutral-100);
    --divider-color-hover: var(--cx-color-neutral-300);
    --divider-color-dragging: var(--cx-color-primary-500);
    --divider-color-focus: var(--cx-color-primary-600);

    display: grid;
  }
  .divider {
    ...
    background-color: var(--divider-color);
    ...
  }

  .divider:hover {
    background-color: var(--divider-color-hover);
  }

  .divider.dragging {
    background-color: var(--divider-color-dragging);
  }

  :host(:not([disabled])) .divider:focus-visible {
    background-color: var(--divider-color-focus); <-- also allows customisation of focus color
 }

4. Add a watcher on the state to set the document:

@watch('state')
  handleStateChange() {
    if (this.state === 'dragging') {
      document.body.style.cursor = this.vertical ? 'row-resize' : 'col-resize';
    } else {
      document.body.style.cursor = '';
    }
  }

5. Set the state in the drag handler:

  private handleDrag(event: PointerEvent) {
    ...

    this.state = 'dragging';

    drag(this, {
      ...
      onStop: () => {
        this.state = 'idle';
      },
    });

I feel that these are minor and simple improvements, but significantly affect the overall usability of the component.

Edit: would probably also need to reset the cursor on disconnectedCallback. Like this:

disconnected.mov

[claviska]

Have you seen this example? The divider exposes CSS parts, making it customizable.

https://shoelace.style/components/split-panel/#customizing-the-divider

[andyjessop]

I think it's not the same as what I'm suggesting.

To clarify, I'm not suggesting to ONLY modify the look of the divider. What I am suggesting is to augment the code to give the ability to modify the look of the divider in different states (idle, hover, dragging), and also to ensure that the cursor stays as the resizing cursor even when outside the hit area.

Please check out the example screencasts.

[claviska]

Gotcha. Parts are commonly used for that (e.g. divider divider--dragging — more info on this) but it should really be a custom state. Once that feature lands in all browsers, we'll be adding them to replace parts that are [mis]used like this.

However, one thing we intentionally avoid whenever possible is using custom properties to express states. They're too cumbersome and not the right tool for the job. For the time being, I'd suggest using a combination of parts and pseudo selectors.

sl-split-panel::part(divider):active {
  cursor: grabbing; 
}