chore: Form.Item should not support requiredMark (ant-design#41725)

* test: add case * chore: Form.Item does not support requiredMark
RedJue · Apr 25, 2023 · 350b599 · 350b599
1 parent 5f0a8b7
commit 350b599
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 2 deletions.
diff --git a/components/form/FormItem/ItemHolder.tsx b/components/form/FormItem/ItemHolder.tsx
@@ -186,8 +186,8 @@ export default function ItemHolder(props: ItemHolderProps) {
         {/* Label */}
         <FormItemLabel
           htmlFor={fieldId}
-          requiredMark={requiredMark}
           {...props}
+          requiredMark={requiredMark}
           required={required ?? isRequired}
           prefixCls={prefixCls}
         />

diff --git a/components/form/FormItem/index.tsx b/components/form/FormItem/index.tsx
@@ -51,7 +51,7 @@ const MemoInput = React.memo(
 );
 
 export interface FormItemProps<Values = any>
-  extends FormItemLabelProps,
+  extends Omit<FormItemLabelProps, 'requiredMark'>,
     FormItemInputProps,
     RcFieldProps<Values> {
   prefixCls?: string;

diff --git a/components/form/FormItemLabel.tsx b/components/form/FormItemLabel.tsx
@@ -38,6 +38,9 @@ export interface FormItemLabelProps {
   label?: React.ReactNode;
   labelAlign?: FormLabelAlign;
   labelCol?: ColProps;
+  /**
+   * @internal Used for pass `requiredMark` from `<Form />`
+   */
   requiredMark?: RequiredMark;
   tooltip?: LabelTooltipType;
 }

diff --git a/components/form/__tests__/index.test.tsx b/components/form/__tests__/index.test.tsx
@@ -1797,4 +1797,29 @@ describe('Form', () => {
     expect(onChange).toHaveBeenNthCalledWith(idx++, 'validating');
     expect(onChange).toHaveBeenNthCalledWith(idx++, 'success');
   });
+
+  // https://user-images.githubusercontent.com/32004925/230819163-464fe90d-422d-4a6d-9e35-44a25d4c64f1.png
+  it('should not render `requiredMark` when Form.Item has no required prop', () => {
+    // Escaping TypeScript error
+    const genProps = (value: any) => ({ ...value });
+
+    const { container } = render(
+      <Form name="basic" requiredMark="optional">
+        <Form.Item
+          label="First Name"
+          name="firstName"
+          required
+          {...genProps({ requiredMark: false })}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item label="Last Name" name="lastName" required {...genProps({ requiredMark: true })}>
+          <Input />
+        </Form.Item>
+      </Form>,
+    );
+
+    expect(container.querySelectorAll('.ant-form-item-required')).toHaveLength(2);
+    expect(container.querySelectorAll('.ant-form-item-required-mark-optional')).toHaveLength(2);
+  });
 });