Center ComboBox check icon (#191)

spear-ai · Apr 23, 2024 · c718a88 · c718a88
1 parent bd5e424
commit c718a88
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 8 deletions.
diff --git a/.changeset/chilly-beans-itch.md b/.changeset/chilly-beans-itch.md
@@ -0,0 +1,5 @@
+---
+"@spear-ai/ui": patch
+---
+
+Fixed uncentered ComboBox checkmark.
diff --git a/.changeset/rotten-pens-notice.md b/.changeset/rotten-pens-notice.md
@@ -0,0 +1,5 @@
+---
+"@spear-ai/ui": patch
+---
+
+Added missing Select components.
diff --git a/packages/ui/src/components/combo-box/combo-box.tsx b/packages/ui/src/components/combo-box/combo-box.tsx
@@ -176,7 +176,7 @@ export const ComboBoxListBoxItemCheck = forwardRef<
   HTMLAttributes<HTMLSpanElement> & { className?: string | undefined }
 >(({ className, ...properties }, reference) => {
   const mergedClassName = cx(
-    "absolute end-1.5 top-2 inline-flex size-4 size-6 items-center justify-center p-1 opacity-0 group-selected/item:opacity-100",
+    "absolute end-1.5 top-1 inline-flex size-4 size-6 items-center justify-center p-1 opacity-0 group-selected/item:opacity-100",
     className,
   );
   return <span className={mergedClassName} {...properties} ref={reference} />;

diff --git a/packages/ui/src/components/select/select.stories.tsx b/packages/ui/src/components/select/select.stories.tsx
@@ -1,4 +1,3 @@
-import { CheckIcon } from "@radix-ui/react-icons";
 import { useControlledState } from "@react-stately/utils";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useId } from "react";
@@ -14,6 +13,9 @@ import {
   SelectLabel,
   SelectListBox,
   SelectListBoxItem,
+  SelectListBoxItemCheck,
+  SelectListBoxItemCheckIcon,
+  SelectListBoxItemLabel,
   SelectPopover,
   SelectValue,
 } from "./select";
@@ -114,10 +116,10 @@ const PreviewSelect = (properties: {
               </SelectDefaultListBoxItem>
               {sensorList.map((sensor) => (
                 <SelectListBoxItem id={sensor.id} key={sensor.id} textValue={sensor.name}>
-                  <span>{sensor.name}</span>
-                  <span className="absolute end-1.5 top-2 inline-flex size-4 items-center justify-center opacity-0 group-selected/item:opacity-100">
-                    <CheckIcon className="size-4" />
-                  </span>
+                  <SelectListBoxItemLabel>{sensor.name}</SelectListBoxItemLabel>
+                  <SelectListBoxItemCheck>
+                    <SelectListBoxItemCheckIcon />
+                  </SelectListBoxItemCheck>
                 </SelectListBoxItem>
               ))}
             </SelectListBox>

diff --git a/packages/ui/src/components/select/select.tsx b/packages/ui/src/components/select/select.tsx
@@ -1,6 +1,13 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import { CaretSortIcon } from "@radix-ui/react-icons";
-import React, { ComponentPropsWithoutRef, ElementRef, forwardRef, HTMLAttributes } from "react";
+import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons";
+import { Slot } from "@radix-ui/react-slot";
+import React, {
+  ComponentPropsWithoutRef,
+  ElementRef,
+  forwardRef,
+  HTMLAttributes,
+  SVGAttributes,
+} from "react";
 import {
   Button as ButtonPrimitive,
   FieldError as FieldErrorPrimitive,
@@ -150,3 +157,35 @@ export const SelectListBoxItem = forwardRef<
 });
 
 SelectListBoxItem.displayName = "SelectListBoxItem";
+
+export const SelectListBoxItemLabel = forwardRef<
+  HTMLSpanElement,
+  HTMLAttributes<HTMLSpanElement> & { className?: string | undefined }
+>((properties, reference) => <span {...properties} ref={reference} />);
+
+SelectListBoxItemLabel.displayName = "SelectListBoxItemLabel";
+
+export const SelectListBoxItemCheck = forwardRef<
+  HTMLSpanElement,
+  HTMLAttributes<HTMLSpanElement> & { className?: string | undefined }
+>(({ className, ...properties }, reference) => {
+  const mergedClassName = cx(
+    "absolute end-1.5 top-1 inline-flex size-4 size-6 items-center justify-center p-1 opacity-0 group-selected/item:opacity-100",
+    className,
+  );
+  return <span className={mergedClassName} {...properties} ref={reference} />;
+});
+
+SelectListBoxItemCheck.displayName = "SelectListBoxItemCheck";
+
+export const SelectListBoxItemCheckIcon = forwardRef<
+  SVGSVGElement,
+  SVGAttributes<SVGElement> & { asChild?: boolean | undefined; className?: string | undefined }
+>(({ asChild = false, className, ...properties }, reference) => {
+  const Component = asChild ? Slot : CheckIcon;
+  const mergedClassName = cx("h-full w-auto", className);
+  // @ts-expect-error the Slot component’s type definition doesn’t play nice with SVGs
+  return <Component aria-hidden className={mergedClassName} ref={reference} {...properties} />;
+});
+
+SelectListBoxItemCheckIcon.displayName = "SelectListBoxItemCheckIcon";