From db7eac7488d08af69525058bd4d0f16acb44c99f Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Fri, 4 Aug 2023 08:53:16 -0700
Subject: [PATCH] fix(panel): Correct header and action-bar z-indexing display
 issues (#7440)

**Related Issue:** #7437

## Summary

- Places action-bar within the header so the z-index isn't an issue
anymore
- Adjust styles as necessary
- Adjust rendering as necessary
- Adds screenshot test
---
 .../src/components/panel/panel.scss           | 18 ++++++++-----
 .../src/components/panel/panel.stories.ts     | 19 ++++++++++++++
 .../src/components/panel/panel.tsx            | 26 ++++++++++++-------
 .../src/components/panel/resources.ts         |  2 ++
 4 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss
index e8958a2415d..02d164f02e3 100644
--- a/packages/calcite-components/src/components/panel/panel.scss
+++ b/packages/calcite-components/src/components/panel/panel.scss
@@ -29,17 +29,23 @@
 }
 
 .header {
-  @apply bg-foreground-1
-    w-full
-    items-stretch
-    justify-start
+  @apply bg-foreground-1 flex flex-col
     z-header;
+}
+
+.header-container {
+  @apply flex flex-row w-full
+  items-stretch
+  justify-start;
   flex: 0 0 auto;
 }
 
 .action-bar-container {
-  @apply w-full
-  z-header;
+  @apply w-full;
+}
+
+.top-separator {
+  border-block-start: 1px solid var(--calcite-ui-border-3);
 }
 
 .bottom-separator {
diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/packages/calcite-components/src/components/panel/panel.stories.ts
index 8d8913220d3..b043a0e3284 100644
--- a/packages/calcite-components/src/components/panel/panel.stories.ts
+++ b/packages/calcite-components/src/components/panel/panel.stories.ts
@@ -241,6 +241,25 @@ export const actionBarWithoutContent_TestOnly = (): string => html`<calcite-pane
   </calcite-action-bar>
 </calcite-panel>`;
 
+export const actionBarZIndex_TestOnly = (): string => html`<calcite-panel
+  style="width: 400px;"
+  height-scale="s"
+  menu-open
+>
+  <calcite-action text="banana" text-enabled icon="banana" slot="header-menu-actions"></calcite-action>
+  <calcite-action text="measure" text-enabled icon="measure" slot="header-menu-actions"></calcite-action>
+  <calcite-action-bar slot="action-bar">
+    <calcite-action-group>
+      <calcite-action text="Add" icon="plus"> </calcite-action>
+      <calcite-action text="Save" icon="save">
+        <calcite-tooltip open overlay-positioning="fixed" placement="top" slot="tooltip">test</calcite-tooltip>
+      </calcite-action>
+      <calcite-action text="Layers" icon="layers"> </calcite-action>
+    </calcite-action-group>
+  </calcite-action-bar>
+  <p>Some content</p></calcite-panel
+>`;
+
 export const footerAndActionBarWithoutContent_TestOnly = (): string => html`<calcite-panel
   height-scale="s"
   heading="Header!"
diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx
index 02f74aaaead..6946bc85522 100644
--- a/packages/calcite-components/src/components/panel/panel.tsx
+++ b/packages/calcite-components/src/components/panel/panel.tsx
@@ -195,6 +195,8 @@ export class Panel
 
   @State() effectiveLocale = "";
 
+  @State() showHeaderContent = false;
+
   @Watch("effectiveLocale")
   effectiveLocaleChange(): void {
     updateMessages(this, this.effectiveLocale);
@@ -364,7 +366,7 @@ export class Panel
   renderActionBar(): VNode {
     return (
       <div
-        class={{ [CSS.actionBarContainer]: true, [CSS.bottomSeparator]: this.hasDefaultContent }}
+        class={{ [CSS.actionBarContainer]: true, [CSS.topSeparator]: this.showHeaderContent }}
         hidden={!this.hasActionBar}
       >
         <slot name={SLOTS.actionBar} onSlotchange={this.handleActionBarSlotChange} />
@@ -473,23 +475,28 @@ export class Panel
 
     const headerContentNode = this.renderHeaderContent();
 
-    const showHeader =
+    const showHeaderContent =
       hasHeaderContent ||
-      headerContentNode ||
+      !!headerContentNode ||
       hasStartActions ||
       hasEndActions ||
       closable ||
       hasMenuItems;
 
+    this.showHeaderContent = showHeaderContent;
+
     return (
       <header
-        class={{ [CSS.header]: true, [CSS.bottomSeparator]: hasDefaultContent || hasActionBar }}
-        hidden={!showHeader}
+        class={{ [CSS.header]: true, [CSS.bottomSeparator]: hasDefaultContent }}
+        hidden={!(showHeaderContent || hasActionBar)}
       >
-        {this.renderHeaderStartActions()}
-        {this.renderHeaderSlottedContent()}
-        {headerContentNode}
-        {this.renderHeaderActionsEnd()}
+        <div class={CSS.headerContainer} hidden={!showHeaderContent}>
+          {this.renderHeaderStartActions()}
+          {this.renderHeaderSlottedContent()}
+          {headerContentNode}
+          {this.renderHeaderActionsEnd()}
+        </div>
+        {this.renderActionBar()}
       </header>
     );
   }
@@ -559,7 +566,6 @@ export class Panel
         ref={this.setContainerRef}
       >
         {this.renderHeaderNode()}
-        {this.renderActionBar()}
         {this.renderContent()}
         {this.renderFooterNode()}
       </article>
diff --git a/packages/calcite-components/src/components/panel/resources.ts b/packages/calcite-components/src/components/panel/resources.ts
index aae44f9ba0f..ce9347cd929 100644
--- a/packages/calcite-components/src/components/panel/resources.ts
+++ b/packages/calcite-components/src/components/panel/resources.ts
@@ -3,7 +3,9 @@ export const CSS = {
   backButton: "back-button",
   container: "container",
   header: "header",
+  headerContainer: "header-container",
   bottomSeparator: "bottom-separator",
+  topSeparator: "top-separator",
   heading: "heading",
   summary: "summary",
   description: "description",