feat(shell): Add "Sheets" Slot

packages/calcite-components/src/components/sheet/sheet.scss

@@ -69,19 +69,22 @@
   --calcite-sheet-hidden-position-internal: translate3d(0, 1rem, 0);
 }
 
-:host([display-mode="float"][position="inline-start"]) .container {
+:host([display-mode="float"]) .container {
+  @apply shadow-2;
+}
+:host([display-mode="overlay"][position="inline-start"]) .container {
   box-shadow: var(--calcite-scrim-shadow-inline-start-internal);
 }
 
-:host([display-mode="float"][position="inline-end"]) .container {
+:host([display-mode="overlay"][position="inline-end"]) .container {
   box-shadow: var(--calcite-scrim-shadow-inline-end-internal);
 }
 
-:host([display-mode="float"][position="block-start"]) .container {
+:host([display-mode="overlay"][position="block-start"]) .container {
   box-shadow: var(--calcite-scrim-shadow-block-start-internal);
 }
 
-:host([display-mode="float"][position="block-end"]) .container {
+:host([display-mode="overlay"][position="block-end"]) .container {
   box-shadow: var(--calcite-scrim-shadow-block-end-internal);
 }
 
@@ -176,7 +179,7 @@
 }
 
 :host([display-mode="float"]) .container {
-  @apply m-3;
+  @apply p-3;
 }
 
 .container--open {
@@ -205,8 +208,14 @@
 /**
  * Conditional styles for when Sheet is slotted in Shell
  */
-.container--slotted-in-shell {
+:host([position]) .container--slotted-in-shell {
   @apply absolute pointer-events-auto;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  min-inline-size: 100%;
+  block-size: 100%;
+  max-block-size: 100%;
+  min-block-size: 100%;
   calcite-scrim {
     @apply absolute;
   }

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",
 };

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

@@ -628,6 +628,188 @@ export const slottedModalAndAlert = (): string =>
     </p>
   </main>`);
 
+export const slottedSheetOverlay = (): string =>
+  html(`
+    <p class="padded-content">
+      <calcite-notice width="full" open><span slot="title">Other page content outside of shell</span></calcite-notice>
+      Master cleanse occupy lo-fi meh. Green juice williamsburg XOXO man bun ascot fit. Knausgaard heirloom four dollar
+      toast DSA chicharrones, typewriter chia raw denim. Bicycle rights mustache humblebrag, mixtape slow-carb retro
+      vibecession franzen chia. Bespoke coloring book hot chicken literally bushwick succulents wayfarers. Dreamcatcher
+      taiyaki celiac pork belly migas, fashion axe beard shabby chic. Forage chia twee bushwick readymade yuccie praxis
+      enamel pin cred mukbang bicycle rights VHS iPhone pour-over subway tile.
+    </p>
+    <calcite-shell
+      style="
+    width:100%;
+    height:500px;
+    max-height:80%;
+    position:relative;
+    "
+    >
+      <div class="gnav" slot="header">Header Example</div>
+      <calcite-sheet open slot="sheets" label="libero nunc" position="inline-start" display-mode="overlay">
+            <calcite-panel closable heading="Ultrices neque"
+              ><p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+                fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+                deserunt mollit anim id est laborum.
+              </p>
+              <calcite-button slot="footer" width="half" appearance="outline">tincidunt lobortis</calcite-button>
+              <calcite-button slot="footer" width="half" appearance="outline">amet porttitor</calcite-button>
+            </calcite-panel>
+          </calcite-sheet>
+      <calcite-shell-panel id="primary-panel" slot="panel-start" position="start">
+        <calcite-action-bar slot="action-bar">
+          <calcite-action-group>
+            <calcite-action text="Save" icon="save" indicator> </calcite-action>
+            <calcite-action text-enabled icon="map" text="New" slot="menu-actions"> </calcite-action>
+            <calcite-action text-enabled icon="collection" text="Open" slot="menu-actions"> </calcite-action>
+          </calcite-action-group>
+          <calcite-action-group>
+            <calcite-action icon="layers" text="Layers" active> </calcite-action>
+            <calcite-action icon="basemap" text="Basemaps"> </calcite-action>
+            <calcite-action icon="legend" text="Legend"> </calcite-action>
+            <calcite-action icon="bookmark" text="Bookmarks"> </calcite-action>
+          </calcite-action-group>
+        </calcite-action-bar>
+        <calcite-panel heading="Panel">
+          <div class="padded-content">Panel content<br />Padding is fake.</div>
+        </calcite-panel>
+      </calcite-shell-panel>
+      <calcite-shell-panel slot="panel-end" position="end">
+        <calcite-action-bar slot="action-bar">
+          <calcite-tooltip slot="expand-tooltip" label="tooltip" disable-pointer>Add layers</calcite-tooltip>
+          <calcite-action-group>
+            <calcite-action text="Layer properties" icon="sliders-horizontal"> </calcite-action>
+            <calcite-action text="Styles" icon="shapes"> </calcite-action>
+            <calcite-action text="Filter" icon="layer-filter"> </calcite-action>
+            <calcite-action text="Configure pop-ups" icon="popup" active> </calcite-action>
+            <calcite-action text-enabled text="Configure attributes" icon="feature-details" slot="menu-actions">
+            </calcite-action>
+            <calcite-action text-enabled text="Labels" icon="label" slot="menu-actions"> </calcite-action>
+            <calcite-action text-enabled text="Tablew" icon="table" slot="menu-actions"> </calcite-action>
+          </calcite-action-group>
+        </calcite-action-bar>
+        <calcite-flow>
+          <calcite-flow-item heading="Flow 01">
+            <div class="padded-content">Flow 01 content<br />Padding is fake.</div>
+          </calcite-flow-item>
+          <calcite-flow-item heading="Flow 02">
+            <div class="padded-content">Flow 02 content<br />Padding is fake.</div>
+          </calcite-flow-item>
+        </calcite-flow>
+      </calcite-shell-panel>
+      <calcite-panel heading="Main content">
+        <div class="padded-content">The borders are only applied to "known" components.<br />Padding is fake.</div>
+      </calcite-panel>
+      <footer slot="footer">Footer Example</footer>
+    </calcite-shell>
+    <p class="padded-content">
+      <calcite-notice width="full" open><span slot="title">Notice outside of shell</span></calcite-notice>
+      Edison bulb iceland narwhal fit DSA. Activated charcoal dreamcatcher shabby chic, microdosing gluten-free locavore
+      chambray tumblr hella sus ugh cronut tofu. Vibecession air plant etsy, vape church-key narwhal activated charcoal
+      offal kombucha hella. Actually mumblecore butcher, iceland man bun prism blog taiyaki roof party portland hashtag.
+    </p>
+    <script>
+    document.addEventListener("calcitePanelClose", () => {
+      document.querySelector("calcite-sheet").open = false;
+    });
+  </script>
+`);
+
+export const slottedSheetFloat = (): string =>
+  html(`
+    <p class="padded-content">
+      <calcite-notice width="full" open><span slot="title">Other page content outside of shell</span></calcite-notice>
+      Master cleanse occupy lo-fi meh. Green juice williamsburg XOXO man bun ascot fit. Knausgaard heirloom four dollar
+      toast DSA chicharrones, typewriter chia raw denim. Bicycle rights mustache humblebrag, mixtape slow-carb retro
+      vibecession franzen chia. Bespoke coloring book hot chicken literally bushwick succulents wayfarers. Dreamcatcher
+      taiyaki celiac pork belly migas, fashion axe beard shabby chic. Forage chia twee bushwick readymade yuccie praxis
+      enamel pin cred mukbang bicycle rights VHS iPhone pour-over subway tile.
+    </p>
+    <calcite-shell
+      style="
+    width:100%;
+    height:500px;
+    max-height:80%;
+    position:relative;
+    "
+    >
+      <div class="gnav" slot="header">Header Example</div>
+      <calcite-sheet open slot="sheets" label="libero nunc" position="inline-start" display-mode="float">
+            <calcite-panel closable heading="Ultrices neque"
+              ><p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+                fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+                deserunt mollit anim id est laborum.
+              </p>
+              <calcite-button slot="footer" width="half" appearance="outline">tincidunt lobortis</calcite-button>
+              <calcite-button slot="footer" width="half" appearance="outline">amet porttitor</calcite-button>
+            </calcite-panel>
+          </calcite-sheet>
+      <calcite-shell-panel id="primary-panel" slot="panel-start" position="start">
+        <calcite-action-bar slot="action-bar">
+          <calcite-action-group>
+            <calcite-action text="Save" icon="save" indicator> </calcite-action>
+            <calcite-action text-enabled icon="map" text="New" slot="menu-actions"> </calcite-action>
+            <calcite-action text-enabled icon="collection" text="Open" slot="menu-actions"> </calcite-action>
+          </calcite-action-group>
+          <calcite-action-group>
+            <calcite-action icon="layers" text="Layers" active> </calcite-action>
+            <calcite-action icon="basemap" text="Basemaps"> </calcite-action>
+            <calcite-action icon="legend" text="Legend"> </calcite-action>
+            <calcite-action icon="bookmark" text="Bookmarks"> </calcite-action>
+          </calcite-action-group>
+        </calcite-action-bar>
+        <calcite-panel heading="Panel">
+          <div class="padded-content">Panel content<br />Padding is fake.</div>
+        </calcite-panel>
+      </calcite-shell-panel>
+      <calcite-shell-panel slot="panel-end" position="end">
+        <calcite-action-bar slot="action-bar">
+          <calcite-tooltip slot="expand-tooltip" label="tooltip" disable-pointer>Add layers</calcite-tooltip>
+          <calcite-action-group>
+            <calcite-action text="Layer properties" icon="sliders-horizontal"> </calcite-action>
+            <calcite-action text="Styles" icon="shapes"> </calcite-action>
+            <calcite-action text="Filter" icon="layer-filter"> </calcite-action>
+            <calcite-action text="Configure pop-ups" icon="popup" active> </calcite-action>
+            <calcite-action text-enabled text="Configure attributes" icon="feature-details" slot="menu-actions">
+            </calcite-action>
+            <calcite-action text-enabled text="Labels" icon="label" slot="menu-actions"> </calcite-action>
+            <calcite-action text-enabled text="Tablew" icon="table" slot="menu-actions"> </calcite-action>
+          </calcite-action-group>
+        </calcite-action-bar>
+        <calcite-flow>
+          <calcite-flow-item heading="Flow 01">
+            <div class="padded-content">Flow 01 content<br />Padding is fake.</div>
+          </calcite-flow-item>
+          <calcite-flow-item heading="Flow 02">
+            <div class="padded-content">Flow 02 content<br />Padding is fake.</div>
+          </calcite-flow-item>
+        </calcite-flow>
+      </calcite-shell-panel>
+      <calcite-panel heading="Main content">
+        <div class="padded-content">The borders are only applied to "known" components.<br />Padding is fake.</div>
+      </calcite-panel>
+      <footer slot="footer">Footer Example</footer>
+    </calcite-shell>
+    <p class="padded-content">
+      <calcite-notice width="full" open><span slot="title">Notice outside of shell</span></calcite-notice>
+      Edison bulb iceland narwhal fit DSA. Activated charcoal dreamcatcher shabby chic, microdosing gluten-free locavore
+      chambray tumblr hella sus ugh cronut tofu. Vibecession air plant etsy, vape church-key narwhal activated charcoal
+      offal kombucha hella. Actually mumblecore butcher, iceland man bun prism blog taiyaki roof party portland hashtag.
+    </p>
+    <script>
+    document.addEventListener("calcitePanelClose", () => {
+      document.querySelector("calcite-sheet").open = false;
+    });
+  </script>
+`);
+
 export const contentBehind = (): string =>
   html(`<calcite-shell content-behind>
   ${headerHTML}

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.hasSheets = !!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>
     );
   }

packages/calcite-components/src/demos/shell/basic-slotted-elements.html

@@ -47,6 +47,19 @@
           <calcite-alert open slot="alerts" placement="top-end"
             ><span slot="title">Alert slotted in Shell</span>
           </calcite-alert>
+          <calcite-sheet open slot="sheets" label="libero nunc" position="inline-start" display-mode="overlay">
+            <calcite-panel closable heading="Ultrices neque"
+              ><p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+                fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+                deserunt mollit anim id est laborum.
+              </p>
+              <calcite-button slot="footer" width="half" appearance="outline">tincidunt lobortis</calcite-button>
+              <calcite-button slot="footer" width="half" appearance="outline">amet porttitor</calcite-button>
+            </calcite-panel>
+          </calcite-sheet>
           <calcite-shell-panel id="primary-panel" slot="panel-start" position="start">
             <calcite-action-bar slot="action-bar">
               <calcite-action-group>
@@ -243,6 +256,10 @@ <h3 slot="header">Test custom modal sizes in slotted modal in shell</h3>
         customSizeModal.style.setProperty("--calcite-modal-height", heightInput.value);
         customSizeModal.style.setProperty("--calcite-modal-width", widthInput.value);
       });
+
+      document.addEventListener("calcitePanelClose", () => {
+        document.querySelector("calcite-sheet").open = false;
+      });
     </script>
   </body>
 </html>