feat(Radio): support variant option control (#2589)

* feat(radio): control radio item display style by RadioGroup variant

* feat(radio): supplement more demo about variant option for `RadioGroup`

* feat(radio): update snapshots

* fix(radio): snap generate error

src/radio/RadioGroup.tsx

@@ -85,21 +85,27 @@ const RadioGroup = (props: RadioGroupProps) => {
     return <div style={barStyle} className={`${classPrefix}-radio-group__bg-block`}></div>;
   };
 
-  const renderOptions = () =>
-    options.map((item) => {
+  const renderOptions = () => {
+    const Comp = variant.includes('filled') ? Radio.Button : Radio;
+    return options.map((item) => {
+      let label: ReactNode;
+      let value: string | number;
+      let disabled: boolean | undefined;
       if (typeof item === 'string' || typeof item === 'number') {
-        return (
-          <Radio value={item} key={item}>
-            {item}
-          </Radio>
-        );
+        label = item;
+        value = item;
+      } else {
+        label = item.label;
+        value = item.value;
+        disabled = item.disabled;
       }
       return (
-        <Radio value={item.value} key={item.value} disabled={item.disabled}>
-          {item.label}
-        </Radio>
+        <Comp value={value} key={value} disabled={disabled}>
+          {label}
+        </Comp>
       );
     });
+  };
 
   return (
     <CheckContext.Provider value={context}>

src/radio/__tests__/radio.test.tsx

@@ -79,6 +79,17 @@ describe('RadioGroup', () => {
     expect(container.firstChild.lastChild).toHaveClass('t-is-checked');
   });
 
+  test('variant', () => {
+    const { container } = render(
+      <Radio.Group
+        variant="primary-filled"
+        defaultValue="北京"
+        options={[{ value: '上海', label: '上海' }, { value: '广州', label: '广州', disabled: true }, '北京', 1]}
+      />,
+    );
+    expect(container.firstChild.firstChild).toHaveClass('t-radio-button');
+  });
+
   test('value is string', () => {
     const { container } = render(<Radio.Group options={['北京', '广州']} value="北京"></Radio.Group>);
     expect(container.firstChild.firstChild).toHaveClass('t-is-checked');

src/radio/_example/group.jsx

@@ -35,8 +35,20 @@ export default function RadioExample() {
       </Radio.Group>
 
       <Radio.Group value={city2} options={objOptions} allowUncheck onChange={setCity2} />
+      <Radio.Group
+        variant='default-filled'
+        value={city2}
+        options={objOptions}
+        onChange={setCity2}
+      />
 
       <Radio.Group value={city3} options={itemOptions} onChange={setCity3} />
+      <Radio.Group
+        variant='primary-filled'
+        value={city3}
+        options={itemOptions}
+        onChange={setCity3}
+      />
     </Space>
   );
 }