From c07517c642d055ddcbe13178a637910d3eafe90f Mon Sep 17 00:00:00 2001
From: Alan Sangma <asangma@esri.com>
Date: Fri, 10 Nov 2023 18:32:33 -0800
Subject: [PATCH] test(panel, flowitem): add screenshot tests for overflow
 (#8028)

---
 .../components/flow-item/flow-item.stories.ts | 26 +++++++++++++++++++
 .../src/components/panel/panel.stories.ts     | 24 +++++++++++++++++
 2 files changed, 50 insertions(+)

diff --git a/packages/calcite-components/src/components/flow-item/flow-item.stories.ts b/packages/calcite-components/src/components/flow-item/flow-item.stories.ts
index e5ceb1b83e9..8ed395722da 100644
--- a/packages/calcite-components/src/components/flow-item/flow-item.stories.ts
+++ b/packages/calcite-components/src/components/flow-item/flow-item.stories.ts
@@ -242,6 +242,32 @@ export const noDoubleScrollbars_TestOnly = (): string => html`
   </div>
 `;
 
+export const overflowContent_TestOnly = (): string => html` <style>
+    .container {
+      max-height: 300px;
+      width: 300px;
+    }
+  </style>
+  <div class="container">
+    <calcite-flow>
+      <calcite-flow-item heading="My Panel">
+        <calcite-list>
+          <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+          <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+          <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+          <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+          <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+          <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+          <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+          <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+          <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+          <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+          <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        </calcite-list>
+      </calcite-flow-item>
+    </calcite-flow>
+  </div>`;
+
 export const withActionBar_TestOnly = (): string => html`<div style="width: 300px;">
   <calcite-flow-item height-scale="s">
     <calcite-action-bar slot="action-bar">
diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/packages/calcite-components/src/components/panel/panel.stories.ts
index 241cb7fc2a0..58ac6ef9868 100644
--- a/packages/calcite-components/src/components/panel/panel.stories.ts
+++ b/packages/calcite-components/src/components/panel/panel.stories.ts
@@ -404,6 +404,30 @@ export const flexContentWithFAB_TestOnly = (): string => html`<calcite-panel
   <calcite-fab slot="fab"></calcite-fab
 ></calcite-panel>`;
 
+export const overflowContent_TestOnly = (): string => html` <style>
+    .container {
+      max-height: 300px;
+      width: 300px;
+    }
+  </style>
+  <div class="container">
+    <calcite-panel heading="My Panel">
+      <calcite-list>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+      </calcite-list>
+    </calcite-panel>
+  </div>`;
+
 export const overflowContentWithFab_TestOnly = (): string => html` <calcite-panel
   style="max-height: 300px; height: 300px; width: 500px"
   heading="My Panel"