fix(panel): Fix heading border when only text content is slotted. #7489

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

@@ -313,3 +313,7 @@ export const noOverflowContentWithFab_TestOnly = (): string => html` <calcite-pa
   ><div>My Content</div>
   <calcite-fab slot="fab"></calcite-fab
 ></calcite-panel>`;
+
+export const withTextContentOnly = (): string => html`<calcite-panel height-scale="s" heading="Header!">
+  <div>Slotted content!</div>
+</calcite-panel>`;

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

@@ -15,6 +15,7 @@ import {
   focusFirstTabbable,
   slotChangeGetAssignedElements,
   slotChangeHasAssignedElement,
+  slotChangeHasTextContent,
   toAriaBoolean,
 } from "../../utils/dom";
 import {
@@ -267,7 +268,7 @@ export class Panel
   };
 
   handleDefaultSlotChange = (event: Event): void => {
-    this.hasDefaultContent = slotChangeHasAssignedElement(event);
+    this.hasDefaultContent = slotChangeHasAssignedElement(event) || slotChangeHasTextContent(event);
   };
 
   handleHeaderActionsStartSlotChange = (event: Event): void => {

packages/calcite-components/src/utils/dom.ts

@@ -426,6 +426,68 @@ export function toAriaBoolean(value: boolean): string {
   return Boolean(value).toString();
 }
 
+/**
+ * This helper returns a string of textContent if the target `slot` element from the `onSlotchange` event has any text content.
+ *
+ * ```
+ * <slot onSlotchange={(event) => this.mySlotText = slotChangeGetTextContent(event)} />}
+ * ```
+ *
+ * @param {Event} event The event.
+ * @returns {string} The slots text.
+ */
+export function slotChangeGetTextContent(event: Event): string {
+  return slotChangeGetAssignedNodes(event)
+    .filter((node) => node.nodeType === Node.TEXT_NODE)
+    .map((node) => node.textContent)
+    .join("")
+    .trim();
+}
+
+/**
+ * This helper returns `true` if the target `slot` element from the `onSlotchange` event has any text content.
+ *
+ * ```
+ * <slot onSlotchange={(event) => this.mySlotHasTextContent = slotChangeHasTextContent(event)} />}
+ * ```
+ *
+ * @param {Event} event The event.
+ * @returns {boolean} Whether the slot has any text content.
+ */
+export function slotChangeHasTextContent(event: Event): boolean {
+  return !!slotChangeGetTextContent(event);
+}
+
+/**
+ * This helper returns `true` if the target `slot` element from the `onSlotchange` event has an assigned node.
+ *
+ * ```
+ * <slot onSlotchange={(event) => this.mySlotHasNode = slotChangeHasAssignedNode(event)} />}
+ * ```
+ *
+ * @param {Event} event The event.
+ * @returns {boolean} Whether the slot has any assigned nodes.
+ */
+export function slotChangeHasAssignedNode(event: Event): boolean {
+  return !!slotChangeGetAssignedNodes(event).length;
+}
+
+/**
+ * This helper returns the assigned nodes on a `slot` element from the `onSlotchange` event.
+ *
+ * ```
+ * <slot onSlotchange={(event) => this.mySlotNodes = slotChangeGetAssignedNodes(event)} />}
+ * ```
+ *
+ * @param {Event} event The event.
+ * @returns {boolean} Whether the slot has any assigned nodes.
+ */
+export function slotChangeGetAssignedNodes(event: Event): Node[] {
+  return (event.target as HTMLSlotElement).assignedNodes({
+    flatten: true,
+  });
+}
+
 /**
  * This helper returns `true` if the target `slot` element from the `onSlotchange` event has an assigned element.
  *