fix: form label position left (#1412)

src/packages/form/demo.taro.tsx

@@ -312,6 +312,7 @@ const FormDemo = () => {
         <h2>{translated.title2}</h2>
         <Form
           divider
+          labelPosition="left"
           onFinish={(values) => submitSucceed(values)}
           onFinishFailed={(values, errors) => submitFailed(errors)}
           footer={
@@ -354,8 +355,7 @@ const FormDemo = () => {
           <Form.Item
             label={translated.tel}
             name="tel"
-            required
-            rules={[{ required: true, message: translated.telTip }]}
+            rules={[{ max: 13, message: translated.telTip }]}
           >
             <Input placeholder={translated.telTip2} type="number" />
           </Form.Item>

src/packages/form/demo.tsx

@@ -237,6 +237,7 @@ const FormDemo = () => {
       <div className="demo">
         <h2>{translated.basic}</h2>
         <Form
+          divider
           labelPosition="right"
           onFinish={(values) => submitSucceed(values)}
           footer={
@@ -268,6 +269,7 @@ const FormDemo = () => {
         <h2>{translated.title2}</h2>
         <Form
           divider
+          labelPosition="left"
           onFinish={(values) => submitSucceed(values)}
           onFinishFailed={(values, errors) => submitFailed(errors)}
           footer={
@@ -310,8 +312,7 @@ const FormDemo = () => {
           <Form.Item
             label={translated.tel}
             name="tel"
-            required
-            rules={[{ required: true, message: translated.telTip }]}
+            rules={[{ max: 13, message: translated.telTip }]}
           >
             <Input placeholder={translated.telTip2} type="number" />
           </Form.Item>

src/packages/form/doc.en-US.md

@@ -84,6 +84,8 @@ const App = () => {
   return (
     <>
       <Form
+        divider
+        labelPosition="left"
         onFinish={(values) => submitSucceed(values)}
         onFinishFailed={(values, errors) => submitFailed(errors)}
         footer={
@@ -128,7 +130,7 @@ const App = () => {
         <Form.Item
           label="telephone"
           name="tel"
-          rules={[{ required: true, message: "Please type your phone number" }]}
+          rules={[{ max: 13, message: "Please type your phone number" }]}
         >
           <Input placeholder="The phone format is incorrect" type="number" />
         </Form.Item>

src/packages/form/doc.md

@@ -84,6 +84,8 @@ const App = () => {
   return (
     <>
       <Form
+        divider
+        labelPosition="left"
         onFinish={(values) => submitSucceed(values)}
         onFinishFailed={(values, errors) => submitFailed(errors)}
         footer={
@@ -122,9 +124,9 @@ const App = () => {
           <Input placeholder="请输入年龄，必须数字且0-200区间" type="text" />
         </Form.Item>
         <Form.Item
-          label="电话"
+          label="联系电话"
           name="tel"
-          rules={[{ required: true, message: "请输入联系电话" }]}
+          rules={[{ max: 13, message: "请输入联系电话" }]}
         >
           <Input placeholder="电话格式不正确" type="number" />
         </Form.Item>

src/packages/form/doc.taro.md

@@ -90,6 +90,8 @@ const App = () => {
   return (
     <>
       <Form
+        divider
+        labelPosition="left"
         onFinish={(values) => submitSucceed(values)}
         onFinishFailed={(values, errors) => submitFailed(errors)}
         footer={
@@ -128,9 +130,9 @@ const App = () => {
           <Input placeholder="请输入年龄，必须数字且0-200区间" type="text" />
         </Form.Item>
         <Form.Item
-          label="电话"
+          label="联系电话"
           name="tel"
-          rules={[{ required: true, message: "请输入联系电话" }]}
+          rules={[{ max: 13, message: "请输入联系电话" }]}
         >
           <Input placeholder="电话格式不正确" type="number" />
         </Form.Item>

src/packages/form/doc.zh-TW.md

@@ -84,6 +84,8 @@ const App = () => {
   return (
     <>
       <Form
+        divider
+        labelPosition="left"
         onFinish={(values) => submitSucceed(values)}
         onFinishFailed={(values, errors) => submitFailed(errors)}
         footer={
@@ -122,9 +124,9 @@ const App = () => {
           <Input placeholder="請輸入年齡，必須數字且0-200區間" type="text" />
         </Form.Item>
         <Form.Item
-          label="電話"
+          label="聯繫電話"
           name="tel"
-          rules={[{ required: true, message: "請輸入聯繫電話" }]}
+          rules={[{ max: 13, message: "請輸入聯繫電話" }]}
         >
           <Input placeholder="電話格式不正確" type="number" />
         </Form.Item>

src/packages/form/form.scss

@@ -10,10 +10,18 @@
 }
 
 .form-layout-left .nut-form-item__label {
+  position: relative;
   text-align: left;
   font-size: 14px;
-  padding-right: 24px;
+  padding-left: 12px;
   white-space: nowrap;
+
+  .required {
+    display: block;
+    line-height: 1.5;
+    position: absolute;
+    left: 0.1em;
+  }
 }
 
 .form-layout-top .nut-form-item {

src/packages/formitem/formitem.scss

@@ -1,17 +1,6 @@
 .nut-form-item {
   display: flex;
 
-  &::before {
-    position: absolute;
-    box-sizing: border-box;
-    content: ' ';
-    pointer-events: none;
-    right: 16px;
-    bottom: 0;
-    left: 16px;
-    transform: scaleX(0);
-  }
-
   &.error {
     &.line {
       &::before {