feat(panel, flow-item): add footer-start and footer-end slots (#9374

) **Related Issue:** #8981 ## Summary - Add `footer-start` and `footer-end` slots. - Provide horizontal gap setting within `footer-start` & `footer-end` slots according to scale. - Provide vertical gap setting within existing `footer` slot according to scale.
Esri · Jun 25, 2024 · 3def3ea · driskull · Jul 9, 2024 · 3def3ea
1 parent b8c2fff
commit 3def3ea
Show file tree

Hide file tree

Showing 10 changed files with 222 additions and 46 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
@@ -65,15 +65,17 @@ const contentHTML = html`
 `;
 
 const footerHTML = html`
-  <calcite-button slot="${SLOTS.footer}" width="half" appearance="outline">Naw.</calcite-button>
-  <calcite-button slot="${SLOTS.footer}" width="half">Yeah!</calcite-button>
+  <calcite-button slot="${SLOTS.footerStart}" width="half" appearance="outline">Naw.</calcite-button>
+  <calcite-button slot="${SLOTS.footerEnd}" width="half">Yeah!</calcite-button>
 `;
 
 const flowItemContent = `${headerHTML}
   <calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsStart}" icon="bluetooth"></calcite-action>
   <calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsEnd}" icon="attachment"></calcite-action>
   ${contentHTML}
-  ${footerHTML}`;
+  <calcite-button slot="${SLOTS.footer}" width="half" appearance="outline">Naw.</calcite-button>
+  <calcite-button slot="${SLOTS.footer}" width="half">Yeah!</calcite-button>
+  `;
 
 export const simple = (args: FlowItemStoryArgs): string => html`
   <calcite-flow-item
@@ -91,7 +93,8 @@ export const simple = (args: FlowItemStoryArgs): string => html`
     <calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsEnd}" icon="attachment"></calcite-action>
     ${contentHTML}
     <calcite-fab slot="fab"></calcite-fab>
-    ${footerHTML}
+    <calcite-button slot="${SLOTS.footer}" width="half" appearance="outline">Naw.</calcite-button>
+    <calcite-button slot="${SLOTS.footer}" width="half">Yeah!</calcite-button>
   </calcite-flow-item>
 `;
 
@@ -218,13 +221,34 @@ export const withActionBarAndContentTop_TestOnly = (): string =>
     </calcite-flow-item>
   </div>`;
 
-export const footerPaddingAndContentBottom_TestOnly = (): string =>
+export const footerPaddingAndContentBottom = (): 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>`;
+
+export const footerStartEndAndContentBottom = (): string =>
+  html`<div style="width: 300px; height: 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>
+      ${footerHTML}
+    </calcite-flow-item>
+  </div>`;
+
+export const footerSlotPrecedence = (): 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>
+      ${footerHTML}
     </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
@@ -50,8 +50,10 @@ import { CSS, ICONS, SLOTS } from "./resources";
  * @slot header-content - A slot for adding custom content to the component's header.
  * @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.
  * @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.
- * @slot footer-actions - [Deprecated] Use the `"footer"` slot instead. A slot for adding `calcite-button`s to the component's footer.
  * @slot footer - A slot for adding custom content to the component's footer.
