feat(shell-panel): Add resizable property to allow resizing of content. #2770

[driskull]

Related Issue: #2770

Summary

feat(shell-panel): Add resizable property to allow resizing of content.

• Adds resizable property to turn this feature on.
• Adds intlResize property for resize aria label.
• Sets up pointer events for handling resize
• Uses aria role of "separator"
  • https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/roles/separator_role
• max/min width from CSS still restricts bounds of resizing. Uses JS to get min/max values from the CSS variable.
• Keyboard accessible as well

Todo

Styling

[driskull]

@asangma can you review the DOM structure and advise on styling?

@jcfranco can you review zeee codez?

[macandcheese]

This is awesome - really like the attention paid to home / end / shift + nudges. Want me to take a crack at styling?

[driskull]

This is awesome - really like the attention paid to home / end / shift + nudges. Want me to take a crack at styling?

Yes plz!

[macandcheese]

Do you think adding an event that emits the px width at interaction end would be useful? If an app wants to save a user's last width, for example.

[driskull]

Yeah, i was considering an event. I think we could add it if we think its beneficial. However, nowadays users can just use a resize observer too.

[jcfranco]

Awesome! Just had some suggestions and nitpicks. Looks like a great enhancement! I'll defer to @Esri/calcite-design-representatives for the styling-side of things.

[driskull]

@jcfranco checked in fixes.

[jcfranco]

🎉 🌮 🦖

[macandcheese]

@asangma did you have any thoughts on design? I think it's tough to use any kind of handle affordance because of potential overlap with content.

Below shows the separator while hovering anywhere in the panel, to increase visibility of feature a bit. I looked at many examples of this functionality and most do not provide anything except the hover state while over the 1px separator. Below is 2px, feel free to provide feedback here!

https://jmp.sh/6gcuI7X

[driskull]

I think it's tough to use any kind of handle affordance because of potential overlap with content.

Maybe we should just have an invisible div that is positioned above the content on the side?

[macandcheese]

Maybe we should just have an invisible div that is positioned above the content on the side?

We could do that but I kind of like just using the .separator div. I've struggled to find an example of a resizable panel that does have some "extra handle" or anything like that, even in native OS it is usually a cursor change and border color. Open to using different color values for that cc @asangma

[asangma]

Hmmm...my initial thought is to have the "grab-able" area fatten up on focus/hover. But I'll pull and build and have a look.

[asangma]

As far as the .separator node, it has some issues when content-behind="false".

[driskull]

@asangma content-behind="false" shouldn't be a thing. Do you mean content-behind?

[macandcheese]

Let me know if I should create a branch with the above video styles from this one. I think the 2px / hover and focus affordance while over shell panel is a good middle ground, I worry about jumpiness if that pixel width increases further on hover.

[driskull]

@macandcheese just check them in here. I don't think we need a separate branch.

[macandcheese]

Added styles if ya want to take another look. The content-behind issue @asangma mentioned is when a panel is detached - the separator is still full-height currently. It's kind of an edgy case - and is true to the actual space occupied by the shell panel container - maybe not the worst thing but open to thoughts there:

[driskull]

Do we just want to disable resizing when a panel is detached?

[asangma]

Do we just want to disable resizing when a panel is detached?

yeah...I think so.

[asangma]

content-behind="false" shouldn't be a thing. Do you mean content-behind?

I meant when content-behind is not set.

[asangma]

YODA MAN.