From a7ed2ea0198dde05c6b7b9c4c41388f328432460 Mon Sep 17 00:00:00 2001
From: Tyler Martin <tmartin@redhat.com>
Date: Mon, 17 Jun 2019 14:39:36 -0400
Subject: [PATCH] Fix collapse animation

---
 .../pfe-accordion/src/pfe-accordion-header.scss   | 15 +++++++++++++--
 .../pfe-accordion/src/pfe-accordion-panel.scss    |  9 +++++----
 elements/pfe-accordion/src/pfe-accordion.js       |  5 ++++-
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/elements/pfe-accordion/src/pfe-accordion-header.scss b/elements/pfe-accordion/src/pfe-accordion-header.scss
index ef75c977d2..8af2df1a6d 100644
--- a/elements/pfe-accordion/src/pfe-accordion-header.scss
+++ b/elements/pfe-accordion/src/pfe-accordion-header.scss
@@ -30,7 +30,7 @@ $LOCAL: accordion;
 :host(:first-child) {
   button {
     @include pfe-trigger-button-first($theme: light);
-  }  
+  }
 }
 
 
@@ -38,11 +38,16 @@ $LOCAL: accordion;
 :host(:last-of-type) {
   button[aria-expanded="false"] {
     @include pfe-trigger-button-last;
-  }  
+  }
 }
 
 :host(.animating) {
   transition: transform 0.3s #{pfe-var(animation-timing)};
+
+  button {
+    @include pfe-trigger-expanded;
+    @include pfe-trigger-color-expanded($theme: light, $component-name: accordion);
+  }
 }
 
 /// ===========================================================================
@@ -58,3 +63,9 @@ $LOCAL: accordion;
     }
   }
 }
+
+:host([on="dark"].animating){
+  button {
+    @include pfe-trigger-color-expanded($theme: dark, $component-name: accordion);
+  }
+}
diff --git a/elements/pfe-accordion/src/pfe-accordion-panel.scss b/elements/pfe-accordion/src/pfe-accordion-panel.scss
index 28363830c1..5279a25fb3 100644
--- a/elements/pfe-accordion/src/pfe-accordion-panel.scss
+++ b/elements/pfe-accordion/src/pfe-accordion-panel.scss
@@ -10,12 +10,14 @@ $LOCAL: accordion;
    @include pfe-accordion-panel;
 }
 
-:host([expanded]) {
+:host([expanded]),
+:host(.animating) {
    @include pfe-accordion-panel-expanded;
    @include pfe-accordion-panel-expanded-style;
 }
- 
-:host([on="dark"][expanded]) {
+
+:host([on="dark"][expanded]),
+:host([on="dark"].animating){
   @include pfe-theme($theme: "dark");
   @include pfe-accordion-panel-expanded-style($theme: dark);
 }
@@ -32,4 +34,3 @@ $LOCAL: accordion;
 :host(:last-of-type[expanded]) {
   margin-bottom: 0;
 }
-
diff --git a/elements/pfe-accordion/src/pfe-accordion.js b/elements/pfe-accordion/src/pfe-accordion.js
index 2ce96a305b..d3cf660d31 100644
--- a/elements/pfe-accordion/src/pfe-accordion.js
+++ b/elements/pfe-accordion/src/pfe-accordion.js
@@ -258,13 +258,14 @@ class PfeAccordion extends PFElement {
   }
 
   _animate(panel, start, end) {
+    const header = panel.previousElementSibling;
     panel.classList.add("animating");
+    header.classList.add("animating");
     panel.style.height = `${start}px`;
 
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
         panel.style.height = `${end}px`;
-        panel.classList.add("animating");
         panel.addEventListener("transitionend", this._transitionEndHandler);
       });
     });
@@ -306,6 +307,8 @@ class PfeAccordion extends PFElement {
   }
 
   _transitionEndHandler(evt) {
+    const header = evt.target.previousElementSibling;
+    header.classList.remove("animating");
     evt.target.style.height = "";
     evt.target.classList.remove("animating");
     evt.target.removeEventListener("transitionend", this._transitionEndHandler);