+ * @slot footer-actions - [Deprecated] Use the `"footer"` slot instead. A slot for adding `calcite-button`s to the component's footer.
+ * @slot footer-end - A slot for adding a trailing footer custom content.
+ * @slot footer-start - A slot for adding a leading footer custom content.
  */
 @Component({
   tag: "calcite-flow-item",
@@ -390,8 +392,11 @@ export class FlowItem
             <slot name={SLOTS.fab} slot={PANEL_SLOTS.fab} />
             <slot name={SLOTS.contentTop} slot={PANEL_SLOTS.contentTop} />
             <slot name={SLOTS.contentBottom} slot={PANEL_SLOTS.contentBottom} />
+            <slot name={SLOTS.footer} slot={PANEL_SLOTS.footer}>
+              <slot name={SLOTS.footerEnd} slot={PANEL_SLOTS.footerEnd} />
+              <slot name={SLOTS.footerStart} slot={PANEL_SLOTS.footerStart} />
+            </slot>
             <slot name={SLOTS.footerActions} slot={PANEL_SLOTS.footerActions} />
-            <slot name={SLOTS.footer} slot={PANEL_SLOTS.footer} />
             <slot />
           </calcite-panel>
         </InteractiveContainer>

diff --git a/packages/calcite-components/src/components/flow-item/resources.ts b/packages/calcite-components/src/components/flow-item/resources.ts
@@ -18,4 +18,6 @@ export const SLOTS = {
   fab: "fab",
   footer: "footer",
   footerActions: "footer-actions",
+  footerEnd: "footer-end",
+  footerStart: "footer-start",
 };
diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss
@@ -18,19 +18,25 @@
 
 @import "../../assets/styles/header";
 
-:host([scale="s"]) .content-top,
-.content-bottom {
-  padding: var(--calcite-spacing-sm);
+:host([scale="s"]) {
+  .content-top,
+  .content-bottom {
+    padding: var(--calcite-spacing-sm);
+  }
 }
 
-:host([scale="m"]) .content-top,
-.content-bottom {
-  padding: var(--calcite-spacing-md);
+:host([scale="m"]) {
+  .content-top,
+  .content-bottom {
+    padding: var(--calcite-spacing-md);
+  }
 }
 
-:host([scale="l"]) .content-top,
-.content-bottom {
-  padding: var(--calcite-spacing-xl);
+:host([scale="l"]) {
+  .content-top,
+  .content-bottom {
+    padding: var(--calcite-spacing-xl);
+  }
 }
 
 .content-top,
@@ -132,14 +138,25 @@
 }
 
 .footer {
-  @apply bg-foreground-1
-  flex
-  w-full
-  justify-evenly;
+  @apply flex mt-auto flex-row content-between justify-center items-center bg-foreground-1;
 
-  flex: 0 0 auto;
-  padding: var(--calcite-panel-footer-padding, theme("spacing.2"));
   border-block-start: 1px solid var(--calcite-color-border-3);
+  padding: var(--calcite-spacing-sm);
+  column-gap: 0;
+  row-gap: var(--calcite-spacing-md);
+}
+
+@include slotted("footer-start", "*") {
+  @apply flex text-n2-wrap self-center;
+
+  margin-inline-end: auto;
+  gap: var(--calcite-spacing-md);
+}
+
+@include slotted("footer-end", "*") {
+  @apply flex text-n2-wrap self-center;
+
+  gap: var(--calcite-spacing-md);
 }
 
 .fab-container {

diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/packages/calcite-components/src/components/panel/panel.stories.ts
@@ -65,8 +65,8 @@ const contentHTML = html`
 `;
 
 const footerHTML = html`
-  <calcite-button slot="${SLOTS.footer}" width="half" appearance="outline">Naw.</calcite-button>
-  <calcite-button slot="${SLOTS.footer}" width="half">Yeah!</calcite-button>
+  <calcite-button slot="${SLOTS.footerStart}" width="half" appearance="outline">Naw.</calcite-button>
+  <calcite-button slot="${SLOTS.footerEnd}" width="half">Yeah!</calcite-button>
 `;
 
 const panelContent = `${headerHTML}
@@ -380,7 +380,7 @@ export const withNoHeaderBorderBlockEnd_TestOnly = (): string =>
     >Slotted content!</calcite-panel
   >`;
 
-export const contentTopBottomSlot = (): string => html`
+export const footerAndContentTopBottomSlots = (): string => html`
   <div style="height: 350px; width: 400px; display: flex">
     <calcite-panel height-scale="s">
       <div slot="header-content">Header!</div>
@@ -399,3 +399,45 @@ export const contentTopBottomSlot = (): string => html`
     </calcite-panel>
   </div>
 `;
+
+export const footerStartAndEndSlots = (): string => html`
+  <calcite-panel style="height: 200px">
+    <div slot="header-content">header-content slot</div>
+    <p>Slotted content!</p>
+    <div slot="content-bottom">Slot for a content-bottom.</div>
+    <calcite-button
+      type="button"
+      slot="footer-start"
+      kind="neutral"
+      scale="s"
+      id="card-icon-test-1"
+      icon-start="check"
+    ></calcite-button>
+    <calcite-button
+      type="button"
+      slot="footer-end"
+      kind="neutral"
+      scale="s"
+      id="card-icon-test-1"
+      icon-start="check"
+    ></calcite-button>
+  </calcite-panel>
+`;
+
+export const footerSlotPrecedence = (): string => html`
+  <calcite-panel style="height: 200px">
+    <p>Slotted content!</p>
+    <div slot="header-content">header-content slot</div>
+    <div slot="content-bottom">Slot for a content-bottom.</div>
+    <calcite-button
+      type="button"
+      slot="footer"
+      kind="neutral"
+      scale="s"
+      id="card-icon-test-1"
+      icon-start="check"
+      width="full"
+    ></calcite-button>
+    ${footerHTML}
+  </calcite-panel>
+`;
diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx
@@ -56,8 +56,10 @@ import { CSS, ICONS, SLOTS } from "./resources";
  * @slot header-content - A slot for adding custom content to the header.
  * @slot header-menu-actions - A slot for adding an overflow menu with actions inside a `calcite-dropdown`.
  * @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.
- * @slot footer-actions - [Deprecated] Use the `"footer"` slot instead. A slot for adding `calcite-button`s to the component's footer.
- * @slot footer - A slot for adding custom content to the footer.
+ * @slot footer - A slot for adding custom content to the component's footer.
+ * @slot footer-actions - [Deprecated] Use the `footer-start` and `footer-end` slots instead. A slot for adding `calcite-button`s to the component's footer.
+ * @slot footer-end - A slot for adding a trailing footer custom content.
+ * @slot footer-start - A slot for adding a leading footer custom content.
  */
 @Component({
   tag: "calcite-panel",
@@ -214,11 +216,15 @@ export class Panel
 
   @State() hasContentTop = false;
 
-  @State() hasFooterContent = false;
+  @State() hasFab = false;
 
   @State() hasFooterActions = false;
 
-  @State() hasFab = false;
+  @State() hasFooterContent = false;
+
+  @State() hasFooterEndContent = false;
+
+  @State() hasFooterStartContent = false;
 
   @State() defaultMessages: PanelMessages;
 
@@ -323,16 +329,24 @@ export class Panel
     this.hasHeaderContent = slotChangeHasAssignedElement(event);
   };
 
-  handleFooterSlotChange = (event: Event): void => {
-    this.hasFooterContent = slotChangeHasAssignedElement(event);
+  handleFabSlotChange = (event: Event): void => {
+    this.hasFab = slotChangeHasAssignedElement(event);
   };
 
   handleFooterActionsSlotChange = (event: Event): void => {
     this.hasFooterActions = slotChangeHasAssignedElement(event);
   };
 
-  handleFabSlotChange = (event: Event): void => {
-    this.hasFab = slotChangeHasAssignedElement(event);
+  handleFooterEndSlotChange = (event: Event): void => {
+    this.hasFooterEndContent = slotChangeHasAssignedElement(event);
+  };
+
+  handleFooterStartSlotChange = (event: Event): void => {
+    this.hasFooterStartContent = slotChangeHasAssignedElement(event);
+  };
+
+  handleFooterSlotChange = (event: Event): void => {
+    this.hasFooterContent = slotChangeHasAssignedElement(event);
   };
 
   private contentBottomSlotChangeHandler = (event: Event): void => {
@@ -561,13 +575,17 @@ export class Panel
   }
 
   renderFooterNode(): VNode {
-    const { hasFooterContent, hasFooterActions } = this;
+    const { hasFooterEndContent, hasFooterStartContent, hasFooterContent, hasFooterActions } = this;
 
-    const showFooter = hasFooterContent || hasFooterActions;
+    const showFooter =
+      hasFooterStartContent || hasFooterEndContent || hasFooterContent || hasFooterActions;
 
     return (
       <footer class={CSS.footer} hidden={!showFooter}>
-        <slot key="footer-slot" name={SLOTS.footer} onSlotchange={this.handleFooterSlotChange} />
+        <slot name={SLOTS.footer} onSlotchange={this.handleFooterSlotChange}>
+          <slot name={SLOTS.footerStart} onSlotchange={this.handleFooterStartSlotChange} />
+          <slot name={SLOTS.footerEnd} onSlotchange={this.handleFooterEndSlotChange} />
+        </slot>
         <slot
           key="footer-actions-slot"
           name={SLOTS.footerActions}

diff --git a/packages/calcite-components/src/components/panel/resources.ts b/packages/calcite-components/src/components/panel/resources.ts
@@ -38,6 +38,8 @@ export const SLOTS = {
   headerContent: "header-content",
   fab: "fab",
   footer: "footer",
+  footerEnd: "footer-end",
+  footerStart: "footer-start",
   footerActions: "footer-actions",
 };
 

diff --git a/packages/calcite-components/src/demos/flow.html b/packages/calcite-components/src/demos/flow.html
@@ -55,7 +55,29 @@
               <div slot="content-top">Slot for a content-top.</div>
               <img width="250" height="250" src="./_assets/images/placeholder.svg" />
               <div slot="content-bottom">Content bottom!</div>
-              <div slot="footer">Footer!</div>
+              <calcite-button
+                type="button"
+                slot="footer-start"
+                kind="neutral"
+                scale="s"
+                id="card-icon-test-1"
+                icon-start="check"
+              ></calcite-button>
+              <div slot="footer-end">
+                <calcite-button type="button" scale="s" kind="neutral" id="card-icon-test-2" icon-start="stairs">
+                </calcite-button>
+                <calcite-button type="button" scale="s" kind="neutral" id="card-icon-test-3" icon-start="ellipsis">
+                </calcite-button>
+                <calcite-dropdown type="hover">
+                  <calcite-button id="card-icon-test-4" slot="trigger" scale="s" kind="neutral" icon-start="caret-down">
+                  </calcite-button>
+                  <calcite-dropdown-group selection-mode="none">
+                    <calcite-dropdown-item>View details</calcite-dropdown-item>
+                    <calcite-dropdown-item>Duplicate</calcite-dropdown-item>
+                    <calcite-dropdown-item>Delete</calcite-dropdown-item>
+                  </calcite-dropdown-group>
+                </calcite-dropdown>
+              </div>
             </calcite-flow-item>
           </calcite-flow>
           <script>