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

@@ -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
 

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 = () => {

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
 );

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 {

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) {

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;