feat(core): replace all radio-button-group usage (#7352)

packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx

@@ -1,4 +1,5 @@
-import { RadioButton, RadioButtonGroup, Switch } from '@affine/component';
+import type { RadioItem } from '@affine/component';
+import { RadioGroup, Switch } from '@affine/component';
 import {
   SettingHeader,
   SettingRow,
@@ -8,7 +9,7 @@ import { useI18n } from '@affine/i18n';
 import type { AppSetting } from '@toeverything/infra';
 import { fontStyleOptions, windowFrameStyleOptions } from '@toeverything/infra';
 import { useTheme } from 'next-themes';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { useAppSettingHelper } from '../../../../../hooks/affine/use-app-setting-helper';
 import { LanguageMenu } from '../../../language-menu';
@@ -19,75 +20,79 @@ export const ThemeSettings = () => {
   const t = useI18n();
   const { setTheme, theme } = useTheme();
 
+  const radioItems = useMemo<RadioItem[]>(
+    () => [
+      {
+        value: 'system',
+        label: t['com.affine.themeSettings.system'](),
+        testId: 'system-theme-trigger',
+      },
+      {
+        value: 'light',
+        label: t['com.affine.themeSettings.light'](),
+        testId: 'light-theme-trigger',
+      },
+      {
+        value: 'dark',
+        label: t['com.affine.themeSettings.dark'](),
+        testId: 'dark-theme-trigger',
+      },
+    ],
+    [t]
+  );
+
   return (
-    <RadioButtonGroup
+    <RadioGroup
+      items={radioItems}
+      value={theme}
       width={250}
       className={settingWrapper}
-      value={theme}
-      onValueChange={useCallback(
+      onChange={useCallback(
         (value: string) => {
           setTheme(value);
         },
         [setTheme]
       )}
-    >
-      <RadioButton value="system" data-testid="system-theme-trigger">
-        {t['com.affine.themeSettings.system']()}
-      </RadioButton>
-      <RadioButton value="light" data-testid="light-theme-trigger">
-        {t['com.affine.themeSettings.light']()}
-      </RadioButton>
-      <RadioButton value="dark" data-testid="dark-theme-trigger">
-        {t['com.affine.themeSettings.dark']()}
-      </RadioButton>
-    </RadioButtonGroup>
+    />
   );
 };
 
 const FontFamilySettings = () => {
   const t = useI18n();
   const { appSettings, updateSettings } = useAppSettingHelper();
+
+  const radioItems = useMemo(() => {
+    return fontStyleOptions.map(({ key, value }) => {
+      const label =
+        key === 'Mono'
+          ? t[`com.affine.appearanceSettings.fontStyle.mono`]()
+          : key === 'Sans'
+            ? t['com.affine.appearanceSettings.fontStyle.sans']()
+            : key === 'Serif'
+              ? t['com.affine.appearanceSettings.fontStyle.serif']()
+              : '';
+      return {
+        value: key,
+        label,
+        testId: 'system-font-style-trigger',
+        style: { fontFamily: value },
+      } satisfies RadioItem;
+    });
+  }, [t]);
+
   return (
-    <RadioButtonGroup
+    <RadioGroup
+      items={radioItems}
+      value={appSettings.fontStyle}
       width={250}
       className={settingWrapper}
-      value={appSettings.fontStyle}
-      onValueChange={useCallback(
-        (key: AppSetting['fontStyle']) => {
-          updateSettings('fontStyle', key);
+      onChange={useCallback(
+        (value: AppSetting['fontStyle']) => {
+          updateSettings('fontStyle', value);
         },
         [updateSettings]
       )}
-    >
-      {fontStyleOptions.map(({ key, value }) => {
-        let font = '';
-        switch (key) {
-          case 'Sans':
-            font = t['com.affine.appearanceSettings.fontStyle.sans']();
-            break;
-          case 'Serif':
-            font = t['com.affine.appearanceSettings.fontStyle.serif']();
-            break;
-          case 'Mono':
-            font = t[`com.affine.appearanceSettings.fontStyle.mono`]();
-            break;
-          default:
-            break;
-        }
-        return (
-          <RadioButton
-            key={key}
-            value={key}
-            data-testid="system-font-style-trigger"
-            style={{
-              fontFamily: value,
-            }}
-          >
-            {font}
-          </RadioButton>
-        );
-      })}
-    </RadioButtonGroup>
+    />
   );
 };
 
@@ -152,22 +157,19 @@ export const AppearanceSettings = () => {
             name={t['com.affine.appearanceSettings.windowFrame.title']()}
             desc={t['com.affine.appearanceSettings.windowFrame.description']()}
           >
-            <RadioButtonGroup
+            <RadioGroup
+              items={windowFrameStyleOptions.map(option => ({
+                value: option,
+                label:
+                  t[`com.affine.appearanceSettings.windowFrame.${option}`](),
+              }))}
+              value={appSettings.windowFrameStyle}
               className={settingWrapper}
               width={250}
-              defaultValue={appSettings.windowFrameStyle}
-              onValueChange={(value: AppSetting['windowFrameStyle']) => {
+              onChange={(value: AppSetting['windowFrameStyle']) => {
                 updateSettings('windowFrameStyle', value);
               }}
-            >
-              {windowFrameStyleOptions.map(option => {
-                return (
-                  <RadioButton value={option} key={option}>
-                    {t[`com.affine.appearanceSettings.windowFrame.${option}`]()}
-                  </RadioButton>
-                );
-              })}
-            </RadioButtonGroup>
+            />
           </SettingRow>
         ) : null}
       </SettingWrapper>

packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-page.tsx

@@ -1,11 +1,4 @@
-import {
-  Input,
-  notify,
-  RadioButton,
-  RadioButtonGroup,
-  Skeleton,
-  Switch,
-} from '@affine/component';
+import { Input, notify, RadioGroup, Skeleton, Switch } from '@affine/component';
 import { PublicLinkDisableModal } from '@affine/component/disable-public-link';
 import { Button } from '@affine/component/ui/button';
 import { Menu, MenuItem, MenuTrigger } from '@affine/component/ui/menu';
@@ -97,6 +90,17 @@ export const AffineSharePage = (props: ShareMenuProps) => {
 
   const t = useI18n();
 
+  const modeOptions = useMemo(
+    () => [
+      { value: 'page', label: t['com.affine.pageMode.page']() },
+      {
+        value: 'edgeless',
+        label: t['com.affine.pageMode.edgeless'](),
+      },
+    ],
+    [t]
+  );
+
   const onClickCreateLink = useAsyncCallback(async () => {
     try {
       await shareService.share.enableShare(
@@ -265,18 +269,12 @@ export const AffineSharePage = (props: ShareMenuProps) => {
           {t['com.affine.share-menu.ShareMode']()}
         </div>
         <div>
-          <RadioButtonGroup
+          <RadioGroup
             className={styles.radioButtonGroup}
             value={mode}
-            onValueChange={onShareModeChange}
-          >
-            <RadioButton className={styles.radioButton} value={'page'}>
-              {t['com.affine.pageMode.page']()}
-            </RadioButton>
-            <RadioButton className={styles.radioButton} value={'edgeless'}>
-              {t['com.affine.pageMode.edgeless']()}
-            </RadioButton>
-          </RadioButtonGroup>
+            onChange={onShareModeChange}
+            items={modeOptions}
+          />
         </div>
       </div>
       {isSharedPage ? (

packages/frontend/core/src/components/page-list/view/edit-collection/edit-collection.css.ts

@@ -173,9 +173,6 @@ export const rulesTitleHighlight = style({
   fontStyle: 'italic',
   fontWeight: 800,
 });
-export const tabButton = style({
-  height: 28,
-});
 export const icon = style({
   color: cssVar('iconColor'),
 });

packages/frontend/core/src/components/page-list/view/edit-collection/edit-collection.tsx

@@ -1,9 +1,4 @@
-import {
-  Button,
-  Modal,
-  RadioButton,
-  RadioButtonGroup,
-} from '@affine/component';
+import { Button, Modal, RadioGroup } from '@affine/component';
 import { useAllPageListConfig } from '@affine/core/hooks/affine/use-all-page-list-config';
 import type { Collection } from '@affine/env/filter';
 import { useI18n } from '@affine/i18n';
@@ -137,29 +132,24 @@ export const EditCollection = ({
   );
   const switchMode = useMemo(
     () => (
-      <RadioButtonGroup
-        width={158}
-        style={{ height: 32 }}
+      <RadioGroup
+        key="mode-switcher"
+        style={{ minWidth: 158 }}
         value={mode}
-        onValueChange={(mode: 'page' | 'rule') => {
-          setMode(mode);
-        }}
-      >
-        <RadioButton
-          spanStyle={styles.tabButton}
-          value="page"
-          data-testid="edit-collection-pages-button"
-        >
-          {t['com.affine.editCollection.pages']()}
-        </RadioButton>
-        <RadioButton
-          spanStyle={styles.tabButton}
-          value="rule"
-          data-testid="edit-collection-rules-button"
-        >
-          {t['com.affine.editCollection.rules']()}
-        </RadioButton>
-      </RadioButtonGroup>
+        onChange={setMode}
+        items={[
+          {
+            value: 'page',
+            label: t['com.affine.editCollection.pages'](),
+            testId: 'edit-collection-pages-button',
+          },
+          {
+            value: 'rule',
+            label: t['com.affine.editCollection.rules'](),
+            testId: 'edit-collection-rules-button',
+          },
+        ]}
+      />
     ),
     [mode, t]
   );

packages/frontend/core/src/components/pure/workspace-mode-filter-tab/index.css.ts

@@ -4,5 +4,4 @@ export const filterTab = style({
   fontSize: cssVar('fontXs'),
   fontWeight: 600,
   textTransform: 'capitalize',
-  minWidth: '91px',
 });

packages/frontend/core/src/components/pure/workspace-mode-filter-tab/index.tsx

@@ -1,4 +1,4 @@
-import { RadioButton, RadioButtonGroup } from '@affine/component';
+import { RadioGroup, type RadioItem } from '@affine/component';
 import type { AllPageFilterOption } from '@affine/core/atoms';
 import { allPageFilterSelectAtom } from '@affine/core/atoms';
 import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
@@ -6,7 +6,7 @@ import { WorkspaceSubPath } from '@affine/core/shared';
 import { useI18n } from '@affine/i18n';
 import { useService, WorkspaceService } from '@toeverything/infra';
 import { useAtom } from 'jotai';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import * as styles from './index.css';
 
@@ -45,28 +45,33 @@ export const WorkspaceModeFilterTab = ({
   }, [activeFilter, filterMode, setFilterMode, value]);
 
   return (
-    <RadioButtonGroup value={value} onValueChange={handleValueChange}>
-      <RadioButton
-        spanStyle={styles.filterTab}
-        value="docs"
-        data-testid="workspace-docs-button"
-      >
-        {t['com.affine.docs.header']()}
-      </RadioButton>
-      <RadioButton
-        spanStyle={styles.filterTab}
-        value="collections"
-        data-testid="workspace-collections-button"
-      >
-        {t['com.affine.collections.header']()}
-      </RadioButton>
-      <RadioButton
-        spanStyle={styles.filterTab}
-        value="tags"
-        data-testid="workspace-tags-button"
-      >
-        {t['Tags']()}
-      </RadioButton>
-    </RadioButtonGroup>
+    <RadioGroup
+      style={{ maxWidth: '100%', width: 273 }}
+      value={value}
+      onChange={handleValueChange}
+      items={useMemo<RadioItem[]>(
+        () => [
+          {
+            value: 'docs',
+            label: t['com.affine.docs.header'](),
+            testId: 'workspace-docs-button',
+            className: styles.filterTab,
+          },
+          {
+            value: 'collections',
+            label: t['com.affine.collections.header'](),
+            testId: 'workspace-collections-button',
+            className: styles.filterTab,
+          },
+          {
+            value: 'tags',
+            label: t['Tags'](),
+            testId: 'workspace-tags-button',
+            className: styles.filterTab,
+          },
+        ],
+        [t]
+      )}
+    />
   );
 };