diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx index 16ad39a273..f4277c8b5d 100644 --- a/components/config-provider/__tests__/style.test.tsx +++ b/components/config-provider/__tests__/style.test.tsx @@ -50,6 +50,7 @@ import Tabs from '../../tabs'; import Tag from '../../tag'; import TimePicker from '../../time-picker'; import Timeline from '../../timeline'; +import Tour from '../../tour'; import Transfer from '../../transfer'; import Tree from '../../tree'; import Typography from '../../typography'; @@ -1327,4 +1328,17 @@ describe('ConfigProvider support style and className props', () => { expect(element).toHaveClass('cp-dropdown'); expect(element).toHaveStyle({ backgroundColor: 'red' }); }); + + it('Should Tour closeIcon works', () => { + const { container } = render( + cp-test-closeIcon }} + > + + , + ); + const selectors = '.ant-tour .ant-tour-inner .ant-tour-close .cp-test-closeIcon'; + const element = container.querySelector(selectors); + expect(element).toBeTruthy(); + }); }); diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index df2e406832..188b030b20 100644 --- a/components/config-provider/context.ts +++ b/components/config-provider/context.ts @@ -15,6 +15,7 @@ import type { SelectProps } from '../select'; import type { SpaceProps } from '../space'; import type { TabsProps } from '../tabs'; import type { AliasToken, MappingAlgorithm, OverrideToken } from '../theme/interface'; +import type { TourProps } from '../tour/interface'; import type { RenderEmptyHandler } from './defaultRenderEmpty'; export const defaultIconPrefixCls = 'anticon'; @@ -65,6 +66,8 @@ export interface ComponentStyleConfig { style?: React.CSSProperties; } +export type TourConfig = Pick; + export type ModalConfig = ComponentStyleConfig & Pick; export type BadgeConfig = ComponentStyleConfig & Pick; @@ -145,6 +148,7 @@ export interface ConfigConsumerProps { tabs?: ComponentStyleConfig & Pick; timeline?: ComponentStyleConfig; timePicker?: ComponentStyleConfig; + tour?: TourConfig; upload?: ComponentStyleConfig; notification?: ComponentStyleConfig; tree?: ComponentStyleConfig; diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index 769d86a9ad..fa15071cbd 100644 --- a/components/config-provider/index.en-US.md +++ b/components/config-provider/index.en-US.md @@ -151,6 +151,7 @@ const { | 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 | | timePicker | Set TimePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | +| tour | Set Tour common props | { closeIcon?: React.ReactNode } | - | 5.14.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 | diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index fe489abae9..a234be134d 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -33,6 +33,7 @@ import type { PopupOverflow, Theme, ThemeConfig, + TourConfig, WaveConfig, } from './context'; import { ConfigConsumer, ConfigContext, defaultIconPrefixCls } from './context'; @@ -181,6 +182,7 @@ export interface ConfigProviderProps { * Wave is special component which only patch on the effect of component interaction. */ wave?: WaveConfig; + tour?: TourConfig; } interface ProviderChildrenProps extends ConfigProviderProps { @@ -191,6 +193,7 @@ interface ProviderChildrenProps extends ConfigProviderProps { type holderRenderType = (children: React.ReactNode) => React.ReactNode; export const defaultPrefixCls = 'ant'; + let globalPrefixCls: string; let globalIconPrefixCls: string; let globalTheme: ThemeConfig; @@ -333,6 +336,7 @@ const ProviderChildren: React.FC = (props) => { wave, dropdown, warning: warningConfig, + tour, } = props; // =================================== Context =================================== @@ -426,6 +430,7 @@ const ProviderChildren: React.FC = (props) => { wave, dropdown, warning: warningConfig, + tour, }; const config: ConfigConsumerProps = { diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index 0f12cb177e..05203513d0 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -153,6 +153,7 @@ const { | tag | 设置 Tag 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | timeline | 设置 Timeline 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | timePicker | 设置 TimePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | +| tour | 设置 Tour 组件的通用属性 | { closeIcon?: React.ReactNode } | - | 5.14.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 | diff --git a/components/tour/demo/basic.tsx b/components/tour/demo/basic.tsx index b3c53537df..340130c6a0 100644 --- a/components/tour/demo/basic.tsx +++ b/components/tour/demo/basic.tsx @@ -33,15 +33,12 @@ const App: React.FC = () => { target: () => ref3.current, }, ]; - return ( <> - -