From c1a9db4305dcfd681504d87ace5d311117f21581 Mon Sep 17 00:00:00 2001
From: ChaosExAnima <ChaosExAnima@users.noreply.github.com>
Date: Fri, 24 Jul 2026 13:09:45 +0200
Subject: [PATCH 1/6] change icon button sizes

---
 .../components/button/redesign.module.scss        | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/app/javascript/mastodon/components/button/redesign.module.scss b/app/javascript/mastodon/components/button/redesign.module.scss
index 8dd6ab90a8a..a504108713f 100644
--- a/app/javascript/mastodon/components/button/redesign.module.scss
+++ b/app/javascript/mastodon/components/button/redesign.module.scss
@@ -139,9 +139,10 @@ a.base {
 
 // Helper classes
 
-.icon {
-  width: 1em;
-  height: 1em;
+.icon,
+.loading {
+  width: var(--fs-xl);
+  height: var(--fs-xl);
 }
 
 // Adds padding to the text label. This is supposed to be there even if there is no icon.
@@ -156,15 +157,9 @@ a.base {
 
 .iconOnly {
   aspect-ratio: 1;
+  padding: 0;
 }
 
 .loading {
   color: inherit;
-  height: 0.8em;
-  width: 0.8em;
-
-  .iconOnly & {
-    height: 1em;
-    width: 1em;
-  }
 }

From 71efeb212685d538b55c31148fb51bf89eb8308b Mon Sep 17 00:00:00 2001
From: ChaosExAnima <ChaosExAnima@users.noreply.github.com>
Date: Fri, 24 Jul 2026 13:15:19 +0200
Subject: [PATCH 2/6] pass through wrapperClassName

---
 .../components/form_fields/checkbox_field.tsx | 30 ++++++-----
 .../components/form_fields/combobox_field.tsx | 11 +++-
 .../form_fields/copy_link_field.tsx           | 13 ++++-
 .../components/form_fields/fieldset.tsx       | 12 +++--
 .../form_fields/radio_button_field.tsx        | 50 +++++++++++--------
 .../components/form_fields/toggle_field.tsx   | 30 ++++++-----
 6 files changed, 94 insertions(+), 52 deletions(-)

diff --git a/app/javascript/mastodon/components/form_fields/checkbox_field.tsx b/app/javascript/mastodon/components/form_fields/checkbox_field.tsx
index 78bbb32e4fe..47e4c7051b5 100644
--- a/app/javascript/mastodon/components/form_fields/checkbox_field.tsx
+++ b/app/javascript/mastodon/components/form_fields/checkbox_field.tsx
@@ -13,18 +13,24 @@ type Props = Omit<ComponentPropsWithoutRef<'input'>, 'type'> & {
 export const CheckboxField = forwardRef<
   HTMLInputElement,
   Props & CommonFieldWrapperProps
->(({ id, label, hint, status, required, ...otherProps }, ref) => (
-  <FormFieldWrapper
-    label={label}
-    hint={hint}
-    required={required}
-    status={status}
-    inputId={id}
-    inputPlacement='inline-start'
-  >
-    {(inputProps) => <Checkbox {...otherProps} {...inputProps} ref={ref} />}
-  </FormFieldWrapper>
-));
+>(
+  (
+    { id, label, hint, status, required, wrapperClassName, ...otherProps },
+    ref,
+  ) => (
+    <FormFieldWrapper
+      label={label}
+      hint={hint}
+      required={required}
+      status={status}
+      inputId={id}
+      inputPlacement='inline-start'
+      className={wrapperClassName}
+    >
+      {(inputProps) => <Checkbox {...otherProps} {...inputProps} ref={ref} />}
+    </FormFieldWrapper>
+  ),
+);
 
 CheckboxField.displayName = 'CheckboxField';
 
diff --git a/app/javascript/mastodon/components/form_fields/combobox_field.tsx b/app/javascript/mastodon/components/form_fields/combobox_field.tsx
index 9c93d3f4f18..b92fdb9e895 100644
--- a/app/javascript/mastodon/components/form_fields/combobox_field.tsx
+++ b/app/javascript/mastodon/components/form_fields/combobox_field.tsx
@@ -180,7 +180,15 @@ export const ComboboxFieldWithRef = <
   Item extends ComboboxItem,
   GroupKey extends string,
 >(
-  { id, label, hint, status, required, ...otherProps }: Props<Item, GroupKey>,
+  {
+    id,
+    label,
+    hint,
+    status,
+    required,
+    wrapperClassName,
+    ...otherProps
+  }: Props<Item, GroupKey>,
   ref: React.ForwardedRef<HTMLInputElement>,
 ) => (
   <FormFieldWrapper
@@ -189,6 +197,7 @@ export const ComboboxFieldWithRef = <
     required={required}
     status={status}
     inputId={id}
+    className={wrapperClassName}
   >
     {(inputProps) => <Combobox {...otherProps} {...inputProps} ref={ref} />}
   </FormFieldWrapper>
diff --git a/app/javascript/mastodon/components/form_fields/copy_link_field.tsx b/app/javascript/mastodon/components/form_fields/copy_link_field.tsx
index 062a9074a3b..0476afe6446 100644
--- a/app/javascript/mastodon/components/form_fields/copy_link_field.tsx
+++ b/app/javascript/mastodon/components/form_fields/copy_link_field.tsx
@@ -22,7 +22,17 @@ interface CopyLinkFieldProps extends CommonFieldWrapperProps, TextInputProps {
 
 export const CopyLinkField = forwardRef<HTMLInputElement, CopyLinkFieldProps>(
   (
-    { id, label, hint, status, value, required, className, ...otherProps },
+    {
+      id,
+      label,
+      hint,
+      status,
+      value,
+      required,
+      className,
+      wrapperClassName,
+      ...otherProps
+    },
     ref,
   ) => {
     const intl = useIntl();
@@ -50,6 +60,7 @@ export const CopyLinkField = forwardRef<HTMLInputElement, CopyLinkFieldProps>(
         required={required}
         status={status}
         inputId={id}
+        className={wrapperClassName}
       >
         {(inputProps) => (
           <div className={classes.wrapper}>
diff --git a/app/javascript/mastodon/components/form_fields/fieldset.tsx b/app/javascript/mastodon/components/form_fields/fieldset.tsx
index 06882d8e816..02ee92cf0de 100644
--- a/app/javascript/mastodon/components/form_fields/fieldset.tsx
+++ b/app/javascript/mastodon/components/form_fields/fieldset.tsx
@@ -3,6 +3,8 @@
 import type { ReactNode, FC } from 'react';
 import { createContext, useId } from 'react';
 
+import classNames from 'classnames';
+
 import { A11yLiveRegion } from 'mastodon/components/a11y_live_region';
 import { CalloutInline } from 'mastodon/components/callout_inline';
 
@@ -17,6 +19,7 @@ interface FieldsetProps {
   name?: string;
   status?: FieldStatus | FieldStatus['variant'];
   layout?: 'vertical' | 'horizontal';
+  className?: string;
   children: ReactNode;
 }
 
@@ -33,6 +36,7 @@ export const Fieldset: FC<FieldsetProps> = ({
   name,
   status,
   layout,
+  className,
   children,
 }) => {
   const uniqueId = useId();
@@ -54,23 +58,23 @@ export const Fieldset: FC<FieldsetProps> = ({
 
   return (
     <fieldset
-      className={classes.fieldset}
+      className={classNames(classes.fieldset, className)}
       data-has-error={status === 'error'}
       aria-labelledby={labelId}
       aria-describedby={descriptionIds}
     >
       <div className={formFieldWrapperClasses.labelWrapper}>
-        <div id={labelId} className={formFieldWrapperClasses.label}>
+        <div id={labelId} className={formFieldWrapperClasses.label} data-label>
           {legend}
         </div>
         {hasHint && (
-          <p id={hintId} className={formFieldWrapperClasses.hint}>
+          <p id={hintId} className={formFieldWrapperClasses.hint} data-hint>
             {hint}
           </p>
         )}
       </div>
 
-      <div className={classes.fieldsWrapper} data-layout={layout}>
+      <div className={classes.fieldsWrapper} data-layout={layout} data-fields>
         <FieldsetNameContext.Provider value={fieldsetName}>
           {children}
         </FieldsetNameContext.Provider>
diff --git a/app/javascript/mastodon/components/form_fields/radio_button_field.tsx b/app/javascript/mastodon/components/form_fields/radio_button_field.tsx
index cbc9020ca7f..fbdde2279cd 100644
--- a/app/javascript/mastodon/components/form_fields/radio_button_field.tsx
+++ b/app/javascript/mastodon/components/form_fields/radio_button_field.tsx
@@ -15,29 +15,35 @@ type Props = Omit<ComponentPropsWithoutRef<'input'>, 'type'> & {
 export const RadioButtonField = forwardRef<
   HTMLInputElement,
   Props & CommonFieldWrapperProps
->(({ id, label, hint, status, required, ...otherProps }, ref) => {
-  const fieldsetName = useContext(FieldsetNameContext);
+>(
+  (
+    { id, label, hint, status, required, wrapperClassName, ...otherProps },
+    ref,
+  ) => {
+    const fieldsetName = useContext(FieldsetNameContext);
 
-  return (
-    <FormFieldWrapper
-      label={label}
-      hint={hint}
-      required={required}
-      status={status}
-      inputId={id}
-      inputPlacement='inline-start'
-    >
-      {(inputProps) => (
-        <RadioButton
-          {...otherProps}
-          {...inputProps}
-          name={otherProps.name || fieldsetName}
-          ref={ref}
-        />
-      )}
-    </FormFieldWrapper>
-  );
-});
+    return (
+      <FormFieldWrapper
+        label={label}
+        hint={hint}
+        required={required}
+        status={status}
+        inputId={id}
+        className={wrapperClassName}
+        inputPlacement='inline-start'
+      >
+        {(inputProps) => (
+          <RadioButton
+            {...otherProps}
+            {...inputProps}
+            name={otherProps.name || fieldsetName}
+            ref={ref}
+          />
+        )}
+      </FormFieldWrapper>
+    );
+  },
+);
 
 RadioButtonField.displayName = 'RadioButtonField';
 
diff --git a/app/javascript/mastodon/components/form_fields/toggle_field.tsx b/app/javascript/mastodon/components/form_fields/toggle_field.tsx
index 3de09823d3e..ea995305ddd 100644
--- a/app/javascript/mastodon/components/form_fields/toggle_field.tsx
+++ b/app/javascript/mastodon/components/form_fields/toggle_field.tsx
@@ -14,18 +14,24 @@ type Props = Omit<ComponentPropsWithoutRef<'input'>, 'type'> & {
 export const ToggleField = forwardRef<
   HTMLInputElement,
   Props & CommonFieldWrapperProps
->(({ id, label, hint, status, required, ...otherProps }, ref) => (
-  <FormFieldWrapper
-    label={label}
-    hint={hint}
-    required={required}
-    status={status}
-    inputId={id}
-    inputPlacement='inline-end'
-  >
-    {(inputProps) => <Toggle {...otherProps} {...inputProps} ref={ref} />}
-  </FormFieldWrapper>
-));
+>(
+  (
+    { id, label, hint, status, required, wrapperClassName, ...otherProps },
+    ref,
+  ) => (
+    <FormFieldWrapper
+      label={label}
+      hint={hint}
+      required={required}
+      status={status}
+      inputId={id}
+      inputPlacement='inline-end'
+      className={wrapperClassName}
+    >
+      {(inputProps) => <Toggle {...otherProps} {...inputProps} ref={ref} />}
+    </FormFieldWrapper>
+  ),
+);
 
 ToggleField.displayName = 'ToggleField';
 

From 8427035ab68617ff8ae60dc028d16313bc9a4d1e Mon Sep 17 00:00:00 2001
From: ChaosExAnima <ChaosExAnima@users.noreply.github.com>
Date: Fri, 24 Jul 2026 13:15:48 +0200
Subject: [PATCH 3/6] set toggle size correctly

---
 app/javascript/mastodon/components/form_fields/redesign.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/javascript/mastodon/components/form_fields/redesign.tsx b/app/javascript/mastodon/components/form_fields/redesign.tsx
index e2f00456dd6..5e6f0f91af4 100644
--- a/app/javascript/mastodon/components/form_fields/redesign.tsx
+++ b/app/javascript/mastodon/components/form_fields/redesign.tsx
@@ -71,5 +71,6 @@ export const ToggleField: RedesignComponent<
       classes.toggle,
       size === 'sm' && classes.toggleSmall,
     )}
+    size={size === 'sm' ? 14 : 20}
   />
 );

From a4bf1be74dae8d68ddeecf781053072238ef9871 Mon Sep 17 00:00:00 2001
From: ChaosExAnima <ChaosExAnima@users.noreply.github.com>
Date: Fri, 24 Jul 2026 14:09:33 +0200
Subject: [PATCH 4/6] add data attributes to target form field wrapper divs

---
 .../mastodon/components/form_fields/form_field_wrapper.tsx  | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/javascript/mastodon/components/form_fields/form_field_wrapper.tsx b/app/javascript/mastodon/components/form_fields/form_field_wrapper.tsx
index 579d6e814ca..841247373b9 100644
--- a/app/javascript/mastodon/components/form_fields/form_field_wrapper.tsx
+++ b/app/javascript/mastodon/components/form_fields/form_field_wrapper.tsx
@@ -83,7 +83,9 @@ export const FormFieldWrapper: FC<FieldWrapperProps> = ({
   };
 
   const input = (
-    <div className={classes.inputWrapper}>{children(inputProps)}</div>
+    <div className={classes.inputWrapper} data-input>
+      {children(inputProps)}
+    </div>
   );
 
   return (
@@ -105,7 +107,7 @@ export const FormFieldWrapper: FC<FieldWrapperProps> = ({
         </label>
 
         {hasHint && (
-          <span className={classes.hint} id={hintId}>
+          <span className={classes.hint} id={hintId} data-hint>
             {hint}
           </span>
         )}

From fc87e35281184d7197ba8bd5337e4b26d07d6cf6 Mon Sep 17 00:00:00 2001
From: ChaosExAnima <ChaosExAnima@users.noreply.github.com>
Date: Fri, 24 Jul 2026 14:12:38 +0200
Subject: [PATCH 5/6] restyle radio fields for redesign

---
 .../form_fields/radio_button_field.tsx        | 21 ++++++-----
 .../form_fields/redesign.module.scss          | 36 +++++++++++++++++++
 .../form_fields/redesign.stories.tsx          | 16 ++++++++-
 .../components/form_fields/redesign.tsx       | 30 ++++++++++++++++
 4 files changed, 94 insertions(+), 9 deletions(-)

diff --git a/app/javascript/mastodon/components/form_fields/radio_button_field.tsx b/app/javascript/mastodon/components/form_fields/radio_button_field.tsx
index fbdde2279cd..a16bf8a3db2 100644
--- a/app/javascript/mastodon/components/form_fields/radio_button_field.tsx
+++ b/app/javascript/mastodon/components/form_fields/radio_button_field.tsx
@@ -3,6 +3,8 @@
 import type { ComponentPropsWithoutRef, CSSProperties } from 'react';
 import { forwardRef, useContext } from 'react';
 
+import classNames from 'classnames';
+
 import { FieldsetNameContext } from './fieldset';
 import type { CommonFieldWrapperProps } from './form_field_wrapper';
 import { FormFieldWrapper } from './form_field_wrapper';
@@ -48,14 +50,17 @@ export const RadioButtonField = forwardRef<
 RadioButtonField.displayName = 'RadioButtonField';
 
 export const RadioButton = forwardRef<HTMLInputElement, Props>(
-  ({ className, size, ...otherProps }, ref) => (
-    <input
-      {...otherProps}
-      type='radio'
-      className={classes.radioButton}
-      style={size ? ({ '--size': `${size}px` } as CSSProperties) : undefined}
-      ref={ref}
-    />
+  ({ className, size, children, ...otherProps }, ref) => (
+    <>
+      {children}
+      <input
+        {...otherProps}
+        type='radio'
+        className={classNames(classes.radioButton, className)}
+        style={size ? ({ '--size': `${size}px` } as CSSProperties) : undefined}
+        ref={ref}
+      />
+    </>
   ),
 );
 
diff --git a/app/javascript/mastodon/components/form_fields/redesign.module.scss b/app/javascript/mastodon/components/form_fields/redesign.module.scss
index 87337e3af16..4d1dacc9b58 100644
--- a/app/javascript/mastodon/components/form_fields/redesign.module.scss
+++ b/app/javascript/mastodon/components/form_fields/redesign.module.scss
@@ -1,3 +1,39 @@
+// Radio
+
+.radioWrapper {
+  [data-input] {
+    position: relative;
+  }
+
+  .icon {
+    position: absolute;
+    pointer-events: none;
+    opacity: 0;
+    transition:
+      color 200ms,
+      opacity 200ms;
+  }
+
+  .icon:has(+ :checked) {
+    opacity: 1;
+  }
+
+  label {
+    font-size: var(--fs-sm);
+  }
+}
+
+.icon {
+  width: var(--fs-lg);
+  height: var(--fs-lg);
+}
+
+.icon + .radio {
+  opacity: 0;
+}
+
+// Text Input
+
 .inputWrapper {
   label {
     font-size: var(--fs-sm);
diff --git a/app/javascript/mastodon/components/form_fields/redesign.stories.tsx b/app/javascript/mastodon/components/form_fields/redesign.stories.tsx
index a8b45e3fff4..6ab651a4534 100644
--- a/app/javascript/mastodon/components/form_fields/redesign.stories.tsx
+++ b/app/javascript/mastodon/components/form_fields/redesign.stories.tsx
@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { TextInputField, ToggleField } from './redesign';
+import CheckIcon from '@/material-icons/400-24px/check.svg?react';
+
+import { Fieldset } from './fieldset';
+import { RadioButtonField, TextInputField, ToggleField } from './redesign';
 
 interface FieldProps {
   label: string;
@@ -28,6 +31,17 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+export const RadioButton: Story = {
+  render(args) {
+    return (
+      <Fieldset name='test' legend='Test radio'>
+        <RadioButtonField {...args} icon={CheckIcon} defaultChecked />
+        <RadioButtonField {...args} icon={CheckIcon} />
+      </Fieldset>
+    );
+  },
+};
+
 export const TextInput: Story = {
   render(args) {
     return <TextInputField {...args} />;
diff --git a/app/javascript/mastodon/components/form_fields/redesign.tsx b/app/javascript/mastodon/components/form_fields/redesign.tsx
index 5e6f0f91af4..f6b0d3ebe2c 100644
--- a/app/javascript/mastodon/components/form_fields/redesign.tsx
+++ b/app/javascript/mastodon/components/form_fields/redesign.tsx
@@ -2,6 +2,10 @@ import classNames from 'classnames';
 
 import type { Merge } from 'type-fest';
 
+import { Icon } from '../icon';
+import type { IconProp } from '../icon';
+
+import { RadioButtonField as OldRadioButtonField } from './radio_button_field';
 import classes from './redesign.module.scss';
 import {
   TextInput as OldTextInput,
@@ -18,6 +22,32 @@ type RedesignComponent<
   P = object,
 > = React.FC<Merge<React.ComponentProps<T>, P>>;
 
+// Radio button field
+
+interface RadioButtonProps {
+  icon?: IconProp | null;
+  iconClassName?: string;
+}
+
+export const RadioButtonField: RedesignComponent<
+  typeof OldRadioButtonField,
+  RadioButtonProps
+> = ({ className, icon, iconClassName, wrapperClassName, ...props }) => (
+  <OldRadioButtonField
+    {...props}
+    className={classNames(className, classes.radio)}
+    wrapperClassName={classNames(wrapperClassName, classes.radioWrapper)}
+  >
+    {icon && (
+      <Icon
+        id='checked'
+        icon={icon}
+        className={classNames(classes.icon, iconClassName)}
+      />
+    )}
+  </OldRadioButtonField>
+);
+
 // Text field
 
 export const TextInputField: RedesignComponent<typeof OldTextInputField> = ({

From 8c08f78456edd1029e6c9103606a8cd27e88130a Mon Sep 17 00:00:00 2001
From: ChaosExAnima <ChaosExAnima@users.noreply.github.com>
Date: Fri, 24 Jul 2026 14:15:22 +0200
Subject: [PATCH 6/6] removes unused radio class

---
 .../mastodon/components/form_fields/redesign.module.scss  | 8 ++++----
 .../mastodon/components/form_fields/redesign.tsx          | 3 +--
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/app/javascript/mastodon/components/form_fields/redesign.module.scss b/app/javascript/mastodon/components/form_fields/redesign.module.scss
index 4d1dacc9b58..af0d9c1ad2f 100644
--- a/app/javascript/mastodon/components/form_fields/redesign.module.scss
+++ b/app/javascript/mastodon/components/form_fields/redesign.module.scss
@@ -18,6 +18,10 @@
     opacity: 1;
   }
 
+  input {
+    opacity: 0;
+  }
+
   label {
     font-size: var(--fs-sm);
   }
@@ -28,10 +32,6 @@
   height: var(--fs-lg);
 }
 
-.icon + .radio {
-  opacity: 0;
-}
-
 // Text Input
 
 .inputWrapper {
diff --git a/app/javascript/mastodon/components/form_fields/redesign.tsx b/app/javascript/mastodon/components/form_fields/redesign.tsx
index f6b0d3ebe2c..7d5ecd4e598 100644
--- a/app/javascript/mastodon/components/form_fields/redesign.tsx
+++ b/app/javascript/mastodon/components/form_fields/redesign.tsx
@@ -32,10 +32,9 @@ interface RadioButtonProps {
 export const RadioButtonField: RedesignComponent<
   typeof OldRadioButtonField,
   RadioButtonProps
-> = ({ className, icon, iconClassName, wrapperClassName, ...props }) => (
+> = ({ icon, iconClassName, wrapperClassName, ...props }) => (
   <OldRadioButtonField
     {...props}
-    className={classNames(className, classes.radio)}
     wrapperClassName={classNames(wrapperClassName, classes.radioWrapper)}
   >
     {icon && (