mirror of
https://github.com/coder/coder.git
synced 2026-09-24 15:04:27 +08:00
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:
@@ -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,
|
||||
}));
|
||||
|
||||
|
||||
Reference in New Issue
Block a user