calcite-design-system icon indicating copy to clipboard operation
calcite-design-system copied to clipboard

Persist resizable shell panel widths

Open nwhittaker opened this issue 1 year ago • 2 comments

Check existing issues

Description

The width of a resizable <calcite-shell-panel> currently resets upon refreshing the browser window. The requested enhancement is that, if the user had resized the panel manually, the panel stays that width until the user changes it again -- even after refreshing the window and possibly extending across sessions.

While it's possible for the consuming app to implement this functionality using resize observers and setting Calcite CSS variables, there is enough room for variance in the requirements that we'd likely end up with an inconsistent UX across Esri apps.

Acceptance Criteria

  • [ ] The width of a manually resized shell panel is restored after refreshing the browser window.
  • [ ] The width of a manually resized shell panel is restored after expiring the browser session, and starting a new session(?).
  • [ ] Within a routing webapp, the width of a manually resized shell panel is restored after navigating away from, and back to, a view with the shell panel.
  • [ ] If the width of the viewport changes after navigating away, the restored width takes up the same percentage of the viewport, rather than the same pixel value(?).

Relevant Info

Other components provide a storageId prop for persisting state to local storage. Something similar might work well here.

Which Component

Shell panel

Example Use Case

Field Maps Designer is interested in using the <calcite-shell> and <calcite-shell-panel> elements to create several list/detail views across several different routes. If the user decides to give the detail view a little more room by resizing the shell panel, it'd be nice to maintain that width when visiting the other related list/detail routes.

Priority impact

p3 - want for upcoming milestone

Calcite package

  • [X] @esri/calcite-components
  • [ ] @esri/calcite-components-react
  • [ ] @esri/calcite-design-tokens
  • [ ] @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Field Apps

nwhittaker avatar Nov 17 '23 23:11 nwhittaker