feat: [RadioGroup] options added addonStyles/addonClassName/addonId/extraId (#2706)

packages/semi-ui/radio/_story/radio.stories.jsx

@@ -2,8 +2,8 @@ import React, { useState } from 'react';
 import Button from '../../button';
 import Space from '../../space';
 
-import { Radio, RadioGroup, Form, Tooltip } from '../../index';
-import { Row, Col } from '../../grid';
+import { Col, Row } from '../../grid';
+import { Form, Radio, RadioGroup, Tooltip } from '../../index';
 import './radio.scss';
 
 export default {
@@ -289,15 +289,25 @@ export const RadioGroupWithOptions = () => {
     { label: 'Orange', value: 'Orange', disabled: false },
   ];
 
+  const optionsWithAddonStyle = [
+    { label: 'Apple', value: 'Apple', addonStyle: { color: 'red' } },
+    { label: 'Pear', value: 'Pear' },
+    { label: 'Orange', value: 'Orange', disabled: true },
+  ];
+
   function onChange(event) {
     console.log(event);
   }
 
   return (
-    <div>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
       <RadioGroup name="apple" options={plainOptions} onChange={onChange} />
       <RadioGroup name="apple" options={options} onChange={onChange} />
       <RadioGroup name="apple" disabled options={optionsWithDisabled} onChange={onChange} />
+      <span>自定义样式</span>
+      <RadioGroup name="apple" options={optionsWithAddonStyle} onChange={onChange} />
+      <span>PureCard 自定义样式</span>
+      <RadioGroup type='pureCard' name="apple" options={optionsWithAddonStyle} onChange={onChange} />
     </div>
   );
 };

packages/semi-ui/radio/radioGroup.tsx

@@ -1,16 +1,16 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { noop } from 'lodash';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 import { radioGroupClasses as css, strings } from '@douyinfe/semi-foundation/radio/constants';
 import RadioGroupFoundation, { RadioGroupAdapter } from '@douyinfe/semi-foundation/radio/radioGroupFoundation';
 import { RadioChangeEvent } from '@douyinfe/semi-foundation/radio/radioInnerFoundation';
 
-import BaseComponent from '../_base/baseComponent';
 import { ArrayElement } from '../_base/base';
-import Radio, { RadioType } from './radio';
+import BaseComponent from '../_base/baseComponent';
 import Context, { RadioGroupButtonSize, RadioMode } from './context';
+import Radio, { RadioType } from './radio';
 
 export interface OptionItem {
     label?: React.ReactNode;
@@ -18,7 +18,11 @@ export interface OptionItem {
     disabled?: boolean;
     extra?: React.ReactNode;
     style?: React.CSSProperties;
-    className?: string
+    className?: string;
+    addonId?: string;
+    addonStyle?: React.CSSProperties;
+    addonClassName?: string;
+    extraId?: string
 }
 export type Options = string[] | Array<OptionItem>;
 
@@ -191,6 +195,10 @@ class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState> {
                             extra={option.extra}
                             className={option.className}
                             style={option.style}
+                            addonId={option.addonId}
+                            addonStyle={option.addonStyle}
+                            addonClassName={option.addonClassName}
+                            extraId={option.extraId}
                         >
                             {option.label}
                         </Radio>