fix input test

examples/docs/en-US/form.md

@@ -512,8 +512,9 @@ Form component allows you to verify your data, helping you find and correct erro
 
 ### Custom validation rules
 
-:::demo This example shows how to customize your own validation rules to finish a two-factor password verification.
+This example shows how to customize your own validation rules to finish a two-factor password verification. And you can you `status-feedback` to add validate status icon。
 
+:::demo
 ```html
 <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
   <el-form-item label="Password" prop="pass">

examples/docs/zh-CN/form.md

@@ -503,16 +503,18 @@
 
 ### 自定义校验规则
 
-::: demo 这个例子中展示了如何使用自定义验证规则来完成密码的二次验证
+这个例子中展示了如何使用自定义验证规则来完成密码的二次验证，并且你可以通过 `status-feedback` 来给输入框添加反馈图标。
+
+::: demo
 ```html
 <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
-  <el-form-item label="密码" prop="pass">
+  <el-form-item status-feedback label="密码" prop="pass">
     <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
   </el-form-item>
-  <el-form-item label="确认密码" prop="checkPass">
+  <el-form-item status-feedback label="确认密码" prop="checkPass">
     <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
   </el-form-item>
-  <el-form-item label="年龄" prop="age">
+  <el-form-item status-feedback label="年龄" prop="age">
     <el-input v-model.number="ruleForm2.age"></el-input>
   </el-form-item>
   <el-form-item>

packages/form/src/form-item.vue

 <template>
   <div class="el-form-item" :class="{
+    'el-form-item--feedback': statusFeedback,
     'is-error': validateState === 'error',
     'is-validating': validateState === 'validating',
     'is-success': validateState === 'success',
@@ -63,6 +64,7 @@
       labelWidth: String,
       prop: String,
       required: Boolean,
+      statusFeedback: Boolean,
       rules: [Object, Array],
       error: String,
       validateStatus: String,

packages/theme-chalk/src/form.scss

@@ -43,6 +43,10 @@
     margin-bottom: 0;
   }
 
+  & .el-input__validateIcon {
+    display: none;
+  }
+
   @include e(label) {
     text-align: right;
     vertical-align: middle;
@@ -80,7 +84,7 @@
   @include when(error) {
     & .el-input__inner,
     & .el-textarea__inner {
-      &:focus {
+      &, &:focus {
         border-color: $--color-danger;
       }
     }
@@ -111,4 +115,9 @@
       color: $--color-success;
     }
   }
+  @include m(feedback) {
+    .el-input__validateIcon {
+      display: inline-block;
+    }
+  }
 }

test/unit/specs/input.spec.js

@@ -47,30 +47,24 @@ describe('Input', () => {
     expect(vm.$el.querySelector('input').getAttribute('disabled')).to.ok;
   });
 
-  it('icon', () => {
+  it('suffixIcon', () => {
     vm = createVue({
       template: `
-        <el-input
-          icon="time"
-          @click="handleIconClick"
-        >
-        </el-input>
-      `,
-      data() {
-        return {
-          iconClicked: false
-        };
-      },
-      methods: {
-        handleIconClick(ev) {
-          this.iconClicked = true;
-        }
-      }
+        <el-input suffix-icon="time"></el-input>
+      `
+    }, true);
+    var icon = vm.$el.querySelector('.el-input__icon');
+    expect(icon).to.be.exist;
+  });
+
+  it('prefixIcon', () => {
+    vm = createVue({
+      template: `
+        <el-input prefix-icon="time"></el-input>
+      `
     }, true);
     var icon = vm.$el.querySelector('.el-input__icon');
-    icon.click();
-    expect(icon.classList.contains('el-icon-time')).to.true;
-    expect(vm.iconClicked).to.true;
+    expect(icon).to.be.exist;
   });
 
   it('size', () => {