feat(tour): add a close button element for semantic (ant-design#57268)

Co-authored-by: 遇见同学 <1875694521@qq.com>

Author: coding-ice

components/tour/__tests__/__snapshots__/demo-semantic.test.tsx.snap

@@ -37,7 +37,7 @@ exports[`renders components/tour/demo/_semantic.tsx correctly 1`] = `
             >
               <button
                 aria-label="Close"
-                class="ant-tour-close"
+                class="ant-tour-close semantic-mark-close"
                 type="button"
               >
                 <span
@@ -512,6 +512,104 @@ exports[`renders components/tour/demo/_semantic.tsx correctly 1`] = `
             </div>
           </div>
         </li>
+        <li
+          class="acss-1ehfz5v"
+        >
+          <div
+            class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
+          >
+            <div
+              class="ant-flex css-var-test-id ant-flex-align-center ant-flex-justify-space-between ant-flex-gap-small"
+            >
+              <div
+                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
+              >
+                <h5
+                  class="ant-typography css-var-test-id"
+                  style="margin: 0px;"
+                >
+                  close
+                </h5>
+                <span
+                  class="ant-tag ant-tag-filled ant-tag-blue css-var-test-id"
+                >
+                  6.4.0
+                </span>
+              </div>
+              <div
+                class="ant-flex css-var-test-id ant-flex-align-center ant-flex-gap-small"
+              >
+                <button
+                  aria-hidden="true"
+                  class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
+                  type="button"
+                >
+                  <span
+                    class="ant-btn-icon"
+                  >
+                    <span
+                      aria-label="pushpin"
+                      class="anticon anticon-pushpin"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="pushpin"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3a33.23 33.23 0 00-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4a259.92 259.92 0 01-30.4 153.9L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </button>
+                <button
+                  aria-hidden="true"
+                  class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
+                  type="button"
+                >
+                  <span
+                    class="ant-btn-icon"
+                  >
+                    <span
+                      aria-label="info-circle"
+                      class="anticon anticon-info-circle"
+                      role="img"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        data-icon="info-circle"
+                        fill="currentColor"
+                        focusable="false"
+                        height="1em"
+                        viewBox="64 64 896 896"
+                        width="1em"
+                      >
+                        <path
+                          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+                        />
+                        <path
+                          d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              class="ant-typography css-var-test-id"
+              style="margin: 0px; font-size: 12px;"
+            >
+              关闭按钮元素，设置绝对定位、尺寸、颜色、悬浮态和交互反馈等关闭按钮样式
+            </div>
+          </div>
+        </li>
         <li
           class="acss-1ehfz5v"
         >

components/tour/__tests__/semantic.test.tsx

@@ -9,6 +9,7 @@ describe('Tour.Semantic', () => {
     const customClassnames: TourProps['classNames'] = (_info) => ({
       mask: _info?.props.type === 'primary' ? 'primary-mask-fn' : 'primary-mask-fn',
       actions: 'custom-actions-fn',
+      close: 'custom-close-fn',
       title: 'custom-title-fn',
       header: 'custom-header-fn',
       section: 'custom-section-fn',
@@ -23,6 +24,7 @@ describe('Tour.Semantic', () => {
     const customStyles: TourProps['styles'] = (_info) => ({
       mask: { color: _info?.props.type === 'primary' ? 'white' : 'black' },
       actions: { color: 'blue' },
+      close: { color: 'pink' },
       title: { fontSize: '20px' },
       header: { backgroundColor: 'gray' },
       section: { margin: _info?.props.type === 'primary' ? '10px' : '5px' },
@@ -78,6 +80,7 @@ describe('Tour.Semantic', () => {
     const footerElement = document.querySelector<HTMLElement>('.ant-tour-footer');
     const descriptionElement = document.querySelector<HTMLElement>('.ant-tour-description');
     const coverElement = document.querySelector<HTMLElement>('.ant-tour-cover');
+    const closeElement = document.querySelector<HTMLElement>('.ant-tour-close');
     const indicatorElement = document.querySelector<HTMLElement>('.ant-tour-indicator');
     const indicatorsElement = document.querySelector<HTMLElement>('.ant-tour-indicators');
     const rootElement = document.querySelector<HTMLElement>('.ant-tour-mask');
@@ -90,6 +93,7 @@ describe('Tour.Semantic', () => {
     expect(footerElement).toHaveClass('primary-footer-fn');
     expect(descriptionElement).toHaveClass('custom-description-fn');
     expect(coverElement).toHaveClass('custom-cover-fn');
+    expect(closeElement).toHaveClass('custom-close-fn');
     expect(indicatorElement).toHaveClass('custom-indicator-fn');
     expect(indicatorsElement).toHaveClass('custom-indicators-fn');
     expect(rootElement).toHaveClass('custom-root-fn');
@@ -102,6 +106,7 @@ describe('Tour.Semantic', () => {
     expect(footerElement).toHaveStyle({ borderTopWidth: '1px' });
     expect(descriptionElement).toHaveStyle({ fontStyle: 'italic' });
     expect(coverElement).toHaveStyle({ color: 'rgb(255, 0, 0)' });
+    expect(closeElement).toHaveStyle({ color: 'rgb(255, 192, 203)' });
     expect(indicatorElement).toHaveStyle({ color: 'rgb(0, 128, 0)' });
     expect(indicatorsElement).toHaveStyle({ color: 'rgb(255, 255, 0)' });
     expect(rootElement).toHaveStyle({ backgroundColor: 'rgb(255, 255, 0)' });

components/tour/demo/_semantic.tsx

@@ -9,6 +9,7 @@ const locales = {
   cn: {
     root: '引导根容器，设置绝对定位、层级控制、最大宽度、可见性、箭头背景色变量、主题样式等容器样式',
     cover: '卡片封面区域，设置文本居中对齐、内边距、图片宽度等图片展示样式',
+    close: '关闭按钮元素，设置绝对定位、尺寸、颜色、悬浮态和交互反馈等关闭按钮样式',
     section:
       '卡片主要内容区域，设置文本对齐、边框圆角、盒阴影、相对定位、背景色、边框、背景裁剪等卡片样式',
     footer: '卡片底部操作区域，设置内边距、文本右对齐、边框圆角、Flex布局等底部容器样式',
@@ -25,6 +26,8 @@ const locales = {
     root: 'Tour root container with absolute positioning, z-index control, max width, visibility, arrow background color variable, theme styles and other container styles',
     cover:
       'Card cover area with text center alignment, padding, image width and other image display styles',
+    close:
+      'Close button element with absolute positioning, size, color, hover state and other interactive feedback styles',
     section:
       'Card main content area with text alignment, border radius, box shadow, relative positioning, background color, border, background clip and other card styles',
     footer:
@@ -102,6 +105,7 @@ const App: React.FC = () => {
         { name: 'mask', desc: locale.mask, version: '6.0.0' },
         { name: 'section', desc: locale.section, version: '6.0.0' },
         { name: 'cover', desc: locale.cover, version: '6.0.0' },
+        { name: 'close', desc: locale.close, version: '6.4.0' },
         { name: 'header', desc: locale.header, version: '6.0.0' },
         { name: 'title', desc: locale.title, version: '6.0.0' },
         { name: 'description', desc: locale.description, version: '6.0.0' },

components/tour/interface.ts

@@ -10,6 +10,7 @@ export type TourSemanticType = {
   classNames?: {
     root?: string;
     cover?: string;
+    close?: string;
     mask?: string;
     section?: string;
     footer?: string;
@@ -23,6 +24,7 @@ export type TourSemanticType = {
   styles?: {
     root?: React.CSSProperties;
     cover?: React.CSSProperties;
+    close?: React.CSSProperties;
     mask?: React.CSSProperties;
     section?: React.CSSProperties;
     footer?: React.CSSProperties;

components/tour/panelRender.tsx

@@ -56,7 +56,8 @@ const TourPanel: React.FC<TourPanelProps> = (props) => {
     <button
       type="button"
       onClick={onClose}
-      className={`${prefixCls}-close`}
+      className={clsx(`${prefixCls}-close`, classNames.close)}
+      style={styles.close}
       aria-label={contextLocaleGlobal?.close}
       {...ariaProps}
     >

package.json

@@ -144,7 +144,7 @@
     "@rc-component/tabs": "~1.8.0",
     "@rc-component/textarea": "~1.2.0",
     "@rc-component/tooltip": "~1.4.0",
-    "@rc-component/tour": "~2.3.0",
+    "@rc-component/tour": "~2.4.0",
     "@rc-component/tree": "~1.2.4",
     "@rc-component/tree-select": "~1.8.0",
     "@rc-component/trigger": "^3.9.0",