feat(shell-panel): deprecate float displayMode and add float-content …

…and float-all (#9795) **Related Issue:** #7513 ## Summary Replaced display mode "float" with "float-content" and added "float-all". Deprecated "float".
Esri · Jul 30, 2024 · bf93728 · bf93728
1 parent cadc593
commit bf93728
Show file tree

Hide file tree

Showing 8 changed files with 423 additions and 127 deletions.
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
@@ -4518,12 +4518,12 @@ export namespace Components {
          */
         "detached": boolean;
         /**
-          * When `displayMode` is `float`, specifies the maximum height of the component.
+          * When `displayMode` is `float-content`, specifies the maximum height of the component.
           * @deprecated Use `heightScale` instead.
          */
         "detachedHeightScale": Scale;
         /**
-          * Specifies the display mode of the component, where:  `"dock"` displays at full height adjacent to center content,  `"overlay"` displays at full height on top of center content, and  `"float"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content.
+          * Specifies the display mode of the component, where:  `"dock"` displays at full height adjacent to center content,  `"overlay"` displays at full height on top of center content, and  `"float"` [Deprecated] does not display at full height with content separately detached from `calcite-action-bar` on top of center content.  `"float-content"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content.  `"float-all"` detaches the `calcite-panel` and `calcite-action-bar` on top of center content.
          */
         "displayMode": DisplayMode1;
         /**
@@ -4547,7 +4547,7 @@ export namespace Components {
          */
         "position": Extract<"start" | "end", Position>;
         /**
-          * When `true` and `displayMode` is not `float`, the component's content area is resizable.
+          * When `true` and `displayMode` is not `float-content`, the component's content area is resizable.
          */
         "resizable": boolean;
         /**
@@ -12638,12 +12638,12 @@ declare namespace LocalJSX {
          */
         "detached"?: boolean;
         /**
-          * When `displayMode` is `float`, specifies the maximum height of the component.
+          * When `displayMode` is `float-content`, specifies the maximum height of the component.
           * @deprecated Use `heightScale` instead.
          */
         "detachedHeightScale"?: Scale;
         /**
-          * Specifies the display mode of the component, where:  `"dock"` displays at full height adjacent to center content,  `"overlay"` displays at full height on top of center content, and  `"float"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content.
+          * Specifies the display mode of the component, where:  `"dock"` displays at full height adjacent to center content,  `"overlay"` displays at full height on top of center content, and  `"float"` [Deprecated] does not display at full height with content separately detached from `calcite-action-bar` on top of center content.  `"float-content"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content.  `"float-all"` detaches the `calcite-panel` and `calcite-action-bar` on top of center content.
          */
         "displayMode"?: DisplayMode1;
         /**
@@ -12669,7 +12669,7 @@ declare namespace LocalJSX {
          */
         "position"?: Extract<"start" | "end", Position>;
         /**
-          * When `true` and `displayMode` is not `float`, the component's content area is resizable.
+          * When `true` and `displayMode` is not `float-content`, the component's content area is resizable.
          */
         "resizable"?: boolean;
         /**

diff --git a/packages/calcite-components/src/components/shell-panel/interfaces.d.ts b/packages/calcite-components/src/components/shell-panel/interfaces.d.ts
@@ -1 +1 @@
-export type DisplayMode = "dock" | "float" | "overlay";
+export type DisplayMode = "dock" | "float" | "overlay" | "float-content" | "float-all";
diff --git a/packages/calcite-components/src/components/shell-panel/resources.ts b/packages/calcite-components/src/components/shell-panel/resources.ts
@@ -3,9 +3,11 @@ export const CSS = {
   content: "content",
   contentHeader: "content__header",
   contentBody: "content__body",
-  contentFloat: "content--float",
+  floatContent: "float--content",
   contentOverlay: "content--overlay",
   separator: "separator",
+  float: "float",
+  floatAll: "float-all",
 };
 
 export const SLOTS = {

diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts b/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts
@@ -147,21 +147,21 @@ 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.contentFloat}`);
+    let detachedElement = await page.find(`calcite-shell-panel >>> .${CSS.floatContent}`);
 
     expect(detachedElement).toBeNull();
 
     const panel = await page.find("calcite-shell-panel");
 
     expect(await panel.getProperty("detached")).toBe(false);
 
-    panel.setProperty("displayMode", "float");
+    panel.setProperty("displayMode", "float-content");
 
     await page.waitForChanges();
 
     expect(await panel.getProperty("detached")).toBe(true);
 
-    detachedElement = await page.find(`calcite-shell-panel >>> .${CSS.contentFloat}`);
+    detachedElement = await page.find(`calcite-shell-panel >>> .${CSS.floatContent}`);
 
     expect(detachedElement).not.toBeNull();
   });
@@ -556,7 +556,7 @@ describe("calcite-shell-panel", () => {
     const page = await newE2EPage();
     await page.setContent(
       `<calcite-shell content-behind>
-        <calcite-shell-panel slot="panel-start" position="start" display-mode="float"></calcite-shell-panel>
+        <calcite-shell-panel slot="panel-start" position="start" display-mode="float-content"></calcite-shell-panel>
         <calcite-action text="test" style="height: 100%; width: 100%;" text-enabled></calcite-action>
       </calcite-shell>`,
     );

diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.scss b/packages/calcite-components/src/components/shell-panel/shell-panel.scss
@@ -6,10 +6,10 @@
  * @prop --calcite-shell-panel-width: Specifies the width of the component.
  * @prop --calcite-shell-panel-max-width: Specifies the maximum width of the component.
  * @prop --calcite-shell-panel-min-width: Specifies the minimum width of the component.
- * @prop --calcite-shell-panel-height: When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the height of the component.
- * @prop --calcite-shell-panel-max-height: When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the maximum height of the component.
- * @prop --calcite-shell-panel-min-height: When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the minimum height of the component.
- * @prop --calcite-shell-panel-detached-max-height: [Deprecated] Use the `heightScale` property instead. When `displayMode` is `float`, specifies the maximum height of the component.
+ * @prop --calcite-shell-panel-height: When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the height of the component.
+ * @prop --calcite-shell-panel-max-height: When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the maximum height of the component.
+ * @prop --calcite-shell-panel-min-height: When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the minimum height of the component.
+ * @prop --calcite-shell-panel-detached-max-height: [Deprecated] Use the `heightScale` property instead. When `displayMode` is `float-content` or `float`, specifies the maximum height of the component.
  * @prop --calcite-shell-panel-z-index: Specifies the z-index value for the component.
  *
  */
@@ -23,20 +23,20 @@
   z-index: var(--calcite-shell-panel-z-index, theme("zIndex.default"));
   --calcite-shell-panel-detached-max-height: unset;
   --calcite-shell-panel-max-height: unset;
-  --calcite-shell-panel-shadow-block-start-internal: 0 4px 8px -1px rgba(0, 0, 0, 0.08),
+  --calcite-internal-shell-panel-shadow-block-start: 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),
+  --calcite-internal-shell-panel-shadow-block-end: 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),
+  --calcite-internal-shell-panel-shadow-inline-start: 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),
+  --calcite-internal-shell-panel-shadow-inline-end: -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),
+  --calcite-internal-shell-panel-shadow-inline-start: -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),
+  --calcite-internal-shell-panel-shadow-inline-end: 4px 0 8px -1px rgba(0, 0, 0, 0.08),
     2px 0 4px -1px rgba(0, 0, 0, 0.04);
 }
 
