feat(shell): Add "Sheets" Slot #7154

Esri · Aug 22, 2023 · e7bff53 · e7bff53
1 parent 00e7d63
commit e7bff53
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/packages/calcite-components/src/components/shell/resources.ts b/packages/calcite-components/src/components/shell/resources.ts
@@ -17,5 +17,6 @@ export const SLOTS = {
   header: "header",
   footer: "footer",
   alerts: "alerts",
+  sheets: "sheets",
   modals: "modals",
 };
diff --git a/packages/calcite-components/src/components/shell/shell.tsx b/packages/calcite-components/src/components/shell/shell.tsx
@@ -18,6 +18,7 @@ import { CSS, SLOTS } from "./resources";
  * @slot center-row - [Deprecated] Use the `"panel-bottom"` slot instead. A slot for adding the bottom `calcite-shell-center-row`.
  * @slot modals - A slot for adding `calcite-modal` components. When placed in this slot, the modal position will be constrained to the extent of the shell.
  * @slot alerts - A slot for adding `calcite-alert` components. When placed in this slot, the alert position will be constrained to the extent of the shell.
+ * @slot sheets - A slot for adding `calcite-sheet` components. When placed in this slot, the alert position will be constrained to the extent of the shell.
  */
 
 @Component({
@@ -53,6 +54,8 @@ export class Shell implements ConditionalSlotComponent {
 
   @State() hasModals = false;
 
+  @State() hasSheets = false;
+
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -90,6 +93,15 @@ export class Shell implements ConditionalSlotComponent {
     });
   };
 
+  handleSheetsSlotChange = (event: Event): void => {
+    this.hasAlerts = !!slotChangeHasAssignedElement(event);
+    slotChangeGetAssignedElements(event)?.map((el) => {
+      if (el.nodeName === "CALCITE-SHEET") {
+        (el as HTMLCalciteSheetElement).slottedInShell = true;
+      }
+    });
+  };
+
   handleModalsSlotChange = (event: Event): void => {
     this.hasModals = !!slotChangeHasAssignedElement(event);
     slotChangeGetAssignedElements(event)?.map((el) => {
@@ -129,6 +141,14 @@ export class Shell implements ConditionalSlotComponent {
     );
   }
 
+  renderSheets(): VNode {
+    return (
+      <div hidden={!this.hasSheets}>
+        <slot key="sheets" name={SLOTS.sheets} onSlotchange={this.handleSheetsSlotChange} />
+      </div>
+    );
+  }
+
   renderModals(): VNode {
     return (
       <div hidden={!this.hasModals}>
@@ -191,6 +211,7 @@ export class Shell implements ConditionalSlotComponent {
       <div class={CSS.positionedSlotWrapper}>
         {this.renderAlerts()}
         {this.renderModals()}
+        {this.renderSheets()}
       </div>
     );
   }