feat(modal): provides content-top and content-bottom slots

src/components/modal/modal.scss

@@ -20,6 +20,11 @@
   --calcite-modal-scrim-background-internal: #{rgba($blk-240, 0.85)};
 }
 
+.content-top[hidden],
+.content-bottom[hidden] {
+  @apply hidden;
+}
+
 .container {
   @apply text-color-2
     fixed
@@ -184,13 +189,44 @@
  */
 .content {
   @apply relative box-border block h-full overflow-auto p-0;
-  max-block-size: 100%;
   background-color: var(--calcite-modal-content-background, theme("colors.background.foreground.1"));
-  padding-block: var(--calcite-modal-content-padding, var(--calcite-modal-padding-internal));
-  padding-inline: var(--calcite-modal-content-padding, var(--calcite-modal-padding-internal));
+  max-block-size: 100%;
+  padding: var(--calcite-modal-content-padding, var(--calcite-modal-padding-internal));
+}
+
+.content-top {
+  @apply bg-foreground-1
+  border-color-3
+  flex
+  min-w-0
+  max-w-full
+  rounded-t
+  border-0
+  border-b
+  border-solid
+  z-header;
+  flex: 0 0 auto;
+  padding: var(--calcite-modal-padding-internal);
+}
+
+.content-bottom {
+  @apply bg-foreground-1
+    border-color-3
+    mt-auto
+    box-border
+    flex
+    w-full
+    justify-between
+    rounded-b
+    border-0
+    border-t
+    border-solid
+    z-header;
+  flex: 0 0 auto;
+  padding: var(--calcite-modal-padding-internal);
 }
 
-.content--no-footer {
+.content--no-modal-footer {
   @apply rounded-b;
 }
 
@@ -287,10 +323,10 @@ slot[name="primary"] {
 }
 
 :host([open][fullscreen]) {
-  .header {
-    border-radius: 0;
-  }
-  .footer {
+  .header,
+  .footer,
+  .content-top,
+  .content-bottom {
     border-radius: 0;
   }
 }
@@ -339,7 +375,8 @@ slot[name="primary"] {
   .modal {
     @apply border-0 border-t-4 border-solid;
   }
-  .header {
+  .header,
+  .content-top {
     @apply rounded rounded-b-none;
   }
 }
@@ -348,10 +385,11 @@ slot[name="primary"] {
  * Tablet
  */
 @media screen and (max-width: $viewport-medium) {
-  @include slotted("header", "*") {
+  @include slotted("header", "content-top", "*") {
     @apply text-1;
   }
-  .footer {
+  .footer,
+  .content-bottom {
     @apply sticky bottom-0;
   }
 }
@@ -360,7 +398,8 @@ slot[name="primary"] {
  * Mobile
  */
 @media screen and (max-width: $viewport-small) {
-  .footer {
+  .footer,
+  .content-bottom {
     @apply flex-col;
   }
   .back,

src/components/modal/modal.stories.ts

@@ -1,4 +1,4 @@
-import { select, number } from "@storybook/addon-knobs";
+import { select } from "@storybook/addon-knobs";
 import { boolean, storyFilters } from "../../../.storybook/helpers";
 import { modesDarkDefault } from "../../../.storybook/utils";
 import readme from "./readme.md";
@@ -27,7 +27,7 @@ export const simple = (): string => html`
   >
     <h3 slot="header">Small Modal</h3>
     <div slot="content">
-      <p>The small modal is perfect for short confirmation dialogs or very compact interfaces with few elements.</p>
+      The small modal is perfect for short confirmation dialogs or very compact interfaces with few elements.
     </div>
     <calcite-button slot="back" kind="neutral" appearance="outline" icon="chevron-left" width="full"
       >Back</calcite-button
@@ -37,6 +37,34 @@ export const simple = (): string => html`
   </calcite-modal>
 `;
 
+const mightyLongTextToScroll = html`
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non nisi et elit auctor aliquet ac suscipit eros. Sed nec
+  nibh viverra, feugiat magna ut, posuere arcu. Curabitur varius erat ut suscipit convallis. Nullam semper pellentesque
+  est laoreet accumsan. Aenean eget urna fermentum, porttitor dui et, tincidunt erat. Curabitur lacinia lacus in urna
+  lacinia, ac interdum lorem fermentum. Ut accumsan malesuada varius. Lorem ipsum dolor sit amet, consectetur adipiscing
+  elit. Phasellus tempus tempor magna, eu dignissim urna ornare non. Integer tempor justo blandit nunc ornare, a
+  interdum nisl pharetra. Sed ultricies at augue vel fermentum. Maecenas laoreet odio lorem. Aliquam in pretium turpis.
+  Donec quis felis a diam accumsan vehicula efficitur at orci. Donec sollicitudin gravida ultrices.
+`;
+
+export const slots = (): string => html`
+  <calcite-modal
+    ${boolean("open", true)}
+    kind="${select("kind", ["brand", "danger", "info", "success", "warning"], "")}"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    width="${select("width", ["s", "m", "l"], "s")}"
+    ${boolean("fullscreen", false)}
+    ${boolean("docked", false)}
+    ${boolean("escape-disabled", false)}
+  >
+    <h3 slot="header">Slot for a header.</h3>
+    <div slot="content-top">Slot for a content-top.</div>
+    <div slot="content" style="height: 100px">${mightyLongTextToScroll}</div>
+    <div slot="content-bottom">Slot for a content-bottom.</div>
+    <calcite-button slot="primary" width="full">Button</calcite-button>
+  </calcite-modal>
+`;
+
 export const darkModeRTLCustomSizeCSSVars_TestOnly = (): string => html`
   <calcite-modal
     class="calcite-mode-dark"

src/components/modal/modal.tsx

@@ -17,7 +17,12 @@ import {
   connectConditionalSlotComponent,
   disconnectConditionalSlotComponent
 } from "../../utils/conditionalSlot";
-import { ensureId, focusFirstTabbable, getSlotted } from "../../utils/dom";
+import {
+  ensureId,
+  focusFirstTabbable,
+  getSlotted,
+  slotChangeHasAssignedElement
+} from "../../utils/dom";
 import {
   activateFocusTrap,
   connectFocusTrap,
@@ -50,6 +55,8 @@ import { ModalMessages } from "./assets/modal/t9n";
 /**
  * @slot header - A slot for adding header text.
  * @slot content - A slot for adding the component's content.
+ * @slot contentTop - A slot for adding the component's content header.
+ * @slot contentBottom - A slot for adding the component's content footer.
  * @slot primary - A slot for adding a primary button.
  * @slot secondary - A slot for adding a secondary button.
  * @slot back - A slot for adding a back button.
@@ -176,8 +183,8 @@ export class Modal
   connectedCallback(): void {
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
     this.cssVarObserver?.observe(this.el, { attributeFilter: ["style"] });
-    this.updateFooterVisibility();
     this.updateSizeCssVars();
+    this.updateFooterVisibility();
     connectConditionalSlotComponent(this);
     connectLocalized(this);
     connectMessages(this);
@@ -223,24 +230,26 @@ export class Modal
                 <slot name={CSS.header} />
               </header>
             </div>
+            {this.renderContentTop()}
             <div
               class={{
                 [CSS.content]: true,
-                [CSS.contentNoFooter]: !this.hasFooter
+                [CSS.contentNoModalFooter]: !this.hasModalFooter
               }}
               ref={(el) => (this.modalContent = el)}
             >
               <slot name={SLOTS.content} />
             </div>
-            {this.renderFooter()}
+            {this.renderContentBottom()}
+            {this.renderModalFooter()}
           </div>
         </div>
       </Host>
     );
   }
 
-  renderFooter(): VNode {
-    return this.hasFooter ? (
+  renderModalFooter(): VNode {
+    return this.hasModalFooter ? (
       <div class={CSS.footer} key="footer">
         <span class={CSS.back}>
           <slot name={SLOTS.back} />
@@ -255,6 +264,22 @@ export class Modal
     ) : null;
   }
 
+  renderContentTop(): VNode {
+    return (
+      <div class={CSS.contentTop} hidden={!this.hasContentTop} key="content-top">
+        <slot name={SLOTS.contentTop} onSlotchange={this.contentTopSlotChangeHandler} />
+      </div>
+    );
+  }
+
+  renderContentBottom(): VNode {
+    return (
+      <div class={CSS.contentBottom} hidden={!this.hasContentBottom} key="content-bottom">
+        <slot name={SLOTS.contentBottom} onSlotchange={this.contentBottomSlotChangeHandler} />
+      </div>
+    );
+  }
+
   renderCloseButton(): VNode {
     return !this.closeButtonDisabled ? (
       <button
@@ -347,7 +372,11 @@ export class Modal
 
   @State() cssHeight: string | number;
 
-  @State() hasFooter = true;
+  @State() hasModalFooter = true;
+
+  @State() hasContentTop = false;
+
+  @State() hasContentBottom = false;
 
   /**
    * We use internal variable to make sure initially open modal can transition from closed state when rendered
@@ -527,11 +556,19 @@ export class Modal
   }
 
   private updateFooterVisibility = (): void => {
-    this.hasFooter = !!getSlotted(this.el, [SLOTS.back, SLOTS.primary, SLOTS.secondary]);
+    this.hasModalFooter = !!getSlotted(this.el, [SLOTS.back, SLOTS.primary, SLOTS.secondary]);
   };
 
   private updateSizeCssVars = (): void => {
     this.cssWidth = getComputedStyle(this.el).getPropertyValue("--calcite-modal-width");
     this.cssHeight = getComputedStyle(this.el).getPropertyValue("--calcite-modal-height");
   };
+
+  private contentTopSlotChangeHandler = (event: Event): void => {
+    this.hasContentTop = slotChangeHasAssignedElement(event);
+  };
+
+  private contentBottomSlotChangeHandler = (event: Event): void => {
+    this.hasContentBottom = slotChangeHasAssignedElement(event);
+  };
 }

src/components/modal/resources.ts

@@ -12,7 +12,9 @@ export const CSS = {
   overflowHidden: "overflow-hidden",
   container: "container",
   content: "content",
-  contentNoFooter: "content--no-footer",
+  contentNoModalFooter: "content--no-modal-footer",
+  contentBottom: "content-bottom",
+  contentTop: "content-top",
   slottedInShell: "slotted-in-shell",
 
   // these classes help apply the animation in phases to only set transform on open/close
@@ -36,6 +38,8 @@ export const ICONS = {
 
 export const SLOTS = {
   content: "content",
+  contentBottom: "content-bottom",
+  contentTop: "content-top",
   header: "header",
   back: "back",
   secondary: "secondary",