Skip to content

[Shell Panel] Add Overlay display mode #6388

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
macandcheese opened this issue Jan 31, 2023 · 5 comments
Closed

[Shell Panel] Add Overlay display mode #6388

macandcheese opened this issue Jan 31, 2023 · 5 comments
Assignees
@geospatialem
Labels
4 - verified Issues that have been tested, confirmed as mitigated, and are ready to close. Calcite (design) Issues logged by Calcite designers. enhancement Issues tied to a new feature or request. future breaking change Issues and pull requests with deprecation(s), requires a breaking change in a future milestone. p - medium Issue is non core or affecting less that 60% of people using the library
Milestone
2023 May Priorities

Comments

@macandcheese
Copy link
Contributor

macandcheese commented Jan 31, 2023 •
edited
Loading

Description

As proposed, add an "overlay" mode to Shell Panel that allows it to position over any content adjacent to it in the shell.

  • Does not extend over header / footer slots (use case for upcoming proposed Sheet)
  • Does not have a blocking scrim (use case for upcoming proposed Sheet)
  • Action bar remains visible when the child panel is open or closed (same as existing functionality)
  • Mutually exclusive from "detached"
  • Animation of width, box shadow applied.
  • Animation direction, box shadow direction determined by shell panel slotted location within shell.

Acceptance Criteria

As proposed, this mode will allow users to use a Shell Panel to overlay other content in the main slotted content area of Shell.

Relevant Info

More information in Confluence proposal

Which Component

Shell Panel

Example Use Case

At a smaller viewport size, it may be desirable to use Shell Panel as an "overlay". This will allow consuming apps to change the property and gracefully hide "shown on larger viewport" shell panels.

Esri team

Calcite (design)
@macandcheese macandcheese added enhancement Issues tied to a new feature or request. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Jan 31, 2023
@macandcheese macandcheese self-assigned this Jan 31, 2023
@github-actions github-actions bot added the Calcite (design) Issues logged by Calcite designers. label Jan 31, 2023
@macandcheese macandcheese mentioned this issue Feb 9, 2023
Closed
9 tasks
@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Feb 27, 2023
@alisonailea alisonailea assigned driskull and unassigned driskull Feb 28, 2023
@alisonailea alisonailea assigned driskull and unassigned driskull Feb 28, 2023
@driskull
Copy link
Member

@macandcheese how is this different from the contentBehind property on the shell?

@macandcheese
Copy link
Contributor Author

macandcheese commented Mar 21, 2023 •
edited
Loading

Much of this functionality does focus on the "without contentBehind set on parent shell" use case:

  • default (current behavior): Slotted Shell Panel's action bar and panel push over content slotted in default Shell slot.
  • overlay display (proposed additional behavior) Slotted Shell Panel's action bar pushes over content slotted in default Shell slot. Panel is overlaid absolutely on top with animation / transition. start/end slotted shell panel would display on top of top/bottom if multiple were open (but documented against)
  • detached mode used with "Default behavior" in this case creates the "swimlanes" where the shell panel appears floating above a plain bg adjacent to the map.

So, yep, in some ways these proposed changes do create an alternative to using contentBehind while leaving that functionality alone to keep those use cases when used with jsapi view padding. I can whip up a demo if needed to demonstrate better, I think the one on Confluence is outdated if still working.

@driskull
Copy link
Member

driskull commented Mar 21, 2023 •
edited
Loading

overlay display (proposed additional behavior) Slotted Shell Panel's action bar pushes over content slotted in default Shell slot. Panel is overlaid absolutely on top with animation / transition. start/end slotted shell panel would display on top of top/bottom if multiple were open (but documented against)

Are you proposing that the action bar is on the side of the center content but the panel is on top of it? These are inside a single component (shell-panel) so I'm not sure how we would achieve that.

Nevermind. I understand.

Do we really need all these modes? Could we get rid of the detached one?

@macandcheese
Copy link
Contributor Author

