From 356e3996610cd4f638fff5534f06cbf179719a1c Mon Sep 17 00:00:00 2001
From: Matt Driscoll <driskull@users.noreply.github.com>
Date: Thu, 27 Feb 2020 14:16:00 -0800
Subject: [PATCH] feat(flow-item,panel): Add an onscroll event for FlowItem and
 Panel #842

---
 .../calcite-flow-item/calcite-flow-item.tsx   | 14 +++-
 .../calcite-panel/calcite-panel.tsx           | 12 ++-
 src/demos/flow-item/basic.html                | 49 +++++++++++
 src/demos/panel/basic.html                    | 81 +++++++++++++++++++
 4 files changed, 154 insertions(+), 2 deletions(-)

diff --git a/src/components/calcite-flow-item/calcite-flow-item.tsx b/src/components/calcite-flow-item/calcite-flow-item.tsx
index d18ac53f..d9dd6e5e 100755
--- a/src/components/calcite-flow-item/calcite-flow-item.tsx
+++ b/src/components/calcite-flow-item/calcite-flow-item.tsx
@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Host, Prop, h } from "@stencil/core";
+import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from "@stencil/core";
 import { VNode } from "@stencil/core/internal";
 import { focusElement, getElementDir } from "../utils/dom";
 import classnames from "classnames";
@@ -99,6 +99,12 @@ export class CalciteFlowItem {
 
   @Event() calciteFlowItemBackClick: EventEmitter;
 
+  /**
+   * Emitted when the content has been scrolled.
+   */
+
+  @Event() calciteFlowItemScroll: EventEmitter;
+
   // --------------------------------------------------------------------------
   //
   //  Private Properties
@@ -113,6 +119,12 @@ export class CalciteFlowItem {
   //
   // --------------------------------------------------------------------------
 
+  @Listen("calcitePanelScroll")
+  handleCalcitePanelScroll(event: CustomEvent): void {
+    event.stopPropagation();
+    this.calciteFlowItemScroll.emit();
+  }
+
   queryActions(): HTMLCalciteActionElement[] {
     return Array.from(this.el.querySelectorAll(`[slot=${SLOTS.menuActions}] calcite-action`));
   }
diff --git a/src/components/calcite-panel/calcite-panel.tsx b/src/components/calcite-panel/calcite-panel.tsx
index 72d8bff5..3e5273ff 100644
--- a/src/components/calcite-panel/calcite-panel.tsx
+++ b/src/components/calcite-panel/calcite-panel.tsx
@@ -103,6 +103,12 @@ export class CalcitePanel {
 
   @Event() calcitePanelDismissedChange: EventEmitter;
 
+  /**
+   * Emitted when the content has been scrolled.
+   */
+
+  @Event() calcitePanelScroll: EventEmitter;
+
   // --------------------------------------------------------------------------
   //
   //  Private Methods
@@ -119,6 +125,10 @@ export class CalcitePanel {
     this.dismissed = true;
   };
 
+  panelScrollHandler = (): void => {
+    this.calcitePanelScroll.emit();
+  };
+
   // --------------------------------------------------------------------------
   //
   //  Methods
@@ -213,7 +223,7 @@ export class CalcitePanel {
 
   renderContent(): VNode {
     return (
-      <section class={CSS.contentContainer}>
+      <section class={CSS.contentContainer} onScroll={this.panelScrollHandler}>
         <slot />
         {this.renderFab()}
       </section>
diff --git a/src/demos/flow-item/basic.html b/src/demos/flow-item/basic.html
index a932d2d2..5d13d891 100644
--- a/src/demos/flow-item/basic.html
+++ b/src/demos/flow-item/basic.html
@@ -15,6 +15,7 @@
       <section class="example-container">
         <h1>calcite-flow-item</h1>
 
+        <h2>Flow Item</h2>
         <div class="flow-container">
           <calcite-flow-item heading="What are the most popular commute alternatives?" summary="I don't know.">
             <div slot="menu-actions">
@@ -30,6 +31,54 @@ <h1>calcite-flow-item</h1>
             <img src="https://via.placeholder.com/300x200" alt="placeholder" />
           </calcite-flow-item>
         </div>
+
+        <h2>Scrollable Flow Item</h2>
+        <div class="flow-container" style="height: 500px;" id="flow-item">
+          <calcite-flow-item heading="What are the most popular commute alternatives?" summary="I don't know.">
+            <div slot="menu-actions">
+              <calcite-action text="Save" text-enabled></calcite-action>
+              <calcite-action text="Do It" text-enabled></calcite-action>
+              <calcite-action text="Load" text-enabled></calcite-action>
+              <calcite-action text="Cancel" text-enabled></calcite-action>
+            </div>
+            <div slot="footer-actions">
+              <button>Example</button>
+              <button>Actions</button>
+            </div>
+            <img src="https://via.placeholder.com/300x200" alt="placeholder" />
+            <p>Slotted content</p>
+            <p>Slotted content</p>
+            <p>Slotted content</p>
+            <p>Slotted content</p>
+            <p>Slotted content</p>
+            <p>Slotted content</p>
+            <p>Slotted content</p>
+            <p>Slotted content</p>
+            <p>Slotted content</p>
+            <p>Slotted content</p>
+            <p>Slotted content</p>
+            <p>Slotted content</p>
+            <p>Slotted content</p>
+            <p>Slotted content</p>
+            <p>Slotted content</p>
+            <p>Slotted content</p>
+            <p>Slotted content</p>
+            <p>Slotted content</p>
+            <p>Slotted content</p>
+            <p>Slotted content</p>
+            <p>Slotted content</p>
+            <p>Slotted content</p>
+            <p>Slotted content</p>
+            <p>Slotted content</p>
+            <p>Slotted content</p>
+          </calcite-flow-item>
+        </div>
+        <script>
+          const flowItem = document.getElementById("flow-item");
+          flowItem.addEventListener("calciteFlowItemScroll", function(event) {
+            console.log("scrolled", event);
+          });
+        </script>
       </section>
     </main>
   </body>
diff --git a/src/demos/panel/basic.html b/src/demos/panel/basic.html
index af9072ae..f0e63cf5 100644
--- a/src/demos/panel/basic.html
+++ b/src/demos/panel/basic.html
@@ -52,6 +52,87 @@ <h2>Dismissible Panel</h2>
           }, 3000);
         </script>
 
+        <h2>Scrolling Panel</h2>
+        <calcite-panel style="height: 500px;" id="panel">
+          <div slot="header-content">panel header</div>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+          <p>Slotted content</p>
+        </calcite-panel>
+        <script>
+          const panel = document.getElementById("panel");
+          panel.addEventListener("calcitePanelScroll", function(event) {
+            console.log("scrolled", event);
+          });
+        </script>
+
         <div class="panel-container" dir="rtl">
           <h2>RTL</h2>