fix(style): adjust component size & demo (#4801)

* fix(style): adjust button size & demo spacing

* fix(style): adjust input padding & with prefix/suffix

* fix(style): adjust button padding horizontal

* fix(style): adjust form margin & font-size

* refactor(docs): use setup simplify form examples

docs/.vitepress/vitepress/components/demo/vp-example.vue

@@ -21,7 +21,7 @@ defineProps({
 
 <style lang="scss" scoped>
 .example-showcase {
-  padding: 1rem;
+  padding: 1.5rem;
   margin: 0.5px;
   background-color: var(--bg-color);
   &.transparent-enabled {

docs/en-US/component/button.md

@@ -125,9 +125,6 @@ button/custom
 <style lang="scss">
 .example-showcase {
   .el-row {
-    margin-bottom: 20px;
-    align-items: baseline;
-
     &:last-child {
       margin-bottom: 0;
     }

docs/en-US/component/form.md

@@ -22,10 +22,6 @@ The component has been upgraded with a flex layout to replace the old float layo
     width: 460px;
   }
 
-  .line {
-    text-align: center;
-  }
-
   .el-checkbox-group {
     width: 320px;
     margin: 0;

docs/examples/button/basic.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-row>
+  <el-row class="mb-4">
     <el-button>Default</el-button>
     <el-button type="primary">Primary</el-button>
     <el-button type="success">Success</el-button>
@@ -9,7 +9,7 @@
     <el-button>中文</el-button>
   </el-row>
 
-  <el-row>
+  <el-row class="mb-4">
     <el-button plain>Plain</el-button>
     <el-button type="primary" plain>Primary</el-button>
     <el-button type="success" plain>Success</el-button>
@@ -18,7 +18,7 @@
     <el-button type="danger" plain>Danger</el-button>
   </el-row>
 
-  <el-row>
+  <el-row class="mb-4">
     <el-button round>Round</el-button>
     <el-button type="primary" round>Primary</el-button>
     <el-button type="success" round>Success</el-button>

docs/examples/button/disabled.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-row>
+  <el-row class="mb-4">
     <el-button disabled>Default</el-button>
     <el-button type="primary" disabled>Primary</el-button>
     <el-button type="success" disabled>Success</el-button>

docs/examples/button/size.vue

@@ -4,7 +4,7 @@
     <el-button>Default</el-button>
     <el-button size="small">Small</el-button>
   </el-row>
-  <el-row>
+  <el-row class="my-4">
     <el-button size="large" round>Large</el-button>
     <el-button round>Default</el-button>
     <el-button size="small" round>Small</el-button>
@@ -15,6 +15,7 @@
     <el-button :icon="Search" size="small" circle></el-button>
   </el-row>
 </template>
+
 <script setup lang="ts">
 import { Search } from '@element-plus/icons-vue'
 </script>

docs/examples/form/alignment.vue

@@ -22,17 +22,14 @@
   </el-form>
 </template>
 
-<script lang="ts">
-export default {
-  data() {
-    return {
-      labelPosition: 'right',
-      formLabelAlign: {
-        name: '',
-        region: '',
-        type: '',
-      },
-    }
-  },
-}
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+
+const labelPosition = ref('right')
+
+const formLabelAlign = reactive({
+  name: '',
+  region: '',
+  type: '',
+})
 </script>

docs/examples/form/basic-form.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form ref="form" :model="form" label-width="120px">
+  <el-form ref="formRef" :model="form" label-width="120px">
     <el-form-item label="Activity name">
       <el-input v-model="form.name"></el-input>
     </el-form-item>
@@ -18,7 +18,9 @@
           style="width: 100%"
         ></el-date-picker>
       </el-col>
-      <el-col class="line" :span="2">-</el-col>
+      <el-col class="line" :span="2">
+        <span class="mx-2 text-gray-500">-</span>
+      </el-col>
       <el-col :span="11">
         <el-time-picker
           v-model="form.date2"
@@ -54,26 +56,22 @@
   </el-form>
 </template>
 
-<script lang="ts">
-export default {
-  data() {
-    return {
-      form: {
-        name: '',
-        region: '',
-        date1: '',
-        date2: '',
-        delivery: false,
-        type: [],
-        resource: '',
-        desc: '',
-      },
-    }
-  },
-  methods: {
-    onSubmit() {
-      console.log('submit!')
-    },
-  },
+<script lang="ts" setup>
+import { reactive } from 'vue'
+
+// do not use same name with ref
+const form = reactive({
+  name: '',
+  region: '',
+  date1: '',
+  date2: '',
+  delivery: false,
+  type: [],
+  resource: '',
+  desc: '',
+})
+
+const onSubmit = () => {
+  console.log('submit!')
 }
 </script>

docs/examples/form/custom-validation.vue

@@ -1,6 +1,6 @@
 <template>
   <el-form
-    ref="ruleForm"
+    ref="ruleFormRef"
     :model="ruleForm"
     status-icon
     :rules="rules"
@@ -25,79 +25,69 @@
       <el-input v-model.number="ruleForm.age"></el-input>
     </el-form-item>
     <el-form-item>
-      <el-button type="primary" @click="submitForm('ruleForm')"
+      <el-button type="primary" @click="submitForm(ruleFormRef)"
         >Submit</el-button
       >
-      <el-button @click="resetForm('ruleForm')">Reset</el-button>
+      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
     </el-form-item>
   </el-form>
 </template>
 
-<script lang="ts">
-export default {
-  data() {
-    const checkAge = (rule, value, callback) => {
-      if (!value) {
-        return callback(new Error('Please input the age'))
-      }
-      setTimeout(() => {
-        if (!Number.isInteger(value)) {
-          callback(new Error('Please input digits'))
-        } else {
-          if (value < 18) {
-            callback(new Error('Age must be greater than 18'))
-          } else {
-            callback()
-          }
-        }
-      }, 1000)
-    }
-    const validatePass = (rule, value, callback) => {
-      if (value === '') {
-        callback(new Error('Please input the password'))
-      } else {
-        if (this.ruleForm.checkPass !== '') {
-          this.$refs.ruleForm.validateField('checkPass')
-        }
-        callback()
-      }
-    }
-    const validatePass2 = (rule, value, callback) => {
-      if (value === '') {
-        callback(new Error('Please input the password again'))
-      } else if (value !== this.ruleForm.pass) {
-        callback(new Error("Two inputs don't match!"))
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+// More info see https://github.com/element-plus/element-plus/blob/dev/docs/examples/form/utils.ts
+import { resetForm, submitForm } from './utils'
+import type { ElForm } from 'element-plus'
+
+const ruleFormRef = ref<InstanceType<typeof ElForm>>()
+
+const checkAge = (rule: any, value: any, callback: any) => {
+  if (!value) {
+    return callback(new Error('Please input the age'))
+  }
+  setTimeout(() => {
+    if (!Number.isInteger(value)) {
+      callback(new Error('Please input digits'))
+    } else {
+      if (value < 18) {
+        callback(new Error('Age must be greater than 18'))
       } else {
         callback()
       }
     }
-    return {
-      ruleForm: {
-        pass: '',
-        checkPass: '',
-        age: '',
-      },
-      rules: {
-        pass: [{ validator: validatePass, trigger: 'blur' }],
-        checkPass: [{ validator: validatePass2, trigger: 'blur' }],
-        age: [{ validator: checkAge, trigger: 'blur' }],
-      },
-    }
-  },
-  methods: {
-    submitForm(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          alert('submit!')
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
-    },
-    resetForm(formName) {
-      this.$refs[formName].resetFields()
-    },
-  },
+  }, 1000)
 }
+
+const validatePass = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('Please input the password'))
+  } else {
+    if (ruleForm.checkPass !== '') {
+      if (!ruleFormRef.value) return
+      ruleFormRef.value.validateField('checkPass', () => null)
+    }
+    callback()
+  }
+}
+const validatePass2 = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('Please input the password again'))
+  } else if (value !== ruleForm.pass) {
+    callback(new Error("Two inputs don't match!"))
+  } else {
+    callback()
+  }
+}
+
+const ruleForm = reactive({
+  pass: '',
+  checkPass: '',
+  age: '',
+})
+
+const rules = reactive({
+  pass: [{ validator: validatePass, trigger: 'blur' }],
+  checkPass: [{ validator: validatePass2, trigger: 'blur' }],
+  age: [{ validator: checkAge, trigger: 'blur' }],
+})
 </script>

docs/examples/form/form-items.vue

@@ -1,6 +1,6 @@
 <template>
   <el-form
-    ref="dynamicValidateForm"
+    ref="formRef"
     :model="dynamicValidateForm"
     label-width="120px"
     class="demo-dynamic"
@@ -40,56 +40,49 @@
       >
     </el-form-item>
     <el-form-item>
-      <el-button type="primary" @click="submitForm('dynamicValidateForm')"
-        >Submit</el-button
-      >
+      <el-button type="primary" @click="submitForm(formRef)">Submit</el-button>
       <el-button @click="addDomain">New domain</el-button>
-      <el-button @click="resetForm('dynamicValidateForm')">Reset</el-button>
+      <el-button @click="resetForm(formRef)">Reset</el-button>
     </el-form-item>
   </el-form>
 </template>
 
-<script lang="ts">
-export default {
-  data() {
-    return {
-      dynamicValidateForm: {
-        domains: [
-          {
-            key: 1,
-            value: '',
-          },
-        ],
-        email: '',
-      },
-    }
-  },
-  methods: {
-    submitForm(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          alert('submit!')
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+// More info see https://github.com/element-plus/element-plus/blob/dev/docs/examples/form/utils.ts
+import { resetForm, submitForm } from './utils'
+import type { ElForm } from 'element-plus'
+
+const formRef = ref<InstanceType<typeof ElForm>>()
+const dynamicValidateForm = reactive<{
+  domains: DomainItem[]
+  email: string
+}>({
+  domains: [
+    {
+      key: 1,
+      value: '',
     },
-    resetForm(formName) {
-      this.$refs[formName].resetFields()
-    },
-    removeDomain(item) {
-      const index = this.dynamicValidateForm.domains.indexOf(item)
-      if (index !== -1) {
-        this.dynamicValidateForm.domains.splice(index, 1)
-      }
-    },
-    addDomain() {
-      this.dynamicValidateForm.domains.push({
-        key: Date.now(),
-        value: '',
-      })
-    },
-  },
+  ],
+  email: '',
+})
+
+interface DomainItem {
+  key: number
+  value: string
+}
+
+const removeDomain = (item: DomainItem) => {
+  const index = dynamicValidateForm.domains.indexOf(item)
+  if (index !== -1) {
+    dynamicValidateForm.domains.splice(index, 1)
+  }
+}
+
+const addDomain = () => {
+  dynamicValidateForm.domains.push({
+    key: Date.now(),
+    value: '',
+  })
 }
 </script>

docs/examples/form/inline-form.vue

@@ -15,20 +15,15 @@
   </el-form>
 </template>
 
-<script lang="ts">
-export default {
-  data() {
-    return {
-      formInline: {
-        user: '',
-        region: '',
-      },
-    }
-  },
-  methods: {
-    onSubmit() {
-      console.log('submit!')
-    },
-  },
+<script lang="ts" setup>
+import { reactive } from 'vue'
+
+const formInline = reactive({
+  user: '',
+  region: '',
+})
+
+const onSubmit = () => {
+  console.log('submit!')
 }
 </script>

docs/examples/form/number-validate.vue

@@ -1,6 +1,6 @@
 <template>
   <el-form
-    ref="numberValidateForm"
+    ref="formRef"
     :model="numberValidateForm"
     label-width="100px"
     class="demo-ruleForm"
@@ -20,37 +20,21 @@
       ></el-input>
     </el-form-item>
     <el-form-item>
-      <el-button type="primary" @click="submitForm('numberValidateForm')"
-        >Submit</el-button
-      >
-      <el-button @click="resetForm('numberValidateForm')">Reset</el-button>
+      <el-button type="primary" @click="submitForm(formRef)">Submit</el-button>
+      <el-button @click="resetForm(formRef)">Reset</el-button>
     </el-form-item>
   </el-form>
 </template>
 
-<script lang="ts">
-export default {
-  data() {
-    return {
-      numberValidateForm: {
-        age: '',
-      },
-    }
-  },
-  methods: {
-    submitForm(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          alert('submit!')
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
-    },
-    resetForm(formName) {
-      this.$refs[formName].resetFields()
-    },
-  },
-}
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+// More info see https://github.com/element-plus/element-plus/blob/dev/docs/examples/form/utils.ts
+import { resetForm, submitForm } from './utils'
+import type { ElForm } from 'element-plus'
+
+const formRef = ref<InstanceType<typeof ElForm>>()
+
+const numberValidateForm = reactive({
+  age: '',
+})
 </script>

docs/examples/form/size-control.vue

@@ -56,6 +56,10 @@
         <el-radio border label="Venue"></el-radio>
       </el-radio-group>
     </el-form-item>
+    <el-form-item>
+      <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>

docs/examples/form/utils.ts

@@ -0,0 +1,18 @@
+import type { ElForm } from 'element-plus'
+
+export const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
+  if (!formEl) return
+  formEl.validate((valid) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!')
+      return false
+    }
+  })
+}
+
+export const resetForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
+  if (!formEl) return
+  formEl.resetFields()
+}

docs/examples/form/validation.vue

@@ -1,10 +1,11 @@
 <template>
   <el-form
-    ref="ruleForm"
+    ref="ruleFormRef"
     :model="ruleForm"
     :rules="rules"
     label-width="120px"
     class="demo-ruleForm"
+    :size="formSize"
   >
     <el-form-item label="Activity name" prop="name">
       <el-input v-model="ruleForm.name"></el-input>
@@ -26,7 +27,9 @@
           ></el-date-picker>
         </el-form-item>
       </el-col>
-      <el-col class="line" :span="2">-</el-col>
+      <el-col class="line" :span="2">
+        <span class="mx-2 text-gray-500">-</span>
+      </el-col>
       <el-col :span="11">
         <el-form-item prop="date2">
           <el-time-picker
@@ -58,104 +61,92 @@
       <el-input v-model="ruleForm.desc" type="textarea"></el-input>
     </el-form-item>
     <el-form-item>
-      <el-button type="primary" @click="submitForm('ruleForm')"
+      <el-button type="primary" @click="submitForm(ruleFormRef)"
         >Create</el-button
       >
-      <el-button @click="resetForm('ruleForm')">Reset</el-button>
+      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
     </el-form-item>
   </el-form>
 </template>
 
-<script lang="ts">
-export default {
-  data() {
-    return {
-      ruleForm: {
-        name: '',
-        region: '',
-        date1: '',
-        date2: '',
-        delivery: false,
-        type: [],
-        resource: '',
-        desc: '',
-      },
-      rules: {
-        name: [
-          {
-            required: true,
-            message: 'Please input Activity name',
-            trigger: 'blur',
-          },
-          {
-            min: 3,
-            max: 5,
-            message: 'Length should be 3 to 5',
-            trigger: 'blur',
-          },
-        ],
-        region: [
-          {
-            required: true,
-            message: 'Please select Activity zone',
-            trigger: 'change',
-          },
-        ],
-        date1: [
-          {
-            type: 'date',
-            required: true,
-            message: 'Please pick a date',
-            trigger: 'change',
-          },
-        ],
-        date2: [
-          {
-            type: 'date',
-            required: true,
-            message: 'Please pick a time',
-            trigger: 'change',
-          },
-        ],
-        type: [
-          {
-            type: 'array',
-            required: true,
-            message: 'Please select at least one activity type',
-            trigger: 'change',
-          },
-        ],
-        resource: [
-          {
-            required: true,
-            message: 'Please select activity resource',
-            trigger: 'change',
-          },
-        ],
-        desc: [
-          {
-            required: true,
-            message: 'Please input activity form',
-            trigger: 'blur',
-          },
-        ],
-      },
-    }
-  },
-  methods: {
-    submitForm(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          alert('submit!')
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+// More info see https://github.com/element-plus/element-plus/blob/dev/docs/examples/form/utils.ts
+import { resetForm, submitForm } from './utils'
+import type { ElForm } from 'element-plus'
+
+const formSize = ref('')
+
+const ruleFormRef = ref<InstanceType<typeof ElForm>>()
+const ruleForm = reactive({
+  name: '',
+  region: '',
+  date1: '',
+  date2: '',
+  delivery: false,
+  type: [],
+  resource: '',
+  desc: '',
+})
+
+const rules = reactive({
+  name: [
+    {
+      required: true,
+      message: 'Please input Activity name',
+      trigger: 'blur',
     },
-    resetForm(formName) {
-      this.$refs[formName].resetFields()
+    {
+      min: 3,
+      max: 5,
+      message: 'Length should be 3 to 5',
+      trigger: 'blur',
     },
-  },
-}
+  ],
+  region: [
+    {
+      required: true,
+      message: 'Please select Activity zone',
+      trigger: 'change',
+    },
+  ],
+  date1: [
+    {
+      type: 'date',
+      required: true,
+      message: 'Please pick a date',
+      trigger: 'change',
+    },
+  ],
+  date2: [
+    {
+      type: 'date',
+      required: true,
+      message: 'Please pick a time',
+      trigger: 'change',
+    },
+  ],
+  type: [
+    {
+      type: 'array',
+      required: true,
+      message: 'Please select at least one activity type',
+      trigger: 'change',
+    },
+  ],
+  resource: [
+    {
+      required: true,
+      message: 'Please select activity resource',
+      trigger: 'change',
+    },
+  ],
+  desc: [
+    {
+      required: true,
+      message: 'Please input activity form',
+      trigger: 'blur',
+    },
+  ],
+})
 </script>

docs/examples/input/various-size.vue

@@ -36,6 +36,28 @@
       :suffix-icon="Search"
     />
   </div>
+  <div class="demo-input-size">
+    <el-input
+      v-model="input1"
+      class="w-50 m-2"
+      size="large"
+      placeholder="Please Input"
+      :prefix-icon="Search"
+    ></el-input>
+    <el-input
+      v-model="input2"
+      class="w-50 m-2"
+      placeholder="Please Input"
+      :prefix-icon="Search"
+    />
+    <el-input
+      v-model="input3"
+      class="w-50 m-2"
+      size="small"
+      placeholder="Please Input"
+      :prefix-icon="Search"
+    />
+  </div>
 </template>
 
 <script lang="ts" setup>

packages/theme-chalk/src/button.scss

@@ -14,8 +14,12 @@ $button-border-width: 1px;
 
 @include b(button) {
   display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
   line-height: 1;
-  min-height: map.get($input-height, 'default');
+  // min-height will expand when in flex
+  height: map.get($input-height, 'default');
   white-space: nowrap;
   cursor: pointer;
   background-color: var(--el-button-bg-color, #{map.get($button, 'bg-color')});
@@ -185,11 +189,11 @@ $button-border-width: 1px;
 
   @each $size in (large, small) {
     @include m($size) {
-      min-height: map.get($input-height, $size);
+      height: map.get($input-height, $size);
 
       @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),
         map.get($button-border-radius, $size)
       );

packages/theme-chalk/src/common/var.scss

@@ -453,8 +453,8 @@ $input-disabled: map.merge(
 $input-font-size: () !default;
 $input-font-size: map.merge(
   (
-    'large': var(--el-font-size-base, map.get($font-size, 'base')),
-    'default': 12px,
+    'large': 16px,
+    'default': 14px,
     'small': 12px,
   ),
   $input-font-size

packages/theme-chalk/src/form.scss

@@ -5,16 +5,6 @@
 @use 'mixins/var' as *;
 @use 'common/var' as *;
 
-$form-line-height: () !default;
-$form-line-height: map.merge(
-  (
-    'large': 36px,
-    'default': 32px,
-    'small': 28px,
-  ),
-  $form-line-height
-);
-
 @include b(form) {
   @include set-component-css-var('form', $form);
 
@@ -53,7 +43,8 @@ $form-line-height: map.merge(
 
 @include b(form-item) {
   display: flex;
-  margin-bottom: 22px;
+  --font-size: #{map.get($input-font-size, 'default')};
+  margin-bottom: calc(var(--font-size) + 8px);
 
   & .#{$namespace}-form-item {
     margin-bottom: 0;
@@ -65,17 +56,8 @@ $form-line-height: map.merge(
 
   @each $size in (large, default, small) {
     @include m($size) {
-      .#{$namespace}-form-item__label,
-      .#{$namespace}-form-item__content {
-        font-size: map.get($input-font-size, $size);
-        line-height: map.get($form-line-height, $size);
-      }
-      &.#{$namespace}-form-item {
-        margin-bottom: 18px;
-      }
-      .#{$namespace}-form-item__error {
-        padding-top: 2px;
-      }
+      --font-size: #{map.get($input-font-size, $size)};
+      --el-form-label-font-size: var(--font-size);
     }
   }
 
@@ -90,7 +72,7 @@ $form-line-height: map.merge(
     text-align: right;
     font-size: var(--el-form-label-font-size);
     color: var(--el-text-color-regular);
-    line-height: map.get($form-line-height, 'default');
+    line-height: calc(var(--el-form-label-font-size) * 2 + 4px);
     padding: 0 12px 0 0;
     box-sizing: border-box;
   }
@@ -98,9 +80,9 @@ $form-line-height: map.merge(
     display: inline-flex;
     align-items: center;
     flex: 1;
-    line-height: map.get($form-line-height, 'default');
+    line-height: calc(var(--font-size) * 2 + 4px);
     position: relative;
-    font-size: 14px;
+    font-size: var(--font-size);
     min-width: 0;
 
     .#{$namespace}-input-group {

packages/theme-chalk/src/input.scss

@@ -8,6 +8,16 @@
   @include set-component-css-var('input', $input);
 }
 
+$input-padding-horizontal: () !default;
+$input-padding-horizontal: map.merge(
+  (
+    'large': 16px,
+    'default': 12px,
+    'small': 8px,
+  ),
+  $input-padding-horizontal
+);
+
 @include b(textarea) {
   position: relative;
   display: inline-block;
@@ -143,7 +153,7 @@
     height: map.get($input-height, 'default');
     line-height: map.get($input-height, 'default');
     outline: none;
-    padding: 0 15px;
+    padding: 0 map.get($input-padding-horizontal, 'default');
     transition: var(--el-transition-border);
     width: 100%;
 
@@ -175,7 +185,7 @@
 
     position: absolute;
     height: 100%;
-    right: 5px;
+    right: map.get($input-padding-horizontal, 'default');
     top: 0;
     text-align: center;
     color: var(--el-input-icon-color, map.get($input, 'icon-color'));
@@ -193,7 +203,7 @@
 
     position: absolute;
     height: 100%;
-    left: 5px;
+    left: map.get($input-padding-horizontal, 'default');
     top: 0;
     text-align: center;
     color: var(--el-input-icon-color, map.get($input, 'icon-color'));
@@ -206,7 +216,6 @@
   }
 
   @include e(icon) {
-    width: 25px;
     height: inherit;
     display: flex;
     justify-content: center;
@@ -261,6 +270,11 @@
     }
   }
 
+  $input-padding-size-with-extra-icon: calc(
+    5px + map.get($input-font-size, 'default') +
+      map.get($input-padding-horizontal, 'default')
+  );
+
   @include m(suffix) {
     @include m(password-clear) {
       .#{$namespace}-input__inner {
@@ -269,13 +283,13 @@
     }
 
     .#{$namespace}-input__inner {
-      padding-right: 30px;
+      padding-right: $input-padding-size-with-extra-icon;
     }
   }
 
   @include m(prefix) {
     .#{$namespace}-input__inner {
-      padding-left: 30px;
+      padding-left: $input-padding-size-with-extra-icon;
     }
   }
 
@@ -287,11 +301,37 @@
       @include e(inner) {
         height: map.get($input-height, $size);
         line-height: map.get($input-height, $size);
+        padding: 0 map.get($input-padding-horizontal, $size);
       }
 
       .#{$namespace}-input__icon {
         line-height: map.get($input-height, $size);
       }
+
+      $input-padding-size-with-extra-icon: calc(
+        5px + map.get($input-font-size, $size) +
+          map.get($input-padding-horizontal, $size)
+      );
+
+      &.#{$namespace}-input--prefix {
+        .#{$namespace}-input__inner {
+          padding-left: $input-padding-size-with-extra-icon;
+        }
+      }
+
+      &.#{$namespace}-input--suffix {
+        .#{$namespace}-input__inner {
+          padding-right: $input-padding-size-with-extra-icon;
+        }
+      }
+
+      @include e(prefix) {
+        left: map.get($input-padding-horizontal, $size);
+      }
+
+      @include e(suffix) {
+        right: map.get($input-padding-horizontal, $size);
+      }
     }
   }
 }