feat: Mentions componet token (#42711)

* ✨ feat: update

* ✨ feat: update

* ✨ feat: update

* ✨ feat: update

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

@@ -39,6 +39,63 @@ exports[`renders components/mentions/demo/basic.tsx extend context correctly 1`]
 </div>
 `;
 
+exports[`renders components/mentions/demo/component-token.tsx extend context correctly 1`] = `
+<div
+  style="padding-bottom: 0px; position: relative; min-width: 0;"
+>
+  <div
+    class="ant-mentions"
+    style="width: 100%; margin: 0px;"
+  >
+    <textarea
+      class="rc-textarea"
+      rows="1"
+    >
+      @
+    </textarea>
+    <div
+      class="ant-mentions-measure"
+    >
+      <span>
+        @
+      </span>
+      <div
+        class="ant-mentions-dropdown ant-mentions-dropdown-placement-bottomRight"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <ul
+          class="ant-mentions-dropdown-menu ant-mentions-dropdown-menu-root ant-mentions-dropdown-menu-vertical"
+          data-menu-list="true"
+          role="menu"
+          tabindex="0"
+        >
+          <li
+            class="ant-mentions-dropdown-menu-item ant-mentions-dropdown-menu-item-active"
+            data-menu-id="rc-menu-uuid-test-afc163"
+            role="menuitem"
+            tabindex="-1"
+          >
+            afc163
+          </li>
+          <li
+            class="ant-mentions-dropdown-menu-item"
+            data-menu-id="rc-menu-uuid-test-zombieJ"
+            role="menuitem"
+            tabindex="-1"
+          >
+            zombieJ
+          </li>
+        </ul>
+        <div
+          aria-hidden="true"
+          style="display: none;"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/mentions/demo/form.tsx extend context correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"

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

@@ -38,6 +38,24 @@ exports[`renders components/mentions/demo/basic.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/mentions/demo/component-token.tsx correctly 1`] = `
+<div
+  style="padding-bottom:0;position:relative;min-width:0"
+>
+  <div
+    class="ant-mentions"
+    style="width:100%;margin:0"
+  >
+    <textarea
+      class="rc-textarea"
+      rows="1"
+    >
+      @
+    </textarea>
+  </div>
+</div>
+`;
+
 exports[`renders components/mentions/demo/form.tsx correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"

components/mentions/demo/component-token.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+Component Token Debug.
+
+## en-US
+
+Component Token Debug.

components/mentions/demo/component-token.tsx

@@ -0,0 +1,27 @@
+import { ConfigProvider, Mentions } from 'antd';
+import React from 'react';
+
+const { _InternalPanelDoNotUseOrYouWillBeFired: InternalMentions } = Mentions;
+
+const options = [
+  {
+    value: 'afc163',
+    label: 'afc163',
+  },
+  {
+    value: 'zombieJ',
+    label: 'zombieJ',
+  },
+];
+
+const App: React.FC = () => (
+  <ConfigProvider
+    theme={{
+      components: { Mentions: { dropdownHeight: 500, controlItemWidth: 300, zIndexPopup: 1000 } },
+    }}
+  >
+    <InternalMentions style={{ width: '100%' }} value="@" options={options} />
+  </ConfigProvider>
+);
+
+export default App;

components/mentions/index.en-US.md

@@ -43,6 +43,7 @@ return (
 <code src="./demo/autoSize.tsx">autoSize</code>
 <code src="./demo/status.tsx">Status</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>
 
 ## API
 

components/mentions/index.zh-CN.md

@@ -44,6 +44,7 @@ return (
 <code src="./demo/autoSize.tsx">自动大小</code>
 <code src="./demo/status.tsx">自定义状态</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>
 
 ## API
 

docs/react/migrate-less-variables.en-US.md

@@ -174,7 +174,13 @@ This document contains the correspondence between all the less variables related
 | `@list-customize-card-bg` | - | Deprecated for style change |
 | `@list-item-meta-description-font-size` | `descriptionFontSize` | - |
 
-<!-- ### Mentions -->
+### Mentions
+
+<!-- prettier-ignore -->
+| less 变量 | Component Token | Note |
+| --- | --- | --- |
+| `@mentions-dropdown-bg` | `colorBgElevated` | GlobalToken |
+| `@mentions-dropdown-menu-item-hover-bg` | - | Deprecated |
 
 <!-- ### Menu -->
 

docs/react/migrate-less-variables.zh-CN.md

@@ -172,7 +172,13 @@ title: Less 变量迁移 Design Token
 | `@list-customize-card-bg` | - | 由于样式变化已废弃 |
 | `@list-item-meta-description-font-size` | `descriptionFontSize` | - |
 
-<!-- ### Mentions 提及 -->
+Mentions 提及
+
+<!-- prettier-ignore -->
+| less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@mentions-dropdown-bg` | `colorBgElevated` | - |
+| `@mentions-dropdown-menu-item-hover-bg` | - | 已废弃 |
 
 <!-- ### Menu 导航菜单 -->