Merge branch 'feature' into feat/dialog_semantic

Author: coding-ice

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

@@ -52,7 +52,7 @@ exports[`renders components/image/demo/_semantic.tsx correctly 1`] = `
               />
             </div>
             <button
-              class="ant-image-preview-close"
+              class="ant-image-preview-close semantic-mark-popup-close"
             >
               <span
                 aria-label="close"
@@ -1041,6 +1041,104 @@ exports[`renders components/image/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;"
+                >
+                  popup.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>
       </ul>
     </div>
   </div>

components/image/__tests__/semantic.test.tsx

@@ -25,13 +25,15 @@ describe('Image.Semantic', () => {
       body: 'preview-body',
       footer: 'preview-footer',
       actions: 'preview-actions',
+      close: 'preview-close',
     };
     const previewStyles = {
       root: { color: 'rgb(255, 0, 0)' },
       mask: { color: 'rgb(0, 0, 255)' },
       body: { color: 'rgb(0, 255, 0)' },
       footer: { color: 'rgb(0, 0, 0)' },
       actions: { color: 'rgb(255, 255, 255)' },
+      close: { color: 'rgb(1, 2, 3)' },
     };
 
     render(
@@ -79,6 +81,9 @@ describe('Image.Semantic', () => {
       previewClassNames.actions,
     );
     expect(document.querySelector('.ant-image-preview-actions')).toHaveStyle(previewStyles.actions);
+
+    expect(document.querySelector('.ant-image-preview-close')).toHaveClass(previewClassNames.close);
+    expect(document.querySelector('.ant-image-preview-close')).toHaveStyle(previewStyles.close);
   });
   it('support classNames and styles as functions', () => {
     render(

components/image/demo/_semantic.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
+import type { ImageProps as RcImageProps } from '@rc-component/image';
 import { Flex, Image, theme } from 'antd';
 import type { ImageProps } from 'antd';
-import type { ImageProps as RcImageProps } from '@rc-component/image';
 import { createStaticStyles } from 'antd-style';
 import { clsx } from 'clsx';
 
@@ -26,6 +26,7 @@ const locales = {
     'popup.body': '预览内容元素，设置flex布局、居中对齐和指针事件样式',
     'popup.footer': '预览页脚元素，设置绝对定位、居中布局和底部操作区域样式',
     'popup.actions': '预览操作组元素，设置flex布局、背景色、圆角和操作按钮样式',
+    'popup.close': '预览关闭按钮元素，设置按钮的基础样式',
   },
   en: {
     root: 'Root element, sets relative positioning and inline-block layout styles',
@@ -42,6 +43,7 @@ const locales = {
       'Preview footer element, sets absolute positioning, center layout and bottom operation area styles',
     'popup.actions':
       'Preview actions group element, sets flex layout, background color, border radius and action button styles',
+    'popup.close': 'Preview close button element, sets basic button styles',
   },
 };
 interface ImagePropsBlock extends Omit<ImageProps, 'classNames'> {
@@ -93,6 +95,7 @@ const App: React.FC = () => {
         { name: 'popup.body', desc: locale['popup.body'] },
         { name: 'popup.footer', desc: locale['popup.footer'] },
         { name: 'popup.actions', desc: locale['popup.actions'] },
+        { name: 'popup.close', desc: locale['popup.close'], version: '6.4.0' },
       ]}
     >
       <Block />

components/image/index.tsx

@@ -77,6 +77,7 @@ export type ImageSemanticType = {
       body?: string;
       footer?: string;
       actions?: string;
+      close?: string;
     };
   };
   styles?: {
@@ -92,6 +93,7 @@ export type ImageSemanticType = {
       body?: React.CSSProperties;
       footer?: React.CSSProperties;
       actions?: React.CSSProperties;
+      close?: React.CSSProperties;
     };
   };
 };