Research how to provide a better animations experience for Popover based components

[cwoolum]

Because we use the native popover API as the core of some of our components, there are limitations on how animations work. Standard animations placed on a popover based component won't work because the popover immediately disappears. There is specific documentation on how to use animations with popovers.

Work needs to be done to determine if this is the best approach or if we can find another workaround. The solution should also focus on providing a great DX so users don't struggle to implement.

[cwoolum]

Overview

Overall there doesn't seem to be a one size fits all approach that works for both animations or transitions. The concern here is that setting either a transition or animation on a popover (or its descendants) can lead to a UI that works in a supported browser but may actually break the experience in an older browser.

The hope was that this would be a graceful fallback but in each of the different scenarios, there is at least on broken state.

1. Popovers: Using onBeforeToggle

For popovers, the onBeforeToggle event provides a hook to apply animations before the popover opens or closes. This allows you to control the animation timeline, ensuring that the animation completes before any DOM changes occur.

This is the approach we use now.

Example:

export async function supportShowAnimation(popover: HTMLElement, isPolyfill: boolean) {
  popover.classList.add('popover-showing');
  popover.classList.remove('popover-closing');
  popover.dataset.open = '';
  popover.removeAttribute('data-closing');
  popover.removeAttribute('data-closed');
}

export function supportClosingAnimation(popover: HTMLElement) {
  popover.classList.remove('popover-showing');
  popover.classList.add('popover-closing');
  popover.dataset.closing = '';

  const { animationDuration, transitionDuration } = getComputedStyle(popover);

  const runAnimationEnd = () => {
    popover.classList.remove('popover-closing');
    popover.removeAttribute('data-closing');
    popover.dataset.closed = '';
  };

  const runTransitionEnd = () => {
    popover.classList.remove('popover-closing');
    popover.removeAttribute('data-closing');
    popover.dataset.closed = '';
  };

  if (animationDuration !== '0s') {
    popover.addEventListener('animationend', runAnimationEnd, { once: true });
  } else if (transitionDuration !== '0s') {
    popover.addEventListener('transitionend', runTransitionEnd, { once: true });
  } else {
    popover.classList.remove('popover-closing');
    popover.removeAttribute('data-closing');
    popover.dataset.closed = '';
  }
}

And the event handler

onBeforeToggle$={[
        $(async (e) => {
          console.log('toggling')
          if (!context.panelRef?.value) return;

          if (e.newState === 'open' && context.panelRef.value) {
            await supportShowAnimation(context.panelRef.value, isPolyfillSig.value);
          }
          if (e.newState === 'closed') {
            supportClosingAnimation(context.panelRef.value);
          }
        }),
        props.onBeforeToggle$,
      ]}

This approach works the best but requires some very specific configurations to ensure everything works correctly. For transitions, the approach is also not bulletproof and may lead to an unpleasant UI in some cases

Component	Event Name	Event Type	Popover Supported Browsers	Polyfilled Browsers	Comments
Popover	data-open	Transition	✅	✅
Popover	data-closing	Transition	❌	✅	In supported, transition flickers on close. Briefly re-opens and then immediately disappears again
Popover	data-closed	Transition	✅	❌	Doesn't ever close in polyfill browser
Tooltip	data-open	Transition	✅	✅
Tooltip	data-closing	Transition	❌	✅	In supported, transition flickers on close. Briefly re-opens and then immediately disappears again
Tooltip	data-closed	Transition	✅	❌	In polyfilled, transition never closes
Popover	data-open	Animation	✅	✅
Popover	data-closing	Animation	✅	✅
Popover	data-closed	Animation	❌	❌	Popover never closes in either
Tooltip	data-open	Animation	✅	✅
Tooltip	data-closing	Animation	✅	✅
Tooltip	data-closed	Animation	❌	❌	Neither tooltip ever closes

As you can see, there isn't a single approach here that works for all browsers for transitions. For animations, we can reliably use data-open and data-closing

2. Applying Styles to :popover-open

The :popover-open pseudoclass (not to be confused with the popover-open data attribute is the native way of styling the popover but isn't supported in polyfilled browsers.

Component	Event Name	Event Type	Popover Supported Browsers	Polyfilled Browsers	Comments
Popover	open	Transition	✅	❌	Popover never opens or closes with transition defined
Popover	closing	Transition	✅	❌	Popover never opens or closes with transition defined
Tooltip	open	Transition	✅	❌	Popover never opens or closes with transition defined
Tooltip	closing	Transition	✅	❌	Popover never opens or closes with transition defined
Popover	open	Animation	✅	❌	Popover opens in polyfilled but then immediately closes again.
Popover	closing	Animation	✅	❌	Popover opens in polyfilled but then immediately closes again. Supported browsers require special animation configuration to stay open on close.
Tooltip	open	Animation	✅	❌	Popover opens in polyfilled but then immediately closes again.
Tooltip	closing	Animation	✅	❌	Popover opens in polyfilled but then immediately closes again.

As you can see here, the popover experience and the experience of all descendants is completely broken for all polyfill browsers. Even if we were to use this because it is the semantic approach, this may cause confusion for developers because they would need to add css for the :popover-open pseudoclass for components descended from the popover. This forces the developer to understand an underlying implementation detail of the component implementation.

3. Trying to manually configure animations and transitions via code.

I had looked into this approach so that we could control how animations and transitions were configured or applied. The ides was that the user would configure these in their own way and we would process them in code and apply them in the respective format that works best for the browser environment.

The problem I ran into here is that you cannot read pseudo states CSS via javascript unless it is already activated. In that case, we wouldn't actually be able to grab the styles until the animation or transition was actually occurring. Furthermore, even if we could grab them, there is no provision to set pseudo styles from code.

That leaves this approach DOA

[maiieul]

So is there anything we can do and should do @cwoolum in your opinion?

[cwoolum]

Closed with #970