fix(Field): label-align top works well with label-width (#11684)

* fix(Field): label-align top works well with label-width

* fix(Field): update snapshot

* fix(Field): break long label when `labelAlign="top"`

packages/vant-cli/src/cli.ts

@@ -45,6 +45,10 @@ program
     '--runInBand',
     'Run all tests serially in the current process, rather than creating a worker pool of child processes that run tests'
   )
+  .option(
+    '--updateSnapshot',
+    'Re-record every snapshot that fails during this test run'
+  )
   .option('--debug', 'Print debugging info about your Jest config')
   .action(async (options) => {
     const { test } = await import('./commands/jest.js');

packages/vant-cli/src/commands/jest.ts

@@ -24,6 +24,7 @@ export function test(command: Config.Argv) {
     clearCache: command.clearCache,
     changedSince: command.changedSince,
     logHeapUsage: command.logHeapUsage,
+    updateSnapshot: command.updateSnapshot,
     // make jest tests faster
     // see: https://ivantanev.com/make-jest-faster/
     maxWorkers: '50%',

packages/vant/package.json

@@ -20,6 +20,7 @@
     "build:site": "vant-cli build-site",
     "release": "cp ../../README.md ./ && vant-cli release && rm ./README.md",
     "release:site": "pnpm build:site && npx gh-pages -d site-dist --add",
+    "test:update": "vant-cli test --updateSnapshot",
     "test:watch": "vant-cli test --watch",
     "test:coverage": "open test/coverage/index.html"
   },

packages/vant/src/field/Field.tsx

@@ -434,7 +434,8 @@ export default defineComponent({
 
     const labelStyle = computed(() => {
       const labelWidth = getProp('labelWidth');
-      if (labelWidth) {
+      const labelAlign = getProp('labelAlign');
+      if (labelWidth && labelAlign !== 'top') {
         return { width: addUnit(labelWidth) };
       }
     });
@@ -571,6 +572,8 @@ export default defineComponent({
     };
 
     const renderLabel = () => {
+      const labelWidth = getProp('labelWidth');
+      const labelAlign = getProp('labelAlign');
       const colon = getProp('colon') ? ':' : '';
 
       if (slots.label) {
@@ -578,7 +581,15 @@ export default defineComponent({
       }
       if (props.label) {
         return (
-          <label id={`${id}-label`} for={getInputId()}>
+          <label
+            id={`${id}-label`}
+            for={getInputId()}
+            style={
+              labelAlign === 'top' && labelWidth
+                ? { width: addUnit(labelWidth) }
+                : undefined
+            }
+          >
             {props.label + colon}
           </label>
         );

packages/vant/src/field/demo/LabelAlign.vue

@@ -6,14 +6,20 @@ import { useTranslate } from '../../../docs/site';
 
 const t = useTranslate({
   'zh-CN': {
-    text: '手机号',
+    text: '文本',
+    top: '顶部对齐',
+    center: '居中对齐',
+    left: '左对齐',
+    right: '右对齐',
     labelAlign: '输入框文本位置',
-    alignPlaceHolder: '请输入手机号',
   },
   'en-US': {
-    text: 'Tel',
+    text: 'Text',
+    top: 'Top Align',
+    center: 'Center Align',
+    left: 'Left Align',
+    right: 'Right Align',
     labelAlign: 'Label Align',
-    alignPlaceHolder: 'Please input tel number',
   },
 });
 
@@ -26,9 +32,27 @@ const value = ref('');
       <van-field
         v-model="value"
         :label="t('text')"
-        :placeholder="t('alignPlaceHolder')"
+        :placeholder="t('top')"
         label-align="top"
       />
+      <van-field
+        v-model="value"
+        :label="t('text')"
+        :placeholder="t('left')"
+        label-align="left"
+      />
+      <van-field
+        v-model="value"
+        :label="t('text')"
+        :placeholder="t('center')"
+        label-align="center"
+      />
+      <van-field
+        v-model="value"
+        :label="t('text')"
+        :placeholder="t('right')"
+        label-align="right"
+      />
     </van-cell-group>
   </demo-block>
 </template>

packages/vant/src/field/index.less

@@ -23,15 +23,6 @@
 .van-field {
   flex-wrap: wrap;
 
-  &--label {
-    &-top {
-      .van-field__value {
-        flex: none;
-        width: 100%;
-      }
-    }
-  }
-
   &__label {
     flex: none;
     box-sizing: border-box;
@@ -50,7 +41,11 @@
     }
 
     &--top {
+      display: flex;
+      width: 100%;
+      text-align: left;
       margin-bottom: var(--van-padding-base);
+      word-break: break-word;
     }
 
     &--required {

packages/vant/src/field/test/__snapshots__/demo.spec.ts.snap

@@ -424,7 +424,7 @@ exports[`should render demo and match snapshot 1`] = `
         <label id="van-field-label"
                for="van-field-input"
         >
-          Tel
+          Text
         </label>
       </div>
       <div class="van-cell__value van-field__value">
@@ -432,7 +432,64 @@ exports[`should render demo and match snapshot 1`] = `
           <input type="text"
                  id="van-field-input"
                  class="van-field__control"
-                 placeholder="Please input tel number"
+                 placeholder="Top Align"
+                 aria-labelledby="van-field-label"
+          >
+        </div>
+      </div>
+    </div>
+    <div class="van-cell van-field van-field--label-left">
+      <div class="van-cell__title van-field__label van-field__label--left">
+        <label id="van-field-label"
+               for="van-field-input"
+        >
+          Text
+        </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"
+                 placeholder="Left Align"
+                 aria-labelledby="van-field-label"
+          >
+        </div>
+      </div>
+    </div>
+    <div class="van-cell van-field van-field--label-center">
+      <div class="van-cell__title van-field__label van-field__label--center">
+        <label id="van-field-label"
+               for="van-field-input"
+        >
+          Text
+        </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"
+                 placeholder="Center Align"
+                 aria-labelledby="van-field-label"
+          >
+        </div>
+      </div>
+    </div>
+    <div class="van-cell van-field van-field--label-right">
+      <div class="van-cell__title van-field__label van-field__label--right">
+        <label id="van-field-label"
+               for="van-field-input"
+        >
+          Text
+        </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"
+                 placeholder="Right Align"
                  aria-labelledby="van-field-label"
           >
         </div>

packages/vant/src/form/test/__snapshots__/props.spec.tsx.snap

@@ -162,6 +162,25 @@ exports[`should render label-width prop correctly 1`] = `
       </div>
     </div>
   </div>
+  <div class="van-cell van-field van-field--label-top">
+    <div class="van-cell__title van-field__label van-field__label--top">
+      <label id="van-field-label"
+             for="van-field-input"
+             style="width: 10vw;"
+      >
+        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>
 </form>
 `;
 

packages/vant/src/form/test/props.spec.tsx

@@ -243,6 +243,7 @@ test('should render label-width prop correctly', () => {
         <Form labelWidth="5rem">
           <Field label="Label" />
           <Field label="Label" labelWidth="10vw" />
+          <Field label="Label" labelWidth="10vw" labelAlign="top" />
         </Form>
       );
     },