From d4b819961835e0f9dc96012e3f33aa8697c9be79 Mon Sep 17 00:00:00 2001
From: msidolphin <msidolphin@outlook.com>
Date: Thu, 30 Dec 2021 17:45:49 +0800
Subject: [PATCH] fix(components): adjust style of the radio and form (#5047)

---
 docs/examples/form/alignment.vue           | 3 ++-
 docs/examples/form/form-items.vue          | 2 +-
 docs/examples/form/size-control.vue        | 4 ----
 packages/theme-chalk/src/common/var.scss   | 2 +-
 packages/theme-chalk/src/form.scss         | 3 ++-
 packages/theme-chalk/src/radio-button.scss | 8 ++++----
 packages/theme-chalk/src/radio.scss        | 2 +-
 7 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/docs/examples/form/alignment.vue b/docs/examples/form/alignment.vue
index 41f3f44c93..f06eae973d 100644
--- a/docs/examples/form/alignment.vue
+++ b/docs/examples/form/alignment.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-radio-group v-model="labelPosition" size="small">
+  <el-radio-group v-model="labelPosition">
     <el-radio-button label="left">Left</el-radio-button>
     <el-radio-button label="right">Right</el-radio-button>
     <el-radio-button label="top">Top</el-radio-button>
@@ -9,6 +9,7 @@
     :label-position="labelPosition"
     label-width="100px"
     :model="formLabelAlign"
+    style="max-width: 460px"
   >
     <el-form-item label="Name">
       <el-input v-model="formLabelAlign.name"></el-input>
diff --git a/docs/examples/form/form-items.vue b/docs/examples/form/form-items.vue
index 6c2fbf9d13..4775a02792 100644
--- a/docs/examples/form/form-items.vue
+++ b/docs/examples/form/form-items.vue
@@ -35,7 +35,7 @@
       }"
     >
       <el-input v-model="domain.value"></el-input>
-      <el-button class="ml-2" @click.prevent="removeDomain(domain)"
+      <el-button class="mt-2" @click.prevent="removeDomain(domain)"
         >Delete</el-button
       >
     </el-form-item>
diff --git a/docs/examples/form/size-control.vue b/docs/examples/form/size-control.vue
index b6259ec9b6..2eff32e998 100644
--- a/docs/examples/form/size-control.vue
+++ b/docs/examples/form/size-control.vue
@@ -60,10 +60,6 @@
       <el-button type="primary" @click="onSubmit">Create</el-button>
       <el-button>Cancel</el-button>
     </el-form-item>
-    <el-form-item size="large">
-      <el-button type="primary" @click="onSubmit">Create</el-button>
-      <el-button>Cancel</el-button>
-    </el-form-item>
   </el-form>
 </template>
 
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index e13a7c7ab5..a646bde914 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -591,7 +591,7 @@ $button-border-radius: map.merge(
 $button-padding-vertical: () !default;
 $button-padding-vertical: map.merge(
   (
-    'large': 12px,
+    'large': 13px,
     'default': 9px,
     'small': 6px,
   ),
diff --git a/packages/theme-chalk/src/form.scss b/packages/theme-chalk/src/form.scss
index bc76fe22c9..93e8031069 100644
--- a/packages/theme-chalk/src/form.scss
+++ b/packages/theme-chalk/src/form.scss
@@ -77,7 +77,8 @@
     box-sizing: border-box;
   }
   @include e(content) {
-    display: inline-flex;
+    display: flex;
+    flex-wrap: wrap;
     align-items: center;
     flex: 1;
     line-height: calc(var(--font-size) * 2 + 4px);
diff --git a/packages/theme-chalk/src/radio-button.scss b/packages/theme-chalk/src/radio-button.scss
index 7bb237f55a..767228c793 100644
--- a/packages/theme-chalk/src/radio-button.scss
+++ b/packages/theme-chalk/src/radio-button.scss
@@ -36,8 +36,8 @@
     user-select: none;
 
     @include button-size(
-      map.get($button-padding-vertical, 'default'),
-      map.get($button-padding-horizontal, 'default'),
+      map.get($button-padding-vertical, 'default') - $button-border-width,
+      map.get($button-padding-horizontal, 'default') - $button-border-width,
       map.get($button-font-size, 'default'),
       0
     );
@@ -133,8 +133,8 @@
     @include m($size) {
       & .#{$namespace}-radio-button__inner {
         @include button-size(
-          map.get($button-padding-vertical, $size),
-          map.get($button-padding-horizontal, $size),
+          map.get($button-padding-vertical, $size) - $button-border-width,
+          map.get($button-padding-horizontal, $size) - $button-border-width,
           map.get($button-font-size, $size),
           0
         );
diff --git a/packages/theme-chalk/src/radio.scss b/packages/theme-chalk/src/radio.scss
index 8d92574943..2e2176da89 100644
--- a/packages/theme-chalk/src/radio.scss
+++ b/packages/theme-chalk/src/radio.scss
@@ -182,6 +182,6 @@
 
   @include e(label) {
     font-size: var(--el-radio-font-size);
-    padding-left: 10px;
+    padding-left: 8px;
   }
 }