fix(accordion): work with normalize css

Fixes #1914

Author: bennypowers

.changeset/eight-spiders-brake.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/pfe-accordion": patch
+---
+
+Fix #1914: `<pfe-accordion>` on a page with CSS normalize

.changeset/three-owls-add.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/pfe-sass": major
+---
+
+Removed `pfe-collapsible` mixin. See `pfe-accordion-panel.scss` for implementation.

core/pfe-sass/mixins/_containers.scss

@@ -30,20 +30,6 @@
   }
 }
 
-@mixin pfe-collapsible($state: closed) {
-  @if $state != closed {
-    display: block;
-    position: relative;
-    opacity: 1;
-  } @else {
-    display: none;
-    overflow: hidden;
-    will-change: height;
-    border-color: transparent;
-    opacity: 0;
-  }
-}
-
 /// Accent bar styles
 @mixin accent-bar(
   $direction: horizontal,

elements/pfe-accordion/demo/pfe-accordion.html

@@ -1,4 +1,4 @@
-<link href="/elements/pfe-accordion/demo/demo.css" rel="stylesheet">
+<link rel="stylesheet" href="/elements/pfe-accordion/demo/demo.css">
 
 <pfe-band id="context-band" class="contextual" color="lightest" use-grid full-width aside-height="full" aside-mobile="top">
   <pfe-jump-links-nav slot="aside" autobuild id="context" style="position: sticky; top: 0;">

elements/pfe-accordion/pfe-accordion-panel.scss

@@ -16,8 +16,12 @@
 
 :host {
   @include pfe-box-sizing;
-  @include pfe-collapsible($state: closed);
-
+  display: none;
+  overflow: hidden;
+  will-change: height;
+  border-color: transparent;
+  opacity: 0;
+    
   // relative prevents the left border overflow
   position: relative;
   box-sizing: border-box;
@@ -108,11 +112,17 @@
   opacity: 1;
 }
 
+:host(.animating[hidden]),
 :host([expanded]:not(.animating)) {
-  overflow: visible;
   margin-bottom: 0;
   border-bottom-width: pfe-local(BorderWidth);
-  @include pfe-collapsible($state: open);
+  display: block !important;
+  position: relative;
+  opacity: 1;
+}
+
+:host([expanded]:not(.animating)) {
+  overflow: visible;
 }
 
 @include pfe-accordion--expanded();

elements/pfe-accordion/pfe-accordion-panel.ts

@@ -1,7 +1,7 @@
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { observed, pfelement } from '@patternfly/pfe-core/decorators.js';
+import { pfelement } from '@patternfly/pfe-core/decorators.js';
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 
 import { PfeCollapsePanel } from '@patternfly/pfe-collapse/pfe-collapse-panel.js';
@@ -26,7 +26,6 @@ export class PfeAccordionPanel extends LitElement {
   /** Disclosure */
   @property({ type: String, reflect: true }) disclosure?: 'true'|'false';
 
-  @observed
   @property({ type: Boolean, reflect: true }) expanded = false;
 
   @property({ attribute: 'aria-labelledby', reflect: true }) ariaLabelledby?: string;
@@ -46,10 +45,6 @@ export class PfeAccordionPanel extends LitElement {
       </div>
     `;
   }
-
-  protected _expandedChanged() {
-    this.hidden = !this.expanded;
-  }
 }
 
 declare global {

elements/pfe-accordion/pfe-accordion.ts

@@ -42,6 +42,8 @@ export class AccordionCollapseEvent extends ComposedEvent {
   }
 }
 
+const CSS_TIMING_UNITS_RE = /(?<value>[0-9.]+)(?<unit>[a-zA-Z]+)/g;
+
 /**
  * Accordions toggle the visibility of sections of content.
  * They feature panels that consist of a section text label and a caret icon that collapses or expands to reveal more information.
@@ -214,6 +216,10 @@ export class PfeAccordion extends LitElement {
 
   private logger = new Logger(this);
 
+  private styles = getComputedStyle(this);
+
+  private transitionDuration = this.getAnimationDuration();
+
   connectedCallback() {
     super.connectedCallback();
     this.addEventListener('change', this._changeHandler as EventListener);
@@ -286,6 +292,7 @@ export class PfeAccordion extends LitElement {
     }
 
     panel.expanded = true;
+    panel.hidden = false;
 
     await panel.updateComplete;
 
@@ -318,29 +325,49 @@ export class PfeAccordion extends LitElement {
     const rect = panel.getBoundingClientRect();
 
     panel.expanded = false;
+    panel.hidden = true;
 
     this._animate(panel, rect.height, 0);
   }
 
+  private getAnimationDuration() {
+    if ('computedStyleMap' in this) {
+      // @ts-expect-error: https://caniuse.com/?search=computedStyleMap
+      return this.computedStyleMap().get('transition-duration')?.to('ms').value;
+    } else {
+      const { transitionDuration } = this.styles;
+      const groups = CSS_TIMING_UNITS_RE.exec(transitionDuration)?.groups;
+      if (!groups) {
+        return null;
+      }
+      const factor = groups.unit === 's' ? 1000 : 1;
+      return parseFloat(groups.value) * factor;
+    }
+  }
+
   private async _animate(panel: PfeAccordionPanel, start: number, end: number) {
     if (panel) {
       const header = panel.previousElementSibling;
-      if (header) {
-        header.classList.add('animating');
+
+      const transitionDuration = this.getAnimationDuration();
+      if (transitionDuration) {
+        this.transitionDuration = transitionDuration;
       }
 
+      const duration = this.transitionDuration;
+
+      header?.classList.add('animating');
       panel.classList.add('animating');
-      panel.style.height = `${start}px`;
 
-      // panel.animate({ height: [`${start}px`, `${end}px`] }).play();
+      const animation = panel.animate({ height: [`${start}px`, `${end}px`] }, { duration });
+      animation.play();
+      await animation.finished;
+
+      header?.classList.remove('animating');
+      panel.classList.remove('animating');
 
-      // TODO: use Element#animate
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          panel.style.height = `${end}px`;
-          panel.addEventListener('transitionend', this._transitionEndHandler, { once: true });
-        });
-      });
+      panel.style.removeProperty('height');
+      panel.hidden = !panel.expanded;
     }
   }
 
@@ -380,16 +407,6 @@ export class PfeAccordion extends LitElement {
     newHeader?.focus?.();
   }
 
-  @bound private _transitionEndHandler(evt: TransitionEvent) {
-    const panel = evt.target as PfeAccordionPanel;
-    const header = panel.previousElementSibling;
-    if (header) {
-      header.classList.remove('animating');
-    }
-    panel.style.removeProperty('height');
-    panel.classList.remove('animating');
-  }
-
   private _allHeaders(): PfeAccordionHeader[] {
     return Array.from(this.children).filter(PfeAccordion.isHeader);
   }
@@ -532,6 +549,7 @@ export class PfeAccordion extends LitElement {
       if (panel) {
         header.setAttribute('aria-controls', panel.id);
         panel.setAttribute('aria-labelledby', header.id);
+        panel.hidden = !panel.expanded;
       }
     });