feat: display descriptions in multi-select component (#18730)

<img width="528" alt="Screenshot 2025-07-02 at 23 06 51"
src="https://github.com/user-attachments/assets/d6223d99-bc1b-4325-8eb6-d87a687bcec8"
/>
This commit is contained in:
Jaayden Halko
2025-07-03 05:55:20 -04:00
committed by GitHub
parent db8ed007f9
commit 61b6562f9a
2 changed files with 26 additions and 1 deletions
@@ -11,8 +11,14 @@ import {
CommandItem,
CommandList,
} from "components/Command/Command";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "components/Tooltip/Tooltip";
import { useDebouncedValue } from "hooks/debounce";
import { ChevronDown, X } from "lucide-react";
import { ChevronDown, Info, X } from "lucide-react";
import {
type ComponentProps,
type ComponentPropsWithoutRef,
@@ -33,6 +39,7 @@ export interface Option {
label: string;
icon?: string;
disable?: boolean;
description?: string;
/** fixed option that can't be removed. */
fixed?: boolean;
/** Group the options by providing key. */
@@ -662,6 +669,23 @@ export const MultiSelectCombobox = forwardRef<
/>
)}
{option.label}
{option.description && (
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger asChild>
<span className="flex items-center pointer-events-auto">
<Info className="!w-3.5 !h-3.5 text-content-secondary" />
</span>
</TooltipTrigger>
<TooltipContent
side="right"
sideOffset={10}
>
{option.description}
</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
</div>
</CommandItem>
);
@@ -488,6 +488,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
value: opt.value.value,
label: opt.name,
icon: opt.icon,
description: opt.description,
disable: false,
}));