feat(shell-panel): Add `displayMode` and `heightScale` properties and deprecate `detached` and `detachedHeightScale` #6919

driskull · 2023-05-04T18:03:11Z

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

## Summary Adding additional "left" and "right" animation classes, to support #6919 and other future needs. - Adds `calcite-animate__in-left` and `calcite-animate__in-right` classes. - Updates demo page with new classes, and updates demo page "Reset" button functionality. - Q - I am imagining for now components will set the correct animation where needed based on `rtl`. Not sure if there's a better way to make these rtl / ltr supportive with the classes themselves.

Adds animation css util

jcfranco

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨
✨✨🐚🐚🐚✨✨🐚🐚✨✨✨🐚🐚✨✨🐚✨✨✨🐚✨
✨🐚✨✨✨✨🐚✨✨🐚✨🐚✨✨🐚✨🐚✨✨✨🐚✨
✨🐚✨✨✨✨🐚✨✨🐚✨🐚✨✨🐚✨🐚✨✨✨🐚✨
✨🐚✨✨✨✨🐚✨✨🐚✨🐚✨✨🐚✨🐚✨✨✨✨✨
✨✨🐚🐚🐚✨✨🐚🐚✨✨✨🐚🐚✨✨🐚🐚🐚✨🐚✨
✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

Should we update the usage files as well? I think we could do an independent pass at all components. cc @geospatialem

jcfranco · 2023-05-09T16:45:28Z

src/components/shell-panel/interfaces.d.ts

@@ -0,0 +1 @@
+export type DisplayMode = "docked" | "detached" | "overlaid";


WDYT about these not being in the past (dock | detach | overlay)? Not sure about detach though. Maybe isolate or separate?

@macandcheese what do you think?

It seems to match other tenses (escapeDisabled, textEnabled) - and keeps the existing detached nomenclature. I think isolate or separate is... maybe less clear?

It seems to match other tenses (escapeDisabled, textEnabled)

Those are prop names and not the values. I don't think we have anything similar for existing modes. I could be wrong.

and keeps the existing detached nomenclature. I think isolate or separate is... maybe less clear?

Nothing good ol' doc won't fix, although I do hear you on isolate and separate. Do you think detach would still be less clear?

I agree since they are now values and not properties we should probably have them to not be past tense.

@macandcheese can you come up with the values? I think the only one in question is detach right? What about "float"?

Ah, yeah that makes sense. None of the suggestions are … speaking to me, lol, but I guess “float” seems to make the most sense if we don’t want to just use “detach”? cc @asangma

👍🏼 for float! 🎪🤡🎈

But, I'll defer to y'all whether it's detach or float.

jcfranco · 2023-05-09T16:51:52Z

src/components/shell-panel/shell-panel.tsx

