docs: fix some doc and lint issue (#48982)

* chore: fix dumi lint

* test: update snapshot

.dumi/theme/common/PrevAndNext.tsx

@@ -1,15 +1,16 @@
 import type { ReactElement } from 'react';
 import React, { useContext, useMemo } from 'react';
 import { LeftOutlined, RightOutlined } from '@ant-design/icons';
-import type { MenuProps } from 'antd';
+import type { GetProp, MenuProps } from 'antd';
 import { createStyles } from 'antd-style';
-import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
 import classNames from 'classnames';
 
 import useMenu from '../../hooks/useMenu';
 import SiteContext from '../slots/SiteContext';
 import type { SiteContextProps } from '../slots/SiteContext';
 
+type MenuItemType = Extract<GetProp<MenuProps, 'items'>[number], { type?: 'item' }>;
+
 const useStyle = createStyles(({ token, css }) => {
   const { colorSplit, iconCls, fontSizeIcon } = token;
 

components/form/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -807,7 +807,7 @@ Array [
   <form
     autocomplete="off"
     class="ant-form ant-form-horizontal"
-    id="basic"
+    id="col-24-debug"
     style="max-width: 600px;"
   >
     <div
@@ -821,7 +821,7 @@ Array [
         >
           <label
             class="ant-form-item-required"
-            for="basic_username"
+            for="col-24-debug_username"
             title="Username"
           >
             Username
@@ -839,7 +839,7 @@ Array [
               <input
                 aria-required="true"
                 class="ant-input ant-input-outlined"
-                id="basic_username"
+                id="col-24-debug_username"
                 type="text"
                 value=""
               />
@@ -859,7 +859,7 @@ Array [
         >
           <label
             class="ant-form-item-required"
-            for="basic_password"
+            for="col-24-debug_password"
             title="Password"
           >
             Password
@@ -880,7 +880,7 @@ Array [
                 <input
                   aria-required="true"
                   class="ant-input"
-                  id="basic_password"
+                  id="col-24-debug_password"
                   type="password"
                   value=""
                 />
@@ -929,7 +929,7 @@ Array [
         >
           <label
             class=""
-            for="basic_select"
+            for="col-24-debug_select"
             title=""
           >
             <a
@@ -1010,13 +1010,13 @@ Array [
                       >
                         <input
                           aria-autocomplete="list"
-                          aria-controls="basic_select_list"
+                          aria-controls="col-24-debug_select_list"
                           aria-expanded="false"
                           aria-haspopup="listbox"
-                          aria-owns="basic_select_list"
+                          aria-owns="col-24-debug_select_list"
                           autocomplete="off"
                           class="ant-select-selection-search-input"
-                          id="basic_select"
+                          id="col-24-debug_select"
                           readonly=""
                           role="combobox"
                           style="opacity: 0;"
@@ -1039,14 +1039,14 @@ Array [
                 >
                   <div>
                     <div
-                      id="basic_select_list"
+                      id="col-24-debug_select_list"
                       role="listbox"
                       style="height: 0px; width: 0px; overflow: hidden;"
                     >
                       <div
                         aria-label="Bamboo"
                         aria-selected="true"
-                        id="basic_select_list_0"
+                        id="col-24-debug_select_list_0"
                         role="option"
                       >
                         bamboo
@@ -1054,7 +1054,7 @@ Array [
                       <div
                         aria-label="Little"
                         aria-selected="false"
-                        id="basic_select_list_1"
+                        id="col-24-debug_select_list_1"
                         role="option"
                       >
                         little
@@ -7035,25 +7035,6 @@ exports[`renders components/form/demo/form-context.tsx extend context correctly
       </div>
     </div>
   </div>
-  <div
-    class="ant-form-item ant-form-item-hidden"
-  >
-    <div
-      class="ant-row ant-form-item-row"
-    >
-      <div
-        class="ant-col ant-col-16 ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
   <div
     class="ant-form-item"
   >
@@ -7149,11 +7130,7 @@ exports[`renders components/form/demo/form-context.tsx extend context correctly
 </form>
 `;
 
-exports[`renders components/form/demo/form-context.tsx extend context correctly 2`] = `
+exports[`renders components/form/demo/form-context.tsx extend context correctly 2`] = `[]`;
-[
-  "Warning: [antd: Form.Item] \`name\` is only used for validate React element. If you are using Form.Item as layout display, please remove \`name\` instead.",
-]
-`;
 
 exports[`renders components/form/demo/form-dependencies.tsx extend context correctly 1`] = `
 <form

components/form/__tests__/__snapshots__/demo.test.tsx.snap

@@ -643,7 +643,7 @@ Array [
   <form
     autocomplete="off"
     class="ant-form ant-form-horizontal"
-    id="basic"
+    id="col-24-debug"
     style="max-width:600px"
   >
     <div
@@ -657,7 +657,7 @@ Array [
         >
           <label
             class="ant-form-item-required"
-            for="basic_username"
+            for="col-24-debug_username"
             title="Username"
           >
             Username
@@ -675,7 +675,7 @@ Array [
               <input
                 aria-required="true"
                 class="ant-input ant-input-outlined"
-                id="basic_username"
+                id="col-24-debug_username"
                 type="text"
                 value=""
               />
@@ -695,7 +695,7 @@ Array [
         >
           <label
             class="ant-form-item-required"
-            for="basic_password"
+            for="col-24-debug_password"
             title="Password"
           >
             Password
@@ -716,7 +716,7 @@ Array [
                 <input
                   aria-required="true"
                   class="ant-input"
-                  id="basic_password"
+                  id="col-24-debug_password"
                   type="password"
                   value=""
                 />
@@ -765,7 +765,7 @@ Array [
         >
           <label
             class=""
-            for="basic_select"
+            for="col-24-debug_select"
             title=""
           >
             <a
@@ -846,13 +846,13 @@ Array [
                       >
                         <input
                           aria-autocomplete="list"
-                          aria-controls="basic_select_list"
+                          aria-controls="col-24-debug_select_list"
                           aria-expanded="false"
                           aria-haspopup="listbox"
-                          aria-owns="basic_select_list"
+                          aria-owns="col-24-debug_select_list"
                           autocomplete="off"
                           class="ant-select-selection-search-input"
-                          id="basic_select"
+                          id="col-24-debug_select"
                           readonly=""
                           role="combobox"
                           style="opacity:0"
@@ -3970,25 +3970,6 @@ exports[`renders components/form/demo/form-context.tsx correctly 1`] = `
       </div>
     </div>
   </div>
-  <div
-    class="ant-form-item ant-form-item-hidden"
-  >
-    <div
-      class="ant-row ant-form-item-row"
-    >
-      <div
-        class="ant-col ant-col-16 ant-form-item-control"
-      >
-        <div
-          class="ant-form-item-control-input"
-        >
-          <div
-            class="ant-form-item-control-input-content"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
   <div
     class="ant-form-item"
   >

components/form/demo/col-24-debug.tsx

@@ -32,7 +32,7 @@ const App: React.FC = () => {
   return (
     <>
       <Form
-        name="basic"
+        name="col-24-debug"
         labelCol={{ span: 24 }}
         wrapperCol={{ span: 24 }}
         initialValues={{ remember: true }}

components/form/demo/component-token.tsx

@@ -19,7 +19,7 @@ const App: React.FC = () => (
     }}
   >
     <Form
-      name="basic"
+      name="component-token"
       labelCol={{ span: 8 }}
       wrapperCol={{ span: 16 }}
       style={{ maxWidth: 600 }}

components/form/demo/form-context.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { SmileOutlined, UserOutlined } from '@ant-design/icons';
-import { Avatar, Button, Form, Input, InputNumber, Modal, Space, Typography } from 'antd';
+import { Avatar, Button, Flex, Form, Input, InputNumber, Modal, Space, Typography } from 'antd';
 import type { GetRef } from 'antd';
 
 type FormInstance = GetRef<typeof Form>;
@@ -97,7 +97,7 @@ const App: React.FC = () => {
         </Form.Item>
 
         {/* Create a hidden field to make Form instance record this */}
-        <Form.Item name="users" hidden />
+        <Form.Item name="users" noStyle />
 
         <Form.Item
           label="User List"
@@ -106,16 +106,14 @@ const App: React.FC = () => {
           {({ getFieldValue }) => {
             const users: UserType[] = getFieldValue('users') || [];
             return users.length ? (
-              <ul>
+              <Flex vertical gap={8}>
                 {users.map((user) => (
-                  <li key={user.name} className="user">
+                  <Space key={user.name}>
-                    <Space>
+                    <Avatar icon={<UserOutlined />} />
-                      <Avatar icon={<UserOutlined />} />
+                    {`${user.name} - ${user.age}`}
-                      {`${user.name} - ${user.age}`}
+                  </Space>
-                    </Space>
-                  </li>
                 ))}
-              </ul>
+              </Flex>
             ) : (
               <Typography.Text className="ant-form-text" type="secondary">
                 ( <SmileOutlined /> No user yet. )