fix(radio): modifies the text color of the disabled selected state (#815

)

src/components/radio/Radio.mdx

@@ -0,0 +1,22 @@
+import { Subtitle, ArgsTable } from '@storybook/addon-docs/blocks';
+import Radio, { RadioGroup } from './index';
+
+# Sign 标记
+
+<Subtitle>
+  用于在多个备选项中选中单个状态。和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。
+</Subtitle>
+
+## 参数说明
+
+<ArgsTable of={Radio} />
+
+## 代码演示
+
+### 默认
+
+[Example](/?path=/story/basic-components-radio--default)
+
+### 排列组合
+
+[Example](/?path=/story/basic-components-radio--group)

src/components/radio/Radio.stories.tsx

@@ -1,46 +1,79 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
-import Radio, { RadioGroup } from './index'
-import { IRadioProps, IRadioGroupProps,  } from './interface'
-
-import './style'
+import { withDesign } from 'storybook-addon-designs';
+import Radio, { RadioGroup } from './index';
+import { IRadioProps, IRadioGroupProps } from './interface';
+import Docs from './Radio.mdx';
+import './style';
 
 export default {
-    title: 'Components/Basic/Radio',
-    component: Radio,
-    subcomponents: { RadioGroup },
+  title: 'Basic Components/Radio',
+  component: Radio,
+  subcomponents: { RadioGroup },
+  decorators: [withDesign],
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/kP3A6S2fLUGVVMBgDuUx0f/GrowingIO-Design-Components?node-id=889%3A1204',
+      allowFullscreen: true,
+    },
+    docs: {
+      page: Docs,
+    },
+  },
 } as Meta;
 
-const Template : Story<IRadioProps> = (args) => <Radio {...args}>Nomal</Radio>;
+const radioStyle = {
+  width: '200px',
+};
+
+const Template: Story<IRadioProps> = (args) => (
+  <div>
+    <Radio style={radioStyle} {...args}>
+      Normal
+    </Radio>
+    <Radio style={radioStyle} {...args} checked>
+      Selected
+    </Radio>
+    <br />
+    <br />
+    <Radio style={radioStyle} {...args} disabled>
+      Disabled-Normal
+    </Radio>
+    <Radio style={radioStyle} {...args} checked disabled>
+      Disabled-Selected
+    </Radio>
+  </div>
+);
 export const Default = Template.bind({});
 Default.args = {
-    checked: true,
-}
+  disabled: false,
+  checked: false,
+};
 
-const options = [
+const TemplateGroup: Story<IRadioGroupProps> = (args) => (
+  <>
+    <RadioGroup {...args} />
+  </>
+);
+export const Group = TemplateGroup.bind({});
+Group.args = {
+  disabled: false,
+  direction: 'vertical',
+  defaultValue: '',
+  options: [
     {
       label: 'inOptionA',
       value: 'inOptionA',
     },
+    {
+      label: 'inOptionB',
+      value: 'inOptionB',
+    },
     {
       label: 'inOptionDisabled',
       value: 'inOptionDisabled',
       disabled: true,
     },
-]
-const TemplateGroup : Story<IRadioGroupProps> = (args) => (
-  <>
-    <RadioGroup {...args} />
-    <br />
-    <RadioGroup {...args}>
-      <Radio value="childA">ChildA</Radio>
-      <Radio value="childDisabled">
-        ChildDisabled
-      </Radio>
-    </RadioGroup>
-  </>
-)
-export const Group = TemplateGroup.bind({});
-Group.args = {
-    options,
-}
+  ],
+};

src/components/radio/style/index.less

@@ -142,6 +142,13 @@
   }
 }
 
+// The selected but disabled text color
+.@{radio-checked}.@{radio-disabled} {
+  & + * {
+    opacity: 1;
+  }
+}
+
 // radio group
 .@{radio__group} {
   display: inline-flex;