refactor: decouple radio button selection from .buttonList wrapper (#9528)

* refactor: decouple radio button selection from `.buttonList`

* fix

packages/excalidraw/components/Actions.tsx

@@ -154,7 +154,7 @@ export const SelectedShapeActions = ({
     !isSingleElementBoundContainer && alignActionsPredicate(appState, app);
 
   return (
-    <div className="panelColumn">
+    <div className="selected-shape-actions">
       <div>
         {canChangeStrokeColor(appState, targetElements) &&
           renderAction("changeStrokeColor")}

packages/excalidraw/components/ButtonSelect.tsx

@@ -1,30 +0,0 @@
-import clsx from "clsx";
-
-export const ButtonSelect = <T extends Object>({
-  options,
-  value,
-  onChange,
-  group,
-}: {
-  options: { value: T; text: string }[];
-  value: T | null;
-  onChange: (value: T) => void;
-  group: string;
-}) => (
-  <div className="buttonList">
-    {options.map((option) => (
-      <label
-        key={option.text}
-        className={clsx({ active: value === option.value })}
-      >
-        <input
-          type="radio"
-          name={group}
-          onChange={() => onChange(option.value)}
-          checked={value === option.value}
-        />
-        {option.text}
-      </label>
-    ))}
-  </div>
-);

packages/excalidraw/components/FontPicker/FontPicker.tsx

@@ -6,7 +6,7 @@ import { FONT_FAMILY } from "@excalidraw/common";
 import type { FontFamilyValues } from "@excalidraw/element/types";
 
 import { t } from "../../i18n";
-import { ButtonIconSelect } from "../ButtonIconSelect";
+import { RadioSelection } from "../RadioSelection";
 import { ButtonSeparator } from "../ButtonSeparator";
 import {
   FontFamilyCodeIcon,
@@ -82,12 +82,14 @@ export const FontPicker = React.memo(
 
     return (
       <div role="dialog" aria-modal="true" className="FontPicker__container">
-        <ButtonIconSelect<FontFamilyValues | false>
-          type="button"
-          options={defaultFonts}
-          value={selectedFontFamily}
-          onClick={onSelectCallback}
-        />
+        <div className="buttonList">
+          <RadioSelection<FontFamilyValues | false>
+            type="button"
+            options={defaultFonts}
+            value={selectedFontFamily}
+            onClick={onSelectCallback}
+          />
+        </div>
         <ButtonSeparator />
         <Popover.Root open={isOpened} onOpenChange={onPopupChange}>
           <FontPickerTrigger selectedFontFamily={selectedFontFamily} />

packages/excalidraw/components/RadioSelection.tsx

@@ -4,8 +4,7 @@ import { ButtonIcon } from "./ButtonIcon";
 
 import type { JSX } from "react";
 
-// TODO: It might be "clever" to add option.icon to the existing component <ButtonSelect />
-export const ButtonIconSelect = <T extends Object>(
+export const RadioSelection = <T extends Object>(
   props: {
     options: {
       value: T;
@@ -28,7 +27,7 @@ export const ButtonIconSelect = <T extends Object>(
       }
   ),
 ) => (
-  <div className="buttonList">
+  <>
     {props.options.map((option) =>
       props.type === "button" ? (
         <ButtonIcon
@@ -56,5 +55,5 @@ export const ButtonIconSelect = <T extends Object>(
         </label>
       ),
     )}
-  </div>
+  </>
 );