feat(popover): add icon only popover variant, rounded style, disallowing children

Author: adaptive-shield-matrix

lib/interactive/popover/CorvuPopover.tsx

@@ -5,8 +5,8 @@ import { buttonCva2 } from "~ui/interactive/button/buttonCva"
 import type { ButtonIcon1Props } from "~ui/interactive/button/ButtonIcon1"
 import { buttonIconCva } from "~ui/interactive/button/buttonIconCva"
 import { classesButtonClickAnimation } from "~ui/interactive/button/classesButtonClickAnimation"
+import { classesPopoverContentMerge } from "~ui/interactive/popover/classesPopoverContent"
 import { Icon1 } from "~ui/static/icon/Icon1"
-import { classArr } from "~ui/utils/classArr"
 import type { MayHaveChildren } from "~ui/utils/MayHaveChildren"
 import type { MayHaveClass } from "~ui/utils/MayHaveClass"
 import type { MayHaveInnerClass } from "~ui/utils/MayHaveInnerClass"
@@ -42,20 +42,7 @@ export function CorvuPopover(p: CorvuPopoverProps) {
         )}
       </Popover.Trigger>
       <Popover.Portal>
-        <Popover.Content
-          class={classArr(
-            "z-50", // positioning
-            "px-3 py-3", // spacing
-            "rounded-lg", // border
-            "dark:border", // border
-            "bg-white dark:bg-black", // background
-            "shadow-md", // shadow
-            "data-open:animate-in data-open:fade-in-50% data-open:slide-in-from-top-1 data-closed:animate-out data-closed:fade-out-50% data-closed:slide-out-to-top-1", // animations
-            p.innerClass,
-          )}
-        >
-          {p.children}
-        </Popover.Content>
+        <Popover.Content class={classesPopoverContentMerge(p.innerClass)}>{p.children}</Popover.Content>
       </Popover.Portal>
     </Popover>
   )

lib/interactive/popover/CorvuPopoverIcon.tsx

@@ -0,0 +1,72 @@
+import Popover from "@corvu/popover"
+import { type Component, type ComponentProps, splitProps } from "solid-js"
+import { classesDisabledDirectly } from "~ui/classes/classesDisabledDirectly"
+import { buttonCvaIconOnly, type ButtonCvaProps } from "~ui/interactive/button/buttonCva"
+import { buttonIconCva } from "~ui/interactive/button/buttonIconCva"
+import { classesButtonClickAnimation } from "~ui/interactive/button/classesButtonClickAnimation"
+import { classesPopoverContentMerge } from "~ui/interactive/popover/classesPopoverContent"
+import { Icon0 } from "~ui/static/icon/Icon0"
+import type { MayHaveChildren } from "~ui/utils/MayHaveChildren"
+import type { MayHaveClass } from "~ui/utils/MayHaveClass"
+import type { MayHaveInnerClass } from "~ui/utils/MayHaveInnerClass"
+import { isLoading, type MayHaveIsLoading } from "~ui/utils/MayHaveIsLoading"
+
+export interface CorvuPopoverIconProps
+  extends ComponentProps<"button">,
+    ButtonCvaProps,
+    MayHaveClass,
+    MayHaveInnerClass,
+    MayHaveChildren,
+    MayHaveIsLoading {
+  title: string
+  icon: string
+  iconClass?: string
+}
+
+export const CorvuPopoverIcon: Component<CorvuPopoverIconProps> = (p) => {
+  const [s, rest] = splitProps(p, [
+    // button
+    "variant",
+    "size",
+    "class",
+    // state
+    "isLoading",
+    "disabled",
+    // icons
+    "title",
+    "icon",
+    "iconClass",
+    // popover
+    "innerClass",
+    "children",
+  ])
+
+  return (
+    <Popover
+      floatingOptions={{
+        offset: 8,
+        flip: true,
+        shift: true,
+      }}
+    >
+      <Popover.Trigger
+        class={buttonCvaIconOnly(s.variant, isLoading(p), s.disabled, classesButtonClickAnimation, s.class)}
+        title={s.title}
+        {...rest}
+      >
+        <Icon0
+          path={s.icon}
+          class={buttonIconCva(
+            s.variant,
+            isLoading(p) && "animate-spin-faster",
+            s.disabled && classesDisabledDirectly,
+            s.iconClass,
+          )}
+        />
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content class={classesPopoverContentMerge(s.innerClass)}>{s.children}</Popover.Content>
+      </Popover.Portal>
+    </Popover>
+  )
+}

lib/interactive/popover/classesPopoverContent.ts

@@ -0,0 +1,15 @@
+import { classMerge } from "~ui/utils/classMerge"
+
+export const classesPopoverContent = [
+  "z-50", // positioning
+  "px-3 py-3", // spacing
+  "rounded-lg", // border
+  "dark:border", // border
+  "bg-white dark:bg-black", // background
+  "shadow-md", // shadow
+  "data-open:animate-in data-open:fade-in-50% data-open:slide-in-from-top-1 data-closed:animate-out data-closed:fade-out-50% data-closed:slide-out-to-top-1", // animations
+]
+
+export function classesPopoverContentMerge(innerClass?: string) {
+  return classMerge(classesPopoverContent, innerClass)
+}

src/demos/interactive/DemoPopover.tsx

@@ -1,6 +1,7 @@
 import { mdiDotsVertical } from "@mdi/js"
 import { buttonVariant } from "~ui/interactive/button/buttonCva"
 import { CorvuPopover } from "~ui/interactive/popover/CorvuPopover"
+import { CorvuPopoverIcon } from "~ui/interactive/popover/CorvuPopoverIcon"
 import { classesGridCols3xl } from "~ui/static/container/classesGridCols"
 import { classArr } from "~ui/utils/classArr"
 import type { MayHaveClass } from "~ui/utils/MayHaveClass"
@@ -13,6 +14,7 @@ export function DemoPopover() {
         <BasicPopoverDemo title="Start" class="justify-start items-start" />
         <BasicPopoverDemo title="Center" class="justify-center items-center" />
         <BasicPopoverDemo title="End" class="justify-end items-end" />
+        <IconPopoverDemo title="Icon" class="justify-center items-center" />
       </div>
     </div>
   )
@@ -33,6 +35,17 @@ function BasicPopoverDemo(p: BasicPopoverDemo) {
   )
 }
 
+function IconPopoverDemo(p: BasicPopoverDemo) {
+  return (
+    <div class={classArr("flex flex-col", p.class)}>
+      <h2 class="text-2xl font-bold mb-4">{p.title + " Popover"}</h2>
+      <CorvuPopoverIcon icon={mdiDotsVertical} variant={buttonVariant.outline} title="Open popover">
+        <Content />
+      </CorvuPopoverIcon>
+    </div>
+  )
+}
+
 function Content() {
   return (
     <div class="p-4 min-w-48">