Programmatically set height / width of Resizable Panel

[dpbayer]

Check existing issues

• I have checked for existing issues to avoid duplicates

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 #8210

Acceptance Criteria

• Width and Height of a Resizable panel can be set manually
• Sample showing how to set up a horizontal resizable panel which appears in the "panel-bottom" slot of a calcite-shell

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

• @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]

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]

@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.

calcite-design-system/packages/calcite-components/src/components/shell-panel/shell-panel.tsx

Line 601 in 204b93f

layout === "horizontal"

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.