diff --git a/components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap index 21f018e0fae2..6e4007551b55 100644 --- a/components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -178,75 +178,83 @@ exports[`renders ./components/tour/demo/render-panel.tsx extend context correctl class="ant-tour-inner" role="tooltip" > - - - -
-
- Hello World! -
-
-
- Hello World?! -
- - - - - -
-
- + Hello World?! +
+
+
+ + + + + + +
+
+ +
+
@@ -265,94 +273,102 @@ exports[`renders ./components/tour/demo/render-panel.tsx extend context correctl class="ant-tour-inner" role="tooltip" > - - -
- tour.png -
-
- Hello World! -
-
-
- Hello World?! -
-
-
- - - - - - -
-
- - +
+ + + + + + + +
+
+ + +
+
@@ -371,80 +387,88 @@ exports[`renders ./components/tour/demo/render-panel.tsx extend context correctl class="ant-tour-inner" role="tooltip" > - - -
- Hello World! -
-
-
- Hello World?! -
-
-
- - - - -
-
- - +
+ + + + + +
+
+ + +
+
diff --git a/components/tour/__tests__/__snapshots__/demo.test.ts.snap b/components/tour/__tests__/__snapshots__/demo.test.ts.snap index 41e26a7a2e4e..4b510029920d 100644 --- a/components/tour/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/tour/__tests__/__snapshots__/demo.test.ts.snap @@ -178,75 +178,83 @@ exports[`renders ./components/tour/demo/render-panel.tsx correctly 1`] = ` class="ant-tour-inner" role="tooltip" > - - - -
-
- Hello World! -
-
-
- Hello World?! -
- - - - - -
-
- + Hello World?! +
+
+
+ + + + + + +
+
+ +
+
@@ -265,94 +273,102 @@ exports[`renders ./components/tour/demo/render-panel.tsx correctly 1`] = ` class="ant-tour-inner" role="tooltip" > - - -
- tour.png -
-
- Hello World! -
-
-
- Hello World?! -
-
-
- - - - - - -
-
- - +
+ + + + + + + +
+
+ + +
+
@@ -371,80 +387,88 @@ exports[`renders ./components/tour/demo/render-panel.tsx correctly 1`] = ` class="ant-tour-inner" role="tooltip" > - - -
- Hello World! -
-
-
- Hello World?! -
-
-
- - - - -
-
- - +
+ + + + + +
+
+ + +
+
diff --git a/components/tour/__tests__/__snapshots__/index.test.tsx.snap b/components/tour/__tests__/__snapshots__/index.test.tsx.snap index 00d7865d661d..8cd203e9c38e 100644 --- a/components/tour/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/tour/__tests__/__snapshots__/index.test.tsx.snap @@ -1,61 +1,647 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Tour Primary 1`] = ` - + +
+
+
+
+ +
+
+
+
+
+ + + +
+
+ primary title +
+
+
+ primary description. +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + +
+
+
+ `; exports[`Tour basic 1`] = ` -
- - - -
+ +
+
+
+
+
+
+
+ + + +
+
+
+
+ +`; + +exports[`Tour button props onClick 1`] = ` + +
+
+
+ + finishButton + + +
+
+
+ `; exports[`Tour rtl render component should be rendered correctly in RTL direction 1`] = `null`; exports[`Tour single 1`] = ` - + +
+ +
+
+
+
+
+ + + +
+
+ cover title +
+
+
+ cover description. +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + +
+
+
+ +`; + +exports[`Tour step support Primary 1`] = ` + +
+
+
+
+
+ +
+
+
+
+
+ + + +
+
+ primary title +
+
+
+ primary description. +
+
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + +
+
+
+ `; exports[`Tour steps is empty 1`] = ` - + +
+
+ +
+ `; exports[`Tour steps props stepRender 1`] = ` - + +
+
+ +
+
+
+ `; diff --git a/components/tour/__tests__/index.test.tsx b/components/tour/__tests__/index.test.tsx index 5dcc54b5d6b8..d2ceac4f19a1 100644 --- a/components/tour/__tests__/index.test.tsx +++ b/components/tour/__tests__/index.test.tsx @@ -29,10 +29,10 @@ describe('Tour', () => { ); }; - const { getByText, container } = render(); + const { getByText, baseElement } = render(); expect(getByText('cover title')).toBeTruthy(); expect(getByText('cover description.')).toBeTruthy(); - expect(container.firstChild).toMatchSnapshot(); + expect(baseElement).toMatchSnapshot(); }); it('steps is empty', () => { @@ -48,8 +48,8 @@ describe('Tour', () => { ); }; - const { container } = render(); - expect(container.firstChild).toMatchSnapshot(); + const { baseElement } = render(); + expect(baseElement).toMatchSnapshot(); }); it('steps props stepRender', () => { @@ -95,14 +95,14 @@ describe('Tour', () => { ); }; - const { container } = render(); + const { baseElement } = render(); fireEvent.click(screen.getByRole('button', { name: 'Next' })); fireEvent.click(screen.getByRole('button', { name: 'Previous' })); fireEvent.click(screen.getByRole('button', { name: 'Next' })); fireEvent.click(screen.getByRole('button', { name: 'Next' })); fireEvent.click(screen.getByRole('button', { name: 'Finish' })); expect(onClickMock).toHaveBeenCalledTimes(5); - expect(container.firstChild).toMatchSnapshot(); + expect(baseElement).toMatchSnapshot(); }); it('button props onClick', () => { @@ -141,15 +141,16 @@ describe('Tour', () => { ); }; - const { container } = render(); - expect(container.querySelector('#btnName')).toHaveTextContent('defaultBtn'); + const { baseElement } = render(); + expect(baseElement.querySelector('#btnName')).toHaveTextContent('defaultBtn'); fireEvent.click(screen.getByRole('button', { name: 'Next' })); - expect(container.querySelector('#btnName')).toHaveTextContent('nextButton'); + expect(baseElement.querySelector('#btnName')).toHaveTextContent('nextButton'); fireEvent.click(screen.getByRole('button', { name: 'Previous' })); - expect(container.querySelector('#btnName')).toHaveTextContent('prevButton'); + expect(baseElement.querySelector('#btnName')).toHaveTextContent('prevButton'); fireEvent.click(screen.getByRole('button', { name: 'Next' })); fireEvent.click(screen.getByRole('button', { name: 'Finish' })); - expect(container.querySelector('#btnName')).toHaveTextContent('finishButton'); + expect(baseElement.querySelector('#btnName')).toHaveTextContent('finishButton'); + expect(baseElement).toMatchSnapshot(); }); it('Primary', () => { @@ -174,10 +175,47 @@ describe('Tour', () => { ); }; - const { getByText, container } = render(); + const { getByText, baseElement } = render(); expect(getByText('primary description.')).toBeTruthy(); - expect(container.querySelector('.ant-tour')).toHaveClass('ant-tour-primary'); - expect(container.firstChild).toMatchSnapshot(); + expect(baseElement.querySelector('.ant-tour-content')).toHaveClass('ant-tour-primary'); + expect(baseElement).toMatchSnapshot(); + }); + + it('step support Primary', () => { + const App: React.FC = () => { + const coverBtnRef = useRef(null); + return ( + <> + + + coverBtnRef.current!, + }, + { + title: 'primary title', + description: 'primary description.', + target: () => coverBtnRef.current!, + type: 'primary', + }, + ]} + /> + + ); + }; + const { getByText, container, baseElement } = render(); + expect(getByText('cover description.')).toBeTruthy(); + expect(container.querySelector('.ant-tour-content.ant-tour-primary')).toBeFalsy(); + fireEvent.click(screen.getByRole('button', { name: 'Next' })); + expect(getByText('primary description.')).toBeTruthy(); + expect(container.querySelector('.ant-tour-content.ant-tour-primary')).toBeTruthy(); + expect(baseElement).toMatchSnapshot(); }); it('basic', () => { @@ -243,7 +281,7 @@ describe('Tour', () => { ); }; - const { getByText, container } = render(); + const { getByText, container, baseElement } = render(); fireEvent.click(screen.getByRole('button', { name: 'Show' })); expect(getByText('Show in Center')).toBeTruthy(); fireEvent.click(screen.getByRole('button', { name: 'Next' })); @@ -252,7 +290,7 @@ describe('Tour', () => { expect(getByText('Adjust Placement')).toBeTruthy(); fireEvent.click(screen.getByRole('button', { name: 'Finish' })); expect(container.querySelector('.ant-tour')).toBeFalsy(); - expect(container.firstChild).toMatchSnapshot(); + expect(baseElement).toMatchSnapshot(); }); it('panelRender should correct render when total is undefined', () => { expect(() => { diff --git a/components/tour/index.tsx b/components/tour/index.tsx index 1b513bea97ea..87af40ced01d 100644 --- a/components/tour/index.tsx +++ b/components/tour/index.tsx @@ -27,9 +27,6 @@ const Tour: React.ForwardRefRenderFunction & { { [`${prefixCls}-rtl`]: direction === 'rtl', }, - { - [`${prefixCls}-primary`]: type === 'primary', - }, hashId, rootClassName, ); diff --git a/components/tour/panelRender.tsx b/components/tour/panelRender.tsx index 867780f99717..3d1a1869d78a 100644 --- a/components/tour/panelRender.tsx +++ b/components/tour/panelRender.tsx @@ -26,8 +26,12 @@ const panelRender = ( nextButtonProps, prevButtonProps, stepRender, + type: stepType, + arrow, + className, } = props; + const mergedType = typeof stepType !== 'undefined' ? stepType : type; const isLastStep = current === total - 1; const prevBtnClick = () => { @@ -80,47 +84,56 @@ const panelRender = ( )); const slickNode: ReactNode = total > 1 ? mergedSlickNode : null; - const mainBtnType = type === 'primary' ? 'default' : 'primary'; + const mainBtnType = mergedType === 'primary' ? 'default' : 'primary'; const secondaryBtnProps: ButtonProps = { type: 'default', - ghost: type === 'primary', + ghost: mergedType === 'primary', }; return ( {(contextLocale) => ( - <> - - {coverNode} - {headerNode} - {descriptionNode} -
-
{slickNode}
-
- {current !== 0 ? ( +
+ {arrow &&
} +
+ + {coverNode} + {headerNode} + {descriptionNode} +
+
{slickNode}
+
+ {current !== 0 ? ( + + ) : null} - ) : null} - +
- +
)} ); diff --git a/components/tour/style/index.tsx b/components/tour/style/index.tsx index 3a892c226160..5cc9d8c1f0dc 100644 --- a/components/tour/style/index.tsx +++ b/components/tour/style/index.tsx @@ -66,7 +66,7 @@ const genBaseStyle: GenerateStyle = (token) => { display: 'none', }, - // ============================= panel content =========================== + // ============================= panel content ============================ [`${componentCls}-content`]: { position: 'relative', }, @@ -152,9 +152,13 @@ const genBaseStyle: GenerateStyle = (token) => { }, }, - // ============================= primary type =========================== - [`&${componentCls}-primary`]: { + // ============================= primary type =========================== + // `$` for panel, `&$` for pure panel + [`${componentCls}-primary, &${componentCls}-primary`]: { '--antd-arrow-background-color': colorPrimary, + }, + + [`${componentCls}-primary`]: { [`${componentCls}-inner`]: { color: colorTextLightSolid, textAlign: 'start', @@ -180,6 +184,7 @@ const genBaseStyle: GenerateStyle = (token) => { [`${componentCls}-prev-btn`]: { color: colorTextLightSolid, borderColor: new TinyColor(colorTextLightSolid).setAlpha(0.15).toRgbString(), + backgroundColor: colorPrimary, '&:hover': { backgroundColor: new TinyColor(colorTextLightSolid).setAlpha(0.15).toRgbString(), diff --git a/package.json b/package.json index 6dcc816c1f49..6156b1f2962f 100644 --- a/package.json +++ b/package.json @@ -115,7 +115,7 @@ "@ant-design/react-slick": "~0.29.1", "@babel/runtime": "^7.18.3", "@ctrl/tinycolor": "^3.4.0", - "@rc-component/tour": "~1.0.1-2", + "@rc-component/tour": "~1.1.0", "classnames": "^2.2.6", "copy-to-clipboard": "^3.2.0", "dayjs": "^1.11.1",