fix: Fix tour step type

components/tour/__tests__/index.test.tsx

@@ -29,10 +29,10 @@ describe('Tour', () => {
         </>
       );
     };
-    const { getByText, container } = render(<App />);
+    const { getByText, baseElement } = render(<App />);
     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(<App />);
-    expect(container.firstChild).toMatchSnapshot();
+    const { baseElement } = render(<App />);
+    expect(baseElement).toMatchSnapshot();
   });
 
   it('steps props stepRender', () => {
@@ -95,14 +95,14 @@ describe('Tour', () => {
         </>
       );
     };
-    const { container } = render(<App />);
+    const { baseElement } = render(<App />);
     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(<App />);
-    expect(container.querySelector('#btnName')).toHaveTextContent('defaultBtn');
+    const { baseElement } = render(<App />);
+    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(<App />);
+    const { getByText, baseElement } = render(<App />);
     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<HTMLButtonElement>(null);
+      return (
+        <>
+          <button disabled ref={coverBtnRef} type="button">
+            Cover
+          </button>
+
+          <Tour
+            type="default"
+            steps={[
+              {
+                title: 'cover title',
+                description: 'cover description.',
+                target: () => coverBtnRef.current!,
+              },
+              {
+                title: 'primary title',
+                description: 'primary description.',
+                target: () => coverBtnRef.current!,
+                type: 'primary',
+              },
+            ]}
+          />
+        </>
+      );
+    };
+    const { getByText, container, baseElement } = render(<App />);
+    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(<App />);
+    const { getByText, container, baseElement } = render(<App />);
     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(() => {

components/tour/index.tsx

@@ -27,9 +27,6 @@ const Tour: React.ForwardRefRenderFunction<HTMLDivElement, TourProps> & {
     {
       [`${prefixCls}-rtl`]: direction === 'rtl',
     },
-    {
-      [`${prefixCls}-primary`]: type === 'primary',
-    },
     hashId,
     rootClassName,
   );

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 (
     <LocaleReceiver componentName="Tour" defaultLocale={defaultLocale.Tour}>
       {(contextLocale) => (
-        <>
-          <CloseOutlined className={`${prefixCls}-close`} onClick={onClose} />
-          {coverNode}
-          {headerNode}
-          {descriptionNode}
-          <div className={`${prefixCls}-footer`}>
-            <div className={`${prefixCls}-sliders`}>{slickNode}</div>
-            <div className={`${prefixCls}-buttons`}>
-              {current !== 0 ? (
+        <div
+          className={classNames(
+            mergedType === 'primary' ? `${prefixCls}-primary` : '',
+            className,
+            `${prefixCls}-content`,
+          )}
+        >
+          {arrow && <div className={`${prefixCls}-arrow`} key="arrow" />}
+          <div className={`${prefixCls}-inner`}>
+            <CloseOutlined className={`${prefixCls}-close`} onClick={onClose} />
+            {coverNode}
+            {headerNode}
+            {descriptionNode}
+            <div className={`${prefixCls}-footer`}>
+              <div className={`${prefixCls}-sliders`}>{slickNode}</div>
+              <div className={`${prefixCls}-buttons`}>
+                {current !== 0 ? (
+                  <Button
+                    {...secondaryBtnProps}
+                    {...prevButtonProps}
+                    onClick={prevBtnClick}
+                    size="small"
+                    className={`${prefixCls}-prev-btn`}
+                  >
+                    {prevButtonProps?.children ?? contextLocale.Previous}
+                  </Button>
+                ) : null}
                 <Button
-                  {...secondaryBtnProps}
-                  {...prevButtonProps}
-                  onClick={prevBtnClick}
+                  type={mainBtnType}
+                  {...nextButtonProps}
+                  onClick={nextBtnClick}
                   size="small"
-                  className={`${prefixCls}-prev-btn`}
+                  className={`${prefixCls}-next-btn`}
                 >
-                  {prevButtonProps?.children ?? contextLocale.Previous}
+                  {nextButtonProps?.children ??
+                    (isLastStep ? contextLocale.Finish : contextLocale.Next)}
                 </Button>
-              ) : null}
-              <Button
-                type={mainBtnType}
-                {...nextButtonProps}
-                onClick={nextBtnClick}
-                size="small"
-                className={`${prefixCls}-next-btn`}
-              >
-                {nextButtonProps?.children ??
-                  (isLastStep ? contextLocale.Finish : contextLocale.Next)}
-              </Button>
+              </div>
             </div>
           </div>
-        </>
+        </div>
       )}
     </LocaleReceiver>
   );

components/tour/style/index.tsx

@@ -66,7 +66,7 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
           display: 'none',
         },
 
-        // ============================= panel content ===========================
+        // ============================= panel content ============================
         [`${componentCls}-content`]: {
           position: 'relative',
         },
@@ -152,9 +152,13 @@ const genBaseStyle: GenerateStyle<TourToken> = (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<TourToken> = (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(),

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",