♻️(react) make className standard across components

The className prop was sometimes set onto the nested element and
sometimes on the container element, which was not consistent. Now
we always set the className onto the upmost element.

packages/react/src/components/Forms/Radio/index.spec.tsx

@@ -1,6 +1,7 @@
 import userEvent from "@testing-library/user-event";
 import React from "react";
 import { render, screen } from "@testing-library/react";
+import { expect } from "vitest";
 import {
   Radio,
   RadioGroup,
@@ -138,4 +139,17 @@ describe("<Radio/>", () => {
     render(<Radio {...propsInput} />);
     expect(spyError).not.toHaveBeenCalled();
   });
+
+  it("renders with className", async () => {
+    render(<Radio label="Agree" checked={true} className="my-custom-class" />);
+    expect(
+      document.querySelector(".c__checkbox.my-custom-class"),
+    ).toBeInTheDocument();
+  });
+  it("renders group with className", async () => {
+    render(<RadioGroup className="my-custom-class" />);
+    expect(
+      document.querySelector(".c__checkbox__group.my-custom-class"),
+    ).toBeInTheDocument();
+  });
 });

packages/react/src/components/Forms/Radio/index.tsx

@@ -16,7 +16,7 @@ export type RadioProps = InputHTMLAttributes<HTMLInputElement> &
   RadioOnlyProps;
 
 export const Radio = forwardRef<HTMLInputElement, RadioProps>(
-  ({ label, ...props }: RadioProps, ref) => {
+  ({ className, label, ...props }: RadioProps, ref) => {
     const {
       compact,
       fullWidth,
@@ -29,7 +29,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
 
     return (
       <label
-        className={classNames("c__checkbox", "c__radio", {
+        className={classNames("c__checkbox", "c__radio", className, {
           "c__checkbox--disabled": props.disabled,
           "c__checkbox--full-width": props.fullWidth,
         })}
@@ -46,13 +46,14 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
 );
 
 export const RadioGroup = ({
+  className,
   children,
   style,
   ...props
 }: PropsWithChildren & FieldProps & { style?: React.CSSProperties }) => {
   return (
     <Field
-      className="c__radio__group c__checkbox__group"
+      className={classNames("c__radio__group c__checkbox__group", className)}
       compact={true}
       {...props}
     >