feat(design): Radio.Button add icon prop (#1398)

dengfuping · web-flow · commit 31135aaa60e7 · 2026-01-05T12:08:11.000+08:00
diff --git a/packages/design/src/radio/RadioButton.tsx b/packages/design/src/radio/RadioButton.tsx
@@ -0,0 +1,51 @@
+import { Radio as AntRadio } from 'antd';
+import type { RadioButtonProps as AntRadioButtonProps } from 'antd/es/radio/radioButton';
+import type { RadioRef } from 'antd/es/radio';
+import classNames from 'classnames';
+import React, { useContext } from 'react';
+import ConfigProvider from '../config-provider';
+
+export interface RadioButtonProps extends AntRadioButtonProps {
+  icon?: React.ReactNode;
+}
+
+const RadioButton = React.forwardRef<RadioRef, RadioButtonProps>(
+  ({ prefixCls: customizePrefixCls, className, icon, children, ...restProps }, ref) => {
+    const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+    const prefixCls = getPrefixCls('radio', customizePrefixCls);
+
+    const hasChildren = React.Children.count(children) > 0;
+    const isIconOnly = icon && !hasChildren;
+
+    const buttonPrefixCls = `${prefixCls}-button`;
+    const buttonCls = classNames(
+      {
+        [`${buttonPrefixCls}-wrapper-with-icon`]: !!icon,
+        [`${buttonPrefixCls}-wrapper-icon-only`]: isIconOnly,
+      },
+      className
+    );
+
+    return (
+      <AntRadio.Button
+        ref={ref}
+        prefixCls={customizePrefixCls}
+        className={buttonCls}
+        {...restProps}
+      >
+        {icon ? (
+          <>
+            {icon}
+            {children}
+          </>
+        ) : (
+          children
+        )}
+      </AntRadio.Button>
+    );
+  }
+);
+
+RadioButton.displayName = 'Radio.Button';
+
+export default RadioButton;
diff --git a/packages/design/src/radio/demo/radio-button-icon.tsx b/packages/design/src/radio/demo/radio-button-icon.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { PlusOutlined, DeleteOutlined, EditOutlined, DownloadOutlined } from '@oceanbase/icons';
+import { Radio, Space, Divider } from '@oceanbase/design';
+import type { RadioChangeEvent } from '@oceanbase/design';
+
+const App: React.FC = () => {
+  const onChange = (e: RadioChangeEvent) => {
+    console.log(`radio checked:${e.target.value}`);
+  };
+
+  return (
+    <Space direction="vertical" size="middle">
+      <Radio.Group onChange={onChange} defaultValue="a">
+        <Radio.Button value="a" icon={<PlusOutlined />}>
+          Add
+        </Radio.Button>
+        <Radio.Button value="b" icon={<EditOutlined />}>
+          Edit
+        </Radio.Button>
+        <Radio.Button value="c" icon={<DeleteOutlined />}>
+          Delete
+        </Radio.Button>
+        <Radio.Button value="d" icon={<DownloadOutlined />}>
+          Download
+        </Radio.Button>
+      </Radio.Group>
+      <Radio.Group onChange={onChange} defaultValue="a">
+        <Radio.Button value="a" icon={<PlusOutlined />}>
+          Add
+        </Radio.Button>
+        <Radio.Button value="b" icon={<EditOutlined />} disabled>
+          Edit
+        </Radio.Button>
+        <Radio.Button value="c" icon={<DeleteOutlined />}>
+          Delete
+        </Radio.Button>
+      </Radio.Group>
+      <Radio.Group onChange={onChange} defaultValue="a">
+        <Radio.Button value="a" icon={<PlusOutlined />} />
+        <Radio.Button value="b" icon={<EditOutlined />} />
+        <Radio.Button value="c" icon={<DeleteOutlined />} />
+        <Radio.Button value="d" icon={<DownloadOutlined />} />
+      </Radio.Group>
+    </Space>
+  );
+};
+
+export default App;
diff --git a/packages/design/src/radio/index.md b/packages/design/src/radio/index.md
@@ -9,14 +9,24 @@ demo:
 
 - 🔥 完全继承 antd [Radio](https://ant.design/components/radio-cn) 的能力和 API，可无缝切换。
 - 💄 定制主题和样式，符合 OceanBase Design 设计规范。
+- 🆕 Radio.Button 新增 `icon` 属性，用于设置图标。
 
 ## 代码演示
 
 <!-- prettier-ignore -->
 <code src="./demo/radio.tsx" title="单选"></code>
 <code src="./demo/radio-button.tsx" title="单选按钮"></code>
+<code src="./demo/radio-button-icon.tsx" title="带图标的单选按钮"></code>
 <code src="./demo/over-length.tsx" title="超长内容"></code>
 
 ## API
 
-- 详见 antd Radio 文档: https://ant.design/components/radio-cn
+### Radio.Button
+
+| 属性 | 说明 | 类型        | 默认值 |
+| ---- | ---- | ----------- | ------ |
+| icon | 图标 | `ReactNode` | -      |
+
+除了上述属性外，`Radio.Button` 完全继承 antd [Radio.Button](https://ant.design/components/radio-cn#radioradiobutton) 的所有属性。
+
+- 更多属性详见 antd Radio 文档: https://ant.design/components/radio-cn
diff --git a/packages/design/src/radio/index.tsx b/packages/design/src/radio/index.tsx
@@ -3,9 +3,11 @@ import type { RadioProps as AntRadioProps, RadioRef } from 'antd/es/radio';
 import classNames from 'classnames';
 import React, { useContext } from 'react';
 import ConfigProvider from '../config-provider';
+import RadioButton from './RadioButton';
 import useStyle from './style';
 
 export * from 'antd/es/radio';
+export type { RadioButtonProps } from './RadioButton';
 
 const InternalRadio = React.forwardRef<RadioRef, AntRadioProps>(
   ({ prefixCls: customizePrefixCls, className, ...restProps }, ref) => {
@@ -19,9 +21,9 @@ const InternalRadio = React.forwardRef<RadioRef, AntRadioProps>(
   }
 );
 
-const Radio = InternalRadio as typeof AntRadio;
+const Radio = InternalRadio as typeof AntRadio & { Button: typeof RadioButton };
 
-Radio.Button = AntRadio.Button;
+Radio.Button = RadioButton;
 Radio.Group = AntRadio.Group;
 // @ts-ignore
 Radio.__ANT_RADIO = AntRadio.__ANT_RADIO;
diff --git a/packages/design/src/radio/style/index.ts b/packages/design/src/radio/style/index.ts
@@ -9,6 +9,7 @@ export const genRadioStyle: GenerateStyle<RadioToken> = (token: RadioToken): CSS
   const marginBottom = calc(calc(fontSize).mul(lineHeight).equal())
     .sub(radioSize || fontSizeLG)
     .div(-2)
+    .sub(1)
     .equal();
   return {
     [`${componentCls}-wrapper`]: {
@@ -36,6 +37,22 @@ export const genRadioStyle: GenerateStyle<RadioToken> = (token: RadioToken): CSS
           borderColor: token.gray7,
           color: token.colorText,
         },
+      // Radio.Button with icon style
+      [`${componentCls}-button-wrapper`]: {
+        [`&${componentCls}-button-wrapper-with-icon`]: {
+          [`${componentCls}-button-label`]: {
+            gap: token.sizeXXS,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100%',
+          },
+        },
+        // Radio.Button icon-only style
+        [`&${componentCls}-button-wrapper-icon-only`]: {
+          paddingInline: token.paddingXS,
+        },
+      },
     },
   };
 };
diff --git a/packages/design/src/theme/default.ts b/packages/design/src/theme/default.ts
@@ -349,6 +349,8 @@ const defaultTheme: ThemeConfig = {
     Radio: {
       // temporarily fix style for checked disabled Radio.Button
       controlItemBgActiveDisabled: colorFillSecondary,
+      // to match Button padding
+      buttonPaddingInline: 12,
     },
     Segmented: {
       trackBg: colorFillTertiary,
