feat: CP support Tour closeIcon (#47200)

* feat: CP support Tour closeIcon

* fix: fix

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(
+      <ConfigProvider
+        tour={{ closeIcon: <span className="cp-test-closeIcon">cp-test-closeIcon</span> }}
+      >
+        <Tour steps={[{ title: 'test' }]} open />
+      </ConfigProvider>,
+    );
+    const selectors = '.ant-tour .ant-tour-inner .ant-tour-close .cp-test-closeIcon';
+    const element = container.querySelector<HTMLSpanElement>(selectors);
+    expect(element).toBeTruthy();
+  });
 });

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<TourProps, 'closeIcon'>;
+
 export type ModalConfig = ComponentStyleConfig & Pick<ModalProps, 'classNames' | 'styles'>;
 
 export type BadgeConfig = ComponentStyleConfig & Pick<BadgeProps, 'classNames' | 'styles'>;
@@ -145,6 +148,7 @@ export interface ConfigConsumerProps {
   tabs?: ComponentStyleConfig & Pick<TabsProps, 'indicator' | 'indicatorSize'>;
   timeline?: ComponentStyleConfig;
   timePicker?: ComponentStyleConfig;
+  tour?: TourConfig;
   upload?: ComponentStyleConfig;
   notification?: ComponentStyleConfig;
   tree?: ComponentStyleConfig;

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 |

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<ProviderChildrenProps> = (props) => {
     wave,
     dropdown,
     warning: warningConfig,
+    tour,
   } = props;
 
   // =================================== Context ===================================
@@ -426,6 +430,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     wave,
     dropdown,
     warning: warningConfig,
+    tour,
   };
 
   const config: ConfigConsumerProps = {

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 |

components/tour/demo/basic.tsx

@@ -33,23 +33,19 @@ const App: React.FC = () => {
       target: () => ref3.current,
     },
   ];
-
   return (
     <>
       <Button type="primary" onClick={() => setOpen(true)}>
         Begin Tour
       </Button>
-
       <Divider />
-
       <Space>
         <Button ref={ref1}> Upload</Button>
         <Button ref={ref2} type="primary">
           Save
         </Button>
         <Button ref={ref3} icon={<EllipsisOutlined />} />
       </Space>
-
       <Tour open={open} onClose={() => setOpen(false)} steps={steps} />
     </>
   );

components/tour/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useContext } from 'react';
 import RCTour from '@rc-component/tour';
 import classNames from 'classnames';
 
@@ -24,12 +24,12 @@ const Tour: React.FC<TourProps> & { _InternalPanelDoNotUseOrYouWillBeFired: type
     steps,
     ...restProps
   } = props;
-  const { getPrefixCls, direction } = useContext<ConfigConsumerProps>(ConfigContext);
+  const { getPrefixCls, direction, tour } = useContext<ConfigConsumerProps>(ConfigContext);
   const prefixCls = getPrefixCls('tour', customizePrefixCls);
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
   const [, token] = useToken();
 
-  const mergedSteps = useMemo(
+  const mergedSteps = React.useMemo<TourProps['steps']>(
     () =>
       steps?.map((step) => ({
         ...step,
@@ -63,6 +63,7 @@ const Tour: React.FC<TourProps> & { _InternalPanelDoNotUseOrYouWillBeFired: type
       type={type}
       stepProps={stepProps}
       current={stepCurrent}
+      closeIcon={tour?.closeIcon}
       indicatorsRender={indicatorsRender}
     />
   );

components/tour/panelRender.tsx

@@ -1,13 +1,14 @@
-import CloseOutlined from '@ant-design/icons/CloseOutlined';
-import classNames from 'classnames';
 import type { ReactNode } from 'react';
 import React from 'react';
+import CloseOutlined from '@ant-design/icons/CloseOutlined';
+import classNames from 'classnames';
+
+import useClosable from '../_util/hooks/useClosable';
 import type { ButtonProps } from '../button';
 import Button from '../button';
 import { useLocale } from '../locale';
 import defaultLocale from '../locale/en_US';
 import type { TourStepProps } from './interface';
-import useClosable from '../_util/hooks/useClosable';
 
 function isValidNode(node: ReactNode): boolean {
   return node !== undefined && node !== null;
@@ -23,13 +24,8 @@ interface TourPanelProps {
 
 // Due to the independent design of Panel, it will be too coupled to put in rc-tour,
 // so a set of Panel logic is implemented separately in antd.
-const TourPanel: React.FC<TourPanelProps> = ({
-  stepProps,
-  current,
-  type,
-  indicatorsRender,
-  closeIcon,
-}) => {
+const TourPanel: React.FC<TourPanelProps> = (props) => {
+  const { stepProps, current, type, closeIcon, indicatorsRender } = props;
   const {
     prefixCls,
     total = 1,
@@ -49,6 +45,7 @@ const TourPanel: React.FC<TourPanelProps> = ({
   const mergedType = stepType ?? type;
 
   const mergedCloseIcon = stepCloseIcon ?? closeIcon;
+
   const mergedClosable = mergedCloseIcon !== false && mergedCloseIcon !== null;
 
   const [closable, mergedDisplayCloseIcon] = useClosable(