From 8e0c2e234c7526421ab1b5029973da105b5145a7 Mon Sep 17 00:00:00 2001
From: zcj <18137693952@163.com>
Date: Wed, 7 Sep 2022 11:10:36 +0800
Subject: [PATCH 1/2] =?UTF-8?q?style(radio):=20radio=E7=BB=84=E4=BB=B6=20s?=
 =?UTF-8?q?ize=20=E5=A4=A7=E5=B0=8F=E4=BD=BF=E7=94=A8scss=E5=8F=98?=
 =?UTF-8?q?=E9=87=8F=E5=90=91=E6=A0=87=E5=87=86=E7=BB=9F=E4=B8=80=20#1199?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/radio/src/radio-button.scss         | 32 ++++++++++++-------
 .../devui-vue/devui/radio/src/radio-types.ts  |  2 +-
 packages/devui-vue/devui/radio/src/radio.scss | 23 +++++++------
 3 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/packages/devui-vue/devui/radio/src/radio-button.scss b/packages/devui-vue/devui/radio/src/radio-button.scss
index cc6a245bd3..36b3ba94cd 100644
--- a/packages/devui-vue/devui/radio/src/radio-button.scss
+++ b/packages/devui-vue/devui/radio/src/radio-button.scss
@@ -1,32 +1,42 @@
 @import '../../styles-var/devui-var.scss';
 
+$devui-btn-sm-padding: var(--devui-btn-sm-padding, 0 16px);
+$devui-btn-padding: var(--devui-btn-padding, 0 20px);
+$devui-btn-lg-padding: var(--devui-btn-lg-padding, 0 24px);
+
 $font-size-map: (
   lg: $devui-font-size-lg,
-  md: $devui-font-size-lg,
+  md: $devui-font-size-md,
   sm: $devui-font-size-sm,
-  xs: $devui-font-size-sm,
+);
+$radio-label-height-map: (
+  lg: $devui-size-lg,
+  md: $devui-size-md,
+  sm: $devui-size-sm,
 );
 $button-padding-map: (
-  lg: 12px 20px,
-  md: 10px 20px,
-  sm: 9px 15px,
-  xs: 7px 15px,
+  lg: $devui-btn-lg-padding,
+  md: $devui-btn-padding,
+  sm: $devui-btn-sm-padding,
 );
 .#{$devui-prefix}-radio-button {
-  display: inline-block;
+  display: flex;
+  align-items: center;
   position: relative;
-  font-size: 14px;
+  padding: $devui-btn-padding;
+  height: $devui-size-md;
+  font-size: $devui-font-size-md;
   color: $devui-text;
-  padding: 10px 20px;
   cursor: pointer;
   border: 1px solid $devui-line;
   border-left: none;
-  line-height: 1;
   user-select: none;
