[Shell Panel] Improve visibility of resizable functionality, allow resizable when displayMode="float"

[macandcheese]

Description

The current drag handle affordance can be a bit hard to notice.
This should support both Shell Panel and upcoming Sheet implementations.

Acceptance Criteria

• The resizable functionality of Shell Panel is easier to notice. This should also in certain cases be visually large enough (or have a hitbox large enough) to support thumb gestures for dragging.
• Support resizable when the component is also detached, when displayMode is set to "float"

Relevant Info

Questions:

• Should this have a "click to collapse" and "click to expand" button - brought up as UC feedback?

Which Component

Shell Panel, Sheet (upcoming)

Example Use Case

cc @asangma @SkyeSeitz @ashetland

Esri team

Calcite (design)

Calcite Design Solution

🔗 Link to Figma Specs

[macandcheese]

cc @SkyeSeitz @ashetland

[macandcheese]

+1 from BA cc @ddred11

[COV-GIS]

I had been working my own footer component with resizing until it was brought to my attention a shell-panel works better and has resizing built in. At first I thought resizing wasn't working. I couldn't see the drag bar and when I did it was real hard to use on a large hi-res screen. And it isn't intuitive to the user there's resizing even if they notice the bar.

Overall I like how it works, looks and fits the "calcite design" well. It would fine by me if it was 1 or 2 px bigger, had an additional 5px of hitbox either side, and had some indication of draggability. Methinks having a brand colored portion of the bar in the center when not active would look good and clearly indicate draggability.

Here was my solution as an example.

Also +1 on a collapse/expand button.

[driskull]

questions:

• There's no collapse button in the design right? I'm not seeing one. I just see double click to collapse/expand.

Some comments:

• We can maybe remove the need for the separator element to be focusable/focused for keyboard interactivity. Arrow keys when the panel is focused should just be able to handle this but would require an aria-live region to announce this.
• We can potentially use interact.js to handle resizing for better UX/consistency.
• I'm not sure the hit box area is really an issue. All other resizable areas including system windows don't really have a large hit box area for resizing. Even Figma's is pretty small.
• Neither Figma nor storybook has special styling for when a resize is active. Its basically just the focus styling. I'm not sure we need special styling either. If we make the shell-panel content container focusable it could handle both keyboard resizing and focus styles.