refactor: avoid rendering button inside button (#4968)

Color thumb should be a button only inside of color picker when it is
clickable. In case of repeated style it is just a visual indicator.

This fixes huge react warnings about button rendered inside of another
button.

Author: TrySound

apps/builder/app/builder/features/style-panel/shared/color-picker.tsx

@@ -216,6 +216,7 @@ export const ColorPopover = ({
         <ColorThumb
           color={styleValueToRgbaColor(value)}
           css={{ margin: theme.spacing[2] }}
+          interactive={true}
           tabIndex={-1}
         />
       </PopoverTrigger>

apps/builder/app/builder/features/style-panel/shared/color-thumb.tsx

@@ -58,22 +58,25 @@ const thumbStyle = css({
   },
 });
 
-type Props = Omit<ComponentProps<"button">, "color"> & {
+type Props = Omit<ComponentProps<"button" | "span">, "color"> & {
+  interactive?: boolean;
   color?: RgbaColor;
   css?: CSS;
 };
 
 export const ColorThumb = forwardRef<ElementRef<"button">, Props>(
-  ({ color = transparentColor, css, ...rest }, ref) => {
+  ({ interactive, color = transparentColor, css, ...rest }, ref) => {
     const background =
       color === undefined || color.a < 1
         ? // Chessboard pattern 5x5
           `repeating-conic-gradient(rgba(0,0,0,0.22) 0% 25%, transparent 0% 50%) 0% 33.33% / 40% 40%, ${colord(color).toRgbString()}`
         : colord(color).toRgbString();
     const borderColor = calcBorderColor(color);
 
+    const Component = interactive ? "button" : "span";
+
     return (
-      <button
+      <Component
         {...rest}
         ref={ref}
         style={{