+  }
+
+  /**
+   * Specifies the display mode - `"docked"` (full height, displays adjacent to center content), `"detached"` (not full height, content separated detached from action bar, displays on top of center content),


+@geospatialem for editorial consideration

nitpick:

.....content is separated from calcite-action-bar, displays....

driskull · 2023-05-09T22:10:45Z

Ready for review again.

…te-components into dris0000/shell-panel-overlaid

macandcheese · 2023-05-13T14:48:15Z

@ashetland @SkyeSeitz could you take a look at this Chromatic build? A few expected height changes and new story. Thanks!

feat(shell-panel): Add overlaid property to overlay the content only. #…

1759395

…6388

github-actions bot added the enhancement Issues tied to a new feature or request. label May 4, 2023

github-actions bot assigned driskull May 4, 2023

driskull added 8 commits May 4, 2023 15:03

fix resize separator

8f7ef0e

test app

5bd9e2a

Merge branch 'master' into dris0000/shell-panel-overlaid

d75eba6

add displayMode prop

9a89722

cleanup

d679581

test

64727da

update test apps

9b83adf

story

12c4a6e

driskull added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label May 5, 2023

driskull and others added 4 commits May 5, 2023 17:02

fix separator

9d29c8b

story

7512799

Update display mode demo

84173eb

Update detached spacing when in layout="horizontal"

1c73948

macandcheese mentioned this pull request May 6, 2023

feat(styles): Add additional animation classes #6928

Merged

Merge branch 'master' into dris0000/shell-panel-overlaid

bf34c6f

driskull changed the title ~~feat(shell-panel): Add overlaid property to overlay the content only~~ feat(shell-panel): Add displayMode property and deprecate detached property. May 8, 2023

Add directional animation, shadow when overlaid

d0d4d33

Adds animation css util

driskull marked this pull request as ready for review May 8, 2023 20:53

driskull requested a review from a team as a code owner May 8, 2023 20:53

driskull and others added 3 commits May 8, 2023 13:53

Merge branch 'master' into dris0000/shell-panel-overlaid

37b7d67

Default position to "start"

4d4aa3c

Merge branch 'master' into dris0000/shell-panel-overlaid

cc4d704

driskull added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels May 8, 2023

jcfranco changed the title ~~feat(shell-panel): Add displayMode property and deprecate detached property.~~ feat(shell-panel): Add displayMode property and deprecate detached property. May 9, 2023

jcfranco approved these changes May 9, 2023

View reviewed changes

driskull added 2 commits May 9, 2023 15:03

cleanup

9c5e0ea

Merge branch 'master' into dris0000/shell-panel-overlaid

fba2a7a

driskull added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels May 9, 2023

driskull and others added 5 commits May 9, 2023 15:22

cleanup

5bc9b90

Merge branch 'dris0000/shell-panel-overlaid' of github.com:Esri/calci…

4385b6f

…te-components into dris0000/shell-panel-overlaid

Merge branch 'master' into dris0000/shell-panel-overlaid

a117a06

Update demo and styles

c3506db

Clean up

f226499

alisonailea approved these changes May 12, 2023

View reviewed changes

Merge branch 'master' into dris0000/shell-panel-overlaid

da167e2

macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels May 12, 2023

macandcheese added 2 commits May 12, 2023 09:56

Disable animation on story

410ac2c

Merge branch 'master' into dris0000/shell-panel-overlaid

e388238

macandcheese removed the pr ready for visual snapshots Adding this label will run visual snapshot testing. label May 12, 2023

Merge branch 'master' into dris0000/shell-panel-overlaid

4d8b78a

macandcheese added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label May 12, 2023

Update z-index for overlay

3a6499a

macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels May 12, 2023

Merge branch 'master' into dris0000/shell-panel-overlaid

317bb1f

macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels May 15, 2023

driskull merged commit c34d2b8 into master May 15, 2023

driskull deleted the dris0000/shell-panel-overlaid branch May 15, 2023 19:14

github-actions bot added this to the 2023 May Priorities milestone May 15, 2023

geospatialem mentioned this pull request Jun 28, 2024

Remove deprecations for action-group, color-picker, shell-panel, table, checkbox and radio-button #9713

Closed

11 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(shell-panel): Add `displayMode` and `heightScale` properties and deprecate `detached` and `detachedHeightScale` #6919

feat(shell-panel): Add `displayMode` and `heightScale` properties and deprecate `detached` and `detachedHeightScale` #6919

Uh oh!

driskull commented May 4, 2023 •

edited

Loading

Uh oh!

jcfranco left a comment

Uh oh!

jcfranco May 9, 2023

Uh oh!

driskull May 9, 2023

Uh oh!

macandcheese May 9, 2023

Uh oh!

jcfranco May 9, 2023

Uh oh!

driskull May 9, 2023

Uh oh!

macandcheese May 9, 2023 •

edited

Loading

Uh oh!

jcfranco May 9, 2023 •

edited

Loading

Uh oh!

jcfranco May 9, 2023

Uh oh!

geospatialem May 9, 2023

Uh oh!

driskull commented May 9, 2023

Uh oh!

macandcheese commented May 13, 2023

Uh oh!

Uh oh!

		@@ -0,0 +1 @@
		export type DisplayMode = "docked" \| "detached" \| "overlaid";

feat(shell-panel): Add displayMode and heightScale properties and deprecate detached and detachedHeightScale #6919

feat(shell-panel): Add displayMode and heightScale properties and deprecate detached and detachedHeightScale #6919

Uh oh!

Conversation

driskull commented May 4, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Future

Uh oh!

jcfranco left a comment

Choose a reason for hiding this comment

Uh oh!

jcfranco May 9, 2023

Choose a reason for hiding this comment

Uh oh!

driskull May 9, 2023

Choose a reason for hiding this comment

Uh oh!

macandcheese May 9, 2023

Choose a reason for hiding this comment

Uh oh!

jcfranco May 9, 2023

Choose a reason for hiding this comment

Uh oh!

driskull May 9, 2023

Choose a reason for hiding this comment

Uh oh!

macandcheese May 9, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jcfranco May 9, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jcfranco May 9, 2023

Choose a reason for hiding this comment

Uh oh!

geospatialem May 9, 2023

Choose a reason for hiding this comment

Uh oh!

driskull commented May 9, 2023

Uh oh!

macandcheese commented May 13, 2023

Uh oh!

Uh oh!

feat(shell-panel): Add `displayMode` and `heightScale` properties and deprecate `detached` and `detachedHeightScale` #6919

feat(shell-panel): Add `displayMode` and `heightScale` properties and deprecate `detached` and `detachedHeightScale` #6919

driskull commented May 4, 2023 •

edited

Loading

macandcheese May 9, 2023 •

edited

Loading

jcfranco May 9, 2023 •

edited

Loading