Clean up SelectDropdown component (#1796)

* Clean up SelectDropdown component

* Fix tests
This commit is contained in:
Chris Estreich 2025-03-18 23:03:09 -07:00 committed by GitHub
parent 4d695542f1
commit 0e036fbd9f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 5 additions and 33 deletions

View file

@ -86,13 +86,6 @@ describe("SelectDropdown", () => {
expect(trigger).toHaveAttribute("disabled")
})
it("renders with width: 100% for proper sizing", () => {
render(<SelectDropdown value="option1" options={options} onChange={onChangeMock} />)
const trigger = screen.getByTestId("dropdown-trigger")
expect(trigger).toHaveStyle("width: 100%")
})
it("passes the selected value to the trigger", () => {
const { rerender } = render(<SelectDropdown value="option1" options={options} onChange={onChangeMock} />)

View file

@ -1,4 +1,5 @@
import * as React from "react"
import { CaretUpIcon } from "@radix-ui/react-icons"
import { cn } from "@/lib/utils"
@ -36,7 +37,6 @@ export interface SelectDropdownProps {
contentClassName?: string
sideOffset?: number
align?: "start" | "center" | "end"
shouldShowCaret?: boolean
placeholder?: string
shortcutText?: string
}
@ -53,7 +53,6 @@ export const SelectDropdown = React.forwardRef<React.ElementRef<typeof DropdownM
contentClassName = "",
sideOffset = 4,
align = "start",
shouldShowCaret = true,
placeholder = "",
shortcutText = "",
},
@ -83,34 +82,14 @@ export const SelectDropdown = React.forwardRef<React.ElementRef<typeof DropdownM
disabled={disabled}
title={title}
className={cn(
"inline-flex items-center gap-1 relative whitespace-nowrap rounded pr-1.5 py-1.5 text-xs outline-none focus-visible:ring-2 focus-visible:ring-vscode-focusBorder",
"w-full min-w-0 max-w-full inline-flex items-center gap-1 relative whitespace-nowrap pr-1.5 py-1.5 text-xs outline-none",
"bg-transparent border-none text-vscode-foreground w-auto",
disabled ? "opacity-50 cursor-not-allowed" : "opacity-80 cursor-pointer hover:opacity-100",
disabled ? "opacity-50 cursor-not-allowed" : "opacity-80 hover:opacity-100 cursor-pointer",
triggerClassName,
)}
style={{
width: "100%", // Take full width of parent.
minWidth: "0",
maxWidth: "100%",
}}>
{shouldShowCaret && (
<div className="pointer-events-none opacity-80 flex-shrink-0">
<svg
fill="none"
height="10"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
viewBox="0 0 24 24"
width="10">
<polyline points="18 15 12 9 6 15" />
</svg>
</div>
)}
)}>
<CaretUpIcon className="pointer-events-none opacity-80 flex-shrink-0 size-3" />
<span className="truncate">{displayText}</span>
</DropdownMenuTrigger>
<DropdownMenuContent
align={align}
sideOffset={sideOffset}