feat(panel): add content-bottom slot (#9311)

**Related Issue:** #8979 ## Summary Add a new `content-bottom` slot to the `panel` component.
Esri · May 11, 2024 · 87da591 · 87da591
1 parent fc16321
commit 87da591
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 14 deletions.
diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss
@@ -18,23 +18,28 @@
 
 @import "../../assets/styles/header";
 
-:host([scale="s"]) .content-top {
+:host([scale="s"]) .content-top,
+.content-bottom {
   padding: var(--calcite-spacing-sm);
 }
 
-:host([scale="m"]) .content-top {
+:host([scale="m"]) .content-top,
+.content-bottom {
   padding: var(--calcite-spacing-md);
 }
 
-:host([scale="l"]) .content-top {
+:host([scale="l"]) .content-top,
+.content-bottom {
   padding: var(--calcite-spacing-xl);
 }
 
-.content-top {
+.content-top,
+.content-bottom {
   @apply flex items-start self-stretch;
 
   padding: var(--calcite-spacing-md);
   border-block-start: 1px solid var(--calcite-color-border-3);
+  background-color: var(--calcite-color-foreground-1);
 }
 
 .container {

diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/packages/calcite-components/src/components/panel/panel.stories.ts
@@ -441,20 +441,21 @@ export const withNoHeaderBorderBlockEnd_TestOnly = (): string =>
     >Slotted content!</calcite-panel
   >`;
 
-export const contentTopSlot = (): string => html`
-  <div style="height: 300px; width: 400px; display: flex">
+export const contentTopBottomSlot = (): string => html`
+  <div style="height: 350px; width: 400px; display: flex">
     <calcite-panel height-scale="s">
+      <div slot="header-content">Header!</div>
       <calcite-action-bar slot="action-bar">
         <calcite-action-group>
           <calcite-action text="Add" icon="plus"> </calcite-action>
         </calcite-action-group>
       </calcite-action-bar>
       <div slot="content-top">Slot for a content-top.</div>
-      <div slot="header-content">Header!</div>
       <p>Slotted content!</p>
       <p>Hello world!</p>
       <p>Hello world!</p>
-      <p style="height: 400px">Hello world!</p>
+      <p>Hello world!</p>
+      <div slot="content-bottom">Slot for a content-bottom.</div>
       <p slot="footer">Slotted content!</p>
     </calcite-panel>
   </div>

diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx
@@ -48,6 +48,7 @@ import { CSS, ICONS, SLOTS } from "./resources";
 /**
  * @slot - A slot for adding custom content.
  * @slot action-bar - A slot for adding a `calcite-action-bar` to the component.
+ * @slot content-bottom - A slot for adding content below the unnamed (default) slot and above the footer slot (if populated)
  * @slot content-top - A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated).
  * @slot header-actions-start - A slot for adding actions or content to the start side of the header.
  * @slot header-actions-end - A slot for adding actions or content to the end side of the header.
@@ -208,6 +209,8 @@ export class Panel
 
   @State() hasActionBar = false;
 
+  @State() hasContentBottom = false;
+
   @State() hasContentTop = false;
 
   @State() hasFooterContent = false;
@@ -331,6 +334,10 @@ export class Panel
     this.hasFab = slotChangeHasAssignedElement(event);
   };
 
+  private contentBottomSlotChangeHandler = (event: Event): void => {
+    this.hasContentBottom = slotChangeHasAssignedElement(event);
+  };
+
   private contentTopSlotChangeHandler = (event: Event): void => {
     this.hasContentTop = slotChangeHasAssignedElement(event);
   };
@@ -593,6 +600,14 @@ export class Panel
     );
   }
 
+  renderContentBottom(): VNode {
+    return (
+      <div class={CSS.contentBottom} hidden={!this.hasContentBottom}>
+        <slot name={SLOTS.contentBottom} onSlotchange={this.contentBottomSlotChangeHandler} />
+      </div>
+    );
+  }
+
   renderContentTop(): VNode {
     return (
       <div class={CSS.contentTop} hidden={!this.hasContentTop}>
@@ -622,6 +637,7 @@ export class Panel
       >
         {this.renderHeaderNode()}
         {this.renderContent()}
+        {this.renderContentBottom()}
         {this.renderFooterNode()}
       </article>
     );

diff --git a/packages/calcite-components/src/components/panel/resources.ts b/packages/calcite-components/src/components/panel/resources.ts
@@ -2,6 +2,7 @@ export const CSS = {
   actionBarContainer: "action-bar-container",
   backButton: "back-button",
   container: "container",
+  contentBottom: "content-bottom",
   contentTop: "content-top",
   header: "header",
   headerContainer: "header-container",
@@ -29,6 +30,7 @@ export const ICONS = {
 
 export const SLOTS = {
   actionBar: "action-bar",
+  contentBottom: "content-bottom",
   contentTop: "content-top",
   headerActionsStart: "header-actions-start",
   headerActionsEnd: "header-actions-end",

diff --git a/packages/calcite-components/src/demos/panel.html b/packages/calcite-components/src/demos/panel.html
@@ -127,13 +127,19 @@
 
       <!-- footer -->
       <div class="parent">
-        <div class="child right-aligned-text">footer</div>
+        <div class="child right-aligned-text">footer and content bottom</div>
         <div class="child">
-          <calcite-panel>
-            <div slot="header-content">header-content slot</div>
-            <p>I have a footer.</p>
-            <div slot="footer">panel Footer</div>
-          </calcite-panel>
+          <div style="height: 200px; display: flex">
+            <calcite-panel>
+              <div slot="header-content">header-content slot</div>
+              <p>Slotted content!</p>
+              <p>Hello world!</p>
+              <p>Hello world!</p>
+              <p>Hello world!</p>
+              <div slot="content-bottom">Slot for a content-bottom.</div>
+              <div slot="footer">panel Footer</div>
+            </calcite-panel>
+          </div>
         </div>
       </div>