fix(panel): Remove double border styling when content isn't provided (#7368)

**Related Issue:** #7423

## Summary

- Fixes display issue when no content is slotted within a panel but a
footer or action-bar is displayed then a double border occurs.
- Cleans up code to use `slotChangeHasAssignedElement` dom utility for
slot changes
- Fixes conditional element surrounding default slot.
- Adds screenshot tests

Author: driskull

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

@@ -29,9 +29,7 @@
 }
 
 .header {
-  border-block-end: 1px solid;
   @apply bg-foreground-1
-    border-b-color-3
     w-full
     items-stretch
     justify-start
@@ -40,9 +38,12 @@
 }
 
 .action-bar-container {
-  border-block-end: 1px solid;
   @apply w-full
-  z-header border-b-color-3;
+  z-header;
+}
+
+.bottom-separator {
+  border-block-end: 1px solid var(--calcite-ui-border-3);
 }
 
 .action-bar-container ::slotted(calcite-action-bar) {
@@ -92,11 +93,7 @@
 }
 
 .content-wrapper {
-  @apply overflow-auto;
-}
-
-.content-height {
-  @apply h-full;
+  @apply overflow-auto h-full;
 }
 
 .content-container {
@@ -109,15 +106,14 @@
 }
 
 .footer {
-  border-block-start: 1px solid;
   @apply bg-foreground-1
-  border-t-color-3
   flex
   w-full
   justify-evenly;
 
   flex: 0 0 auto;
   padding: var(--calcite-panel-footer-padding);
+  border-block-start: 1px solid var(--calcite-ui-border-3);
 }
 
 .fab-container {

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

@@ -218,3 +218,40 @@ export const actionBarBackgroundColor_TestOnly = (): string => html`<calcite-pan
   <p style="height: 400px">Hello world!</p>
   <p slot="footer">Slotted content!</p>
 </calcite-panel>`;
+
+export const footerWithoutContent_TestOnly = (): string => html`<calcite-panel
+  height-scale="s"
+  heading="Header!"
+  style="width: 300px; height:auto;"
+>
+  <p slot="footer">Footer content!</p>
+</calcite-panel>`;
+
+export const actionBarWithoutContent_TestOnly = (): string => html`<calcite-panel
+  height-scale="s"
+  heading="Header!"
+  style="width: 300px; height:auto;"
+>
+  <calcite-action-bar slot="action-bar">
+    <calcite-action-group>
+      <calcite-action text="Add" icon="plus"> </calcite-action>
+      <calcite-action text="Save" icon="save"> </calcite-action>
+      <calcite-action text="Layers" icon="layers"> </calcite-action>
+    </calcite-action-group>
+  </calcite-action-bar>
+</calcite-panel>`;
+
+export const footerAndActionBarWithoutContent_TestOnly = (): string => html`<calcite-panel
+  height-scale="s"
+  heading="Header!"
+  style="width: 300px; height:auto;"
+>
+  <calcite-action-bar slot="action-bar">
+    <calcite-action-group>
+      <calcite-action text="Add" icon="plus"> </calcite-action>
+      <calcite-action text="Save" icon="save"> </calcite-action>
+      <calcite-action text="Layers" icon="layers"> </calcite-action>
+    </calcite-action-group>
+  </calcite-action-bar>
+  <p slot="footer">Footer content!</p>
+</calcite-panel>`;

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

@@ -11,7 +11,12 @@ import {
   VNode,
   Watch,
 } from "@stencil/core";
-import { focusFirstTabbable, slotChangeGetAssignedElements, toAriaBoolean } from "../../utils/dom";
+import {
+  focusFirstTabbable,
+  slotChangeGetAssignedElements,
+  slotChangeHasAssignedElement,
+  toAriaBoolean,
+} from "../../utils/dom";
 import {
   connectInteractive,
   disconnectInteractive,
@@ -168,6 +173,8 @@ export class Panel
 
   resizeObserver = createObserver("resize", () => this.resizeHandler());
 
+  @State() hasDefaultContent = false;
+
   @State() hasStartActions = false;
 
   @State() hasEndActions = false;
@@ -257,28 +264,20 @@ export class Panel
     this.calcitePanelScroll.emit();
   };
 
-  handleHeaderActionsStartSlotChange = (event: Event): void => {
-    const elements = (event.target as HTMLSlotElement).assignedElements({
-      flatten: true,
-    });
+  handleDefaultSlotChange = (event: Event): void => {
+    this.hasDefaultContent = slotChangeHasAssignedElement(event);
+  };
 
-    this.hasStartActions = !!elements.length;
+  handleHeaderActionsStartSlotChange = (event: Event): void => {
+    this.hasStartActions = slotChangeHasAssignedElement(event);
   };
 
   handleHeaderActionsEndSlotChange = (event: Event): void => {
-    const elements = (event.target as HTMLSlotElement).assignedElements({
-      flatten: true,
-    });
-
-    this.hasEndActions = !!elements.length;
+    this.hasEndActions = slotChangeHasAssignedElement(event);
   };
 
   handleHeaderMenuActionsSlotChange = (event: Event): void => {
-    const elements = (event.target as HTMLSlotElement).assignedElements({
-      flatten: true,
-    });
-
-    this.hasMenuItems = !!elements.length;
+    this.hasMenuItems = slotChangeHasAssignedElement(event);
   };
 
   handleActionBarSlotChange = (event: Event): void => {
@@ -292,35 +291,19 @@ export class Panel
   };
 
   handleHeaderContentSlotChange = (event: Event): void => {
-    const elements = (event.target as HTMLSlotElement).assignedElements({
-      flatten: true,
-    });
-
-    this.hasHeaderContent = !!elements.length;
+    this.hasHeaderContent = slotChangeHasAssignedElement(event);
   };
 
   handleFooterSlotChange = (event: Event): void => {
-    const elements = (event.target as HTMLSlotElement).assignedElements({
-      flatten: true,
-    });
-
-    this.hasFooterContent = !!elements.length;
+    this.hasFooterContent = slotChangeHasAssignedElement(event);
   };
 
   handleFooterActionsSlotChange = (event: Event): void => {
-    const elements = (event.target as HTMLSlotElement).assignedElements({
-      flatten: true,
-    });
-
-    this.hasFooterActions = !!elements.length;
+    this.hasFooterActions = slotChangeHasAssignedElement(event);
   };
 
   handleFabSlotChange = (event: Event): void => {
-    const elements = (event.target as HTMLSlotElement).assignedElements({
-      flatten: true,
-    });
-
-    this.hasFab = !!elements.length;
+    this.hasFab = slotChangeHasAssignedElement(event);
   };
 
   // --------------------------------------------------------------------------
@@ -380,7 +363,10 @@ export class Panel
 
   renderActionBar(): VNode {
     return (
-      <div class={CSS.actionBarContainer} hidden={!this.hasActionBar}>
+      <div
+        class={{ [CSS.actionBarContainer]: true, [CSS.bottomSeparator]: this.hasDefaultContent }}
+        hidden={!this.hasActionBar}
+      >
         <slot name={SLOTS.actionBar} onSlotchange={this.handleActionBarSlotChange} />
       </div>
     );
@@ -475,7 +461,15 @@ export class Panel
   }
 
   renderHeaderNode(): VNode {
-    const { hasHeaderContent, hasStartActions, hasEndActions, closable, hasMenuItems } = this;
+    const {
+      hasHeaderContent,
+      hasStartActions,
+      hasEndActions,
+      closable,
+      hasMenuItems,
+      hasDefaultContent,
+      hasActionBar,
+    } = this;
 
     const headerContentNode = this.renderHeaderContent();
 
@@ -488,7 +482,10 @@ export class Panel
       hasMenuItems;
 
     return (
-      <header class={CSS.header} hidden={!showHeader}>
+      <header
+        class={{ [CSS.header]: true, [CSS.bottomSeparator]: hasDefaultContent || hasActionBar }}
+        hidden={!showHeader}
+      >
         {this.renderHeaderStartActions()}
         {this.renderHeaderSlottedContent()}
         {headerContentNode}
@@ -525,27 +522,16 @@ export class Panel
   };
 
   renderContent(): VNode {
-    const { hasFab } = this;
-
-    const defaultSlotNode: VNode = <slot key="default-slot" />;
-    const containerNode = hasFab ? (
-      <section class={CSS.contentContainer}>{defaultSlotNode}</section>
-    ) : (
-      defaultSlotNode
-    );
-
     return (
       <div
-        class={{
-          [CSS.contentWrapper]: true,
-          [CSS.contentContainer]: !hasFab,
-          [CSS.contentHeight]: hasFab,
-        }}
+        class={CSS.contentWrapper}
         onScroll={this.panelScrollHandler}
         // eslint-disable-next-line react/jsx-sort-props
         ref={this.setPanelScrollEl}
       >
-        {containerNode}
+        <section class={CSS.contentContainer}>
+          <slot onSlotchange={this.handleDefaultSlotChange} />
+        </section>
         {this.renderFab()}
       </div>
     );

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

@@ -3,6 +3,7 @@ export const CSS = {
   backButton: "back-button",
   container: "container",
   header: "header",
+  bottomSeparator: "bottom-separator",
   heading: "heading",
   summary: "summary",
   description: "description",
@@ -12,7 +13,6 @@ export const CSS = {
   headerActionsStart: "header-actions--start",
   contentWrapper: "content-wrapper",
   contentContainer: "content-container",
-  contentHeight: "content-height",
   fabContainer: "fab-container",
   footer: "footer",
 };