fix(form-item): label text is in wrong position when `label-align="le…

…ft"` and `require-mark-placement="left"` and `label-placement="left"`, closes #3871
tusen-ai · Oct 29, 2022 · 9878b06 · 9878b06
1 parent afea462
commit 9878b06
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 12 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -20,6 +20,7 @@
 ### Fixes
 
 - Fix `n-image` to preview the image, press and drag the left mouse click,closes [#3950](https://github.com/tusen-ai/naive-ui/issues/3950).
+- Fix `n-form-item`'s label text is in wrong position when `label-align="left"` and `require-mark-placement="left"` and `label-placement="left"`, closes [#3871](https://github.com/tusen-ai/naive-ui/issues/3871).
 
 ### i18n
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -20,6 +20,7 @@
 ### Fixes
 
 - 修复 `n-image` 进行图片预览只可以按住鼠标左键拖拽，关闭 [#3950](https://github.com/tusen-ai/naive-ui/issues/3950)
+- 修复 `n-form-item` 在 `label-align="left"` 并且 `require-mark-placement="left"` 并且 `label-placement="left"` 时标签文本显示位置有问题，关闭 [#3871](https://github.com/tusen-ai/naive-ui/issues/3871)
 
 ### i18n
 

diff --git a/src/form/src/FormItem.tsx b/src/form/src/FormItem.tsx
@@ -156,7 +156,8 @@ export default defineComponent({
     const { mergedSize: mergedSizeRef } = formItemSizeRefs
     const {
       mergedLabelPlacement: labelPlacementRef,
-      mergedLabelAlign: labelTextAlignRef
+      mergedLabelAlign: labelTextAlignRef,
+      mergedRequireMarkPlacement: mergedRequireMarkPlacementRef
     } = formItemMiscRefs
     const renderExplainsRef = ref<
     Array<{
@@ -425,22 +426,40 @@ export default defineComponent({
       }
       return cssVars
     })
-    const themeClassHandle = useThemeClass(
-      'form-item',
-      computed(() => {
-        return `${mergedSizeRef.value[0]}${labelPlacementRef.value[0]}${
-          labelTextAlignRef.value?.[0] || ''
-        }`
-      }),
-      cssVarsRef,
-      props
-    )
+    const themeClassHandle = inlineThemeDisabled
+      ? useThemeClass(
+        'form-item',
+        computed(() => {
+          return `${mergedSizeRef.value[0]}${labelPlacementRef.value[0]}${
+              labelTextAlignRef.value?.[0] || ''
+            }`
+        }),
+        cssVarsRef,
+        props
+      )
+      : undefined
+    const reverseColSpaceRef = computed(() => {
+      // label placement left
+      // require-mark-placement | label align | areas (1fr auto)
+      // left                   | left        | mark text (need reverse)
+      // left                   | right       | mark text (okay)
+      // right                  | left        | mark text (okay)
+      // right                  | right       | mark text (okay)
+      // right-hanging          | left        | text mark (okay)
+      // right-hanging          | right       | text mark (okay)
+      return (
+        labelPlacementRef.value === 'left' &&
+        mergedRequireMarkPlacementRef.value === 'left' &&
+        labelTextAlignRef.value === 'left'
+      )
+    })
     return {
       labelElementRef,
       mergedClsPrefix: mergedClsPrefixRef,
       mergedRequired: mergedRequiredRef,
       feedbackId: feedbackIdRef,
       renderExplains: renderExplainsRef,
+      reverseColSpace: reverseColSpaceRef,
       ...formItemMiscRefs,
       ...formItemSizeRefs,
       ...exposedRef,
@@ -492,7 +511,9 @@ export default defineComponent({
           class={[
             labelProps?.class,
             `${mergedClsPrefix}-form-item-label`,
-            `${mergedClsPrefix}-form-item-label--${mergedRequireMarkPlacement}-mark`
+            `${mergedClsPrefix}-form-item-label--${mergedRequireMarkPlacement}-mark`,
+            this.reverseColSpace &&
+              `${mergedClsPrefix}-form-item-label--reverse-columns-space`
           ]}
           style={this.mergedLabelStyle as any}
           ref="labelElementRef"

diff --git a/src/form/src/styles/form-item.cssr.ts b/src/form/src/styles/form-item.cssr.ts
@@ -72,6 +72,9 @@ export default cB('form-item', `
       flex-shrink: 0;
       flex-grow: 0;
     `, [
+      cM('reverse-columns-space', `
+        grid-template-columns: auto 1fr;
+      `),
       cM('left-mark', `
         grid-template-areas:
           "mark text"