From 91c567f0c23188b75dafeb4cb76db6f5351b1bdb Mon Sep 17 00:00:00 2001
From: Alan Sangma <asangma@esri.com>
Date: Fri, 17 Nov 2023 22:34:44 -0800
Subject: [PATCH] test(panel, flow-item): add screenshot tests for overflow
 (#8028) (#8161)

**Related Issue:** #8028

## Summary
Adds screenshots for panel and flow-item.
Follow-up from #8055

cc @driskull
---
 .../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"