[Shell Panel] add open/close animation

fdeters commented 11 months ago

Check existing issues

[X] I have checked for existing issues to avoid duplicates

Description

I'd like to be able to configure the calcite-shell-panel component to transition its width on collapse/expand. I could see it being a property like animate-collapse, or potentially configured through CSS variables.

This is most relevant when the shell panel is being used in docked mode next to a large map in the central calcite-shell content area. Opening and closing the shell panel has a somewhat jarring effect.

Acceptance Criteria

calcite-shell-panel can transition its width on expand/collapse for a smooth open/close effect.
user can opt in or out of the transition

Relevant Info

No response

Which Component

Shell Panel

Example Use Case

No response

Priority impact

p4 - not time sensitive

Calcite package

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

Esri team

N/A

macandcheese commented 11 months ago

Ideally we can share an animation / transition between Sheet and all the Shell Panel modes, right now it isn’t consistently applied. I think a css variable / token override is a nice option to adjust or opt-out of that once added.

geospatialem commented 3 months ago

Once implemented in #7180 can verify if in place, or a follow-up is needed in a future milestone.

Esri / calcite-design-system