search

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
295 stars 76 forks source link

Programmatically set height / width of Resizable Panel #10568

Open dpbayer opened 1 month ago

dpbayer commented 1 month ago

Check existing issues

Description

Calcite shell panels support the resizable property. It would be helpful to be able to programmatically set the height and width of the resizable panel so that the panel can be initialised with a set height or width, and so that it can support actions to maximise the size of the panel, or shrink it to a default size.

The suggestion could also be used to allow developers to implement https://github.com/Esri/calcite-design-system/issues/8210

Acceptance Criteria

Relevant Info

No response

Which Component

### Example Use Case See sample at: https://codepen.io/dpbayer/pen/RwXZvrX?editors=100 In the example, the bottom table, has header buttons that we are looking to wire up to grow and shrink the panel. ### Priority impact impact - p2 - want for an upcoming milestone ### Calcite package - [X] @esri/calcite-components - [ ] @esri/calcite-components-angular - [ ] @esri/calcite-components-react - [ ] @esri/calcite-design-tokens - [ ] @esri/eslint-plugin-calcite-components ### Esri team ArcGIS Maps SDK for JavaScript
macandcheese commented 1 month ago

Ideally this could be accomplished with the existing css variables (https://developers.arcgis.com/calcite-design-system/components/shell-panel/#styles) - are there cases where those aren’t working?

I do think a “resize start / stop” event set would be useful for implementers to, if desired, persist a user’s changes in some way, at the app level.

dpbayer commented 3 weeks ago

@macandcheese The css variables allow you to control the initial height. However, when the panel is resizable, then after the user interacts with the panel, the size is set from internal calculations.

https://github.com/Esri/calcite-design-system/blob/204b93f8c882c381999dc37decbb159cbdce8185/packages/calcite-components/src/components/shell-panel/shell-panel.tsx#L601

This means that if (as in the sample), the app wants to set it full size, or shrink it after it has been resized by the user, this is not possible as the height is controlled via the internal variable.