From cdc93188cad622b9337a2f111433b835eb527330 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Tue, 7 Aug 2018 14:03:30 +0800
Subject: [PATCH] [Improvement] Search: update style (#1603)

---
 packages/search/demo/index.vue                | 11 +----
 packages/search/index.vue                     |  6 +--
 .../test/__snapshots__/demo.spec.js.snap      | 35 ++++++++--------
 packages/search/test/index.spec.js            |  2 +-
 packages/search/zh-CN.md                      |  5 ++-
 packages/vant-css/src/cell.css                |  2 +
 packages/vant-css/src/field.css               |  4 --
 packages/vant-css/src/search.css              | 41 ++++++-------------
 8 files changed, 40 insertions(+), 66 deletions(-)

diff --git a/packages/search/demo/index.vue b/packages/search/demo/index.vue
index 9d2b13a4c..6346135ff 100644
--- a/packages/search/demo/index.vue
+++ b/packages/search/demo/index.vue
@@ -19,6 +19,7 @@
     <demo-block :title="$t('title3')">
       <van-search
         v-model="value"
+        :placeholder="$t('placeholder')"
         show-action
         @search="onSearch"
       >
@@ -34,7 +35,7 @@ export default {
     'zh-CN': {
       title2: '监听对应事件',
       title3: '自定义行动按钮',
-      placeholder: '请输入商品名称'
+      placeholder: '请输入搜索关键词'
     },
     'en-US': {
       title2: 'Listen to Events',
@@ -59,11 +60,3 @@ export default {
   }
 };
 </script>
-
-<style lang="postcss">
-.demo-search {
-  .van-search__action div {
-    padding: 0 10px;
-  }
-}
-</style>
diff --git a/packages/search/index.vue b/packages/search/index.vue
index 8265a480a..90fc08e17 100644
--- a/packages/search/index.vue
+++ b/packages/search/index.vue
@@ -1,6 +1,5 @@
 <template>
   <div :class="b({ 'show-action': showAction })" :style="{ background }">
-    <icon name="search" />
     <field
       v-bind="$attrs"
       v-on="listeners"
@@ -8,10 +7,11 @@
       type="search"
       :value="value"
       :border="false"
+      left-icon="search"
     />
-    <div v-if="showAction" :class="b('action')" >
+    <div v-if="showAction" :class="b('action')">
       <slot name="action">
-        <div :class="b('cancel')" @click="onBack">{{ $t('cancel') }}</div>
+        <div @click="onBack">{{ $t('cancel') }}</div>
       </slot>
     </div>
   </div>
diff --git a/packages/search/test/__snapshots__/demo.spec.js.snap b/packages/search/test/__snapshots__/demo.spec.js.snap
index 13a7d9fa9..4f0a7c164 100644
--- a/packages/search/test/__snapshots__/demo.spec.js.snap
+++ b/packages/search/test/__snapshots__/demo.spec.js.snap
@@ -4,15 +4,14 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-search" style="background:#f2f2f2;">
-      <i class="van-icon van-icon-search" style="color:undefined;size:undefined;">
-        <!---->
-      </i>
-      <div placeholder="请输入商品名称" class="van-cell van-field">
-        <!---->
+      <div placeholder="请输入搜索关键词" class="van-cell van-field">
+        <i class="van-icon van-icon-search van-cell__left-icon" style="color:undefined;size:undefined;">
+          <!---->
+        </i>
         <!---->
         <div class="van-cell__value van-cell__value--alone">
           <div class="van-field__body">
-            <input type="search" placeholder="请输入商品名称" value="" class="van-field__control">
+            <input type="search" placeholder="请输入搜索关键词" value="" class="van-field__control">
             <!---->
             <!---->
             <!---->
@@ -27,15 +26,14 @@ exports[`renders demo correctly 1`] = `
   <div>
     <form action="/">
       <div class="van-search van-search--show-action" style="background:#f2f2f2;">
-        <i class="van-icon van-icon-search" style="color:undefined;size:undefined;">
-          <!---->
-        </i>
-        <div placeholder="请输入商品名称" class="van-cell van-field">
-          <!---->
+        <div placeholder="请输入搜索关键词" class="van-cell van-field">
+          <i class="van-icon van-icon-search van-cell__left-icon" style="color:undefined;size:undefined;">
+            <!---->
+          </i>
           <!---->
           <div class="van-cell__value van-cell__value--alone">
             <div class="van-field__body">
-              <input type="search" placeholder="请输入商品名称" value="" class="van-field__control">
+              <input type="search" placeholder="请输入搜索关键词" value="" class="van-field__control">
               <!---->
               <!---->
               <!---->
@@ -45,22 +43,21 @@ exports[`renders demo correctly 1`] = `
           <!---->
         </div>
         <div class="van-search__action">
-          <div class="van-search__cancel">取消</div>
+          <div>取消</div>
         </div>
       </div>
     </form>
   </div>
   <div>
     <div class="van-search van-search--show-action" style="background:#f2f2f2;">
-      <i class="van-icon van-icon-search" style="color:undefined;size:undefined;">
-        <!---->
-      </i>
-      <div class="van-cell van-field">
-        <!---->
+      <div placeholder="请输入搜索关键词" class="van-cell van-field">
+        <i class="van-icon van-icon-search van-cell__left-icon" style="color:undefined;size:undefined;">
+          <!---->
+        </i>
         <!---->
         <div class="van-cell__value van-cell__value--alone">
           <div class="van-field__body">
-            <input type="search" value="" class="van-field__control">
+            <input type="search" placeholder="请输入搜索关键词" value="" class="van-field__control">
             <!---->
             <!---->
             <!---->
diff --git a/packages/search/test/index.spec.js b/packages/search/test/index.spec.js
index d403e5198..08c9a577c 100644
--- a/packages/search/test/index.spec.js
+++ b/packages/search/test/index.spec.js
@@ -18,7 +18,7 @@ test('cancel search', () => {
     }
   });
 
-  const cancel = wrapper.find('.van-search__cancel');
+  const cancel = wrapper.find('.van-search__action div');
   cancel.trigger('click');
   expect(wrapper.emitted('input')[0][0]).toEqual('');
   expect(wrapper.emitted('cancel')).toBeTruthy();
diff --git a/packages/search/zh-CN.md b/packages/search/zh-CN.md
index 82e59f4ba..f889d6ef2 100644
--- a/packages/search/zh-CN.md
+++ b/packages/search/zh-CN.md
@@ -13,7 +13,7 @@ Vue.use(Search);
 `van-search` 中，v-model 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。
 
 ```html
-<van-search placeholder="请输入商品名称" v-model="value" />
+<van-search placeholder="请输入搜索关键词" v-model="value" />
 ```
 
 #### 监听对应事件
@@ -25,7 +25,7 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即
 <form action="/">
   <van-search
     v-model="value"
-    placeholder="请输入商品名称"
+    placeholder="请输入搜索关键词"
     show-action
     @search="onSearch"
     @cancel="onCancel"
@@ -39,6 +39,7 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即
 ```html
 <van-search
   v-model="value"
+  placeholder="请输入搜索关键词"
   show-action
   @search="onSearch"
 >
diff --git a/packages/vant-css/src/cell.css b/packages/vant-css/src/cell.css
index 42335c020..0b0d9c6b1 100644
--- a/packages/vant-css/src/cell.css
+++ b/packages/vant-css/src/cell.css
@@ -38,6 +38,7 @@
   &__value {
     overflow: hidden;
     text-align: right;
+    position: relative;
     vertical-align: middle;
 
     &--alone {
@@ -46,6 +47,7 @@
   }
 
   &__left-icon {
+    min-width: 1em;
     font-size: 16px;
     line-height: 24px;
     margin-right: 5px;
diff --git a/packages/vant-css/src/field.css b/packages/vant-css/src/field.css
index 47065c723..15a01c23c 100644
--- a/packages/vant-css/src/field.css
+++ b/packages/vant-css/src/field.css
@@ -5,10 +5,6 @@
     max-width: 90px;
   }
 
-  .van-cell__value {
-    position: relative;
-  }
-
   &__body {
     display: flex;
     align-items: center;
diff --git a/packages/vant-css/src/search.css b/packages/vant-css/src/search.css
index 5f67cf688..b1fb19f72 100644
--- a/packages/vant-css/src/search.css
+++ b/packages/vant-css/src/search.css
@@ -2,19 +2,22 @@
 
 .van-search {
   display: flex;
+  padding: 7px 15px;
   align-items: center;
   box-sizing: border-box;
-  padding: 6px 15px;
-  position: relative;
-
-  &--show-action {
-    padding-right: 0;
-  }
 
   .van-cell {
     flex: 1;
+    padding: 3px 10px;
     border-radius: 4px;
-    padding: 3px 10px 3px 35px;
+
+    &__left-icon {
+      color: $gray-dark;
+    }
+  }
+
+  &--show-action {
+    padding-right: 0;
   }
 
   input {
@@ -27,31 +30,13 @@
   }
 
   &__action {
-    line-height: 34px;
-    font-size: 14px;
-    letter-spacing: 1px;
-  }
-
-  &__cancel {
     padding: 0 10px;
-    color: $green;
+    font-size: 14px;
+    line-height: 30px;
+    color: $gray-darker;
 
     &:active {
       background-color: $active-color;
     }
   }
-
-  .van-icon-search {
-    top: 50%;
-    left: 25px;
-    z-index: 1;
-    color: $gray-dark;
-    position: absolute;
-    font-size: 16px;
-    transform: translateY(-50%);
-  }
-
-  .van-icon-clear {
-    color: #bbb;
-  }
 }