Merge pull request #778 from maiieul/popover-data-attributes

refactor(styled popover): to use data-open data-closing

Author: maiieul

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

@@ -104,7 +104,6 @@ export const HPopoverPanelImpl = component$((props: PropsOf<'div'>) => {
       {...props}
       id={panelId}
       ref={props.ref}
-      data-open={context.isOpenSig.value ? '' : undefined}
       popover={
         (context.manual && 'manual') || props.popover === 'manual'
           ? 'manual'

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

@@ -19,6 +19,7 @@ export async function supportShowAnimation(popover: HTMLElement, isPolyfill: boo
 
   popover.classList.add('popover-showing');
   popover.classList.remove('popover-closing');
+  popover.dataset.open = '';
   popover.removeAttribute('data-closing');
   popover.removeAttribute('data-closed');
 }

packages/kit-styled/src/components/popover/popover.tsx

@@ -1,4 +1,4 @@
-import { PropsOf, Slot, component$, useStyles$ } from '@builder.io/qwik';
+import { PropsOf, Slot, component$ } from '@builder.io/qwik';
 import { Popover as HeadlessPopover } from '@qwik-ui/headless';
 import { cn } from '@qwik-ui/utils';
 
@@ -13,26 +13,13 @@ const Root = component$<PropsOf<typeof HeadlessPopover.Root>>(({ ...props }) =>
 const Trigger = HeadlessPopover.Trigger;
 
 const Panel = component$<PropsOf<typeof HeadlessPopover.Panel>>(({ ...props }) => {
-  useStyles$(`
-    .my-transition {
-      transition: opacity 150ms, display 150ms, overlay 150ms;
-      transition-behavior: allow-discrete;
-    }
-  
-    .popover-showing {
-      opacity: 1;
-    }
-  
-    .popover-closing {
-      opacity: 0;
-    }
-    `);
-
   return (
     <HeadlessPopover.Panel
       {...props}
       class={cn(
-        'my-transition w-72 rounded-md border bg-popover p-4 text-popover-foreground opacity-0 shadow-md outline-none',
+        'my-transition w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
+        'data-[open]:animate-in data-[closing]:animate-out data-[closing]:fade-out data-[open]:fade-in data-[closing]:zoom-out-95 data-[open]:zoom-in-95',
+        'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         props.class,
       )}
     >