Merge branch 'main' into fix-headless-popover-styles

Author: maiieul

.changeset/tough-keys-rest.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': patch
+---
+
+refactor: popover listbox class deprecated and set as a default when in floating mode.

.github/workflows/cla.yml

@@ -23,6 +23,8 @@ jobs:
           # branch should not be protected
           branch: 'main'
           allowlist: dependabot-preview[bot],greenkeeper[bot],bot*
+          lock-pullrequest-aftermerge: false - # if you don't want this bot to automatically lock the pull request after merging (default - true)
+
 
           #below are the optional inputs - If the optional inputs are not given, then default values will be taken
           #remote-organization-name: enter the remote organization name where the signatures should be stored (Default is storing the signatures in the same repository)
@@ -32,5 +34,4 @@ jobs:
           #custom-notsigned-prcomment: 'pull request comment with Introductory message to ask new contributors to sign'
           #custom-pr-sign-comment: 'The signature to be committed in order to sign the CLA'
           #custom-allsigned-prcomment: 'pull request comment when all contributors has signed, defaults to **CLA Assistant Lite bot** All Contributors have signed the CLA.'
-          #lock-pullrequest-aftermerge: false - if you don't want this bot to automatically lock the pull request after merging (default - true)
           #use-dco-flag: true - If you are using DCO instead of CLA

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

@@ -313,7 +313,6 @@ For the following examples, we'll be using the Combobox component. `ComboboxPopo
   floating={true}
   // "stick" to the input
   anchorRef={context.inputRef}
-  class="listbox"
 >
   <Slot />
 </Popover>
@@ -366,43 +365,17 @@ If Tailwind is the framework of choice, then styles can be added using the [arbi
 
 > The arbitrary variant can be customized/abstracted even further by [adding a variant](https://tailwindcss.com/docs/plugins#adding-variants) as a plugin in the tailwind config.
 
-### Listbox preset
+### Floating preset
 
-By default, the popover API comes with built-in styles, including fixed behavior, margin, the list goes on.
+By default, the popover API comes with built-in user agent styles, including fixed behavior, margin, the list goes on.
 
-There are times when we want to override this behavior. An example being when we want an absolutely positioned listbox.
+There are times when we want to override this behavior. An example being when we want floating behavior.
 
-To do that, we can add the `listbox` class to the popover component.
+Qwik UI strips the following styles when in floating mode:
 
-If you need to override any of the listbox properties, use the following CSS variables:
+<CodeSnippet name="floating.css" />
 
-<AnatomyTable
-  firstColumnLabel="Property"
-  propDescriptors={[
-    {
-      name: 'margin',
-      description: '--listbox-margin',
-    },
-    {
-      name: 'padding',
-      description: '--listbox-padding',
-    },
-    {
-      name: 'border',
-      description: '--listbox-border',
-    },
-    {
-      name: 'overflow',
-      description: '--listbox-overflow',
-    },
-    {
-      name: 'position',
-      description: '--listbox-position',
-    },
-  ]}
-/>
-
-> Another option is to use the `!important` syntax to override any of the CSS variable values.
+We put it under an `@layer` so that it can be easily overridden when adding your own styles.
 
 ## Animations
 

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

@@ -0,0 +1,9 @@
+@layer qwik-ui {
+  [data-floating] {
+    margin: unset;
+    padding: unset;
+    border: unset;
+    overflow: unset;
+    position: absolute;
+  }
+}

packages/kit-headless/src/components/popover/popover.css

@@ -10,17 +10,13 @@
   display: block !important;
 }
 
-/* Popover Presets: TODO figure out specificity to make this easier for user to override */
-.listbox {
-  --listbox-margin: unset;
-  --listbox-padding: unset;
-  --listbox-border: unset;
-  --listbox-overflow: unset;
-  --listbox-position: absolute;
-
-  margin: var(--listbox-margin);
-  padding: var(--listbox-padding);
-  border: var(--listbox-border);
-  overflow: var(--listbox-overflow);
-  position: var(--listbox-position);
+/* Strips the user agent styles from the popover when in floating mode */
+@layer qwik-ui {
+  [data-floating] {
+    margin: unset;
+    padding: unset;
+    border: unset;
+    overflow: unset;
+    position: absolute;
+  }
 }

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

@@ -18,7 +18,7 @@ export const Popover = component$<PopoverProps>((props) => {
     }
 
     return (
-      <FloatingPopover ref={ref} anchorRef={anchorRef} {...rest}>
+      <FloatingPopover data-floating ref={ref} anchorRef={anchorRef} {...rest}>
         <Slot />
       </FloatingPopover>
     );