Merge branch 'main' into mes/error-boundary-fix

coder · Parkreiner · Jan 3, 2025 · Dec 26, 2024 · Dec 26, 2024 · Dec 26, 2024
commit 01b19479e04ab7870aae71f34f0093baf1aefe75
diff --git a/site/src/components/Button/Button.tsx b/site/src/components/Button/Button.tsx
@@ -50,19 +50,25 @@ export interface ButtonProps
 	asChild?: boolean;
 }
 
-export const Button: FC<ButtonProps> = forwardRef<
-	HTMLButtonElement,
-	ButtonProps
->(({ className, variant, size, asChild = false, ...props }, ref) => {
-	const Comp = asChild ? Slot : "button";
-	return (
-		<Comp
-			ref={ref}
-			{...props}
-			className={cn(buttonVariants({ variant, size }), className)}
-			type={
-				props.type === undefined && Comp === "button" ? "button" : props.type
-			}
-		/>
-	);
-});
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+	({ className, variant, size, asChild = false, ...props }, ref) => {
+		const Comp = asChild ? Slot : "button";
+		return (
+			<Comp
+				{...props}
+				ref={ref}
+				className={cn(buttonVariants({ variant, size }), className)}
+				// Adding default button type to make sure that buttons don't
+				// accidentally trigger form actions when clicked. But because
+				// this Button component is so polymorphic (it's also used to
+				// make <a> elements look like buttons), we can only safely
+				// default to adding the prop when we know that we're rendering
+				// a real HTML button instead of an arbitrary Slot. Adding the
+				// type attribute to any non-buttons will produce invalid HTML
+				type={
+					props.type === undefined && Comp === "button" ? "button" : props.type
+				}
+			/>
+		);
+	},
+);