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
Esri · Aug 4, 2023 · db7eac7 · db7eac7
1 parent 3dd1e34
commit db7eac7
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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",