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
Esri · Nov 24, 2023 · 8f7e63e · 8f7e63e
1 parent b7edfdc
commit 8f7e63e
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 0 deletions.
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
@@ -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
@@ -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"