From a54098393f56063c65fce3f2f19ec96c909257d5 Mon Sep 17 00:00:00 2001
From: kooriookami <38392315+kooriookami@users.noreply.github.com>
Date: Fri, 27 Aug 2021 20:31:40 +0800
Subject: [PATCH] style: radio support size prop both border or not (#3103)

---
 packages/components/radio/src/radio.vue    |  2 +-
 packages/theme-chalk/src/common/var.scss   | 30 ++++++++--------
 packages/theme-chalk/src/radio-button.scss |  1 +
 packages/theme-chalk/src/radio-group.scss  |  3 --
 packages/theme-chalk/src/radio.scss        | 41 +++++++++++++---------
 website/docs/en-US/radio.md                | 32 +++++++++++++----
 website/docs/es/radio.md                   | 32 +++++++++++++----
 website/docs/fr-FR/radio.md                | 30 +++++++++++++---
 website/docs/jp/radio.md                   | 32 +++++++++++++----
 website/docs/zh-CN/radio.md                | 32 +++++++++++++----
 10 files changed, 170 insertions(+), 65 deletions(-)

diff --git a/packages/components/radio/src/radio.vue b/packages/components/radio/src/radio.vue
index 8e3a3a7ca8..e38f2b05c4 100644
--- a/packages/components/radio/src/radio.vue
+++ b/packages/components/radio/src/radio.vue
@@ -2,7 +2,7 @@
   <label
     class="el-radio"
     :class="{
-      [`el-radio--${radioSize || ''}`]: border && radioSize,
+      [`el-radio--${radioSize || ''}`]: radioSize,
       'is-disabled': isDisabled,
       'is-focus': focus,
       'is-bordered': border,
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 28f6d3b3fb..945c7ab7fb 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -224,6 +224,17 @@ $--radio: map.merge(
   $--radio
 );
 
+$--radio-height: () !default;
+$--radio-height: map.merge(
+  (
+    'default': 40px,
+    'medium': 36px,
+    'small': 32px,
+    'mini': 28px,
+  ),
+  $--radio-height
+);
+
 $--radio-button: () !default;
 $--radio-button: map.merge(
   (
@@ -263,10 +274,10 @@ $--radio-input-border-color-hover: var(--el-color-primary) !default;
 $--radio-bordered-padding: () !default;
 $--radio-bordered-padding: map.merge(
   (
-    'default': 12px 20px 0 10px,
-    'medium': 10px 20px 0 10px,
-    'small': 8px 15px 0 10px,
-    'mini': 6px 15px 0 10px,
+    'default': 0 20px 0 10px,
+    'medium': 0 20px 0 10px,
+    'small': 0 15px 0 10px,
+    'mini': 0 15px 0 10px,
   ),
   $--radio-bordered-padding
 );
@@ -291,17 +302,6 @@ $--radio-bordered-input-width: map.merge(
   $--radio-bordered-input-width
 );
 
-$--radio-bordered-height: () !default;
-$--radio-bordered-height: map.merge(
-  (
-    'default': 40px,
-    'medium': 36px,
-    'small': 32px,
-    'mini': 28px,
-  ),
-  $--radio-bordered-height
-);
-
 /* Select
 -------------------------- */
 $--select: () !default;
diff --git a/packages/theme-chalk/src/radio-button.scss b/packages/theme-chalk/src/radio-button.scss
index 8beca4e756..88dc8cf4dd 100644
--- a/packages/theme-chalk/src/radio-button.scss
+++ b/packages/theme-chalk/src/radio-button.scss
@@ -42,6 +42,7 @@
     position: relative;
     cursor: pointer;
     transition: var(--el-transition-all);
+    @include utils-user-select(none);
 
     @include button-size(
       map.get($--button-padding-vertical, 'default'),
diff --git a/packages/theme-chalk/src/radio-group.scss b/packages/theme-chalk/src/radio-group.scss
index 86ac150f1b..a7279c78af 100644
--- a/packages/theme-chalk/src/radio-group.scss
+++ b/packages/theme-chalk/src/radio-group.scss
@@ -2,8 +2,5 @@
 @import 'common/var';
 
 @include b(radio-group) {
-  display: inline-block;
-  line-height: 1;
-  vertical-align: middle;
   font-size: 0;
 }
diff --git a/packages/theme-chalk/src/radio.scss b/packages/theme-chalk/src/radio.scss
index 71a87afc19..89aa6ce7ea 100644
--- a/packages/theme-chalk/src/radio.scss
+++ b/packages/theme-chalk/src/radio.scss
@@ -13,22 +13,29 @@
 @include b(radio) {
   color: var(--el-radio-font-color);
   font-weight: var(--el-radio-font-weight);
-  line-height: 1;
   position: relative;
   cursor: pointer;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   white-space: nowrap;
   outline: none;
   font-size: var(--el-font-size-base);
+  user-select: none;
   margin-right: 30px;
+  height: map.get($--radio-height, 'default');
   @include utils-user-select(none);
 
+  @each $size in (medium, small, mini) {
+    &.#{$namespace}-radio--#{$size} {
+      height: map.get($--radio-height, $size);
+    }
+  }
+
   @include when(bordered) {
     padding: map.get($--radio-bordered-padding, 'default');
     border-radius: var(--el-border-radius-base);
     border: var(--el-border-base);
     box-sizing: border-box;
-    height: map.get($--radio-bordered-height, 'default');
 
     &.is-checked {
       border-color: var(--el-color-primary);
@@ -42,19 +49,20 @@
     & + .#{$namespace}-radio.is-bordered {
       margin-left: 10px;
     }
-  }
 
-  @each $size in (medium, small, mini) {
-    &.is-bordered {
-      padding: map.get($--radio-bordered-padding, $size);
-      border-radius: var(--el-border-radius-base);
-      height: map.get($--radio-bordered-height, $size);
-      .#{$namespace}-radio__label {
-        font-size: map.get($--button-font-size, $size);
-      }
-      .#{$namespace}-radio__inner {
-        height: map.get($--radio-bordered-input-height, $size);
-        width: map.get($--radio-bordered-input-width, $size);
+    @each $size in (medium, small, mini) {
+      &.#{$namespace}-radio--#{$size} {
+        padding: map.get($--radio-bordered-padding, $size);
+        border-radius: var(--el-border-radius-base);
+
+        .#{$namespace}-radio__label {
+          font-size: map.get($--button-font-size, $size);
+        }
+
+        .#{$namespace}-radio__inner {
+          height: map.get($--radio-bordered-input-height, $size);
+          width: map.get($--radio-bordered-input-width, $size);
+        }
       }
     }
   }
@@ -67,8 +75,7 @@
     white-space: nowrap;
     cursor: pointer;
     outline: none;
-    display: inline-block;
-    line-height: 1;
+    display: inline-flex;
     position: relative;
     vertical-align: middle;
 
diff --git a/website/docs/en-US/radio.md b/website/docs/en-US/radio.md
index 9c3c65a4e9..2f03735349 100644
--- a/website/docs/en-US/radio.md
+++ b/website/docs/en-US/radio.md
@@ -9,15 +9,32 @@ Radio should not have too many options. Otherwise, use the Select component inst
 :::demo Creating a radio component is easy, you just need to bind a variable to Radio's `v-model`. It equals to the value of `label` of the chosen radio. The type of `label` is `String`, `Number` or `Boolean`.
 ```html
 <template>
-  <el-radio v-model="radio" label="1">Option A</el-radio>
-  <el-radio v-model="radio" label="2">Option B</el-radio>
+  <div>
+    <el-radio v-model="radio1" label="1">Option 1</el-radio>
+    <el-radio v-model="radio1" label="2">Option 2</el-radio>
+  </div>
+  <div>
+    <el-radio v-model="radio2" label="1" size="medium">Option 1</el-radio>
+    <el-radio v-model="radio2" label="2" size="medium">Option 2</el-radio>
+  </div>
+  <div>
+    <el-radio v-model="radio3" label="1" size="small">Option 1</el-radio>
+    <el-radio v-model="radio3" label="2" size="small">Option 2</el-radio>
+  </div>
+  <div>
+    <el-radio v-model="radio4" label="1" size="mini">Option 1</el-radio>
+    <el-radio v-model="radio4" label="2" size="mini">Option 2</el-radio>
+  </div>
 </template>
 
 <script>
   export default {
     data () {
       return {
-        radio: '1'
+        radio1: '1',
+        radio2: '1',
+        radio3: '1',
+        radio4: '1',
       };
     }
   }
@@ -29,7 +46,10 @@ Radio should not have too many options. Otherwise, use the Select component inst
   export default defineComponent({
     setup() {
       return {
-        radio: ref('1'),
+        radio1: ref('1'),
+        radio2: ref('1'),
+        radio3: ref('1'),
+        radio4: ref('1'),
       }
     }
   })
@@ -250,7 +270,7 @@ model-value / v-model | binding value | string / number / boolean | — | —
 label | the value of Radio | string / number / boolean | — | —
 disabled | whether Radio is disabled | boolean | — | false
 border  | whether to add a border around Radio  | boolean   | — | false
-size  | size of the Radio, only works when `border` is true  | string  | medium / small / mini | —
+size  | size of the Radio  | string  | medium / small / mini | —
 name | native 'name' attribute | string    |      —         |     —
 
 ### Radio Events
@@ -264,7 +284,7 @@ name | native 'name' attribute | string    |      —         |     —
  Attribute      | Description          | Type      | Accepted Values       | Default
 ---- | ---- | ---- | ---- | ----
 model-value / v-model | binding value | string / number / boolean | — | —
-size | the size of radio buttons or bordered radios | string | medium / small / mini | —
+size | the size of radio | string | medium / small / mini | —
 disabled  | whether the nesting radios are disabled | boolean   | — | false
 text-color | font color when button is active | string   | — | #ffffff   |
 fill  | border and background color when button is active | string   | — | #409EFF   |
diff --git a/website/docs/es/radio.md b/website/docs/es/radio.md
index 3deb7f7575..01725e3904 100644
--- a/website/docs/es/radio.md
+++ b/website/docs/es/radio.md
@@ -7,15 +7,32 @@ El elemento Radio no debe tener muchas opciones. De otra manera, utilice el comp
 :::demo Crear un elemento Radio es fácil, solo necesita enlazar(`bind`) una variable a la directiva `v-model` del Radio. Va a ser igual al valor `label` del Radio seleccionado. El tipo de dato de `label` es `String`, `Number` o `Boolean`.
 ```html
 <template>
-  <el-radio v-model="radio" label="1">Option A</el-radio>
-  <el-radio v-model="radio" label="2">Option B</el-radio>
+  <div>
+    <el-radio v-model="radio1" label="1">Option 1</el-radio>
+    <el-radio v-model="radio1" label="2">Option 2</el-radio>
+  </div>
+  <div>
+    <el-radio v-model="radio2" label="1" size="medium">Option 1</el-radio>
+    <el-radio v-model="radio2" label="2" size="medium">Option 2</el-radio>
+  </div>
+  <div>
+    <el-radio v-model="radio3" label="1" size="small">Option 1</el-radio>
+    <el-radio v-model="radio3" label="2" size="small">Option 2</el-radio>
+  </div>
+  <div>
+    <el-radio v-model="radio4" label="1" size="mini">Option 1</el-radio>
+    <el-radio v-model="radio4" label="2" size="mini">Option 2</el-radio>
+  </div>
 </template>
 
 <script>
   export default {
     data () {
       return {
-        radio: '1'
+        radio1: '1',
+        radio2: '1',
+        radio3: '1',
+        radio4: '1',
       };
     }
   }
@@ -27,7 +44,10 @@ El elemento Radio no debe tener muchas opciones. De otra manera, utilice el comp
   export default defineComponent({
     setup() {
       return {
-        radio: ref('1'),
+        radio1: ref('1'),
+        radio2: ref('1'),
+        radio3: ref('1'),
+        radio4: ref('1'),
       }
     }
   })
@@ -248,7 +268,7 @@ Radio con estilo de botón.
 | label    | el valor del Radio                       | string / number / boolean | —                     | —           |
 | disabled | si el Radio está deshabilitado           | boolean                   | —                     | false       |
 | border   | agregar borde alrededor del elemento Radio | boolean                   | —                     | false       |
-| size     | tamaño del elemento Radio, solo funciona si `border` es verdadero | string                    | medium / small / mini | —           |
+| size     | tamaño del elemento Radio | string                    | medium / small / mini | —           |
 | name     | atributo nativo `name`                 | string                    | —                     | —           |
 
 ### Atributos de Radio-button
@@ -264,7 +284,7 @@ Radio con estilo de botón.
 | Atributo   | Descripción                              | Tipo    | Valores Aceptado      | Valores por defecto |
 | ---------- | ---------------------------------------- | ------- | --------------------- | ------------------- |
 | model-value / v-model | valor enlazado | string / number / boolean | — | — |
-| size       | tamaño de los `radio buttons` o `bordered radios` | string  | medium / small / mini | —                   |
+| size       | the size of radio | string  | medium / small / mini | —                   |
 | disabled   | si la anidación de radios está deshabilitada | boolean | —                     | false               |
 | text-color | color de las letras cuando el botón está activo | string  | —                     | #ffffff             |
 | fill       | color del borde y fondo cuando el botón está activo | string  | —                     | #409EFF             |
diff --git a/website/docs/fr-FR/radio.md b/website/docs/fr-FR/radio.md
index 67109cfb83..3e07e94db0 100644
--- a/website/docs/fr-FR/radio.md
+++ b/website/docs/fr-FR/radio.md
@@ -9,15 +9,32 @@ Radio ne devrait pas avoir trop d'options. Dans ce cas utilisez plutôt Select.
 :::demo Créer un composant Radio est facile, vous avez juste besoin de lier les `v-model` des options. Chacun équivaut à la valeur de `label` du radio correspondant. Le type de `label` est `String`, `Number` ou `Boolean`.
 ```html
 <template>
-  <el-radio v-model="radio" label="1">Option A</el-radio>
-  <el-radio v-model="radio" label="2">Option B</el-radio>
+  <div>
+    <el-radio v-model="radio1" label="1">Option 1</el-radio>
+    <el-radio v-model="radio1" label="2">Option 2</el-radio>
+  </div>
+  <div>
+    <el-radio v-model="radio2" label="1" size="medium">Option 1</el-radio>
+    <el-radio v-model="radio2" label="2" size="medium">Option 2</el-radio>
+  </div>
+  <div>
+    <el-radio v-model="radio3" label="1" size="small">Option 1</el-radio>
+    <el-radio v-model="radio3" label="2" size="small">Option 2</el-radio>
+  </div>
+  <div>
+    <el-radio v-model="radio4" label="1" size="mini">Option 1</el-radio>
+    <el-radio v-model="radio4" label="2" size="mini">Option 2</el-radio>
+  </div>
 </template>
 
 <script>
   export default {
     data () {
       return {
-        radio: '1'
+        radio1: '1',
+        radio2: '1',
+        radio3: '1',
+        radio4: '1',
       };
     }
   }
@@ -29,7 +46,10 @@ Radio ne devrait pas avoir trop d'options. Dans ce cas utilisez plutôt Select.
   export default defineComponent({
     setup() {
       return {
-        radio: ref('1'),
+        radio1: ref('1'),
+        radio2: ref('1'),
+        radio3: ref('1'),
+        radio4: ref('1'),
       }
     }
   })
@@ -250,7 +270,7 @@ Des radios affichés comme des boutons standards.
 | label | La valeur du radio. | string / number / boolean | — | — |
 | disabled | Si le radio est désactivé. | boolean | — | false |
 | border  | Si une bordure doit être affichée autour du radio. | boolean   | — | false |
-| size  | Taille du radio, ne marche que si `border` est `true`. | string  | medium / small / mini | — |
+| size  | Taille du radio | string  | medium / small / mini | — |
 | name | Attribut 'name' natif. | string | — | — |
 
 ### Évènements de Radio
diff --git a/website/docs/jp/radio.md b/website/docs/jp/radio.md
index bcaf7a0cf2..e85e3e7e85 100644
--- a/website/docs/jp/radio.md
+++ b/website/docs/jp/radio.md
@@ -9,15 +9,32 @@
 :::demo radioコンポーネントの作成は簡単で、Radioの `v-model` に変数をバインドするだけです。これは選択したラジオの `label` の値に等しくなります。ラベルの型は `String`, `Number`, `Boolean` のいずれかです。
 ```html
 <template>
-  <el-radio v-model="radio" label="1">Option A</el-radio>
-  <el-radio v-model="radio" label="2">Option B</el-radio>
+  <div>
+    <el-radio v-model="radio1" label="1">Option 1</el-radio>
+    <el-radio v-model="radio1" label="2">Option 2</el-radio>
+  </div>
+  <div>
+    <el-radio v-model="radio2" label="1" size="medium">Option 1</el-radio>
+    <el-radio v-model="radio2" label="2" size="medium">Option 2</el-radio>
+  </div>
+  <div>
+    <el-radio v-model="radio3" label="1" size="small">Option 1</el-radio>
+    <el-radio v-model="radio3" label="2" size="small">Option 2</el-radio>
+  </div>
+  <div>
+    <el-radio v-model="radio4" label="1" size="mini">Option 1</el-radio>
+    <el-radio v-model="radio4" label="2" size="mini">Option 2</el-radio>
+  </div>
 </template>
 
 <script>
   export default {
     data () {
       return {
-        radio: '1'
+        radio1: '1',
+        radio2: '1',
+        radio3: '1',
+        radio4: '1',
       };
     }
   }
@@ -29,7 +46,10 @@
   export default defineComponent({
     setup() {
       return {
-        radio: ref('1'),
+        radio1: ref('1'),
+        radio2: ref('1'),
+        radio3: ref('1'),
+        radio4: ref('1'),
       }
     }
   })
@@ -250,7 +270,7 @@ model-value / v-model | バインド値 | string / number / boolean | — | —
 label | ラジオの値 | string / number / boolean | — | —
 disabled | ラジオが無効になっているかどうか | boolean | — | false
 border  | ラジオの周りにボーダーを追加するかどうか  | boolean   | — | false
-size  | ラジオのサイズ、`border` が真の場合のみ動作します。  | string  | medium / small / mini | —
+size  | ラジオのサイズ  | string  | medium / small / mini | —
 name | ネイティブ 'name' 属性 | string    |      —         |     —
 
 ### ラジオイベント
@@ -264,7 +284,7 @@ name | ネイティブ 'name' 属性 | string    |      —         |     —
  Attribute      | Description          | Type      | Accepted Values       | Default
 ---- | ---- | ---- | ---- | ----
 model-value / v-model | バインディング値 | string / number / boolean | — | —
-size | ラジオボタンのボーダーもしくはラジオボタンの大きさ | string | medium / small / mini | —
+size | ラジオボタンの大きさ | string | medium / small / mini | —
 disabled  | ネストしたラジオが無効になっているかどうか | boolean   | — | false
 text-color | ボタンがアクティブなときのフォント色 | string   | — | #ffffff   |
 fill  | ボタンがアクティブなときの境界線と背景色 | string   | — | #409EFF   |
diff --git a/website/docs/zh-CN/radio.md b/website/docs/zh-CN/radio.md
index e89b3883a3..b436a43129 100644
--- a/website/docs/zh-CN/radio.md
+++ b/website/docs/zh-CN/radio.md
@@ -10,15 +10,32 @@
 
 ```html
 <template>
-  <el-radio v-model="radio" label="1">备选项</el-radio>
-  <el-radio v-model="radio" label="2">备选项</el-radio>
+  <div>
+    <el-radio v-model="radio1" label="1">备选项1</el-radio>
+    <el-radio v-model="radio1" label="2">备选项2</el-radio>
+  </div>
+  <div>
+    <el-radio v-model="radio2" label="1" size="medium">备选项1</el-radio>
+    <el-radio v-model="radio2" label="2" size="medium">备选项2</el-radio>
+  </div>
+  <div>
+    <el-radio v-model="radio3" label="1" size="small">备选项1</el-radio>
+    <el-radio v-model="radio3" label="2" size="small">备选项2</el-radio>
+  </div>
+  <div>
+    <el-radio v-model="radio4" label="1" size="mini">备选项1</el-radio>
+    <el-radio v-model="radio4" label="2" size="mini">备选项2</el-radio>
+  </div>
 </template>
 
 <script>
   export default {
     data () {
       return {
-        radio: '1'
+        radio1: '1',
+        radio2: '1',
+        radio3: '1',
+        radio4: '1',
       };
     }
   }
@@ -30,7 +47,10 @@
   export default defineComponent({
     setup() {
       return {
-        radio: ref('1'),
+        radio1: ref('1'),
+        radio2: ref('1'),
+        radio3: ref('1'),
+        radio4: ref('1'),
       }
     }
   })
@@ -252,7 +272,7 @@
 | label     | Radio 的 value   | string / number / boolean    |       —        |      —   |
 | disabled  | 是否禁用    | boolean   | — | false   |
 | border  | 是否显示边框  | boolean   | — | false   |
-| size  | Radio 的尺寸，仅在 border 为真时有效  | string  | medium / small / mini | — |
+| size  | Radio 的尺寸  | string  | medium / small / mini | — |
 | name | 原生 name 属性 | string    |      —         |     —    |
 
 ### Radio Events
@@ -264,7 +284,7 @@
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | model-value / v-model | 绑定值 | string / number / boolean | — | — |
-| size     | 单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效   | string  | medium / small / mini |    —     |
+| size     | 单选框组尺寸   | string  | medium / small / mini |    —     |
 | disabled  | 是否禁用    | boolean   | — | false   |
 | text-color  | 按钮形式的 Radio 激活时的文本颜色    | string   | — | #ffffff   |
 | fill  | 按钮形式的 Radio 激活时的填充色和边框色    | string   | — | #409EFF   |