Merge pull request #570 from oceanbase/zhuyue-dev

improve(design): checked and disabled Radio.Button style

.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' },
           ],

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;

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;

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

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',