fix(panel): correct footer padding and layout (#9868)

**Related Issue:** #9858 #9857

## Summary

- fixes footer-end slot alignment when its the only thing slotted
- refactor styles
- makes footer slot take precedence over the other footer slots
(including deprecated footer-actions)
- add screenshot tests
- cleanup screenshot tests

packages/calcite-components/src/components/flow-item/flow-item.stories.ts

@@ -249,7 +249,7 @@ export const footerStartEndAndContentBottom = (): string =>
     </calcite-flow-item>
   </div>`;
 
-export const footerSlotCoexistence = (): string =>
+export const footerSlot = (): 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>

packages/calcite-components/src/components/panel/panel.scss

@@ -169,25 +169,30 @@
 }
 
 .footer {
-  @apply flex mt-auto flex-row content-between justify-center items-center bg-foreground-1;
-
+  @apply flex mt-auto flex-row content-between justify-center items-center bg-foreground-1 text-n2-wrap;
   border-block-start: 1px solid var(--calcite-color-border-3);
   padding: var(--calcite-panel-footer-padding, var(--calcite-internal-panel-default-padding));
-  column-gap: 0;
-  row-gap: var(--calcite-spacing-md);
 }
 
-@include slotted("footer-start", "*") {
-  @apply flex text-n2-wrap self-center;
+.footer-content {
+  @apply flex flex-row items-center justify-center flex-1;
+}
 
-  margin-inline-end: auto;
-  gap: var(--calcite-spacing-md);
+.footer-actions {
+  @apply flex flex-row items-center justify-evenly flex-1;
+  gap: var(--calcite-internal-panel-default-padding);
 }
 
-@include slotted("footer-end", "*") {
-  @apply flex text-n2-wrap self-center;
+.footer-start {
+  @apply flex flex-row items-center justify-start flex-1;
+  margin-inline-end: auto;
+  gap: var(--calcite-internal-panel-default-padding);
+}
 
-  gap: var(--calcite-spacing-md);
+.footer-end {
+  @apply flex flex-row items-center justify-end flex-1;
+  margin-inline-start: auto;
+  gap: var(--calcite-internal-panel-default-padding);
 }
 
 .fab-container {

packages/calcite-components/src/components/panel/panel.stories.ts

@@ -242,10 +242,97 @@ export const footerPadding_TestOnly = (): string =>
     <calcite-panel height-scale="s" style="--calcite-panel-footer-padding: 20px;">
       <div slot="header-content">Header!</div>
       <p>Slotted content!</p>
-      <div slot="footer">Footer!</div>
+      <calcite-button type="button" slot="footer">1</calcite-button>
+      <calcite-button type="button" slot="footer">2</calcite-button>
+      <calcite-button type="button" slot="footer-start">3</calcite-button>
+      <calcite-button type="button" slot="footer-start">4</calcite-button>
+      <calcite-button type="button" slot="footer-end">5</calcite-button>
+      <calcite-button type="button" slot="footer-end">6</calcite-button>
+      <calcite-button type="button" slot="footer-actions">7</calcite-button>
+      <calcite-button type="button" slot="footer-actions">8</calcite-button>
     </calcite-panel>
   </div>`;
 
+export const footerActions = (): string =>
+  html`<h2>footer-actions (Deprecated): Auto width</h2>
+    <div style="width: 300px;">
+      <calcite-panel height-scale="s">
+        <div slot="header-content">Header!</div>
+        <p>Slotted content!</p>
+        <calcite-button type="button" slot="footer-actions">1</calcite-button>
+        <calcite-button type="button" slot="footer-actions">2</calcite-button>
+      </calcite-panel>
+    </div>
+    <h2>footer-actions (Deprecated): Full width</h2>
+    <div style="width: 300px;">
+      <calcite-panel height-scale="s">
+        <div slot="header-content">Header!</div>
+        <p>Slotted content!</p>
+        <calcite-button width="full" type="button" slot="footer-actions">1</calcite-button>
+        <calcite-button width="full" type="button" slot="footer-actions">2</calcite-button>
+      </calcite-panel>
+    </div>`;
+
+export const footerVariations = (): string =>
+  html`<h2>footer</h2>
+    <div style="width: 300px;">
+      <calcite-panel height-scale="s">
+        <div slot="header-content">Header!</div>
+        <p>Slotted content!</p>
+        <calcite-button width="full" type="button" slot="footer">1</calcite-button>
+        <calcite-button width="full" type="button" slot="footer">2</calcite-button>
+      </calcite-panel>
+    </div>
+    <h2>footer-start only</h2>
+    <div style="width: 300px;">
+      <calcite-panel height-scale="s">
+        <div slot="header-content">Header!</div>
+        <p>Slotted content!</p>
+        <calcite-button type="button" slot="footer-start">1</calcite-button>
+        <calcite-button type="button" slot="footer-start">2</calcite-button>
+      </calcite-panel>
+    </div>
+    <h2>footer-end only</h2>
+    <div style="width: 300px;">
+      <calcite-panel height-scale="s">
+        <div slot="header-content">Header!</div>
+        <p>Slotted content!</p>
+        <calcite-button type="button" slot="footer-end">1</calcite-button>
+        <calcite-button type="button" slot="footer-end">2</calcite-button>
+      </calcite-panel>
+    </div>
+    <h2>footer-start and footer-end auto width</h2>
+    <div style="width: 300px;">
+      <calcite-panel height-scale="s">
+        <div slot="header-content">Header!</div>
+        <p>Slotted content!</p>
+        <calcite-button type="button" slot="footer-start">1</calcite-button>
+        <calcite-button type="button" slot="footer-start">2</calcite-button>
+        <calcite-button type="button" slot="footer-end">3</calcite-button>
+        <calcite-button type="button" slot="footer-end">4</calcite-button>
+      </calcite-panel>
+    </div>
+    <h2>footer-start and footer-end full width single</h2>
+    <div style="width: 300px;">
+      <calcite-panel height-scale="s">
+        <div slot="header-content">Header!</div>
+        <p>Slotted content!</p>
+        <calcite-button width="full" type="button" slot="footer-start">1</calcite-button>
+        <calcite-button width="full" type="button" slot="footer-end">2</calcite-button>
+      </calcite-panel>
+    </div>
+    <h2>footer-start and footer-end full width multiple</h2>
+    <div style="width: 300px;">
+      <calcite-panel height-scale="s">
+        <div slot="header-content">Header!</div>
+        <p>Slotted content!</p>
+        <calcite-button width="full" type="button" slot="footer-start">1</calcite-button>
+        <calcite-button width="full" type="button" slot="footer-start">2</calcite-button>
+        <calcite-button width="full" type="button" slot="footer-end">3</calcite-button>
+        <calcite-button width="full" type="button" slot="footer-end">4</calcite-button>
+      </calcite-panel>
+    </div>`;
+
 export const actionBarBackgroundColor_TestOnly = (): string =>
   html`<calcite-panel height-scale="s" style="width: 300px;">
     <calcite-action-bar slot="action-bar" expand-disabled>

packages/calcite-components/src/components/panel/panel.tsx

@@ -620,14 +620,22 @@ export class Panel
 
     return (
       <footer class={CSS.footer} hidden={!showFooter}>
-        <slot name={SLOTS.footerStart} onSlotchange={this.handleFooterStartSlotChange} />
-        <slot name={SLOTS.footer} onSlotchange={this.handleFooterSlotChange} />
-        <slot name={SLOTS.footerEnd} onSlotchange={this.handleFooterEndSlotChange} />
-        <slot
-          key="footer-actions-slot"
-          name={SLOTS.footerActions}
-          onSlotchange={this.handleFooterActionsSlotChange}
-        />
+        <div class={CSS.footerContent} hidden={!hasFooterContent}>
+          <slot name={SLOTS.footer} onSlotchange={this.handleFooterSlotChange} />
+        </div>
+        <div class={CSS.footerStart} hidden={hasFooterContent || !hasFooterStartContent}>
+          <slot name={SLOTS.footerStart} onSlotchange={this.handleFooterStartSlotChange} />
+        </div>
+        <div class={CSS.footerEnd} hidden={hasFooterContent || !hasFooterEndContent}>
+          <slot name={SLOTS.footerEnd} onSlotchange={this.handleFooterEndSlotChange} />
+        </div>
+        <div class={CSS.footerActions} hidden={hasFooterContent || !hasFooterActions}>
+          <slot
+            key="footer-actions-slot"
+            name={SLOTS.footerActions}
+            onSlotchange={this.handleFooterActionsSlotChange}
+          />
+        </div>
       </footer>
     );
   }

packages/calcite-components/src/components/panel/resources.ts

@@ -17,6 +17,10 @@ export const CSS = {
   contentWrapper: "content-wrapper",
   fabContainer: "fab-container",
   footer: "footer",
+  footerContent: "footer-content",
+  footerActions: "footer-actions",
+  footerStart: "footer-start",
+  footerEnd: "footer-end",
 };
 
 export const ICONS = {

packages/calcite-components/src/demos/panel.html

@@ -178,10 +178,23 @@
                 icon-start="check"
                 width="full"
               ></calcite-button>
+              <calcite-button
+                type="button"
+                slot="footer"
+                kind="neutral"
+                scale="s"
+                id="card-icon-test-1"
+                icon-start="check"
+                width="full"
+              ></calcite-button>
+              <calcite-button type="button" slot="footer-start"></calcite-button>
               <calcite-button type="button" slot="footer-start"></calcite-button>
               <div slot="footer-end">
                 <calcite-button type="button" slot="footer-end"></calcite-button>
               </div>
+              <div slot="footer-end">
+                <calcite-button type="button" slot="footer-end"></calcite-button>
+              </div>
             </calcite-panel>
           </div>
         </div>