From ef80a72e58f6472e56cba05600de5f14bf25c9a9 Mon Sep 17 00:00:00 2001
From: neverland <jait.chen@foxmail.com>
Date: Tue, 4 Oct 2022 09:21:45 +0800
Subject: [PATCH] fix(Field): icon position when label align is top (#11112)

---
 packages/vant/src/field/Field.tsx             |  8 +++---
 packages/vant/src/field/index.less            |  1 +
 .../test/__snapshots__/index.spec.js.snap     | 25 +++++++++++++++++++
 packages/vant/src/field/test/index.spec.js    | 11 ++++++++
 4 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/packages/vant/src/field/Field.tsx b/packages/vant/src/field/Field.tsx
index 0e5a8177c..a479f2cd5 100644
--- a/packages/vant/src/field/Field.tsx
+++ b/packages/vant/src/field/Field.tsx
@@ -589,16 +589,18 @@ export default defineComponent({
       const Label = renderLabel();
       const LeftIcon = renderLeftIcon();
 
+      const renderTitle = () =>
+        labelAlign === 'top' ? [LeftIcon, Label] : Label;
+
       return (
         <Cell
           v-slots={{
-            icon: LeftIcon ? () => LeftIcon : null,
-            title: Label ? () => Label : null,
+            icon: LeftIcon && labelAlign !== 'top' ? () => LeftIcon : null,
+            title: Label || labelAlign === 'top' ? renderTitle : null,
             value: renderFieldBody,
             extra: slots.extra,
           }}
           size={props.size}
-          icon={props.leftIcon}
           class={bem({
             error: showError.value,
             disabled,
diff --git a/packages/vant/src/field/index.less b/packages/vant/src/field/index.less
index 46be61595..eead6bb4d 100644
--- a/packages/vant/src/field/index.less
+++ b/packages/vant/src/field/index.less
@@ -41,6 +41,7 @@
     }
 
     &--top {
+      display: flex;
       width: 100%;
       text-align: left;
     }
diff --git a/packages/vant/src/field/test/__snapshots__/index.spec.js.snap b/packages/vant/src/field/test/__snapshots__/index.spec.js.snap
index 5faa1dc7e..9394b15b4 100644
--- a/packages/vant/src/field/test/__snapshots__/index.spec.js.snap
+++ b/packages/vant/src/field/test/__snapshots__/index.spec.js.snap
@@ -47,6 +47,31 @@ exports[`should render label slot correctly 1`] = `
 </div>
 `;
 
+exports[`should render left icon inside label when label-align is top 1`] = `
+<div class="van-cell van-field van-field--label-top">
+  <div class="van-cell__title van-field__label van-field__label--top">
+    <div class="van-field__left-icon">
+      <i class="van-badge__wrapper van-icon van-icon-success">
+      </i>
+    </div>
+    <label id="van-field-label"
+           for="van-field-input"
+    >
+      Label
+    </label>
+  </div>
+  <div class="van-cell__value van-field__value">
+    <div class="van-field__body">
+      <input type="text"
+             id="van-field-input"
+             class="van-field__control"
+             aria-labelledby="van-field-label"
+      >
+    </div>
+  </div>
+</div>
+`;
+
 exports[`should render textarea when type is textarea 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__value van-field__value">
diff --git a/packages/vant/src/field/test/index.spec.js b/packages/vant/src/field/test/index.spec.js
index 51c2b5ee2..ff9bc7f90 100644
--- a/packages/vant/src/field/test/index.spec.js
+++ b/packages/vant/src/field/test/index.spec.js
@@ -509,3 +509,14 @@ test('should render word limit with emoji correctly', () => {
   });
   expect(wrapper.find('.van-field__word-limit').html()).toMatchSnapshot();
 });
+
+test('should render left icon inside label when label-align is top', () => {
+  const wrapper = mount(Field, {
+    props: {
+      label: 'Label',
+      labelAlign: 'top',
+      leftIcon: 'success',
+    },
+  });
+  expect(wrapper.html()).toMatchSnapshot();
+});