From 627d408e660d393783f4fc0cd9e5b1a2b202d3aa Mon Sep 17 00:00:00 2001
From: qiang <qw13131wang@gmail.com>
Date: Tue, 6 Jun 2023 16:18:37 +0800
Subject: [PATCH] feat(theme-chalk): [form] add default width to Input in
 inline form (#12897)

* feat(theme-chalk): [form] add default width to Input in inline form

* docs: add clearable attributes to Input

* docs: add a description of the Input width
---
 docs/en-US/component/form.md                    |  2 +-
 docs/examples/form/inline-form.vue              | 17 +++++++++++++++--
 packages/theme-chalk/src/common/var.scss        |  2 ++
 .../theme-chalk/src/date-picker/picker.scss     |  1 -
 packages/theme-chalk/src/form.scss              |  7 +++++++
 packages/theme-chalk/src/input.scss             |  2 +-
 6 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/docs/en-US/component/form.md b/docs/en-US/component/form.md
index 271fa6c70d..a3639f6fa7 100644
--- a/docs/en-US/component/form.md
+++ b/docs/en-US/component/form.md
@@ -37,7 +37,7 @@ To prevent this behavior, you can add `@submit.prevent` on `<el-form>`.
 
 When the vertical space is limited and the form is relatively simple, you can put it in one line.
 
-:::demo Set the `inline` attribute to `true` and the form will be inline.
+:::demo Set the `inline` attribute to `true` and the form will be inline. After ^(2.3.6), the ElInput component will get a fixed width to avoid the width change caused by the clearable icon.
 
 form/inline-form
 
diff --git a/docs/examples/form/inline-form.vue b/docs/examples/form/inline-form.vue
index 651deaa6fb..bdb68631b0 100644
--- a/docs/examples/form/inline-form.vue
+++ b/docs/examples/form/inline-form.vue
@@ -1,14 +1,26 @@
 <template>
   <el-form :inline="true" :model="formInline" class="demo-form-inline">
     <el-form-item label="Approved by">
-      <el-input v-model="formInline.user" placeholder="Approved by" />
+      <el-input v-model="formInline.user" placeholder="Approved by" clearable />
     </el-form-item>
     <el-form-item label="Activity zone">
-      <el-select v-model="formInline.region" placeholder="Activity zone">
+      <el-select
+        v-model="formInline.region"
+        placeholder="Activity zone"
+        clearable
+      >
         <el-option label="Zone one" value="shanghai" />
         <el-option label="Zone two" value="beijing" />
       </el-select>
     </el-form-item>
+    <el-form-item label="Activity time">
+      <el-date-picker
+        v-model="formInline.date"
+        type="date"
+        placeholder="Pick a date"
+        clearable
+      />
+    </el-form-item>
     <el-form-item>
       <el-button type="primary" @click="onSubmit">Query</el-button>
     </el-form-item>
@@ -21,6 +33,7 @@ import { reactive } from 'vue'
 const formInline = reactive({
   user: '',
   region: '',
+  date: '',
 })
 
 const onSubmit = () => {
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 832a751922..276db4fbc5 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -552,6 +552,7 @@ $input: map.merge(
     'hover-border-color': getCssVar('border-color-hover'),
     'clear-hover-color': getCssVar('text-color-secondary'),
     'focus-border-color': getCssVar('color-primary'),
+    'width': 100%,
   ),
   $input
 );
@@ -1253,6 +1254,7 @@ $form: () !default;
 $form: map.merge(
   (
     'label-font-size': getCssVar('font-size-base'),
+    'inline-content-width': 220px,
   ),
   $form
 );
diff --git a/packages/theme-chalk/src/date-picker/picker.scss b/packages/theme-chalk/src/date-picker/picker.scss
index be6df0a14b..e82a001dfd 100644
--- a/packages/theme-chalk/src/date-picker/picker.scss
+++ b/packages/theme-chalk/src/date-picker/picker.scss
@@ -20,7 +20,6 @@
   @include set-component-css-var('date-editor', $date-editor);
   @include set-component-css-var('input', $input);
   position: relative;
-  display: inline-block;
   text-align: left;
 
   &.#{$namespace}-input__wrapper {
diff --git a/packages/theme-chalk/src/form.scss b/packages/theme-chalk/src/form.scss
index 0f6e35aad0..a41848bba5 100644
--- a/packages/theme-chalk/src/form.scss
+++ b/packages/theme-chalk/src/form.scss
@@ -91,6 +91,13 @@ $form-item-label-top-margin-bottom: map.merge(
         display: block;
       }
     }
+
+    .#{$namespace}-input {
+      @include set-css-var-value(
+        'input-width',
+        getCssVar('form-inline-content-width')
+      );
+    }
   }
 
   @each $size in (large, default, small) {
diff --git a/packages/theme-chalk/src/input.scss b/packages/theme-chalk/src/input.scss
index b6268d3b2a..609d195074 100644
--- a/packages/theme-chalk/src/input.scss
+++ b/packages/theme-chalk/src/input.scss
@@ -133,7 +133,7 @@
   position: relative;
   font-size: getCssVar('font-size', 'base');
   display: inline-flex;
-  width: 100%;
+  width: getCssVar('input-width');
   line-height: getCssVar('input-height');
   box-sizing: border-box;
   vertical-align: middle;