docs(popover-examples): simplify flip styles

Author: maiieul

apps/website/src/routes/docs/headless/popover/examples/flip.tsx

@@ -1,60 +1,35 @@
-import {
-  Combobox,
-  ComboboxControl,
-  ComboboxIcon,
-  ComboboxInput,
-  ComboboxListbox,
-  ComboboxOption,
-  ComboboxPopover,
-  ComboboxTrigger,
-  ResolvedOption,
-} from '@qwik-ui/headless';
-
-import { component$ } from '@builder.io/qwik';
+import { component$, useSignal } from '@builder.io/qwik';
+import { Popover, PopoverTrigger } from '@qwik-ui/headless';
 
 export default component$(() => {
-  type FlipExample = {
-    value: string;
-    label: string;
-  };
-
-  const flipExample: Array<FlipExample> = [
-    { value: '0', label: 'Up! ☝️' },
-    { value: '1', label: 'Up! ☝️' },
-    { value: '2', label: 'Down! 👇' },
-    { value: '3', label: 'Up! ☝️' },
-    { value: '4', label: 'Down! 👇' },
-    { value: '5', label: 'Down! 👇' },
-    { value: '6', label: 'Down! 👇' },
-    { value: '7', label: 'Up! ☝️' },
-  ];
+  const triggerRef = useSignal<HTMLButtonElement>();
+  const popoverRef = useSignal<HTMLElement>();
 
   return (
-    <div class="flex flex-col items-center">
-      <p class="text-center text-white">☝️ Scroll up and down with me open! 👇</p>
-      <Combobox class="w-fit" options={flipExample} optionDisabledKey="myDisabledKey">
-        <ComboboxControl class="relative mt-2 flex items-center rounded-base border-[1px] border-slate-400 bg-[#1f2532]">
-          <ComboboxInput class="px-d2 w-44 rounded-base bg-slate-900 px-2 pr-6 text-white placeholder:text-slate-500" />
-          <ComboboxTrigger class="group absolute right-0 h-6 w-6">
-            <ComboboxIcon class="stroke-white transition-transform duration-500 group-aria-expanded:-rotate-180" />
-          </ComboboxTrigger>
-        </ComboboxControl>
-        <ComboboxPopover flip={true} gutter={8}>
-          <ComboboxListbox
-            class="w-44 rounded-base border-[1px] border-slate-400 bg-slate-900 px-4 py-2"
-            optionRenderer$={(option: ResolvedOption, index: number) => (
-              <ComboboxOption
-                key={option.key}
-                class="group rounded-base border-2 border-transparent px-2 text-white hover:bg-slate-500  aria-disabled:text-slate-600 aria-disabled:hover:bg-slate-700 aria-selected:border-slate-200 aria-selected:bg-slate-500"
-                index={index}
-                resolved={option}
-              >
-                {option.label}
-              </ComboboxOption>
-            )}
-          />
-        </ComboboxPopover>
-      </Combobox>
-    </div>
+    <>
+      <div class="flex flex-col items-center justify-center gap-2">
+        <p>auto placed on scroll 📜</p>
+        <PopoverTrigger
+          ref={triggerRef}
+          popoverTargetAction="show"
+          popovertarget="popover-id"
+          class="popover-trigger"
+        >
+          Click me
+        </PopoverTrigger>
+      </div>
+
+      <Popover
+        ref={popoverRef}
+        anchorRef={triggerRef}
+        floating={true}
+        flip
+        gutter={4}
+        id="popover-id"
+        class="popover listbox !p-4"
+      >
+        I am anchored to the trigger!
+      </Popover>
+    </>
   );
 });

apps/website/src/routes/docs/headless/popover/examples/placement.tsx

@@ -10,7 +10,7 @@ export default component$(() => {
   return (
     <>
       <div class="flex flex-col items-center justify-center gap-2">
-        <p>I'm a mini tooltip!</p>
+        <p>popover on the right ⤵️</p>
         <PopoverTrigger
           ref={triggerRef}
           disableClickInitPopover