refactor(form): [form] refactor form style (#2196)

* refactor(form): change css var prefix * refactor(form): inline design config * refactor(form): [form] refactor form style * refactor(form): migrate form-item style from form.less to form-item.less * refactor(form): change design config default value * test(form): [form] fix form e2e test * test(form): [form] fix form e2e test
opentiny · Sep 27, 2024 · 8c6caa6 · 8c6caa6
1 parent 093baa4
commit 8c6caa6
Show file tree

Hide file tree

Showing 23 changed files with 303 additions and 413 deletions.
diff --git a/examples/sites/demos/apis/form.js b/examples/sites/demos/apis/form.js
@@ -44,11 +44,10 @@ export default {
         {
           name: 'hide-required-asterisk',
           type: 'boolean',
-          defaultValue: 'false',
+          defaultValue: 'true',
           desc: {
-            'zh-CN': '是否隐藏必填字段的标签旁边的红色星号，SMB 主题下默认值为true',
-            'en-US':
-              'Whether to hide the red asterisk next to the label of mandatory fields, The default value for SMB theme is true'
+            'zh-CN': '是否隐藏必填字段的标签旁边的红色星号',
+            'en-US': 'Whether to hide the red asterisk next to the label of mandatory fields'
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'smb-required',
@@ -120,7 +119,7 @@ export default {
         {
           name: 'label-width',
           type: 'string',
-          defaultValue: "'80px'",
+          defaultValue: "'84px'",
           desc: {
             'zh-CN': '表单中标签占位宽度',
             'en-US': 'Label placeholder width in the form'
@@ -132,11 +131,11 @@ export default {
         },
         {
           name: 'message-type',
-          type: "'inline' | 'block'",
-          defaultValue: '',
+          type: "'inline' | 'block' | 'absolute'",
+          defaultValue: "'block'",
           desc: {
             'zh-CN':
-              '当 validate-type 设置为 text 时，配置文本类型错误类型，可配置行内或者块级，不设置则为 absolute 定位',
+              '当 validate-type 设置为 text 时，配置文本类型错误类型，可配置行内或者块级，其他值都为 absolute 定位',
             'en-US':
               'Configure the text type error type, which can be configured at the inline or block level when validate-type is set to text. The default is absolute positioning'
           },

diff --git a/examples/sites/demos/pc/app/form/label-align-composition-api.vue b/examples/sites/demos/pc/app/form/label-align-composition-api.vue
@@ -1,7 +1,13 @@
 <template>
   <div class="demo-form">
     <div class="title">标签文字对齐： <tiny-switch v-model="isLabelAlign"></tiny-switch></div>
-    <tiny-form ref="ruleFormRef" :model="createData" label-position="left" :label-align="isLabelAlign">
+    <tiny-form
+      ref="ruleFormRef"
+      :model="createData"
+      label-position="left"
+      :label-align="isLabelAlign"
+      :hide-required-asterisk="false"
+    >
       <tiny-form-item label="用户名" prop="username" required>
         <tiny-input v-model="createData.username"></tiny-input>
       </tiny-form-item>

diff --git a/examples/sites/demos/pc/app/form/label-align.vue b/examples/sites/demos/pc/app/form/label-align.vue
@@ -1,7 +1,13 @@
 <template>
   <div class="demo-form">
     <div class="title">标签文字对齐： <tiny-switch v-model="isLabelAlign"></tiny-switch></div>
-    <tiny-form ref="ruleFormRef" :model="createData" label-position="left" :label-align="isLabelAlign">
+    <tiny-form
+      ref="ruleFormRef"
+      :model="createData"
+      label-position="left"
+      :label-align="isLabelAlign"
+      :hide-required-asterisk="false"
+    >
       <tiny-form-item label="用户名" prop="username" required>
         <tiny-input v-model="createData.username"></tiny-input>
       </tiny-form-item>

diff --git a/examples/sites/demos/pc/app/form/message-type-composition-api.vue b/examples/sites/demos/pc/app/form/message-type-composition-api.vue
@@ -46,12 +46,12 @@ const createData = ref({
   datepicker: ''
 })
 
-const messageType = ref('')
+const messageType = ref('block')
 
 const messageTypeList = ref([
-  { text: '默认', value: '' },
+  { text: '块级', value: 'block' },
   { text: '行内', value: 'inline' },
-  { text: '块级', value: 'block' }
+  { text: '绝对定位', value: 'absolute' }
 ])
 const rules = ref({
   users: { required: true, message: '必填', trigger: 'blur' },

diff --git a/examples/sites/demos/pc/app/form/message-type.spec.ts b/examples/sites/demos/pc/app/form/message-type.spec.ts
@@ -11,10 +11,10 @@ test('文本类型错误提示位置', async ({ page }) => {
   const firstItemError = formItem.first().locator('.tiny-form-item__error')
 
   await demo.getByRole('button', { name: '提交' }).click()
-  await getBtnByText('默认').click()
-  await expect(firstItemError).toHaveCSS('position', 'absolute')
-  await getBtnByText('行内').click()
-  await expect(firstItemError).toHaveCSS('display', 'inline-block')
   await getBtnByText('块级').click()
   await expect(firstItemError).toHaveCSS('display', 'flex')
+  await getBtnByText('行内').click()
+  await expect(firstItemError).toHaveCSS('display', 'inline-block')
+  await getBtnByText('绝对定位').click()
+  await expect(firstItemError).toHaveCSS('position', 'absolute')
 })
diff --git a/examples/sites/demos/pc/app/form/message-type.vue b/examples/sites/demos/pc/app/form/message-type.vue
@@ -47,12 +47,12 @@ export default {
         datepicker: ''
       },
 
-      messageType: '',
+      messageType: 'block',
 
       messageTypeList: [
-        { text: '默认', value: '' },
+        { text: '块级', value: 'block' },
         { text: '行内', value: 'inline' },
-        { text: '块级', value: 'block' }
+        { text: '绝对定位', value: 'absolute' }
       ],
       rules: {
         users: { required: true, message: '必填', trigger: 'blur' },

diff --git a/examples/sites/demos/pc/app/form/size.spec.ts b/examples/sites/demos/pc/app/form/size.spec.ts
@@ -23,7 +23,7 @@ test('测试表单尺寸', async ({ page }) => {
   await expect(firstLabel).toHaveCSS('line-height', miniHeight)
 
   // small表单
-  const smallHeight = '32px'
+  const smallHeight = '28px'
   await getBtnByText('small').click()
   await expect(form.locator('.tiny-form-item--small')).toHaveCount(7)
   await expect(submitBtn).toHaveClass(/tiny-button--small/)

diff --git a/examples/sites/demos/pc/app/form/slot-label.spec.ts b/examples/sites/demos/pc/app/form/slot-label.spec.ts
@@ -10,6 +10,6 @@ test('测试表单标签文本插槽', async ({ page }) => {
 
   await expect(formItem.first().locator('.tiny-form-item__label')).toHaveText('必填')
   await expect(formItem.nth(1).locator('.tiny-form-item__label')).toHaveText('日期')
-  await expect(formItem.nth(2).locator('.tiny-form-item__label')).toHaveText('URL')
+  await expect(formItem.nth(2).locator('.tiny-form-item__label')).toHaveText('超过两行文字，省略显示')
   await expect(formItem.nth(3).locator('.tiny-form-item__label')).toHaveText('等级')
 })
diff --git a/examples/sites/demos/pc/app/form/smb-required.spec.ts b/examples/sites/demos/pc/app/form/smb-required.spec.ts
@@ -17,7 +17,6 @@ test('必填项红色星号', async ({ page }) => {
     return { display, content }
   })
 
-  expect(beforeElement.display).toBe('inline-block')
   expect(beforeElement.content).toBe('"*"')
 
   await switchBtn.click()

diff --git a/packages/design/aurora/src/form/index.ts b/packages/design/aurora/src/form/index.ts
@@ -1,6 +1,11 @@
 export default {
+  icons: {
+    validateIcon: ''
+  },
   state: {
     labelWidth: '100px',
     tooltipType: 'error'
-  }
+  },
+  hideRequiredAsterisk: false,
+  messageType: 'absolute'
 }
diff --git a/packages/design/saas/src/form/index.ts b/packages/design/saas/src/form/index.ts
@@ -1,6 +1,11 @@
 export default {
+  icons: {
+    validateIcon: ''
+  },
   state: {
     labelWidth: '100px',
     tooltipType: 'error'
-  }
+  },
+  hideRequiredAsterisk: false,
+  messageType: 'absolute'
 }
diff --git a/packages/design/smb/index.ts b/packages/design/smb/index.ts
@@ -4,7 +4,6 @@ import Popconfirm from './src/popconfirm'
 import Drawer from './src/drawer'
 import Dropdown from './src/dropdown'
 import DropdownItem from './src/dropdown-item'
-import Form from './src/form'
 import FilterBox from './src/filter-box'
 import Grid from './src/grid'
 import Guide from './src/guide'
@@ -30,7 +29,6 @@ export default {
     Drawer,
     Dropdown,
     DropdownItem,
-    Form,
     FilterBox,
     Grid,
     Guide,

diff --git a/packages/design/smb/src/form/index.ts b/packages/design/smb/src/form/index.ts
diff --git a/packages/renderless/src/form/index.ts b/packages/renderless/src/form/index.ts
@@ -47,13 +47,13 @@ export const computedAutoLabelWidth =
 export const computedHideRequiredAsterisk =
   ({ props, designConfig }: Pick<IFormRenderlessParams, 'props' | 'designConfig'>) =>
   (): boolean => {
-    return props.hideRequiredAsterisk ?? designConfig?.hideRequiredAsterisk ?? false
+    return props.hideRequiredAsterisk ?? designConfig?.hideRequiredAsterisk ?? true
   }
 
 export const computedValidateIcon =
   ({ props, designConfig }: Pick<IFormRenderlessParams, 'props' | 'designConfig'>) =>
   (): object | null => {
-    return props.validateIcon ?? designConfig?.icons?.validateIcon ?? null
+    return props.validateIcon ?? designConfig?.icons?.validateIcon ?? 'icon-error'
   }
 
 export const computedIsErrorInline =
@@ -65,7 +65,7 @@ export const computedIsErrorInline =
     if (typeof props.inlineMessage === 'boolean') {
       return props.inlineMessage
     }
-    return designConfig?.messageType === 'inline' || false
+    return designConfig?.messageType === 'inline'
   }
 
 export const computedIsErrorBlock =
@@ -74,7 +74,10 @@ export const computedIsErrorBlock =
     if (props.messageType) {
       return props.messageType === 'block'
     }
-    return designConfig?.messageType === 'block' || false
+    if (designConfig && Object.hasOwnProperty.call(designConfig, 'messageType')) {
+      return designConfig.messageType === 'block'
+    }
+    return true
   }
 
 export const created =

diff --git a/packages/renderless/src/form/vue.ts b/packages/renderless/src/form/vue.ts
@@ -81,7 +81,7 @@ export const renderless = (
         return false
       }
     }),
-    labelWidth: computed(() => props.labelWidth || designConfig?.state?.labelWidth || '80px'),
+    labelWidth: computed(() => props.labelWidth || designConfig?.state?.labelWidth || '84px'),
     tooltipType: computed(() => designConfig?.state?.tooltipType || 'normal')
   })