From 8ff867984489041b3f5ff78dff296b659b07dfbf Mon Sep 17 00:00:00 2001
From: muxin <434980373@qq.com>
Date: Tue, 27 Jun 2023 10:51:23 +0800
Subject: [PATCH] feat: config-provider support Mentions className and style
 properties (#43192)

* feat: config-provider support Mentions className and style properties

* fix: rename contextMentions
---
 .../config-provider/__tests__/style.test.tsx  | 35 +++++++++++++++++++
 components/config-provider/context.ts         |  1 +
 components/config-provider/index.en-US.md     |  1 +
 components/config-provider/index.tsx          |  3 ++
 components/config-provider/index.zh-CN.md     |  1 +
 components/mentions/index.tsx                 | 10 +++++-
 6 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx
index 65b2a49559..7f0531770d 100644
--- a/components/config-provider/__tests__/style.test.tsx
+++ b/components/config-provider/__tests__/style.test.tsx
@@ -8,6 +8,7 @@ import Descriptions from '../../descriptions';
 import Divider from '../../divider';
 import Empty from '../../empty';
 import Image from '../../image';
+import Mentions from '../../mentions';
 import Pagination from '../../pagination';
 import Radio from '../../radio';
 import Result from '../../result';
@@ -189,6 +190,40 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveStyle({ backgroundColor: 'red' });
   });
 
+  it('Should Mentions className & style works', () => {
+    const { container } = render(
+      <ConfigProvider
+        mentions={{
+          className: 'cp-className',
+          style: {
+            background: 'red',
+          },
+        }}
+      >
+        <Mentions
+          defaultValue="@afc163"
+          options={[
+            {
+              value: 'afc163',
+              label: 'afc163',
+            },
+            {
+              value: 'zombieJ',
+              label: 'zombieJ',
+            },
+            {
+              value: 'yesmeck',
+              label: 'yesmeck',
+            },
+          ]}
+        />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-mentions')).toHaveClass('cp-className');
+    expect(container.querySelector('.ant-mentions')).toHaveStyle({ background: 'red' });
+  });
+
   it('Should Result className & style works', () => {
     const { container } = render(
       <ConfigProvider result={{ className: 'cp-result', style: { backgroundColor: 'red' } }}>
diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts
index 961370186a..16923724b3 100644
--- a/components/config-provider/context.ts
+++ b/components/config-provider/context.ts
@@ -93,6 +93,7 @@ export interface ConfigConsumerProps {
   segmented?: ComponentStyleConfig;
   steps?: ComponentStyleConfig;
   image?: ComponentStyleConfig;
+  mentions?: ComponentStyleConfig;
   result?: ComponentStyleConfig;
   slider?: ComponentStyleConfig;
   breadcrumb?: ComponentStyleConfig;
diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md
index 38919f993a..b8b290d10c 100644
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@@ -111,6 +111,7 @@ const {
 | form | Set Form common props | { validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional`, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) } | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0 |
 | image | Set Image common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | input | Set Input common props | { autoComplete?: string } | - | 4.2.0 |
+| mentions | Set Mentions common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | pagination | Set Pagination common props | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | radio | Set Radio common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | result | Set Result common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
index 78236f6773..3920187d7f 100644
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@@ -142,6 +142,7 @@ export interface ConfigProviderProps {
   segmented?: ComponentStyleConfig;
   steps?: ComponentStyleConfig;
   image?: ComponentStyleConfig;
+  mentions?: ComponentStyleConfig;
   result?: ComponentStyleConfig;
   slider?: ComponentStyleConfig;
   breadcrumb?: ComponentStyleConfig;
@@ -245,6 +246,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     divider,
     steps,
     image,
+    mentions,
     result,
     slider,
     breadcrumb,
@@ -311,6 +313,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     divider,
     steps,
     image,
+    mentions,
     result,
     slider,
     breadcrumb,
diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
index a175016c91..6861cf492f 100644
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@@ -113,6 +113,7 @@ const {
 | form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form-cn#validatemessages), requiredMark?: boolean \| `optional`, colon?: boolean, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)} | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0 |
 | image | 设置 Image 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | input | 设置 Input 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| mentions | 设置 Mentions 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | pagination | 设置 Pagination 组件的通用属性 | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | radio | 设置 Radio 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | result | 设置 Result 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
diff --git a/components/mentions/index.tsx b/components/mentions/index.tsx
index a40a8e23f4..0d10414e11 100644
--- a/components/mentions/index.tsx
+++ b/components/mentions/index.tsx
@@ -76,6 +76,7 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
     options,
     status: customStatus,
     popupClassName,
+    style,
     ...restProps
   },
   ref,
@@ -93,7 +94,12 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
     );
   }
 
-  const { getPrefixCls, renderEmpty, direction } = React.useContext(ConfigContext);
+  const {
+    getPrefixCls,
+    renderEmpty,
+    direction,
+    mentions: contextMentions,
+  } = React.useContext(ConfigContext);
   const {
     status: contextStatus,
     hasFeedback,
@@ -158,6 +164,7 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
       [`${prefixCls}-rtl`]: direction === 'rtl',
     },
     getStatusClassNames(prefixCls, mergedStatus),
+    contextMentions?.className,
     !hasFeedback && className,
     rootClassName,
     hashId,
@@ -170,6 +177,7 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
       className={mergedClassName}
       disabled={disabled}
       direction={direction}
+      style={{ ...contextMentions?.style, ...style }}
       {...restProps}
       filterOption={mentionsfilterOption}
       onFocus={onFocus}