-  @each $size in ('lg', 'md', 'sm', 'xs') {
+  @each $size in ('lg', 'md', 'sm') {
     &.#{$devui-prefix}-radio-button--#{$size} {
       font-size: map-get($font-size-map, #{$size});
       padding: map-get($button-padding-map, #{$size});
+      height: map-get($radio-label-height-map, #{$size});
+      line-height: map-get($radio-label-height-map, #{$size});
     }
   }
 
diff --git a/packages/devui-vue/devui/radio/src/radio-types.ts b/packages/devui-vue/devui/radio/src/radio-types.ts
index ccde5ba0ab..7ab79f763b 100644
--- a/packages/devui-vue/devui/radio/src/radio-types.ts
+++ b/packages/devui-vue/devui/radio/src/radio-types.ts
@@ -1,6 +1,6 @@
 import type { InjectionKey, PropType, Ref, ExtractPropTypes, ComputedRef } from 'vue';
 export type valueTypes = string | number | boolean;
-export type sizeTypes = 'lg' | 'md' | 'sm' | 'xs';
+export type sizeTypes = 'lg' | 'md' | 'sm';
 
 /** radio、radio-group 共用 props */
 const radioCommonProps = {
diff --git a/packages/devui-vue/devui/radio/src/radio.scss b/packages/devui-vue/devui/radio/src/radio.scss
index 54a4ffc256..06e4b192f4 100644
--- a/packages/devui-vue/devui/radio/src/radio.scss
+++ b/packages/devui-vue/devui/radio/src/radio.scss
@@ -2,21 +2,18 @@
 
 $font-size-map: (
   lg: $devui-font-size-lg,
-  md: $devui-font-size-lg,
+  md: $devui-font-size-md,
   sm: $devui-font-size-sm,
-  xs: $devui-font-size-sm,
 );
 $radio-width-map: (
-  lg: 16px,
+  lg: 18px,
   md: 16px,
   sm: 14px,
-  xs: 14px,
 );
 $radio-label-height-map: (
-  lg: 40px,
-  md: 36px,
-  sm: 32px,
-  xs: 28px,
+  lg: $devui-size-lg,
+  md: $devui-size-md,
+  sm: $devui-size-sm,
 );
 
 .#{$devui-prefix}-radio {
@@ -65,7 +62,8 @@ $radio-label-height-map: (
     .#{$devui-prefix}-radio__material-inner {
       opacity: 1;
       transform: scale(1);
-      transition: transform $devui-animation-duration-base $devui-animation-ease-in-out,
+      transition:
+        transform $devui-animation-duration-base $devui-animation-ease-in-out,
         opacity $devui-animation-duration-base $devui-animation-ease-in-out;
 
       &.disabled {
@@ -154,8 +152,11 @@ $radio-label-height-map: (
     border-radius: $devui-border-radius;
     padding: 0 15px 0 10px;
   }
-  @each $size in ('lg', 'md', 'sm', 'xs') {
+  @each $size in ('lg', 'md', 'sm') {
     &.#{$devui-prefix}-radio--#{$size} {
+      display: flex;
+      align-items: center;
+
       .#{$devui-prefix}-radio__label {
         font-size: map-get($font-size-map, #{$size});
       }
@@ -163,7 +164,6 @@ $radio-label-height-map: (
       .#{$devui-prefix}-radio__material {
         width: map-get($radio-width-map, #{$size});
         height: map-get($radio-width-map, #{$size});
-        line-height: map-get($radio-width-map, #{$size});
 
         & > svg {
           width: map-get($radio-width-map, #{$size});
@@ -173,7 +173,6 @@ $radio-label-height-map: (
 
       &.#{$devui-prefix}-radio--bordered {
         height: map-get($radio-label-height-map, #{$size});
-        line-height: map-get($radio-label-height-map, #{$size});
       }
     }
   }

From a6a64b89fac3a523b273706a772b13e93dd6a17b Mon Sep 17 00:00:00 2001
From: zcj <18137693952@163.com>
Date: Wed, 7 Sep 2022 11:13:17 +0800
Subject: [PATCH 2/2] =?UTF-8?q?docs(radio):=20radio=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3=E6=9B=B4=E6=96=B0=20=E5=8E=BB=E9=99=A4?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=20size=20xs=20=E7=B1=BB=E5=9E=8B=EF=BC=8C?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=BD=A2=E6=80=81=E7=A4=BA=E4=BE=8B=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui-vue/docs/components/radio/index.md  | 77 ++++++++++---------
 1 file changed, 42 insertions(+), 35 deletions(-)

diff --git a/packages/devui-vue/docs/components/radio/index.md b/packages/devui-vue/docs/components/radio/index.md
index 97beebc3ce..dbe11d2c09 100644
--- a/packages/devui-vue/docs/components/radio/index.md
+++ b/packages/devui-vue/docs/components/radio/index.md
@@ -166,7 +166,7 @@ export default defineComponent({
 ```vue
 <template>
   <d-radio-group direction="row" v-model="directionRowChoose">
-    <d-radio v-for="item in directionRowList" :key="item" :value="item"> The Radio value is: {{ item }} </d-radio>
+    <d-radio v-for="item in directionRowList" :key="item" :value="item"> The Radio value is: {{ item }}</d-radio>
   </d-radio-group>
 </template>
 
@@ -226,10 +226,11 @@ export default defineComponent({
 ```vue
 <template>
   <d-radio-group direction="row" v-model="customChoose1">
-    <d-radio v-for="item in customList1" :key="item" :value="item"> The Radio value is: {{ item }} </d-radio>
+    <d-radio v-for="item in customList1" :key="item" :value="item"> The Radio value is: {{ item }}</d-radio>
   </d-radio-group>
   <d-radio-group direction="row" v-model="customChoose2">
-    <d-radio v-for="item in customList2" :key="item.name" :value="item.name"> The Radio value is: {{ item.name }} </d-radio>
+    <d-radio v-for="item in customList2" :key="item.name" :value="item.name"> The Radio value is: {{ item.name }}
+    </d-radio>
   </d-radio-group>
 </template>
 
@@ -263,14 +264,17 @@ export default defineComponent({
 
 ```vue
 <template>
+  <h4>Small</h4>
   <d-radio-group
     :values="sizeBorderList"
-    v-model="sizeBorderChoose1"
-    size="lg"
+    v-model="sizeBorderChoose3"
+    size="sm"
     border
     direction="row"
     style="margin-bottom: 10px;"
   ></d-radio-group>
+
+  <h4>Middle</h4>
   <d-radio-group
     :values="sizeBorderList"
     v-model="sizeBorderChoose2"
@@ -279,18 +283,16 @@ export default defineComponent({
     direction="row"
     style="margin-bottom: 10px;"
   ></d-radio-group>
+
+  <h4>Large</h4>
   <d-radio-group
     :values="sizeBorderList"
-    v-model="sizeBorderChoose3"
-    size="sm"
+    v-model="sizeBorderChoose1"
+    size="lg"
     border
-    disabled
     direction="row"
     style="margin-bottom: 10px;"
   ></d-radio-group>
-  <d-radio-group v-model="sizeBorderChoose4" size="xs" border direction="row" style="margin-bottom: 10px;">
-    <d-radio v-for="item in sizeBorderList" :key="item" :value="item">{{ item }} </d-radio>
-  </d-radio-group>
 </template>
 
 <script>
@@ -302,14 +304,12 @@ export default defineComponent({
     const sizeBorderChoose1 = ref('Spring');
     const sizeBorderChoose2 = ref('Spring');
     const sizeBorderChoose3 = ref('Spring');
-    const sizeBorderChoose4 = ref('Spring');
 
     return {
       sizeBorderList,
       sizeBorderChoose1,
       sizeBorderChoose2,
       sizeBorderChoose3,
-      sizeBorderChoose4,
     };
   },
 });
@@ -320,25 +320,30 @@ export default defineComponent({
 
 ### 按钮形态
 
-数组源可为普通数组、对象数组等。
+需要把 `d-radio` 替换成 `d-radio-button`， 数组源可为普通数组、对象数组等。
 
 :::demo
 
 ```vue
+
 <template>
-  <d-radio-group direction="row" v-model="buttonChoose1" size="lg" style="margin-bottom: 10px;" fill="rgb(255,193,7)" text-color="#ca3d3d">
-    <d-radio-button v-for="item in buttonList1" :key="item" :value="item"> {{ item }} </d-radio-button>
+  <h4>禁用</h4>
+  <d-radio-group direction="row" v-model="buttonChoose1" size="sm" style="margin-bottom: 10px;">
+    <d-radio-button v-for="item in buttonList1" :key="item.name" :value="item.name" :disabled="item.disabled"
+    >{{ item.name }}
+    </d-radio-button>
   </d-radio-group>
+
+  <h4>默认</h4>
   <d-radio-group direction="row" v-model="buttonChoose2" size="md" style="margin-bottom: 10px;">
-    <d-radio-button v-for="item in buttonList2" :key="item.name" :value="item.name">{{ item.name }} </d-radio-button>
+    <d-radio-button v-for="item in buttonList2" :key="item.name" :value="item.name">{{ item.name }}</d-radio-button>
   </d-radio-group>
-  <d-radio-group direction="row" v-model="buttonChoose3" size="sm" style="margin-bottom: 10px;">
-    <d-radio-button v-for="item in buttonList3" :key="item.name" :value="item.name" :disabled="item.disabled"
-      >{{ item.name }}
-    </d-radio-button>
-  </d-radio-group>
-  <d-radio-group direction="row" v-model="buttonChoose4" size="xs" style="margin-bottom: 10px;" disabled>
-    <d-radio-button v-for="item in buttonList2" :key="item.name" :value="item.name">{{ item.name }} </d-radio-button>
+
+  <h4>自定义填充颜色、文字颜色</h4>
+  <d-radio-group direction="row" v-model="buttonChoose3" size="lg" style="margin-bottom: 10px;" fill="rgb(255,193,7)"
+                 text-color="#ca3d3d"
+  >
+    <d-radio-button v-for="item in buttonList3" :key="item" :value="item"> {{ item }}</d-radio-button>
   </d-radio-group>
 </template>
 
@@ -347,15 +352,18 @@ import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
   setup() {
-    const buttonList1 = ref(['radio1', 'radio2', 'radio3']);
-    let buttonChoose1 = ref('radio1');
-
-    const buttonList2 = [{ name: 'radio1' }, { name: 'radio2' }, { name: 'radio3' }];
-    let buttonChoose2 = ref('radio1');
-    const buttonList3 = [{ name: 'radio1', disabled: true }, { name: 'radio2' }, { name: 'radio3' }];
-    let buttonChoose3 = ref('radio1');
-    let buttonChoose4 = ref('radio1');
-
+    const buttonList1 = [{
+      name: 'Spring',
+      disabled: true
+    }, { name: 'Summer' }, { name: 'Autumn' }, { name: 'Winter' }];
+    let buttonChoose1 = ref('Summer');
+    
+    const buttonList2 = [{ name: 'Spring' }, { name: 'Summer' }, { name: 'Autumn' }, { name: 'Winter' }];
+    let buttonChoose2 = ref('Spring');
+
+    const buttonList3 = ref(['Spring', 'Summer', 'Autumn', 'Winter']);
+    let buttonChoose3 = ref('Spring');
+    
     return {
       buttonList1,
       buttonChoose1,
@@ -363,7 +371,6 @@ export default defineComponent({
       buttonChoose2,
       buttonList3,
       buttonChoose3,
-      buttonChoose4,
     };
   },
 });
@@ -424,5 +431,5 @@ export default defineComponent({
 #### IRadioSize
 
 ```ts
-type IRadioSize = 'lg' | 'md' | 'sm' | 'xs';
+type IRadioSize = 'lg' | 'md' | 'sm';
 ```