From a4f4808e2f62d9aba109ae48b8159a833c43bf40 Mon Sep 17 00:00:00 2001
From: muxin <434980373@qq.com>
Date: Mon, 26 Jun 2023 17:09:55 +0800
Subject: [PATCH] feat: config-provider support descriptions className and
 style properties (#43189)

---
 components/anchor/Anchor.tsx                  |  5 ++-
 .../config-provider/__tests__/style.test.tsx  | 32 +++++++++++++++++++
 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 +
 6 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx
index 3c13844578..8c33108e69 100644
--- a/components/anchor/Anchor.tsx
+++ b/components/anchor/Anchor.tsx
@@ -152,7 +152,8 @@ const AnchorContent: React.FC<InternalAnchorProps> = (props) => {
   const spanLinkNode = React.useRef<HTMLSpanElement>(null);
   const animating = React.useRef<boolean>(false);
 
-  const { direction, getTargetContainer } = React.useContext<ConfigConsumerProps>(ConfigContext);
+  const { direction, getTargetContainer, anchor } =
+    React.useContext<ConfigConsumerProps>(ConfigContext);
 
   const getCurrentContainer = getContainer ?? getTargetContainer ?? getDefaultContainer;
 
@@ -280,6 +281,7 @@ const AnchorContent: React.FC<InternalAnchorProps> = (props) => {
       [`${prefixCls}-rtl`]: direction === 'rtl',
     },
     className,
+    anchor?.className,
   );
 
   const anchorClass = classNames(prefixCls, {
@@ -292,6 +294,7 @@ const AnchorContent: React.FC<InternalAnchorProps> = (props) => {
 
   const wrapperStyle: React.CSSProperties = {
     maxHeight: offsetTop ? `calc(100vh - ${offsetTop}px)` : '100vh',
+    ...anchor?.style,
     ...style,
   };
 
diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx
index af405b9a33..3f1813faf6 100644
--- a/components/config-provider/__tests__/style.test.tsx
+++ b/components/config-provider/__tests__/style.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import ConfigProvider from '..';
 import { render } from '../../../tests/utils';
+import Anchor from '../../anchor';
 import Breadcrumb from '../../breadcrumb';
 import Checkbox from '../../checkbox';
 import Descriptions from '../../descriptions';
@@ -208,6 +209,37 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveStyle({ backgroundColor: 'red' });
   });
 
+  it('Should Anchor className & style works', () => {
+    const { container } = render(
+      <ConfigProvider
+        anchor={{
+          className: 'cp-className',
+          style: {
+            background: 'red',
+          },
+        }}
+      >
+        <Anchor
+          items={[
+            {
+              key: 'part-1',
+              href: '#part-1',
+              title: 'Part 1',
+            },
+            {
+              key: 'part-2',
+              href: '#part-2',
+              title: 'Part 2',
+            },
+          ]}
+        />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-anchor-wrapper')).toHaveClass('cp-className');
+    expect(container.querySelector('.ant-anchor-wrapper')).toHaveStyle({ background: 'red' });
+  });
+
   it('Should Breadcrumb className & style works', () => {
     const { container } = render(
       <ConfigProvider
diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts
index 8f070d0e96..a2e10c0774 100644
--- a/components/config-provider/context.ts
+++ b/components/config-provider/context.ts
@@ -85,6 +85,7 @@ export interface ConfigConsumerProps {
   select?: {
     showSearch?: boolean;
   };
+  anchor?: ComponentStyleConfig;
   button?: ButtonConfig;
   divider?: ComponentStyleConfig;
   typography?: ComponentStyleConfig;
diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md
index 538f690b24..732403f4c4 100644
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@@ -101,6 +101,7 @@ const {
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| anchor | Set Anchor common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | breadcrumb | Set Breadcrumb common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | button | Set Button common props | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 |
 | checkbox | Set Checkbox 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 39ac624598..4fec0876a8 100644
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@@ -134,6 +134,7 @@ export interface ConfigProviderProps {
   popupMatchSelectWidth?: boolean;
   popupOverflow?: PopupOverflow;
   theme?: ThemeConfig;
+  anchor?: ComponentStyleConfig;
   button?: ButtonConfig;
   divider?: ComponentStyleConfig;
   typography?: ComponentStyleConfig;
@@ -219,6 +220,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     children,
     csp: customCsp,
     autoInsertSpaceInButton,
+    anchor,
     form,
     locale,
     componentSize,
@@ -287,6 +289,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
   const baseConfig = {
     csp,
     autoInsertSpaceInButton,
+    anchor,
     locale: locale || legacyLocale,
     direction,
     space,
diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
index cb7e8b1473..cdc6d2849f 100644
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@@ -103,6 +103,7 @@ const {
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| anchor | 设置 Anchor 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | breadcrumb | 设置 Breadcrumb 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | button | 设置 Button 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 |
 | checkbox | 设置 Checkbox 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |