fix(shell-panel): allow content to extend the full height of the panel

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

@@ -275,6 +275,42 @@ describe("calcite-shell-panel", () => {
     expect(`${width2}px`).toEqual(override);
   });
 
+  it("should update height based on the requested CSS variable override", async () => {
+    const override = "678px";
+
+    const page = await newE2EPage();
+
+    await page.setContent(`
+      <calcite-shell-panel layout="horizontal">
+        test
+      </calcite-shell-panel>
+    `);
+
+    await page.waitForChanges();
+
+    const page2 = await newE2EPage();
+    await page2.setContent(`
+      <style>
+        :root {
+          --calcite-shell-panel-min-height: ${override};
+          --calcite-shell-panel-max-height: ${override};
+          --calcite-shell-panel-height: ${override};
+        }
+      </style>
+      <calcite-shell-panel layout="horizontal">
+        test multiplied
+      </calcite-shell-panel>
+    `);
+
+    await page2.waitForChanges();
+
+    const content2 = await page2.find(`calcite-shell-panel >>> .${CSS.content}`);
+    const style2 = await content2.getComputedStyle();
+    const height2 = parseFloat(style2["height"]);
+
+    expect(`${height2}px`).toEqual(override);
+  });
+
   it("calcite-panel should render at the same height as the content__body.", async () => {
     const page = await newE2EPage();
 
@@ -708,5 +744,39 @@ describe("calcite-shell-panel", () => {
         },
       );
     });
+
+    describe("height", () => {
+      themed(html`<calcite-shell-panel layout="horizontal"></calcite-shell-panel>`, {
+        "--calcite-shell-panel-height": {
+          shadowSelector: `.${CSS.content}`,
+          targetProp: "blockSize",
+        },
+        "--calcite-shell-panel-max-height": {
+          shadowSelector: `.${CSS.content}`,
+          targetProp: "maxBlockSize",
+        },
+        "--calcite-shell-panel-min-height": {
+          shadowSelector: `.${CSS.content}`,
+          targetProp: "minBlockSize",
+        },
+      });
+    });
+
+    describe("width", () => {
+      themed(html`<calcite-shell-panel layout="vertical"></calcite-shell-panel>`, {
+        "--calcite-shell-panel-width": {
+          shadowSelector: `.${CSS.content}`,
+          targetProp: "inlineSize",
+        },
+        "--calcite-shell-panel-max-width": {
+          shadowSelector: `.${CSS.content}`,
+          targetProp: "maxInlineSize",
+        },
+        "--calcite-shell-panel-min-width": {
+          shadowSelector: `.${CSS.content}`,
+          targetProp: "minInlineSize",
+        },
+      });
+    });
   });
 });

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

@@ -20,6 +20,22 @@
  *
  */
 
+// AUTO-GENERATED — do not modify. Changes will be overwritten.
+//
+// Internal CSS custom properties for component use only. Overwriting is not recommended.
+//
+// --calcite-internal-shell-panel-height
+// --calcite-internal-shell-panel-max-height
+// --calcite-internal-shell-panel-max-width
+// --calcite-internal-shell-panel-min-height
+// --calcite-internal-shell-panel-min-width
+// --calcite-internal-shell-panel-resize-handle-offset
+// --calcite-internal-shell-panel-shadow-block-end
+// --calcite-internal-shell-panel-shadow-block-start
+// --calcite-internal-shell-panel-shadow-inline-end
+// --calcite-internal-shell-panel-shadow-inline-start
+// --calcite-internal-shell-panel-width
+
 :host {
   @apply relative
     pointer-events-none
@@ -90,23 +106,22 @@
   --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 340px);
 }
 
-:host([layout="horizontal"]) .height-s {
-  --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-internal-shell-panel-height: var(--calcite-shell-panel-height);
   --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, 30vh);
 }
 
+:host([layout="horizontal"]) .height-s {
+  --calcite-internal-shell-panel-height: var(--calcite-shell-panel-height);
+  --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, 20vh);
+}
+
 :host([layout="horizontal"]) .height-l {
-  --calcite-internal-shell-panel-max-height: var(
-    --calcite-shell-panel-max-height,
-    var(--calcite-shell-panel-detached-max-height, 40vh)
-  );
+  --calcite-internal-shell-panel-height: var(--calcite-shell-panel-height);
+  --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, 40vh);
 }
 
 .container {
@@ -307,7 +322,8 @@
   self-stretch
   p-0
   relative
-  box-border;
+  box-border
+  flex-auto;
   background-color: var(--calcite-shell-panel-background-color, var(--calcite-color-background));
   transition:
     max-block-size var(--calcite-animation-timing),

packages/calcite-components/src/components/shell/shell.stories.ts

@@ -2555,6 +2555,50 @@ panelsWithOverflowingContent.parameters = {
   },
 };
 
+export const panelsWithHeightsDefined = (): string =>
+  html`<style>
+      #start,
+      #end {
+        border: 1px solid red;
+      }
+
+      #bottom {
+        --calcite-shell-panel-height: 200px;
+        --calcite-shell-panel-max-height: 200px;
+        --calcite-shell-panel-min-height: 200px;
+        border: 1px solid green;
+      }
+
+      #viewDiv {
+        height: 100%;
+        width: 100%;
+        background-color: #c3e3cc;
+      }</style
+    ><calcite-shell content-behind>
+      <div id="viewDiv"></div>
+      <calcite-shell-panel id="start" slot="panel-start">Start</calcite-shell-panel>
+      <calcite-shell-panel layout="horizontal" id="bottom" slot="panel-bottom">
+        <calcite-panel id="panel">
+          <div>The panel should fill the entire bottom half of the bounding box.</div>
+        </calcite-panel>
+      </calcite-shell-panel>
+      <calcite-shell-panel id="end" slot="panel-end">End</calcite-shell-panel>
+    </calcite-shell>`;
+
+panelsWithHeightsDefined.parameters = {
+  chromatic: {
+    modes: {
+      specific: {
+        viewport: {
+          width: 1200,
+          height: 1200,
+        },
+      },
+    },
+    cropToViewport: true,
+  },
+};
+
 export const customPanelWithOverflowingContent = (): string => html` <calcite-shell content-behind>
     <div style="
               width:100%;