[Shell Panel] Add displayMode value that matches Shell Center Row: detached display

[macandcheese]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

As part of the story to deprecate Shell Center Row - we need to add a displayMode to Shell Panel with additional capability - to have the entire Shell Panel "float" away from the page border.

Acceptance Criteria

A new displayMode is added to Shell Panel. Propose to call this mode "float", and change the current "float" to "float-detach" to more clearly convey the difference. Open to naming ideas.

Current Shell Center Row:

Proposed in Shell Panel:

Note - there are some margin differences we can work on here - also, this requires the user to set their "layout" in the Shell Panel to "vertical" and adjust width, maybe that can be smoothed. Potentially - there could be more "position" properties than start / end and it could be "top / bottom / start / end". We could use the Shell Panel's slot to set which css var are being used instead of "layout". But, that's a bit tangential.

Relevant Info

This would allow us to deprecate Shell Center Row as this is the last remaining functionality not offered by Shell Panel. Currently, this would have the same oddities "float" does without content-behind set on a parent Shell, but they can be improved together in the future.

Maybe we could consider renaming "overlay" to "dock-overlay" to match the thing-modifier format?

cc @asangma @mitc7862

Which Component

Shell Panel

Example Use Case

As a designer - I want to have a Panel + Action Bar within a Shell Panel "float" above the map without having the Action Bar attached to the edge of the container. Currently, I can't achieve this with built in styles in Shell Panel, but I could with Shell Center Row.

Priority impact

p3 - want for upcoming milestone

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react

Esri team

Calcite (design)

[macandcheese]

cc @brittneytewks @geospatialem - prioritizing this for next available milestone could help us deprecate Shell Center Row in the following release.

[SkyeSeitz]

Figma specs are available here: https://www.figma.com/file/AnRJbFQ31ZK04NkP22ylLU/Shell-Panel%3A-displayMode-%5B7513%5D?type=design&node-id=310%3A9795&mode=dev

Tagging in @jcfranco for comments on changing the current float value name to float-detach. This would be a breaking change, but would allow the new proposed displayMode to be called float and provide further accuracy to the names.

Related consideration Adam brought up: the position of the action bar is currently set using the position prop on Shell Panel, which we may want to update to action-bar-position for clarity.

[github-actions]

cc @geospatialem, @brittneytewks

[SkyeSeitz]

"content-detached" might add a bit more clarity 👍🏽

[josercarcamo]

@SkyeSeitz @driskull @jcfranco this is what I have so far. Please advise on how to proceed regarding the height of the action bar.

[jcfranco]

Please advise on how to proceed regarding the height of the action bar.

@josercarcamo It's not clear to me from the screenshot, but could you provide more info on the action-bar height blocker?

[driskull]

A new displayMode is added to Shell Panel. Propose to call this mode "float", and change the current "float" to "float-detach" to more clearly convey the difference. Open to naming ideas.

@macandcheese this is a bit confusing because it would introduce breaking changes if float started behaving differently.

[macandcheese]

Yeah, open to other naming ideas there.

[geospatialem]

The team will instead pursue a "float-all" and "float-content", deprecating "float" to avoid a breaking change. cc @macandcheese @SkyeSeitz @josercarcamo

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified the displayMode values of "float-content", "float-all" and "float" (deprecated) in 2.11.0-next.28 with https://codepen.io/geospatialem/pen/jOjyKrG.

[github-actions]

Issue #9275 has been closed, this issue is ready for re-evaluation.

cc @geospatialem,@DitwanP