Yes - but it could be changed to be a sibling value of "docked" and "overlay" - instead of a separate and mutually exclusive property. So, a Shell Panel could have a displayMode with possible values "docked(current default)/overlay/detached"

When slotted within a Shell with contentBehind set:
Currently, both detached and "default" behave like this:

  • The action bar and panel are positioned absolutely on top of the center content.
  • The new "overlay" mode here would function similarly. There is a difference in that it has an animation, and box-shadow, but otherwise it behaves more similarly to "default / docked" than "overlay".

When slotted within a Shell without contentBehind set:

  • Currently, "default" places both the slotted action bar and the slotted panel adjacent to center content.
  • detached places the slotted action bar adjacent to content, but absolutely positions and styles the Shell Panel.
  • Using "detached" currently places the Shell Panel in its own swimlane adjacent to the content, which isn't desirable. I'd expect it to position absolutely.
  • The new "overlay" mode here is where we add support for many use cases - The ability to have the absolute positioning of detached with the full-height and not constrained to detachedHeightScale property.

The last bullet point is really value add for this feature, if there's a way to do it within our existing structure that would be great. Talking through now - does it seem like "detached" would be better not being mutually exclusive to the newly proposed mode and instead a sibling value?

@brittneytewks brittneytewks added the p - medium Issue is non core or affecting less that 60% of people using the library label Mar 30, 2023
driskull added a commit that referenced this issue May 4, 2023
@driskull
feat(shell-panel): Add overlaid property to overlay the content only. #…
1759395 
…6388
@driskull driskull mentioned this issue May 4, 2023
Merged
@ashetland ashetland added the figma changes Issues that require additions or updates to the Figma UI Kit where no `design` label exists label May 9, 2023
@geospatialem geospatialem added the future breaking change Issues and pull requests with deprecation(s), requires a breaking change in a future milestone. label May 10, 2023
driskull added a commit that referenced this issue May 15, 2023
@driskull @macandcheese
feat(shell-panel): Add displayMode and heightScale properties and…
c34d2b8 
… deprecate `detached` and `detachedHeightScale` (#6919)

**Related Issue:** #6388

## Summary

- Adds the property `displayMode` on the `calcite-shell-panel`.
  - DisplayMode = "dock" | "float" | "overlay"; 
- Deprecates the property `detachedHeightScale` on the
`calcite-shell-panel`, use `heightScale` instead.
- Deprecates the property `detached` on the `calcite-shell-panel`, use
`displayMode` instead.
- Deprecates the CSS property
`--calcite-shell-panel-detached-max-height`, use
`--calcite-shell-panel-max-height` instead.
- Moves the resize handle to inside of the content node.
- Test app
- tests

## Future

- It would be nice if `content-behind` on the shell and the
`displayMode` on the shell-panel were tied together more in order to
prevent unwanted display combinations

---------

Co-authored-by: Adam <[email protected]>
@driskull driskull added 3 - installed Issues that have been merged to the "dev" branch and/or are ready for QA/QC. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels May 15, 2023
@geospatialem geospatialem added 4 - verified Issues that have been tested, confirmed as mitigated, and are ready to close. and removed 3 - installed Issues that have been merged to the "dev" branch and/or are ready for QA/QC. labels May 22, 2023
@geospatialem
Copy link
Member

Verified with https://codepen.io/geospatialem/pen/QWZJQdE in 1.4.0-next.21

@SkyeSeitz SkyeSeitz removed the figma changes Issues that require additions or updates to the Figma UI Kit where no `design` label exists label Oct 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

Labels
4 - verified Issues that have been tested, confirmed as mitigated, and are ready to close. Calcite (design) Issues logged by Calcite designers. enhancement Issues tied to a new feature or request. future breaking change Issues and pull requests with deprecation(s), requires a breaking change in a future milestone. p - medium Issue is non core or affecting less that 60% of people using the library
Projects
None yet
Milestone
2023 May Priorities
Development

No branches or pull requests
7 participants
@driskull @alisonailea @macandcheese @geospatialem @SkyeSeitz @ashetland @brittneytewks