@@ -48,41 +48,60 @@
   z-index: var(--calcite-shell-panel-z-index, calc(theme("zIndex.header") + 1));
 }
 
-:host([layout="vertical"][width-scale="s"]) .content {
-  --calcite-shell-panel-width-internal: var(--calcite-shell-panel-width, 12vw);
-  --calcite-shell-panel-max-width-internal: var(--calcite-shell-panel-max-width, 300px);
-  --calcite-shell-panel-min-width-internal: var(--calcite-shell-panel-min-width, 150px);
+:host([layout="vertical"][display-mode="float-all"]) .content {
+  flex: 2;
 }
 
-:host([layout="vertical"][width-scale="m"]) .content {
-  --calcite-shell-panel-width-internal: var(--calcite-shell-panel-width, 20vw);
-  --calcite-shell-panel-max-width-internal: var(--calcite-shell-panel-max-width, 420px);
-  --calcite-shell-panel-min-width-internal: var(--calcite-shell-panel-min-width, 240px);
+:host([layout="vertical"][width-scale="s"]:not([display-mode="float-all"])) .content {
+  --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 12vw);
+  --calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 300px);
+  --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 150px);
 }
 
-:host([layout="vertical"][width-scale="l"]) .content {
-  --calcite-shell-panel-width-internal: var(--calcite-shell-panel-width, 45vw);
-  --calcite-shell-panel-max-width-internal: var(--calcite-shell-panel-max-width, 680px);
-  --calcite-shell-panel-min-width-internal: var(--calcite-shell-panel-min-width, 340px);
+:host([layout="vertical"][width-scale="s"][display-mode="float-all"]) .content {
+  --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 12vw);
+  --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 150px);
+}
+
+:host([layout="vertical"][width-scale="m"]:not([display-mode="float-all"])) .content {
+  --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 20vw);
+  --calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 420px);
+  --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 240px);
+}
+
+:host([layout="vertical"][width-scale="m"][display-mode="float-all"]) .content {
+  --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 20vw);
+  --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 240px);
+}
+
+:host([layout="vertical"][width-scale="l"]:not([display-mode="float-all"])) .content {
+  --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 45vw);
+  --calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 680px);
+  --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 340px);
+}
+
+:host([layout="vertical"][width-scale="l"][display-mode="float-all"]) .content {
+  --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 45vw);
+  --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 340px);
 }
 
 :host([layout="horizontal"][height-scale="s"]) .content {
-  --calcite-shell-panel-max-height-internal: var(
+  --calcite-internal-shell-panel-max-height: var(
     --calcite-shell-panel-max-height,
     var(--calcite-shell-panel-detached-max-height, 20vh)
   );
 }
 
 :host([layout="horizontal"]) .content {
-  --calcite-shell-panel-min-height-internal: var(--calcite-shell-panel-min-height, 5vh);
-  --calcite-shell-panel-max-height-internal: var(
+  --calcite-internal-shell-panel-min-height: var(--calcite-shell-panel-min-height, 5vh);
+  --calcite-internal-shell-panel-max-height: var(
     --calcite-shell-panel-max-height,
     var(--calcite-shell-panel-detached-max-height, 30vh)
   );
 }
 
 :host([layout="horizontal"][height-scale="l"]) .content {
-  --calcite-shell-panel-max-height-internal: var(
+  --calcite-internal-shell-panel-max-height: var(
     --calcite-shell-panel-max-height,
     var(--calcite-shell-panel-detached-max-height, 40vh)
   );
@@ -101,6 +120,11 @@
   * {
     @apply box-border;
   }
+
+  &.float-all {
+    margin-block: 0.5rem;
+    margin-inline: 0.5rem;
+  }
 }
 
 :host([layout="horizontal"]) .container {
@@ -193,16 +217,21 @@
     max-inline-size var(--calcite-animation-timing);
 }
 
-:host([layout="vertical"]) .content {
-  inline-size: var(--calcite-shell-panel-width-internal);
-  max-inline-size: var(--calcite-shell-panel-max-width-internal);
-  min-inline-size: var(--calcite-shell-panel-min-width-internal);
+:host([layout="vertical"]:not([display-mode="float-all"])) .content {
+  inline-size: var(--calcite-internal-shell-panel-width);
+  max-inline-size: var(--calcite-internal-shell-panel-max-width);
+  min-inline-size: var(--calcite-internal-shell-panel-min-width);
+}
+
+:host([layout="vertical"][display-mode="float-all"]) .content {
+  inline-size: var(--calcite-internal-shell-panel-width);
+  min-inline-size: var(--calcite-internal-shell-panel-min-width);
 }
 
 :host([layout="horizontal"]) .content {
-  block-size: var(--calcite-shell-panel-height-internal);
-  max-block-size: var(--calcite-shell-panel-max-height-internal);
-  min-block-size: var(--calcite-shell-panel-min-height-internal);
+  block-size: var(--calcite-internal-shell-panel-height);
+  max-block-size: var(--calcite-internal-shell-panel-max-height);
+  min-block-size: var(--calcite-internal-shell-panel-min-height);
 }
 
 .content__header {
@@ -235,45 +264,45 @@
 
 :host([layout="vertical"][position="start"]) .content--overlay {
   inset-inline-start: 100%;
-  box-shadow: var(--calcite-shell-panel-shadow-inline-start-internal);
+  box-shadow: var(--calcite-internal-shell-panel-shadow-inline-start);
 }
 
 :host([layout="vertical"][position="end"]) .content--overlay {
   inset-inline-end: 100%;
-  box-shadow: var(--calcite-shell-panel-shadow-inline-end-internal);
+  box-shadow: var(--calcite-internal-shell-panel-shadow-inline-end);
 }
 
 :host([layout="horizontal"][position="start"]) .content--overlay {
   inset-block-start: 100%;
-  box-shadow: var(--calcite-shell-panel-shadow-block-start-internal);
+  box-shadow: var(--calcite-internal-shell-panel-shadow-block-start);
 }
 
 :host([layout="horizontal"][position="end"]) .content--overlay {
   inset-block-end: 100%;
-  box-shadow: var(--calcite-shell-panel-shadow-block-end-internal);
+  box-shadow: var(--calcite-internal-shell-panel-shadow-block-end);
 }
 
-.content--float {
+.float--content {
   @apply shadow-0
   mx-2
   mt-2
   mb-auto
   h-auto
   overflow-hidden
   rounded;
-  max-block-size: var(--calcite-shell-panel-max-height-internal, calc(100% - 1rem));
+  max-block-size: var(--calcite-internal-shell-panel-max-height, calc(100% - 1rem));
   ::slotted(calcite-panel),
   ::slotted(calcite-flow) {
     max-block-size: unset;
   }
 }
 
-:host([layout="horizontal"]) .content--float {
+:host([layout="horizontal"]) .float--content {
   @apply my-2;
 }
 
-:host([position="start"]) .content--float,
-:host([position="end"]) .content--float {
+:host([position="start"]) .float--content,
+:host([position="end"]) .float--content {
   ::slotted(calcite-panel),
   ::slotted(calcite-flow) {
     @apply border-none;
@@ -290,7 +319,7 @@ slot[name="action-bar"]::slotted(calcite-action-bar),
   @apply border-color-3 border border-solid;
 }
 
-:host([position="start"]:not([slot="panel-end"])),
+:host([position="start"]:not([slot="panel-end"]):not([display-mode="float-all"])),
 :host([position="end"][slot="panel-start"]) {
   slot[name="action-bar"]::slotted(calcite-action-bar),
   .content ::slotted(calcite-flow),
@@ -308,12 +337,12 @@ slot[name="action-bar"]::slotted(calcite-action-bar),
   }
 }
 
-:host([layout="horizontal"]) slot[name="action-bar"]::slotted(calcite-action-bar) {
+:host([layout="horizontal"]:not([display-mode="float-all"])) slot[name="action-bar"]::slotted(calcite-action-bar) {
   border-inline: 0;
 }
 
-:host([layout="horizontal"][position="start"]) .content ::slotted(calcite-flow),
-:host([layout="horizontal"][position="start"]) .content ::slotted(calcite-panel) {
+:host([layout="horizontal"][position="start"]:not([display-mode="float-all"])) .content ::slotted(calcite-flow),
+:host([layout="horizontal"][position="start"]:not([display-mode="float-all"])) .content ::slotted(calcite-panel) {
   border-inline: 0;
   border-block-start: 0;
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export type DisplayMode = "dock" \| "float" \| "overlay";
		export type DisplayMode = "dock" \| "float" \| "overlay" \| "float-content" \| "float-all";