From 1bdc31a325395cc7aa31d38af304a4878cf70d94 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benny=20Powers=20-=20=D7=A2=D7=9D=20=D7=99=D7=A9=D7=A8?= =?UTF-8?q?=D7=90=D7=9C=20=D7=97=D7=99!?= Date: Wed, 18 Oct 2023 16:18:46 +0300 Subject: [PATCH] fix(accordion): remove animation (#2598) fixes #2597 --- .changeset/accordion-no-animate.md | 4 + docs/main.css | 3 +- elements/pf-accordion/BaseAccordion.css | 5 -- elements/pf-accordion/BaseAccordion.ts | 78 ++------------------ elements/pf-accordion/BaseAccordionPanel.css | 5 -- 5 files changed, 11 insertions(+), 84 deletions(-) create mode 100644 .changeset/accordion-no-animate.md delete mode 100644 elements/pf-accordion/BaseAccordion.css diff --git a/.changeset/accordion-no-animate.md b/.changeset/accordion-no-animate.md new file mode 100644 index 0000000000..b39b5a5efe --- /dev/null +++ b/.changeset/accordion-no-animate.md @@ -0,0 +1,4 @@ +--- +"@patternfly/elements": patch +--- +``: remove animations which are not present in PatternFly specs diff --git a/docs/main.css b/docs/main.css index 3f4e6f8870..146037683b 100644 --- a/docs/main.css +++ b/docs/main.css @@ -26,7 +26,8 @@ main.blog { opacity: 0; } -:defined { +/* exclude demos */ +[class^="layout-"] :defined { transition: opacity 0.2s ease; } diff --git a/elements/pf-accordion/BaseAccordion.css b/elements/pf-accordion/BaseAccordion.css deleted file mode 100644 index f682c39393..0000000000 --- a/elements/pf-accordion/BaseAccordion.css +++ /dev/null @@ -1,5 +0,0 @@ -:host { - transition-property: box-shadow, border; - transition-timing-function: ease-out; - transition-duration: 1ms; -} diff --git a/elements/pf-accordion/BaseAccordion.ts b/elements/pf-accordion/BaseAccordion.ts index c005a7407a..879e0a6def 100644 --- a/elements/pf-accordion/BaseAccordion.ts +++ b/elements/pf-accordion/BaseAccordion.ts @@ -11,10 +11,6 @@ import { BaseAccordionPanel } from './BaseAccordionPanel.js'; import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js'; -import style from './BaseAccordion.css'; - -const CSS_TIMING_UNITS_RE = /^[0-9.]+(?[a-zA-Z]+)/g; - export class AccordionExpandEvent extends ComposedEvent { constructor( public toggle: BaseAccordionHeader, @@ -34,7 +30,7 @@ export class AccordionCollapseEvent extends ComposedEvent { } export abstract class BaseAccordion extends LitElement { - static readonly styles = [style]; + static readonly styles = []; static isAccordion(target: EventTarget | null): target is BaseAccordion { return target instanceof BaseAccordion; @@ -104,10 +100,6 @@ export abstract class BaseAccordion extends LitElement { #logger = new Logger(this); - #styles = getComputedStyle(this); - - #transitionDuration = this.#getAnimationDuration(); - // actually is read in #init, by the `||=` operator #initialized = false; @@ -158,11 +150,11 @@ export abstract class BaseAccordion extends LitElement { this.#initialized ||= !!await this.updateComplete; this.#headerIndex.initItems(this.headers); // Event listener to the accordion header after the accordion has been initialized to add the roving tabindex - this.addEventListener('focusin', this.#updateActiveHeader as EventListener); + this.addEventListener('focusin', this.#updateActiveHeader); this.updateAccessibility(); } - #updateActiveHeader(event: FocusEvent) { + #updateActiveHeader() { if (this.#activeHeader) { this.#headerIndex.updateActiveItem(this.#activeHeader); } @@ -184,15 +176,9 @@ export abstract class BaseAccordion extends LitElement { header.expanded = true; } - async #expandPanel(panel: BaseAccordionPanel) { + #expandPanel(panel: BaseAccordionPanel) { panel.expanded = true; panel.hidden = false; - - await panel.updateComplete; - - const rect = panel.getBoundingClientRect(); - - this.#animate(panel, 0, rect.height); } async #collapseHeader(header: BaseAccordionHeader, index = this.#getIndex(header)) { @@ -210,66 +196,12 @@ export abstract class BaseAccordion extends LitElement { return; } - const rect = panel.getBoundingClientRect(); - panel.expanded = false; panel.hidden = true; - - this.#animate(panel, rect.height, 0); - await panel.updateComplete; - } - - #getAnimationDuration(): number { - 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 0; - } - - const parsed = parseFloat(transitionDuration); - - if (groups.unit === 's') { - return parsed * 1000; - } else { - return parsed; - } - } - } - - async #animate(panel: BaseAccordionPanel, start: number, end: number) { - if (panel) { - const header = panel.previousElementSibling; - - const transitionDuration = this.#getAnimationDuration(); - if (transitionDuration) { - this.#transitionDuration = transitionDuration; - } - - const duration = this.#transitionDuration ?? 0; - - header?.classList.add('animating'); - panel.classList.add('animating'); - - const animation = panel.animate({ height: [`${start}px`, `${end}px`] }, { duration }); - animation.play(); - await animation.finished; - - header?.classList.remove('animating'); - panel.classList.remove('animating'); - - panel.style.removeProperty('height'); - panel.hidden = !panel.expanded; - } } #onChange(event: AccordionHeaderChangeEvent) { - if (BaseAccordion.#isAccordionChangeEvent(event) && !this.classList.contains('animating')) { + if (BaseAccordion.#isAccordionChangeEvent(event)) { const index = this.#getIndex(event.target); if (event.expanded) { this.expand(index, event.accordion); diff --git a/elements/pf-accordion/BaseAccordionPanel.css b/elements/pf-accordion/BaseAccordionPanel.css index 59366acc32..da1f4f4f89 100644 --- a/elements/pf-accordion/BaseAccordionPanel.css +++ b/elements/pf-accordion/BaseAccordionPanel.css @@ -9,11 +9,6 @@ position: relative; } -:host(.animating) { - display: block; - transition: height 0.3s ease-in-out; -} - :host([fixed]) { overflow-y: auto; }