Support separators in Select and Dropdown (#992)

* Support separators in Select and Dropdown

* fix breadcrumbs

* colors

lib/experimental/Forms/Fields/Select/index.stories.tsx

@@ -54,6 +54,7 @@ export const WithCustomTrigger: Story = {
     options: [
       { value: "red", label: "Red" },
       { value: "green", label: "Green" },
+      "separator",
       { value: "blue", label: "Blue" },
     ],
   },

lib/experimental/Forms/Fields/Select/index.tsx

@@ -9,19 +9,22 @@ import {
   SelectContent,
   SelectItem as SelectItemPrimitive,
   Select as SelectPrimitive,
+  SelectSeparator,
   SelectTrigger,
   SelectValue as SelectValuePrimitive,
 } from "@/ui/select"
 import { forwardRef } from "react"
 
-type SelectItemProps<T> = {
+type SelectItemObject<T> = {
   value: T
   label: string
   icon?: IconType
   description?: string
   avatar?: AvatarVariant
 }
 
+type SelectItemProps<T> = SelectItemObject<T> | "separator"
+
 type SelectProps<T> = {
   placeholder: string
   onChange: (value: T) => void
@@ -33,7 +36,7 @@ type SelectProps<T> = {
   onOpenChange?: (open: boolean) => void
 }
 
-const SelectItem = ({ item }: { item: SelectItemProps<string> }) => {
+const SelectItem = ({ item }: { item: SelectItemObject<string> }) => {
   return (
     <SelectItemPrimitive value={item.value}>
       <div className="flex items-start gap-1.5">
@@ -56,7 +59,7 @@ const SelectItem = ({ item }: { item: SelectItemProps<string> }) => {
   )
 }
 
-const SelectValue = ({ item }: { item: SelectItemProps<string> }) => {
+const SelectValue = ({ item }: { item: SelectItemObject<string> }) => {
   return (
     <div className="flex items-center gap-1.5">
       {item.icon && (
@@ -87,7 +90,10 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps<string>>(
     },
     ref
   ) {
-    const selectedOption = options.find((option) => option.value === value)
+    const selectedOption = options.find(
+      (option): option is Exclude<typeof option, "separator"> =>
+        option !== "separator" && option.value === value
+    )
 
     return (
       <SelectPrimitive
@@ -118,9 +124,13 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps<string>>(
           )}
         </SelectTrigger>
         <SelectContent>
-          {options.map((option) => (
-            <SelectItem key={option.value} item={option} />
-          ))}
+          {options.map((option, index) =>
+            option === "separator" ? (
+              <SelectSeparator key={`separator-${index}`} />
+            ) : (
+              <SelectItem key={option.value} item={option} />
+            )
+          )}
         </SelectContent>
       </SelectPrimitive>
     )

lib/experimental/Navigation/Dropdown/index.stories.tsx

@@ -33,6 +33,7 @@ export const Default: Story = {
         icon: Icons.Save,
         description: "Preserve changes",
       },
+      "separator",
       {
         label: "Delete",
         onClick: () => console.log("Delete clicked"),

lib/experimental/Navigation/Dropdown/index.tsx

@@ -11,24 +11,27 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/ui/dropdown-menu"
 import { NavigationItem } from "../utils"
 
-export type DropdownItem = NavigationItem & {
+export type DropdownItemObject = NavigationItem & {
   onClick?: () => void
   icon?: IconType
   description?: string
   critical?: boolean
   avatar?: AvatarVariant
 }
 
+export type DropdownItem = DropdownItemObject | "separator"
+
 type DropdownProps = {
   items: DropdownItem[]
   children?: React.ReactNode
 }
 
-const DropdownItem = ({ item }: { item: DropdownItem }) => {
+const DropdownItem = ({ item }: { item: DropdownItemObject }) => {
   const { label, ...props } = item
 
   const content = (
@@ -101,15 +104,19 @@ export function Dropdown({ items, children }: DropdownProps) {
       </DropdownMenuTrigger>
       <DropdownMenuContent className="min-w-[var(--radix-dropdown-menu-trigger-width)]">
         <div className="flex flex-col">
-          {items.map((item, index) => (
-            <DropdownItem
-              key={index}
-              item={{
-                ...item,
-                onClick: item.onClick,
-              }}
-            />
-          ))}
+          {items.map((item, index) =>
+            item === "separator" ? (
+              <DropdownMenuSeparator key={`separator-${index}`} />
+            ) : (
+              <DropdownItem
+                key={index}
+                item={{
+                  ...item,
+                  onClick: item.onClick,
+                }}
+              />
+            )
+          )}
         </div>
       </DropdownMenuContent>
     </DropdownMenu>

lib/experimental/Navigation/Header/Breadcrumbs/index.tsx

@@ -9,7 +9,10 @@ import {
 
 import { ModuleAvatar } from "@/experimental/Information/ModuleAvatar"
 
-import { Dropdown, type DropdownItem } from "@/experimental/Navigation/Dropdown"
+import {
+  Dropdown,
+  type DropdownItemObject,
+} from "@/experimental/Navigation/Dropdown"
 
 import { ChevronRight } from "@/icons/app"
 import { Link } from "@/lib/linkHandler"
@@ -28,7 +31,7 @@ interface BreadcrumbItemProps {
   isLast: boolean
 }
 
-type DropdownItemWithoutIcon = Omit<DropdownItem, "icon">
+type DropdownItemWithoutIcon = Omit<DropdownItemObject, "icon">
 
 function BreadcrumbItem({ item, isLast }: BreadcrumbItemProps) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars

lib/ui/dropdown-menu.tsx

@@ -162,7 +162,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-f1-background-secondary", className)}
+    className={cn("-mx-1 my-1 h-px bg-f1-border-secondary", className)}
     {...props}
   />
 ))

lib/ui/select.tsx

@@ -128,7 +128,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-f1-background-secondary", className)}
+    className={cn("-mx-1 my-1 h-px bg-f1-border-secondary", className)}
     {...props}
   />
 ))