Skip to content

Commit 3cace3f

Browse files
cardernecarderne
committed
fix(webapp): use native controls for inline actions
1 parent b69c00e commit 3cace3f

7 files changed

Lines changed: 85 additions & 88 deletions

File tree

‎apps/webapp/app/components/AskAI.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -544,7 +544,9 @@ function ChatInterface({ initialQuery }: { initialQuery?: string }) {
544544
{isGeneratingAnswer ? (
545545
<SimpleTooltip
546546
button={
547-
<span
547+
<button
548+
type="button"
549+
aria-label="Stop generating"
548550
onClick={() => stopGeneration()}
549551
className="group relative z-10 flex size-10 min-w-10 cursor-pointer items-center justify-center"
550552
>
@@ -553,7 +555,7 @@ function ChatInterface({ initialQuery }: { initialQuery?: string }) {
553555
className="absolute inset-0 animate-spin"
554556
hoverEffect
555557
/>
556-
</span>
558+
</button>
557559
}
558560
content="Stop generating"
559561
/>

‎apps/webapp/app/components/code/TSQLResultsTable.tsx‎

Lines changed: 28 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -856,37 +856,34 @@ function CopyableCell({
856856
onMouseLeave={() => setIsHovered(false)}
857857
>
858858
<span className="flex items-center truncate">{children}</span>
859-
{isHovered && (
860-
<span
861-
onClick={(e) => {
862-
e.stopPropagation();
863-
e.preventDefault();
864-
copy();
865-
}}
866-
className="absolute right-1 top-1/2 z-10 flex -translate-y-1/2 cursor-pointer"
867-
>
868-
<SimpleTooltip
869-
button={
870-
<span
871-
className={cn(
872-
"flex size-6 items-center justify-center rounded border border-border-bright bg-background-hover",
873-
copied
874-
? "text-green-500"
875-
: "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-text-bright"
876-
)}
877-
>
878-
{copied ? (
879-
<ClipboardCheckIcon className="size-3.5" />
880-
) : (
881-
<ClipboardIcon className="size-3.5" />
882-
)}
883-
</span>
884-
}
885-
content={copied ? "Copied!" : "Copy"}
886-
disableHoverableContent
887-
/>
888-
</span>
889-
)}
859+
<SimpleTooltip
860+
button={
861+
<button
862+
type="button"
863+
aria-label={copied ? "Copied" : "Copy"}
864+
onClick={(e) => {
865+
e.stopPropagation();
866+
e.preventDefault();
867+
copy();
868+
}}
869+
className={cn(
870+
"absolute right-1 top-1/2 z-10 flex size-6 -translate-y-1/2 items-center justify-center rounded border border-border-bright bg-background-hover transition-opacity focus:opacity-100",
871+
isHovered ? "opacity-100" : "pointer-events-none opacity-0",
872+
copied
873+
? "text-green-500"
874+
: "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-text-bright"
875+
)}
876+
>
877+
{copied ? (
878+
<ClipboardCheckIcon className="size-3.5" />
879+
) : (
880+
<ClipboardIcon className="size-3.5" />
881+
)}
882+
</button>
883+
}
884+
content={copied ? "Copied!" : "Copy"}
885+
disableHoverableContent
886+
/>
890887
</div>
891888
);
892889
}

‎apps/webapp/app/components/primitives/ClipboardField.tsx‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -127,14 +127,7 @@ export function ClipboardField({
127127

128128
return (
129129
<span className={cn(container, fullWidth ? "w-full" : "max-w-fit", className)}>
130-
{icon && (
131-
<span
132-
onClick={() => inputIcon.current && inputIcon.current.focus()}
133-
className="flex items-center pl-1"
134-
>
135-
{icon}
136-
</span>
137-
)}
130+
{icon && <span className="flex items-center pl-1">{icon}</span>}
138131
<input
139132
type="text"
140133
ref={inputIcon}

‎apps/webapp/app/components/primitives/CopyButton.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,9 @@ export function CopyButton({
4646

4747
const button =
4848
variant === "icon" ? (
49-
<span
49+
<button
50+
type="button"
51+
aria-label={copied ? "Copied" : "Copy"}
5052
onClick={copy}
5153
className={cn(
5254
buttonSize,
@@ -62,7 +64,7 @@ export function CopyButton({
6264
) : (
6365
<ClipboardIcon className={iconSize} />
6466
)}
65-
</span>
67+
</button>
6668
) : (
6769
<Button
6870
variant={`${buttonVariant}/${size === "extra-small" ? "small" : size}`}

‎apps/webapp/app/components/primitives/CopyableText.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,11 @@ export function CopyableText({
3939

4040
if (resolvedVariant === "icon-right") {
4141
const iconButton = (
42-
<span
42+
<button
43+
type="button"
44+
aria-label={copied ? "Copied" : "Copy"}
45+
onClick={copy}
46+
onMouseDown={(e) => e.stopPropagation()}
4347
className={cn(
4448
"ml-1 flex size-6 items-center justify-center rounded border border-border-bright bg-background-hover",
4549
asChild && "p-1",
@@ -53,7 +57,7 @@ export function CopyableText({
5357
) : (
5458
<ClipboardIcon className="size-3.5" />
5559
)}
56-
</span>
60+
</button>
5761
);
5862

5963
return (
@@ -72,13 +76,11 @@ export function CopyableText({
7276
{value}
7377
</span>
7478
<span
75-
onClick={copy}
76-
onMouseDown={(e) => e.stopPropagation()}
7779
className={cn(
78-
"absolute top-0 z-10 size-6 font-sans",
80+
"absolute top-0 z-10 flex size-6 font-sans transition-opacity focus-within:opacity-100",
7981
// Truncated values reserve a right gutter, so the button sits inside it
8082
truncate ? "right-0" : "-right-6",
81-
isHovered ? "flex" : "hidden"
83+
isHovered ? "opacity-100" : "pointer-events-none opacity-0"
8284
)}
8385
>
8486
{hideTooltip ? (

‎apps/webapp/app/components/primitives/Table.tsx‎

Lines changed: 28 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -486,37 +486,34 @@ export const CopyableTableCell = forwardRef<HTMLTableCellElement, CopyableTableC
486486
onMouseLeave={() => setIsHovered(false)}
487487
>
488488
{children}
489-
{isHovered && (
490-
<span
491-
onClick={(e) => {
492-
e.stopPropagation();
493-
e.preventDefault();
494-
copy();
495-
}}
496-
className="absolute -right-2 top-1/2 z-10 flex -translate-y-1/2 cursor-pointer"
497-
>
498-
<SimpleTooltip
499-
button={
500-
<span
501-
className={cn(
502-
"flex size-6 items-center justify-center rounded border border-border-bright bg-background-hover",
503-
copied
504-
? "text-green-500"
505-
: "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-text-bright"
506-
)}
507-
>
508-
{copied ? (
509-
<ClipboardCheckIcon className="size-3.5" />
510-
) : (
511-
<ClipboardIcon className="size-3.5" />
512-
)}
513-
</span>
514-
}
515-
content={copied ? "Copied!" : "Copy"}
516-
disableHoverableContent
517-
/>
518-
</span>
519-
)}
489+
<SimpleTooltip
490+
button={
491+
<button
492+
type="button"
493+
aria-label={copied ? "Copied" : "Copy"}
494+
onClick={(e) => {
495+
e.stopPropagation();
496+
e.preventDefault();
497+
copy();
498+
}}
499+
className={cn(
500+
"absolute -right-2 top-1/2 z-10 flex size-6 -translate-y-1/2 items-center justify-center rounded border border-border-bright bg-background-hover transition-opacity focus:opacity-100",
501+
isHovered ? "opacity-100" : "pointer-events-none opacity-0",
502+
copied
503+
? "text-green-500"
504+
: "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-text-bright"
505+
)}
506+
>
507+
{copied ? (
508+
<ClipboardCheckIcon className="size-3.5" />
509+
) : (
510+
<ClipboardIcon className="size-3.5" />
511+
)}
512+
</button>
513+
}
514+
content={copied ? "Copied!" : "Copy"}
515+
disableHoverableContent
516+
/>
520517
</div>
521518
</TableCell>
522519
);

‎apps/webapp/app/components/runs/v3/RunTag.tsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -114,12 +114,14 @@ function CopyButton({ textToCopy, isHovered }: { textToCopy: string; isHovered:
114114
return (
115115
<SimpleTooltip
116116
button={
117-
<span
117+
<button
118+
type="button"
119+
aria-label={copied ? "Copied" : "Copy tag"}
118120
onClick={copy}
119121
onMouseDown={(e) => e.stopPropagation()}
120122
className={cn(
121-
"absolute -right-6 top-0 z-10 size-6 items-center justify-center rounded-r-sm border-y border-r border-border-bright bg-background-hover",
122-
isHovered ? "flex" : "hidden",
123+
"absolute -right-6 top-0 z-10 flex size-6 items-center justify-center rounded-r-sm border-y border-r border-border-bright bg-background-hover transition-opacity focus:opacity-100",
124+
isHovered ? "opacity-100" : "pointer-events-none opacity-0",
123125
copied
124126
? "text-green-500"
125127
: "text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-text-bright"
@@ -130,7 +132,7 @@ function CopyButton({ textToCopy, isHovered }: { textToCopy: string; isHovered:
130132
) : (
131133
<ClipboardIcon className="size-3.5" />
132134
)}
133-
</span>
135+
</button>
134136
}
135137
content={copied ? "Copied!" : "Copy tag"}
136138
disableHoverableContent
@@ -159,17 +161,19 @@ function DeleteButton({
159161
return (
160162
<SimpleTooltip
161163
button={
162-
<span
164+
<button
165+
type="button"
166+
aria-label="Remove tag"
163167
onClick={handleDelete}
164168
onMouseDown={(e) => e.stopPropagation()}
165169
className={cn(
166-
"absolute -right-6 top-0 z-10 size-6 items-center justify-center rounded-r-sm border-y border-r border-border-bright bg-background-hover",
167-
isHovered ? "flex" : "hidden",
170+
"absolute -right-6 top-0 z-10 flex size-6 items-center justify-center rounded-r-sm border-y border-r border-border-bright bg-background-hover transition-opacity focus:opacity-100",
171+
isHovered ? "opacity-100" : "pointer-events-none opacity-0",
168172
"text-text-dimmed hover:border-border-bright hover:bg-background-raised hover:text-rose-400"
169173
)}
170174
>
171175
<XIcon className="size-3.5" />
172-
</span>
176+
</button>
173177
}
174178
content="Remove tag"
175179
disableHoverableContent

0 commit comments

Comments
 (0)