fix: z-index in accordion header renders above content (#20587)

* Change files * Fixes z-index in headers above content region * Shared style for position.
microsoft · Dec 10, 2021 · 89deee5 · 89deee5
1 parent 3360b45
commit 89deee5
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/change/@fluentui-web-components-a1c94fbf-4e30-466f-9571-a52139ba452d.json b/change/@fluentui-web-components-a1c94fbf-4e30-466f-9571-a52139ba452d.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: z-index in accordion header renders above content",
+  "packageName": "@fluentui/web-components",
+  "email": "robarb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts b/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts
@@ -80,7 +80,6 @@ export const accordionItemStyles: (
       position: relative;
       grid-template-columns: auto 1fr auto auto;
       align-items: center;
-      z-index: 2;
     }
 
     .button {
@@ -105,7 +104,6 @@ export const accordionItemStyles: (
       left: 0;
       right: 0;
       bottom: 0;
-      z-index: 1;
       cursor: pointer;
     }
 
@@ -133,7 +131,6 @@ export const accordionItemStyles: (
       align-items: center;
       justify-content: center;
       grid-column: 4;
-      z-index: 2;
       pointer-events: none;
       background: ${neutralFillStealthRestOnNeutralFillLayerRest};
       border-radius: calc(${controlCornerRadius} * 1px);
@@ -173,15 +170,19 @@ export const accordionItemStyles: (
       padding-inline-start: calc(${designUnit} * 2 * 1px);
       justify-content: center;
       grid-column: 1;
-      z-index: 2;
     }
 
     .end {
       display: flex;
       align-items: center;
       justify-content: center;
       grid-column: 3;
-      z-index: 2;
+    }
+
+    .icon,
+    .start,
+    .end {
+      position: relative;
     }
   `.withBehaviors(
     forcedColorsStylesheetBehavior(