Merge pull request #693 from maiieul/fix-headless-popover-styles

docs(headless popover): fix examples styles to make them easier to understand

Author: thejackshelton

.changeset/warm-pans-drum.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/styled': patch
+---
+
+refactor change CardTitle font-weight to medium

apps/website/src/components/info-popup/info-popup.tsx

@@ -17,11 +17,11 @@ export const InfoPopup = component$((props: InfoProps) => {
     opacity: 0;
   }
   
-  .popover-showing {
+  .fade-info.popover-showing {
     opacity: 1;
   }
   
-  .popover-closing {
+  .fade-info.popover-closing {
     opacity: 0;
   }  
   `);

apps/website/src/components/navigation-docs/navigation-docs.tsx

@@ -66,7 +66,7 @@ export const DocsNavigation = component$(
                             (location.url.pathname?.startsWith('/docs/styled/') &&
                               link.name === 'Styled')
                             ? 'bg-accent font-bold text-accent-foreground'
-                            : '',
+                            : 'font-normal',
                         )}
                         href={link.href}
                       >

apps/website/src/routes/docs/headless/popover/examples/animation.css

@@ -0,0 +1,14 @@
+import { component$ } from '@builder.io/qwik';
+import { Popover, PopoverTrigger } from '@qwik-ui/headless';
+export default component$(() => {
+  return (
+    <>
+      <PopoverTrigger popovertarget="animation-id" class="popover-trigger">
+        Popover Trigger
+      </PopoverTrigger>
+      <Popover id="animation-id" class="popover popover-animation">
+        I'm a popover!
+      </Popover>
+    </>
+  );
+});

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

@@ -1,29 +1,19 @@
 import { component$ } from '@builder.io/qwik';
 import { Popover, PopoverTrigger } from '@qwik-ui/headless';
-
 export default component$(() => {
-  const myPopovers = [
-    { id: 'auto-1', content: 'Popover 1' },
-    { id: 'auto-2', content: 'Popover 2' },
-  ];
-
   return (
     <>
-      {myPopovers.map((popover, index) => (
+      {[0, 1].map((i) => (
         <>
-          <PopoverTrigger
-            popovertarget={popover.id}
-            class="mb-4 rounded-base border-2 border-slate-300 bg-slate-800 px-3 py-1 text-white"
-          >
-            Popover Trigger {index + 1}
+          <PopoverTrigger popovertarget={`auto-${i}`} class="popover-trigger">
+            Popover Trigger {i + 1}
           </PopoverTrigger>
-
           <Popover
-            id={popover.id}
-            class="py- rounded-base border-2 border-slate-300 bg-slate-800 px-3 py-1 shadow-md"
-            style={{ top: `${index * 20}px` }}
+            style={{ top: i === 1 ? '25px' : '0' }}
+            id={`auto-${i}`}
+            class="popover"
           >
-            {popover.content}
+            Popover {i + 1}
           </Popover>
         </>
       ))}

apps/website/src/routes/docs/headless/popover/examples/auto-placement.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="popover-container">
+        <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"
+      >
+        I am anchored to the trigger!
+      </Popover>
+    </>
   );
 });