scriptoriumadmin/Roo-Code
1
0
Fork 0
mirror of https://github.com/RooVetGit/Roo-Code.git synced 2026-10-07 02:58:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix broken share button (#9253)

Browse source 
fix(webview-ui): make Share button popover work by forwarding ref in LucideIconButton

- Convert LucideIconButton to forwardRef so Radix PopoverTrigger(asChild) receives a focusable element
- Enables Share popover and shareCurrentTask flow
- Verified with ShareButton/TaskActions Vitest suites
This commit is contained in:
Hannes Rudolph 2025-11-13 18:51:27 -07:00 • committed by GitHub
parent 258830967a
commit c49f9ab846
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 33 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
webview-ui/src/components/chat/LucideIconButton.tsx
View file

@ -1,3 +1,4 @@
import { forwardRef } from "react"
import { cn } from "@src/lib/utils"
import { Button, StandardTooltip } from "@src/components/ui"
import { Loader2, LucideIcon } from "lucide-react"
@ -11,40 +12,35 @@ interface LucideIconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEle
style?: React.CSSProperties
}
export const LucideIconButton: React.FC<LucideIconButtonProps> = ({
icon,
title,
className,
disabled,
tooltip = true,
isLoading,
onClick,
style,
...props
}) => {
const Icon = icon
return (
<StandardTooltip content={tooltip ? title : undefined}>
<Button
aria-label={title}
className={cn(
"relative inline-flex items-center justify-center",
"bg-transparent border-none p-1.5",
"rounded-full",
"text-vscode-foreground opacity-85",
"transition-all duration-150",
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
"active:bg-[rgba(255,255,255,0.1)]",
!disabled && "cursor-pointer hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)]",
disabled && "cursor-not-allowed opacity-40 hover:bg-transparent active:bg-transparent",
className,
)}
disabled={disabled}
onClick={!disabled ? onClick : undefined}
style={{ fontSize: 16.5, ...style }}
{...props}>
{isLoading ? <Loader2 className="size-2.5 animate-spin" /> : <Icon className="size-2.5" />}
</Button>
</StandardTooltip>
)
}
export const LucideIconButton = forwardRef<HTMLButtonElement, LucideIconButtonProps>(
({ icon, title, className, disabled, tooltip = true, isLoading, onClick, style, ...props }, ref) => {
const Icon = icon
return (
<StandardTooltip content={tooltip ? title : undefined}>
<Button
ref={ref}
aria-label={title}
className={cn(
"relative inline-flex items-center justify-center",
"bg-transparent border-none p-1.5",
"rounded-full",
"text-vscode-foreground opacity-85",
"transition-all duration-150",
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
"active:bg-[rgba(255,255,255,0.1)]",
!disabled && "cursor-pointer hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)]",
disabled && "cursor-not-allowed opacity-40 hover:bg-transparent active:bg-transparent",
className,
)}
disabled={disabled}
onClick={!disabled ? onClick : undefined}
style={{ fontSize: 16.5, ...style }}
{...props}>
{isLoading ? <Loader2 className="size-2.5 animate-spin" /> : <Icon className="size-2.5" />}
</Button>
</StandardTooltip>
)
},
)
LucideIconButton.displayName = "LucideIconButton"