Merge remote-tracking branch 'origin/main' into benelan/6706-integer-…

…input * origin/main: chore: release next feat(shell): Add "Sheets" Slot (#7579)
Esri · Aug 29, 2023 · 59c6488 · 59c6488
2 parents 00ffc5b + 482c4ea
commit 59c6488
Show file tree

Hide file tree

Showing 10 changed files with 253 additions and 13 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.7.0-next.11](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.7.0-next.10...@esri/calcite-components-react@1.7.0-next.11) (2023-08-28)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
 ## [1.7.0-next.10](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.7.0-next.9...@esri/calcite-components-react@1.7.0-next.10) (2023-08-28)
 
 **Note:** Version bump only for package @esri/calcite-components-react

diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@esri/calcite-components-react",
   "sideEffects": false,
-  "version": "1.7.0-next.10",
+  "version": "1.7.0-next.11",
   "description": "A set of React components that wrap calcite components",
   "license": "SEE LICENSE.md",
   "scripts": {
@@ -19,7 +19,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@esri/calcite-components": "^1.7.0-next.10"
+    "@esri/calcite-components": "^1.7.0-next.11"
   },
   "peerDependencies": {
     "react": ">=16.7",

diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.7.0-next.11](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.7.0-next.10...@esri/calcite-components@1.7.0-next.11) (2023-08-28)
+
+### Features
+
+- **shell:** Add "Sheets" Slot ([#7579](https://github.com/Esri/calcite-design-system/issues/7579)) ([e798765](https://github.com/Esri/calcite-design-system/commit/e7987655fef6abf0ef88d3ccfc4985d509473a81)), closes [#7154](https://github.com/Esri/calcite-design-system/issues/7154) [#7561](https://github.com/Esri/calcite-design-system/issues/7561)
+
 ## [1.7.0-next.10](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.7.0-next.9...@esri/calcite-components@1.7.0-next.10) (2023-08-28)
 
 ### Features

diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.7.0-next.10",
+  "version": "1.7.0-next.11",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

diff --git a/packages/calcite-components/src/components/sheet/sheet.scss b/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;
   }

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.stories.ts b/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}

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