feat(modal): Add a close button element in semantic

Author: divyeshagrawal

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

@@ -868,6 +868,104 @@ exports[`renders components/modal/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>
       </ul>
     </div>
   </div>

components/modal/__tests__/semantic.test.tsx

@@ -26,6 +26,7 @@ describe('Modal.Semantic', () => {
       title: 'custom-title',
       body: 'custom-body',
       footer: 'custom-footer',
+      close: 'custom-close',
     };
 
     const customStyles = {
@@ -36,6 +37,7 @@ describe('Modal.Semantic', () => {
       title: { padding: '50px' },
       body: { padding: '60px' },
       footer: { padding: '70px' },
+      close: { color: 'rgb(255,255,255)' },
     };
 
     render(<Modal classNames={customClassNames} styles={customStyles} open title="title" />);
@@ -47,6 +49,7 @@ describe('Modal.Semantic', () => {
     const titleElement = document.querySelector<HTMLElement>('.ant-modal-title');
     const bodyElement = document.querySelector<HTMLElement>('.ant-modal-body');
     const footerElement = document.querySelector<HTMLElement>('.ant-modal-footer');
+    const closeElement = document.querySelector<HTMLElement>('.ant-modal-close');
 
     // check classNames
     expect(rootElement).toHaveClass('custom-root');
@@ -56,6 +59,7 @@ describe('Modal.Semantic', () => {
     expect(titleElement).toHaveClass('custom-title');
     expect(bodyElement).toHaveClass('custom-body');
     expect(footerElement).toHaveClass('custom-footer');
+    expect(closeElement).toHaveClass('custom-close');
 
     // check styles
     expect(rootElement).toHaveStyle({ padding: customStyles.root.padding });
@@ -65,6 +69,7 @@ describe('Modal.Semantic', () => {
     expect(titleElement).toHaveStyle({ padding: customStyles.title.padding });
     expect(bodyElement).toHaveStyle({ padding: customStyles.body.padding });
     expect(footerElement).toHaveStyle({ padding: customStyles.footer.padding });
+    expect(closeElement).toHaveStyle({ color: customStyles.close.color });
   });
 
   it('Modal should apply dynamic classNames and styles from props function', () => {

components/modal/demo/_semantic.tsx

@@ -16,6 +16,7 @@ const locales = {
     title: '标题元素，包含外边距、颜色、字体权重、字体大小、行高、文字换行等标题文字样式',
     body: '内容元素，包含内容区域的背景色、内边距等内容展示样式',
     footer: '底部元素，包含底部的背景色、内边距、上边框、圆角等底部区域样式',
+    close: '预览关闭按钮元素，设置按钮的基础样式',
   },
   en: {
     root: 'Root element with relative positioning, top position, width, max-width, margins, bottom padding and other basic layout styles for modal container',
@@ -30,6 +31,7 @@ const locales = {
     body: 'Body element with content area background color, padding and other content display styles',
     footer:
       'Footer element with footer background color, padding, top border, border-radius and other footer area styles',
+    close: 'Preview close button element, sets basic button styles',
   },
 };
 
@@ -67,6 +69,7 @@ const App: React.FC = () => {
         { name: 'title', desc: locale.title, version: '6.0.0' },
         { name: 'body', desc: locale.body, version: '5.13.0' },
         { name: 'footer', desc: locale.footer, version: '5.13.0' },
+        { name: 'close', desc: locale.close, version: '6.4.0' },
       ]}
     >
       <BlockModal title="Title" closable={false} open getContainer={false} width={400}>

components/modal/interface.ts

@@ -18,6 +18,7 @@ export type ModalSemanticType = {
     title?: string;
     wrapper?: string;
     mask?: string;
+    close?: string;
   };
   styles?: {
     root?: React.CSSProperties;
@@ -28,6 +29,7 @@ export type ModalSemanticType = {
     title?: React.CSSProperties;
     wrapper?: React.CSSProperties;
     mask?: React.CSSProperties;
+    close?: React.CSSProperties;
   };
 };
 

package.json

@@ -117,7 +117,7 @@
     "@rc-component/checkbox": "~2.0.0",
     "@rc-component/collapse": "~1.2.0",
     "@rc-component/color-picker": "~3.1.1",
-    "@rc-component/dialog": "~1.8.4",
+    "@rc-component/dialog": "~1.9.0",
     "@rc-component/drawer": "~1.4.2",
     "@rc-component/dropdown": "~1.0.2",
     "@rc-component/form": "~1.7.1",