Merge pull request #771 from thejackshelton/popover-attributes

popover data attribute refactor

Author: thejackshelton

apps/website/src/routes/docs/headless/popover/index.mdx

@@ -143,7 +143,7 @@ Entry and exit animations have often been a frustrating experience in web develo
 
 Until recently, discrete properties were not animatable. Luckily, there's [new properties to CSS](https://developer.chrome.com/blog/entry-exit-animations) that solve this problem.
 
-The browser support for these is similar to support of the popover API. That said, the Qwik UI team has done an awesome job of managing animations on polyfill browsers for you using the `popover-showing` and `popover-closing` classes.
+The browser support for these is similar to support of the popover API. That said, the Qwik UI team has done an awesome job of managing animations on polyfill browsers for you using the `data-open` and `data-closing` attributes.
 
 ```css
 .my-transition {
@@ -159,11 +159,11 @@ The browser support for these is similar to support of the popover API. That sai
   opacity: 0;
 }
 
-.popover-showing {
+.my-transition[data-open] {
   opacity: 1;
 }
 
-.popover-closing {
+.my-transition[data-closing] {
   opacity: 0;
 }
 ```
@@ -333,9 +333,9 @@ We put it under an `@layer` so that it can be easily overridden when adding your
 
 To use an animation, add the following CSS classes to the component.
 
-- The `.popover-showing` class determines the animation that happens when it is first opened.
+- The `data-open` attribute determines the animation that happens when it is first opened.
 
-- The `.popover-closing` class determines what class is added when the listbox is **closed**.
+- The `data-closing` class determines what class is added when the listbox is **closed**.
 
 Here's the CSS imported from the example:
 
@@ -344,11 +344,11 @@ Here's the CSS imported from the example:
   transform: scale(0);
 }
 
-.popover-animation.popover-showing {
+.popover-animation[data-open] {
   animation: popover-grow 0.5s ease-in-out forwards;
 }
 
-.popover-animation.popover-closing {
+.popover-animation[data-closing] {
   animation: popover-shrink 0.4s ease-in-out forwards;
 }
 
@@ -377,7 +377,7 @@ Here's the CSS imported from the example:
 
 ### Transition declarations
 
-Transitions use the same classes for entry and exit animations. Those being `.popover-showing` and `.popover-closing`. They are explained more in the `Caveats` section.
+Transitions use the same classes for entry and exit animations. Those being `data-open` and `data-closing`. They are explained more in the `Caveats` section.
 
 <Showcase name="transition" />
 
@@ -395,11 +395,11 @@ CSS from the example:
   transition-behavior: allow-discrete;
 }
 
-.popover-transition.popover-showing {
+.popover-transition[data-open] {
   opacity: 1;
 }
 
-.popover-transition.popover-closing {
+.popover-transition[data-closing] {
   opacity: 0;
 }
 ```
@@ -461,19 +461,19 @@ To read more about the popover API you can check it out on:
       description: 'Style the element when the popover is open.',
     },
     {
-      name: '.popover-open',
-      type: 'class',
-      description: 'Polyfill class added to style unsupported browsers.',
+      name: 'data-closing',
+      type: 'selector',
+      description: 'Style the element when the popover is closing.',
     },
     {
-      name: '.popover-showing',
-      type: 'class',
-      description: 'Class to animate entry behavior.',
+      name: 'data-closed',
+      type: 'selector',
+      description: 'Style the element when the popover is closed.',
     },
     {
-      name: '.popover-closing',
+      name: 'data-closing',
       type: 'class',
-      description: 'Class to animate close behavior.',
+      description: 'Class to animate exit behavior.',
     },
   ]}
 />

apps/website/src/routes/docs/headless/popover/snippets/popover.css

@@ -39,23 +39,23 @@
   transition-behavior: allow-discrete;
 }
 
-.popover-transition.popover-showing {
+.popover-transition[data-open] {
   opacity: 1;
 }
 
-.popover-transition.popover-closing {
+.popover-transition[data-closing] {
   opacity: 0;
 }
 
 .popover-animation {
   transform: scale(0);
 }
 
-.popover-animation.popover-showing {
+.popover-animation[data-open] {
   animation: popover-grow 0.5s ease-in-out forwards;
 }
 
-.popover-animation.popover-closing {
+.popover-animation[data-closing] {
   animation: popover-shrink 0.4s ease-in-out forwards;
 }
 

packages/kit-headless/src/components/popover/popover-panel-impl.tsx

@@ -105,7 +105,6 @@ export const HPopoverPanelImpl = component$((props: PropsOf<'div'>) => {
       id={panelId}
       ref={props.ref}
       data-open={context.isOpenSig.value ? '' : undefined}
-      data-closed={!context.isOpenSig.value ? '' : undefined}
       popover={
         (context.manual && 'manual') || props.popover === 'manual'
           ? 'manual'
@@ -116,7 +115,7 @@ export const HPopoverPanelImpl = component$((props: PropsOf<'div'>) => {
           if (!context.panelRef?.value) return;
 
           if (e.newState === 'open' && context.panelRef.value) {
-            supportShowAnimation(context.panelRef.value, isPolyfillSig.value);
+            await supportShowAnimation(context.panelRef.value, isPolyfillSig.value);
           }
           if (e.newState === 'closed') {
             supportClosingAnimation(context.panelRef.value);

packages/kit-headless/src/components/popover/utils.ts

@@ -4,50 +4,46 @@
 /**
  * Adds CSS-Class to support popover-opening-animation
  */
-export function supportShowAnimation(popover: HTMLElement, isPolyfill: boolean) {
+export async function supportShowAnimation(popover: HTMLElement, isPolyfill: boolean) {
   const { transitionDuration } = getComputedStyle(popover);
 
-  if (isPolyfill) {
-    // polyfill needs a bit of extra time to execute
-    if (transitionDuration !== '0s') {
-      setTimeout(() => {
-        popover.classList.add('popover-showing');
-        popover.classList.remove('popover-closing');
-      }, 10);
-    } else {
-      popover.classList.add('popover-showing');
-      popover.classList.remove('popover-closing');
-    }
-  } else {
-    if (transitionDuration !== '0s') {
-      setTimeout(() => {
-        popover.classList.add('popover-showing');
-        popover.classList.remove('popover-closing');
-      }, 5);
-    } else {
-      popover.classList.add('popover-showing');
-      popover.classList.remove('popover-closing');
-    }
+  async function delay(ms: number): Promise<void> {
+    return new Promise((resolve) => setTimeout(resolve, ms));
   }
+
+  const delayTime = isPolyfill ? 10 : 5;
+
+  if (transitionDuration !== '0s') {
+    await delay(delayTime);
+  }
+
+  popover.classList.add('popover-showing');
+  popover.classList.remove('popover-closing');
+  popover.removeAttribute('data-closing');
+  popover.removeAttribute('data-closed');
 }
 
 /**
  * Listens for animation/transition events in order to
  * remove Animation-CSS-Classes after animation/transition ended.
- * export function supportClosingAnimation(popover: HTMLElement, afterAnimate: () => void) {
  */
 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') {
@@ -56,5 +52,7 @@ export function supportClosingAnimation(popover: HTMLElement) {
     popover.addEventListener('transitionend', runTransitionEnd, { once: true });
   } else {
     popover.classList.remove('popover-closing');
+    popover.removeAttribute('data-closing');
+    popover.dataset.closed = '';
   }
 }