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

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

@@ -0,0 +1 @@
+export type DisplayMode = "dock" | "float" | "overlay";

src/components/shell-panel/resources.ts

@@ -3,7 +3,8 @@ export const CSS = {
   content: "content",
   contentHeader: "content__header",
   contentBody: "content__body",
-  contentDetached: "content--detached",
+  contentFloat: "content--float",
+  contentOverlay: "content--overlay",
   separator: "separator"
 };
 

src/components/shell-panel/shell-panel.e2e.ts

@@ -3,6 +3,7 @@ import { E2EElement, newE2EPage } from "@stencil/core/testing";
 import { accessible, defaults, hidden, renders, slots, t9n } from "../../tests/commonTests";
 import { getElementXY } from "../../tests/utils";
 import { CSS, SLOTS } from "./resources";
+import { CSS_UTILITY } from "../../utils/resources";
 
 describe("calcite-shell-panel", () => {
   describe("renders", () => {
@@ -22,6 +23,14 @@ describe("calcite-shell-panel", () => {
       {
         propertyName: "resizable",
         defaultValue: false
+      },
+      {
+        propertyName: "detached",
+        defaultValue: false
+      },
+      {
+        propertyName: "displayMode",
+        defaultValue: "dock"
       }
     ]));
 
@@ -136,21 +145,83 @@ describe("calcite-shell-panel", () => {
 
     await page.setContent("<calcite-shell-panel><div>content</div></calcite-shell-panel>");
 
-    let detachedElement = await page.find(`calcite-shell-panel >>> .${CSS.contentDetached}`);
+    let detachedElement = await page.find(`calcite-shell-panel >>> .${CSS.contentFloat}`);
+
+    expect(detachedElement).toBeNull();
+
+    const panel = await page.find("calcite-shell-panel");
+
+    expect(await panel.getProperty("detached")).toBe(false);
+
+    panel.setProperty("displayMode", "float");
+
+    await page.waitForChanges();
+
+    expect(await panel.getProperty("detached")).toBe(true);
+
+    detachedElement = await page.find(`calcite-shell-panel >>> .${CSS.contentFloat}`);
+
+    expect(detachedElement).not.toBeNull();
+  });
+
+  it("should have overlaid class when overlaid", async () => {
+    const page = await newE2EPage();
+
+    await page.setContent("<calcite-shell-panel><div>content</div></calcite-shell-panel>");
+
+    let detachedElement = await page.find(`calcite-shell-panel >>> .${CSS.contentOverlay}`);
 
     expect(detachedElement).toBeNull();
 
     const panel = await page.find("calcite-shell-panel");
 
-    panel.setProperty("detached", true);
+    panel.setProperty("displayMode", "overlay");
 
     await page.waitForChanges();
 
-    detachedElement = await page.find(`calcite-shell-panel >>> .${CSS.contentDetached}`);
+    detachedElement = await page.find(`calcite-shell-panel >>> .${CSS.contentOverlay}`);
 
     expect(detachedElement).not.toBeNull();
   });
 
+  it("should have correct animation class when overlaid, layout vertical, and ltr", async () => {
+    const page = await newE2EPage();
+
+    await page.setContent("<calcite-shell-panel><div>content</div></calcite-shell-panel>");
+
+    const panel = await page.find("calcite-shell-panel");
+
+    panel.setProperty("displayMode", "overlay");
+
+    await page.waitForChanges();
+
+    const animationClassRight = await page.find(`calcite-shell-panel >>> .${CSS_UTILITY.calciteAnimateInRight}`);
+    const animationClassLeft = await page.find(`calcite-shell-panel >>> .${CSS_UTILITY.calciteAnimateInLeft}`);
+
+    expect(animationClassRight).not.toBeNull();
+    expect(animationClassLeft).toBeNull();
+  });
+
+  it("should have correct animation class when overlaid, layout vertical, and rtl, position start", async () => {
+    const page = await newE2EPage();
+
+    await page.setContent(
+      "<div dir='rtl'><calcite-shell-panel position='start'><div>content</div></calcite-shell-panel></div>"
+    );
+
+    const panel = await page.find("calcite-shell-panel");
+
+    panel.setProperty("displayMode", "overlay");
+
+    await page.waitForChanges();
+
+    const animationClassRight = await page.find(`calcite-shell-panel >>> .${CSS_UTILITY.calciteAnimateInRight}`);
+    const animationClassLeft = await page.find(`calcite-shell-panel >>> .${CSS_UTILITY.calciteAnimateInLeft}`);
+
+    expect(animationClassRight).toBeNull();
+    expect(animationClassLeft).not.toBeNull();
+  });
+
   it("should update width based on the requested CSS variable override", async () => {
     const override = "678px";
 
@@ -488,7 +559,7 @@ describe("calcite-shell-panel", () => {
     const page = await newE2EPage();
     await page.setContent(
       `<calcite-shell content-behind>
-        <calcite-shell-panel slot="panel-start" position="start" detached></calcite-shell-panel>
+        <calcite-shell-panel slot="panel-start" position="start" display-mode="float"></calcite-shell-panel>
         <calcite-action text="test" style="height: 100%; width: 100%;" text-enabled></calcite-action>
       </calcite-shell>`
     );

src/components/shell-panel/shell-panel.scss

@@ -9,7 +9,7 @@
  * @prop --calcite-shell-panel-height: When `layout` is `"horizontal"`, specifies the height of the component.
  * @prop --calcite-shell-panel-max-height: When `layout` is `"horizontal"`, specifies the maximum height of the component.
  * @prop --calcite-shell-panel-min-height: When `layout` is `"horizontal"`, specifies the minimum height of the component.
- * @prop --calcite-shell-panel-detached-max-height: When `detached` is `true`, specifies the maximum height of the component.
+ * @prop --calcite-shell-panel-detached-max-height: When `displayMode` is `float`, specifies the maximum height of the component.
  * @prop --calcite-shell-panel-z-index: Specifies the z-index value for the component.
  *
  */
@@ -20,8 +20,23 @@
     flex
     flex-initial
     items-stretch;
-  --calcite-shell-panel-detached-max-height: unset;
   z-index: var(--calcite-shell-panel-z-index, theme("zIndex.default"));
+  --calcite-shell-panel-detached-max-height: unset;
+  --calcite-shell-panel-shadow-block-start-internal: 0 4px 8px -1px rgba(0, 0, 0, 0.08),
+    0 2px 4px -1px rgba(0, 0, 0, 0.04);
+  --calcite-shell-panel-shadow-block-end-internal: 0 -4px 8px -1px rgba(0, 0, 0, 0.08),
+    0 -2px 4px -1px rgba(0, 0, 0, 0.04);
+  --calcite-shell-panel-shadow-inline-start-internal: 4px 0 8px -1px rgba(0, 0, 0, 0.08),
+    2px 0 4px -1px rgba(0, 0, 0, 0.04);
+  --calcite-shell-panel-shadow-inline-end-internal: -4px 0 8px -1px rgba(0, 0, 0, 0.08),
+    -2px 0 4px -1px rgba(0, 0, 0, 0.04);
+}
+
+.calcite--rtl.content--overlay {
+  --calcite-shell-panel-shadow-inline-start-internal: -4px 0 8px -1px rgba(0, 0, 0, 0.08),
+    -2px 0 4px -1px rgba(0, 0, 0, 0.04);
+  --calcite-shell-panel-shadow-inline-end-internal: 4px 0 8px -1px rgba(0, 0, 0, 0.08),
+    2px 0 4px -1px rgba(0, 0, 0, 0.04);
 }
 
 :host([layout="vertical"]) {
@@ -52,15 +67,15 @@
   --calcite-shell-panel-min-width-internal: var(--calcite-shell-panel-min-width, 340px);
 }
 
-:host([detached-height-scale="s"]) .content--detached {
+:host([detached-height-scale="s"]) .content--float {
   --calcite-shell-panel-detached-max-height-internal: var(--calcite-shell-panel-detached-max-height, 40vh);
 }
 
-:host([detached-height-scale="m"]) .content--detached {
+:host([detached-height-scale="m"]) .content--float {
   --calcite-shell-panel-detached-max-height-internal: var(--calcite-shell-panel-detached-max-height, 60vh);
 }
 
-:host([detached-height-scale="l"]) .content--detached {
+:host([detached-height-scale="l"]) .content--float {
   --calcite-shell-panel-detached-max-height-internal: var(--calcite-shell-panel-detached-max-height, 80vh);
 }
 
@@ -194,26 +209,60 @@
   overflow-hidden;
 }
 
-.content--detached {
+.content--overlay {
+  @apply absolute
+  shadow-0;
+}
+
+:host([layout="vertical"]) .content--overlay {
+  @apply top-0 h-full;
+}
+
+:host([layout="horizontal"]) .content--overlay {
+  @apply left-0 w-full;
+}
+
+:host([layout="vertical"][position="start"]) .content--overlay {
+  inset-inline-start: 100%;
+  box-shadow: var(--calcite-shell-panel-shadow-inline-start-internal);
+}
+
+:host([layout="vertical"][position="end"]) .content--overlay {
+  inset-inline-end: 100%;
+  box-shadow: var(--calcite-shell-panel-shadow-inline-end-internal);
+}
+
+:host([layout="horizontal"][position="start"]) .content--overlay {
+  inset-block-start: 100%;
+  box-shadow: var(--calcite-shell-panel-shadow-block-start-internal);
+}
+
+:host([layout="horizontal"][position="end"]) .content--overlay {
+  inset-block-end: 100%;
+  box-shadow: var(--calcite-shell-panel-shadow-block-end-internal);
+}
+
+.content--float {
   @apply shadow-0
   mx-2
   mt-2
   mb-auto
   h-auto
   overflow-hidden
   rounded;
-}
-
-.content--detached {
   max-block-size: var(--calcite-shell-panel-detached-max-height-internal);
   ::slotted(calcite-panel),
   ::slotted(calcite-flow) {
     max-block-size: unset;
   }
 }
 
-:host([position="start"]) .content--detached,
-:host([position="end"]) .content--detached {
+:host([layout="horizontal"]) .content--float {
+  @apply my-2;
+}
+
+:host([position="start"]) .content--float,
+:host([position="end"]) .content--float {
   ::slotted(calcite-panel),
   ::slotted(calcite-flow) {
     @apply border-none;