From 1eb26e6f2489c47fb715e3d0473e86b2ca6991f7 Mon Sep 17 00:00:00 2001
From: dengfuping <fuping.dfp@antgroup.com>
Date: Thu, 25 Apr 2024 17:28:25 +0800
Subject: [PATCH] improve(design): checked and disabled Radio.Button style

---
 .dumirc.ts                                    |  1 +
 .../design/src/radio/demo/radio-button.tsx    | 36 +++++++++++++++++++
 packages/design/src/radio/demo/radio.tsx      | 31 ++++++++++++++++
 packages/design/src/radio/index.md            | 21 +++++++++++
 packages/design/src/theme/default.ts          |  4 +++
 5 files changed, 93 insertions(+)
 create mode 100644 packages/design/src/radio/demo/radio-button.tsx
 create mode 100644 packages/design/src/radio/demo/radio.tsx
 create mode 100644 packages/design/src/radio/index.md

diff --git a/.dumirc.ts b/.dumirc.ts
index 030f258d0..7615538a9 100644
--- a/.dumirc.ts
+++ b/.dumirc.ts
@@ -138,6 +138,7 @@ export default defineConfig({
             { title: 'Form 表单', link: '/components/form' },
             { title: 'Input 输入框', link: '/components/input' },
             { title: 'InputNumber 数字输入框', link: '/components/input-number' },
+            { title: 'Radio 单选框', link: '/components/radio' },
             { title: 'Select 选择器', link: '/components/select' },
             { title: 'TreeSelect 树选择', link: '/components/tree-select' },
           ],
diff --git a/packages/design/src/radio/demo/radio-button.tsx b/packages/design/src/radio/demo/radio-button.tsx
new file mode 100644
index 000000000..e126e579e
--- /dev/null
+++ b/packages/design/src/radio/demo/radio-button.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Radio, Space } 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">Hangzhou</Radio.Button>
+        <Radio.Button value="b">Shanghai</Radio.Button>
+        <Radio.Button value="c">Beijing</Radio.Button>
+        <Radio.Button value="d">Chengdu</Radio.Button>
+      </Radio.Group>
+      <Radio.Group onChange={onChange} defaultValue="a">
+        <Radio.Button value="a">Hangzhou</Radio.Button>
+        <Radio.Button value="b" disabled>
+          Shanghai
+        </Radio.Button>
+        <Radio.Button value="c">Beijing</Radio.Button>
+        <Radio.Button value="d">Chengdu</Radio.Button>
+      </Radio.Group>
+      <Radio.Group disabled onChange={onChange} defaultValue="a">
+        <Radio.Button value="a">Hangzhou</Radio.Button>
+        <Radio.Button value="b">Shanghai</Radio.Button>
+        <Radio.Button value="c">Beijing</Radio.Button>
+        <Radio.Button value="d">Chengdu</Radio.Button>
+      </Radio.Group>
+    </Space>
+  );
+};
+
+export default App;
diff --git a/packages/design/src/radio/demo/radio.tsx b/packages/design/src/radio/demo/radio.tsx
new file mode 100644
index 000000000..4b9ede0e4
--- /dev/null
+++ b/packages/design/src/radio/demo/radio.tsx
@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import { Radio, Space } from '@oceanbase/design';
+import type { RadioChangeEvent } from '@oceanbase/design';
+
+const App: React.FC = () => {
+  const [value, setValue] = useState('A');
+
+  const onChange = (e: RadioChangeEvent) => {
+    console.log('radio checked', e.target.value);
+    setValue(e.target.value);
+  };
+
+  return (
+    <Space direction="vertical">
+      <Radio.Group onChange={onChange} value={value}>
+        <Radio value="A">A</Radio>
+        <Radio value="B">B</Radio>
+        <Radio value="C">C</Radio>
+        <Radio value="D">D</Radio>
+      </Radio.Group>
+      <Radio.Group onChange={onChange} value={value} disabled={true}>
+        <Radio value="A">A</Radio>
+        <Radio value="B">B</Radio>
+        <Radio value="C">C</Radio>
+        <Radio value="D">D</Radio>
+      </Radio.Group>
+    </Space>
+  );
+};
+
+export default App;
diff --git a/packages/design/src/radio/index.md b/packages/design/src/radio/index.md
new file mode 100644
index 000000000..25e435405
--- /dev/null
+++ b/packages/design/src/radio/index.md
@@ -0,0 +1,21 @@
+---
+title: Radio 单选框
+nav:
+  title: 基础组件
+  path: /components
+demo:
+  cols: 2
+---
+
+- 🔥 完全继承 antd [Radio](https://ant.design/components/radio-cn) 的能力和 API，可无缝切换。
+- 💄 定制主题和样式，符合 OceanBase Design 设计规范。
+
+## 代码演示
+
+<!-- prettier-ignore -->
+<code src="./demo/radio.tsx" title="单选"></code>
+<code src="./demo/radio-button.tsx" title="单选按钮"></code>
+
+## API
+
+- 详见 antd Radio 文档: https://ant.design/components/radio-cn
diff --git a/packages/design/src/theme/default.ts b/packages/design/src/theme/default.ts
index 14a299798..297d4dfe1 100644
--- a/packages/design/src/theme/default.ts
+++ b/packages/design/src/theme/default.ts
@@ -84,6 +84,10 @@ const defaultTheme: ThemeConfig = {
     InputNumber: {
       handleVisible: true,
     },
+    Radio: {
+      // temporarily fix style for checked disabled Radio.Button
+      controlItemBgActiveDisabled: '#e2e8f3',
+    },
     Select: {
       // work for all multiple select component, including Select, TreeSelect and Cascader and so on
       multipleItemBg: '#F8FAFE',