feat(dropdown): adds arrow

Author: gabrielraposo-kunaico

apps/website/src/routes/docs/headless/dropdown/examples/hero.tsx

@@ -21,6 +21,7 @@ export default component$(() => {
     <Dropdown.Root data-testid="dropdown">
       <Dropdown.Trigger class="dropdown-trigger">Git Settings</Dropdown.Trigger>
       <Dropdown.Popover>
+        <Dropdown.Arrow class="dropdown-arrow" />
         <Dropdown.Content class="dropdown-content">
           <Dropdown.Group class="dropdown-group">
             <Dropdown.GroupLabel class="dropdown-group-label">

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

@@ -32,7 +32,7 @@
 .dropdown-content {
   min-width: var(--dropdown-width);
   border: 2px dotted black;
-  margin-top: 0.5rem;
+  margin-top: 1rem;
   flex-direction: column;
   display: flex;
   row-gap: 0.25rem;
@@ -72,3 +72,36 @@
   opacity: 0.6;
   background: hsl(var(--foreground) / 0.05);
 }
+
+.dropdown-arrow {
+  width: 100%;
+}
+
+.dropdown-arrow:after {
+  content: '';
+  position: absolute;
+  border-style: solid;
+  border-width: 0 10px 10px;
+  border-color: #ffffff transparent;
+  display: block;
+  top: 8px;
+  right: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 0;
+  z-index: 1;
+}
+
+.dropdown-arrow:before {
+  content: '';
+  position: absolute;
+  border-style: dotted;
+  border-width: 0 15px 15px;
+  border-color: #000 transparent;
+  display: block;
+  top: 8px;
+  right: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 0;
+}

packages/kit-headless/src/components/dropdown/dropdown-arrow.tsx

@@ -0,0 +1,11 @@
+import { PropsOf, Slot, component$ } from '@builder.io/qwik';
+
+import { HPopoverPanelArrow } from '../popover/popover-panel-arrow';
+
+export const HDropdownArrow = component$((props: PropsOf<'div'>) => {
+  return (
+    <HPopoverPanelArrow {...props}>
+      <Slot></Slot>
+    </HPopoverPanelArrow>
+  );
+});

packages/kit-headless/src/components/dropdown/index.ts

@@ -10,3 +10,4 @@ export { HDropdownRadioItem as RadioItem } from './dropdown-radio-item';
 export { HDropdownPopover as Popover } from './dropdown-popover';
 export { HDropdownGroup as Group } from './dropdown-group';
 export { HDropdownGroupLabel as GroupLabel } from './dropdown-group-label';
+export { HDropdownArrow as Arrow } from './dropdown-arrow';

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

@@ -1,19 +1,19 @@
-import { HPopoverPanelImpl } from './popover-panel-impl';
-
-import { component$, useTask$, Slot, PropsOf, useContext } from '@builder.io/qwik';
 import {
+  Placement,
   ReferenceElement,
-  autoUpdate,
-  computePosition,
-  offset as _offset,
+  arrow as _arrow,
   flip as _flip,
-  shift as _shift,
   hide as _hide,
-  arrow as _arrow,
-  Placement,
+  offset as _offset,
+  shift as _shift,
+  autoUpdate,
+  computePosition,
 } from '@floating-ui/dom';
-import { popoverContextId } from './popover-context';
+import { PropsOf, Slot, component$, useContext, useTask$ } from '@builder.io/qwik';
+
+import { HPopoverPanelImpl } from './popover-panel-impl';
 import { isServer } from '@builder.io/qwik/build';
+import { popoverContextId } from './popover-context';
 
 export const FloatingPopover = component$((props: PropsOf<'div'>) => {
   const context = useContext(popoverContextId);

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

@@ -1,4 +1,5 @@
 import { PropsOf, component$, useContext } from '@builder.io/qwik';
+
 import { popoverContextId } from './popover-context';
 
 export const HPopoverPanelArrow = component$((props: PropsOf<'div'>) => {