feat(flow-item): add content-bottom slot (#9346)

**Related Issue:** #8979 ## Summary Add a new `content-bottom` slot to the `flow-item` component.
Esri · May 15, 2024 · 9d3b1af · 9d3b1af
1 parent cc9ccfc
commit 9d3b1af
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 1 deletion.
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
@@ -278,11 +278,12 @@ export const withActionBar_TestOnly = (): string =>
     </calcite-flow-item>
   </div>`;
 
-export const footerPadding_TestOnly = (): string =>
+export const footerPaddingAndContentBottom_TestOnly = (): string =>
   html`<div style="width: 300px;">
     <calcite-flow-item height-scale="s" style="--calcite-flow-item-footer-padding: 20px;">
       <div slot="header-content">Header!</div>
       <p>Slotted content!</p>
+      <div slot="content-bottom">Content bottom!</div>
       <div slot="footer">Footer!</div>
     </calcite-flow-item>
   </div>`;

diff --git a/packages/calcite-components/src/components/flow-item/flow-item.tsx b/packages/calcite-components/src/components/flow-item/flow-item.tsx
@@ -42,6 +42,7 @@ import { CSS, ICONS, SLOTS } from "./resources";
 /**
  * @slot - A slot for adding custom content.
  * @slot action-bar - A slot for adding a `calcite-action-bar` to the component.
+ * @slot content-bottom - A slot for adding content below the unnamed (default) slot and above the footer slot (if populated)
  * @slot header-actions-start - A slot for adding `calcite-action`s or content to the start side of the component's header.
  * @slot header-actions-end - A slot for adding `calcite-action`s or content to the end side of the component's header.
  * @slot header-content - A slot for adding custom content to the component's header.
@@ -385,6 +386,7 @@ export class FlowItem
             <slot name={SLOTS.headerContent} slot={PANEL_SLOTS.headerContent} />
             <slot name={SLOTS.headerMenuActions} slot={PANEL_SLOTS.headerMenuActions} />
             <slot name={SLOTS.fab} slot={PANEL_SLOTS.fab} />
+            <slot name={SLOTS.contentBottom} slot={PANEL_SLOTS.contentBottom} />
             <slot name={SLOTS.footerActions} slot={PANEL_SLOTS.footerActions} />
             <slot name={SLOTS.footer} slot={PANEL_SLOTS.footer} />
             <slot />

diff --git a/packages/calcite-components/src/components/flow-item/resources.ts b/packages/calcite-components/src/components/flow-item/resources.ts
@@ -9,6 +9,7 @@ export const ICONS = {
 
 export const SLOTS = {
   actionBar: "action-bar",
+  contentBottom: "content-bottom",
   headerActionsStart: "header-actions-start",
   headerActionsEnd: "header-actions-end",
   headerMenuActions: "header-menu-actions",

diff --git a/packages/calcite-components/src/demos/flow.html b/packages/calcite-components/src/demos/flow.html
@@ -41,12 +41,18 @@
           <calcite-flow custom-item-selectors="custom-flow-item">
             <calcite-flow-item heading="flow-item-1">
               <img src="https://via.placeholder.com/250x250.png?text=calcite-flow-item" />
+              <div slot="content-bottom">Content bottom!</div>
+              <div slot="footer">Footer!</div>
             </calcite-flow-item>
             <custom-flow-item heading="custom-flow-item">
               <img src="https://via.placeholder.com/250x250.png?text=custom-flow-item" />
+              <div slot="content-bottom">Content bottom!</div>
+              <div slot="footer">Footer!</div>
             </custom-flow-item>
             <calcite-flow-item heading="flow-item-2">
               <img src="https://via.placeholder.com/250x250.png?text=calcite-panel" />
+              <div slot="content-bottom">Content bottom!</div>
+              <div slot="footer">Footer!</div>
             </calcite-flow-item>
           </calcite-flow>
           <script>