Merge pull request #103 from ZIA-Hans/feat/modal/custom-close-icon

feat(modal): let modal can custom close icon
FriedRiceNoodles · Mar 27, 2024 · 205bf8b · 205bf8b
2 parents 88ca6be + 5511cee
commit 205bf8b
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 24 deletions.
diff --git a/.changeset/shy-beers-clean.md 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
@@ -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/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
 

diff --git 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
@@ -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">