fix(design): over length Radio should align to start

packages/design/src/index.ts

@@ -63,6 +63,9 @@ export type { InputProps } from './input';
 export { default as InputNumber } from './input-number';
 export type { InputNumberProps } from './input-number';
 
+export { default as Radio } from './radio';
+export type { RadioProps } from './radio';
+
 export { default as Select } from './select';
 export type { SelectProps } from './select';
 

packages/design/src/radio/demo/over-length.tsx

@@ -0,0 +1,26 @@
+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('long');
+
+  const onChange = (e: RadioChangeEvent) => {
+    console.log('radio checked', e.target.value);
+    setValue(e.target.value);
+  };
+
+  return (
+    <Radio.Group onChange={onChange} value={value}>
+      <Space direction="vertical">
+        <Radio value="long">
+          This is long long long long long long long long long long long long long long long long
+          long long long long long long long long text
+        </Radio>
+        <Radio value="short">This is short text</Radio>
+      </Space>
+    </Radio.Group>
+  );
+};
+
+export default App;

packages/design/src/radio/index.md

@@ -15,6 +15,7 @@ demo:
 <!-- prettier-ignore -->
 <code src="./demo/radio.tsx" title="单选"></code>
 <code src="./demo/radio-button.tsx" title="单选按钮"></code>
+<code src="./demo/over-length.tsx" title="超长内容"></code>
 
 ## API
 

packages/design/src/radio/index.tsx

@@ -0,0 +1,33 @@
+import { Radio as AntRadio } from 'antd';
+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 useStyle from './style';
+
+export * from 'antd/es/radio';
+
+const InternalRadio = React.forwardRef<RadioRef, AntRadioProps>(
+  ({ prefixCls: customizePrefixCls, className, ...restProps }, ref) => {
+    const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+    const prefixCls = getPrefixCls('radio', customizePrefixCls);
+    const { wrapSSR } = useStyle(prefixCls);
+    const radioCls = classNames(className);
+    return wrapSSR(
+      <AntRadio ref={ref} prefixCls={customizePrefixCls} className={radioCls} {...restProps} />
+    );
+  }
+);
+
+const Radio = InternalRadio as typeof Radio;
+
+Radio.Button = AntRadio.Button;
+Radio.Group = AntRadio.Group;
+// @ts-ignore
+Radio.__ANT_RADIO = AntRadio.__ANT_RADIO;
+
+if (process.env.NODE_ENV !== 'production') {
+  Radio.displayName = AntRadio.displayName;
+}
+
+export default Radio;

packages/design/src/radio/style/index.ts

@@ -0,0 +1,26 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+import { genComponentStyleHook } from '../../_util/genComponentStyleHook';
+
+export type RadioToken = FullToken<'Radio'>;
+
+export const genRadioStyle: GenerateStyle<RadioToken> = (token: RadioToken): CSSObject => {
+  const { componentCls, radioSize, fontSize, fontSizeLG, lineHeight } = token;
+  return {
+    [`${componentCls}-wrapper`]: {
+      [`${componentCls}`]: {
+        alignSelf: 'auto',
+        [`${componentCls}-inner`]: {
+          marginBottom: -(fontSize * lineHeight - (radioSize || fontSizeLG)) / 2,
+        },
+      },
+    },
+  };
+};
+
+export default (prefixCls: string) => {
+  const useStyle = genComponentStyleHook('Radio', token => {
+    return [genRadioStyle(token as RadioToken)];
+  });
+  return useStyle(prefixCls);
+};