From 57be102a2c8ec2c7945c8e7cabafcdc364cb81ab Mon Sep 17 00:00:00 2001
From: ZIA-Hans <1025013204@qq.com>
Date: Wed, 27 Mar 2024 14:46:59 +0800
Subject: [PATCH 1/2] feat(modal): let modal can custom close icon

---
 .changeset/shy-beers-clean.md           |  6 ++++
 docs/example/Modal/demos/basicUsage.tsx |  2 +-
 packages/banana/src/modal/index.test.ts | 14 +++++++++
 packages/banana/src/modal/index.ts      | 38 +++++++++++++------------
 4 files changed, 41 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/shy-beers-clean.md

diff --git a/.changeset/shy-beers-clean.md b/.changeset/shy-beers-clean.md
new file mode 100644
index 00000000..8a6e7727
--- /dev/null
+++ b/.changeset/shy-beers-clean.md
@@ -0,0 +1,6 @@
+---
+'@banana-ui/banana': patch
+'@banana-ui/react': patch
+---
+
+let modal can custom close icon
diff --git a/docs/example/Modal/demos/basicUsage.tsx b/docs/example/Modal/demos/basicUsage.tsx
index e5b8680d..85f471d1 100644
--- a/docs/example/Modal/demos/basicUsage.tsx
+++ b/docs/example/Modal/demos/basicUsage.tsx
@@ -3,7 +3,7 @@
  */
 
 import { Button, Message, Modal } from '@banana-ui/react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 export default function BasicUsage() {
   const [visible, setVisible] = useState(false);
diff --git a/packages/banana/src/modal/index.test.ts b/packages/banana/src/modal/index.test.ts
index 95e706a5..d13300b7 100644
--- a/packages/banana/src/modal/index.test.ts
+++ b/packages/banana/src/modal/index.test.ts
@@ -85,6 +85,20 @@ describe('slots', () => {
     expect(footerSlot.assignedElements().length).to.equal(1);
     expect(footerSlot.assignedElements()[0].textContent).to.equal('Modal footer');
   });
+
+  it('should render the closeIcon slot', async () => {
+    const element = await fixture<BModal>(html`
+      <b-modal open>
+        <p>Modal content</p>
+        <p>Modal content</p>
+        <p slot="closeIcon">CLOSE</p>
+      </b-modal>
+    `);
+    const iconSlot = element.shadowRoot?.querySelector('slot[name="closeIcon"]') as HTMLSlotElement;
+
+    expect(iconSlot.assignedElements().length).to.equal(1);
+    expect(iconSlot.assignedElements()[0].textContent).to.equal('CLOSE');
+  });
 });
 
 describe('custom width', () => {
diff --git a/packages/banana/src/modal/index.ts b/packages/banana/src/modal/index.ts
index c01dbce4..969a8b7f 100644
--- a/packages/banana/src/modal/index.ts
+++ b/packages/banana/src/modal/index.ts
@@ -74,24 +74,26 @@ export default class BModal extends LitElement {
       <b-overlay ?open=${this.open} @close=${this._handleCancel}>
         <div part="base" class="modal">
           <div part="close" class="modal__close" @click=${this._handleCancel}>
-            <svg
-              viewBox="0 0 1024 1024"
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              p-id="1251"
-              width="20"
-              height="20"
-              fill="currentColor"
-            >
-              <path
-                d="M822.003 776.822l0.023-0.022-575.522-575.483c-5.788-5.792-13.786-9.374-22.621-9.374-17.662 0-31.98 14.318-31.98 31.98 0 8.834 3.582 16.832 9.373 22.62L776.112 821.34c5.84 6.278 14.167 10.21 23.417 10.21 17.662 0 31.98-14.318 31.98-31.98 0-8.901-3.638-16.949-9.506-22.747z"
-                p-id="1252"
-              ></path>
-              <path
-                d="M776.784 201.448l-0.023-0.022-575.483 575.521c-5.792 5.788-9.374 13.786-9.374 22.621 0 17.663 14.318 31.98 31.98 31.98 8.834 0 16.832-3.582 22.62-9.373L821.301 247.34c6.278-5.839 10.21-14.166 10.21-23.416 0-17.662-14.318-31.98-31.98-31.98-8.902 0-16.95 3.637-22.747 9.505z"
-                p-id="1253"
-              ></path>
-            </svg>
+            <slot name="closeIcon">
+              <svg
+                viewBox="0 0 1024 1024"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                p-id="1251"
+                width="20"
+                height="20"
+                fill="currentColor"
+              >
+                <path
+                  d="M822.003 776.822l0.023-0.022-575.522-575.483c-5.788-5.792-13.786-9.374-22.621-9.374-17.662 0-31.98 14.318-31.98 31.98 0 8.834 3.582 16.832 9.373 22.62L776.112 821.34c5.84 6.278 14.167 10.21 23.417 10.21 17.662 0 31.98-14.318 31.98-31.98 0-8.901-3.638-16.949-9.506-22.747z"
+                  p-id="1252"
+                ></path>
+                <path
+                  d="M776.784 201.448l-0.023-0.022-575.483 575.521c-5.792 5.788-9.374 13.786-9.374 22.621 0 17.663 14.318 31.98 31.98 31.98 8.834 0 16.832-3.582 22.62-9.373L821.301 247.34c6.278-5.839 10.21-14.166 10.21-23.416 0-17.662-14.318-31.98-31.98-31.98-8.902 0-16.95 3.637-22.747 9.505z"
+                  p-id="1253"
+                ></path>
+              </svg>
+            </slot>
           </div>
           <div part="title" class="modal__title">
             <slot name="title">

From 5511cee90ce34f43ac2e74d57d9948aa932c7a0c Mon Sep 17 00:00:00 2001
From: ZIA-Hans <1025013204@qq.com>
Date: Wed, 27 Mar 2024 15:04:37 +0800
Subject: [PATCH 2/2] docs(modal): complete docs

---
 docs/example/Modal/index.md | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/docs/example/Modal/index.md b/docs/example/Modal/index.md
index dabc065c..f6bf7a4a 100644
--- a/docs/example/Modal/index.md
+++ b/docs/example/Modal/index.md
@@ -61,11 +61,12 @@ demo:
 
 ## 插槽 - Slots
 
-| 插槽      | 说明         |
-| --------- | ------------ |
-| (default) | 弹窗内容区域 |
-| title     | 标题区域     |
-| footer    | 底部按钮区域 |
+| 插槽      | 说明                 |
+| --------- | -------------------- |
+| (default) | 弹窗内容区域         |
+| title     | 标题区域             |
+| closeIcon | 右上角关闭 icon 区域 |
+| footer    | 底部按钮区域         |
 
 ## CSS Parts