feat: ConfigProvider support Timeline className and style properties (#43392)

components/config-provider/__tests__/style.test.tsx

@@ -41,6 +41,7 @@ import Switch from '../../switch';
 import Table from '../../table';
 import Tabs from '../../tabs';
 import Tag from '../../tag';
+import Timeline from '../../timeline';
 import Transfer from '../../transfer';
 import Tree from '../../tree';
 import Typography from '../../typography';
@@ -966,6 +967,46 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveStyle({ color: 'blue' });
   });
 
+  it('Should Timeline className works', () => {
+    const items = [
+      {
+        children: 'test item',
+      },
+    ];
+
+    const { container } = render(
+      <ConfigProvider
+        timeline={{
+          className: 'test-class',
+        }}
+      >
+        <Timeline items={items} />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-timeline')).toHaveClass('test-class');
+  });
+
+  it('Should Timeline style works', () => {
+    const items = [
+      {
+        children: 'test item',
+      },
+    ];
+
+    const { container } = render(
+      <ConfigProvider
+        timeline={{
+          style: { color: 'red' },
+        }}
+      >
+        <Timeline items={items} style={{ fontSize: '16px' }} />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-timeline')).toHaveStyle('color: red; font-size: 16px;');
+  });
+
   it('Should Transfer className works', () => {
     const mockData = [
       {

components/config-provider/context.ts

@@ -130,6 +130,7 @@ export interface ConfigConsumerProps {
   table?: ComponentStyleConfig;
   card?: ComponentStyleConfig;
   tabs?: ComponentStyleConfig;
+  timeline?: ComponentStyleConfig;
   upload?: ComponentStyleConfig;
   notification?: ComponentStyleConfig;
   tree?: ComponentStyleConfig;

components/config-provider/index.en-US.md

@@ -142,6 +142,7 @@ const {
 | table | Set Table common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tabs | Set Tabs common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tag | Set Tag common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| timeline | Set Timeline common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | transfer | Set Transfer common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tree | Set Tree common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | typography | Set Typography common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/config-provider/index.tsx

@@ -174,6 +174,7 @@ export interface ConfigProviderProps {
   table?: ComponentStyleConfig;
   card?: ComponentStyleConfig;
   tabs?: ComponentStyleConfig;
+  timeline?: ComponentStyleConfig;
   upload?: ComponentStyleConfig;
   notification?: ComponentStyleConfig;
   tree?: ComponentStyleConfig;
@@ -304,6 +305,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     table,
     card,
     tabs,
+    timeline,
     upload,
     notification,
     tree,
@@ -396,6 +398,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     table,
     card,
     tabs,
+    timeline,
     upload,
     notification,
     tree,

components/config-provider/index.zh-CN.md

@@ -144,8 +144,9 @@ const {
 | table | 设置 Table 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tabs | 设置 Tabs 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | tag | 设置 Tag 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
-| tree | 设置 Tree 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| timeline | 设置 Timeline 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | transfer | 设置 Transfer 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| tree | 设置 Tree 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | typography | 设置 Typography 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | upload | 设置 Upload 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 

components/timeline/Timeline.tsx

@@ -1,9 +1,10 @@
+import classNames from 'classnames';
 import * as React from 'react';
+import warning from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import type { TimelineItemProps } from './TimelineItem';
-import TimelineItemList from './TimelineItemList';
 import TimelineItem from './TimelineItem';
-import warning from '../_util/warning';
+import TimelineItemList from './TimelineItemList';
 import useItems from './useItems';
 
 // CSSINJS
@@ -28,8 +29,8 @@ type CompoundedComponent = React.FC<TimelineProps> & {
 };
 
 const Timeline: CompoundedComponent = (props) => {
-  const { getPrefixCls, direction } = React.useContext(ConfigContext);
-  const { prefixCls: customizePrefixCls, children, items, ...restProps } = props;
+  const { getPrefixCls, direction, timeline } = React.useContext(ConfigContext);
+  const { prefixCls: customizePrefixCls, children, items, className, style, ...restProps } = props;
   const prefixCls = getPrefixCls('timeline', customizePrefixCls);
 
   // =================== Warning =====================
@@ -45,6 +46,8 @@ const Timeline: CompoundedComponent = (props) => {
   return wrapSSR(
     <TimelineItemList
       {...restProps}
+      className={classNames(timeline?.className, className)}
+      style={{ ...timeline?.style, ...style }}
       prefixCls={prefixCls}
       direction={direction}
       items={mergedItems}