From 2111b3c6fb31996244bfc954f20352033dddfab2 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 28 May 2024 13:51:48 -0400
Subject: [PATCH] remove JS animations from details

---
 docs/docs/resources/changelog.md         |  2 +
 src/components/details/details.styles.ts | 15 ++++++++
 src/components/details/details.ts        | 48 ++++++++++++------------
 3 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md
index 54080d056..20142d77f 100644
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -23,6 +23,8 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
 - Added the `active` attribute to `<wa-tab-group>`
 - Added an easier way to close dialogs by applying `data-dialog="dismiss"` to any button in the dialog
 - Added an easier way to close drawers by applying `data-dialog="dismiss"` to any button in the drawer
+- Added the `--show-duration` and `--hide-duration` custom properties to `<wa-details>`
+- Added the `--show-duration` and `--hide-duration` custom properties to `<wa-popup>`
 - Changed the attribute for setting the base path declaratively to `data-webawesome` instead of `data-shoelace`; additionally, you can place it on any element now instead of just the associated `<script>` tag
 - `<wa-icon>` icons are no longer fixed width by default to accommodate variable width icons
 - Changed the `sl` prefix to `wa` for Web Awesome, including tags, events, etc.
diff --git a/src/components/details/details.styles.ts b/src/components/details/details.styles.ts
index f4d999431..678e795d8 100644
--- a/src/components/details/details.styles.ts
+++ b/src/components/details/details.styles.ts
@@ -9,6 +9,8 @@ export default css`
     --border-width: var(--wa-panel-border-width);
     --icon-color: var(--wa-color-text-quiet);
     --padding: var(--wa-space-m);
+    --show-duration: 250ms;
+    --hide-duration: 250ms;
 
     display: block;
   }
@@ -93,4 +95,17 @@ export default css`
     display: block;
     padding: var(--padding);
   }
+
+  .show {
+  }
+
+  .hide {
+  }
+
+  @keyframes show {
+    from {
+    }
+    to {
+    }
+  }
 `;
diff --git a/src/components/details/details.ts b/src/components/details/details.ts
index 5f13826bc..aeece0458 100644
--- a/src/components/details/details.ts
+++ b/src/components/details/details.ts
@@ -1,10 +1,9 @@
 import '../icon/icon.js';
-import { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../../internal/animate.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property, query } from 'lit/decorators.js';
-import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';
 import { html } from 'lit';
 import { LocalizeController } from '../../utilities/localize.js';
+import { parseDuration, stopAnimations } from '../../internal/animate.js';
 import { waitForEvent } from '../../internal/event.js';
 import { watch } from '../../internal/watch.js';
 import componentStyles from '../../styles/component.styles.js';
@@ -43,6 +42,8 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --border-width - The width of the details' borders. Expects a single value.
  * @cssproperty --icon-color - The color of the details' icon.
  * @cssproperty --padding - The padding with the details. Expects a single value.
+ * @cssproperty [--show-duration=250ms] - The show duration to use when applying built-in animation classes.
+ * @cssproperty [--hide-duration=250ms] - The hide duration to use when applying built-in animation classes.
  *
  * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
  * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
@@ -145,9 +146,18 @@ export default class WaDetails extends WebAwesomeElement {
       }
 
       await stopAnimations(this.body);
-
-      const { keyframes, options } = getAnimation(this, 'details.show', { dir: this.localize.dir() });
-      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+      const duration = parseDuration(getComputedStyle(this.body).getPropertyValue('--show-duration'));
+      // We can't animate to 'auto', so use the scroll height for now
+      await this.body.animate(
+        [
+          { height: '0', opacity: '0' },
+          { height: `${this.body.scrollHeight}px`, opacity: '1' }
+        ],
+        {
+          duration: duration,
+          easing: 'linear'
+        }
+      ).finished;
       this.body.style.height = 'auto';
 
       this.emit('wa-after-show');
@@ -161,9 +171,15 @@ export default class WaDetails extends WebAwesomeElement {
       }
 
       await stopAnimations(this.body);
-
-      const { keyframes, options } = getAnimation(this, 'details.hide', { dir: this.localize.dir() });
-      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+      const duration = parseDuration(getComputedStyle(this.body).getPropertyValue('--hide-duration'));
+      // We can't animate from 'auto', so use the scroll height for now
+      await this.body.animate(
+        [
+          { height: `${this.body.scrollHeight}px`, opacity: '1' },
+          { height: '0', opacity: '0' }
+        ],
+        { duration: duration, easing: 'linear' }
+      ).finished;
       this.body.style.height = 'auto';
 
       this.details.open = false;
@@ -236,22 +252,6 @@ export default class WaDetails extends WebAwesomeElement {
   }
 }
 
-setDefaultAnimation('details.show', {
-  keyframes: [
-    { height: '0', opacity: '0' },
-    { height: 'auto', opacity: '1' }
-  ],
-  options: { duration: 250, easing: 'linear' }
-});
-
-setDefaultAnimation('details.hide', {
-  keyframes: [
-    { height: 'auto', opacity: '1' },
-    { height: '0', opacity: '0' }
-  ],
-  options: { duration: 250, easing: 'linear' }
-});
-
 declare global {
   interface HTMLElementTagNameMap {
     'wa-details': WaDetails;