From 93e29872e9cf74d5ec8b2298fb116f3c4bf37bc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bahad=C4=B1r=20Sofuo=C4=9Flu?= <bahadirsofuoglu@gmail.com>
Date: Fri, 7 Apr 2023 23:07:42 +0300
Subject: [PATCH] Refactor #3832 Refactor #3833 - For OverlayPanel

---
 api-generator/components/message.js           |  6 ++++++
 api-generator/components/overlaypanel.js      | 14 ++++++++++++++
 components/lib/overlaypanel/OverlayPanel.d.ts |  8 ++++++++
 components/lib/overlaypanel/OverlayPanel.vue  | 12 ++++++++++--
 4 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/api-generator/components/message.js b/api-generator/components/message.js
index 440d0668b..02be57a06 100644
--- a/api-generator/components/message.js
+++ b/api-generator/components/message.js
@@ -28,6 +28,12 @@ const MessageProps = [
         type: 'string',
         default: 'undefined',
         description: 'Display a custom icon for the message.'
+    },
+    {
+        name: 'closeIcon',
+        type: 'string',
+        default: 'undefined',
+        description: 'Display a custom close icon for the message.'
     }
 ];
 
diff --git a/api-generator/components/overlaypanel.js b/api-generator/components/overlaypanel.js
index 8a2d31acd..08992d344 100644
--- a/api-generator/components/overlaypanel.js
+++ b/api-generator/components/overlaypanel.js
@@ -40,6 +40,19 @@ const OverlayPanelProps = [
         type: 'object',
         default: 'null',
         description: 'Object literal to define widths per screen size.'
+    },
+    {
+        name: 'closeIcon',
+        type: 'string',
+        default: 'undefined',
+        description: 'Display a custom close icon for the message.'
+    }
+];
+
+const MessageSlots = [
+    {
+        name: 'closeicon',
+        description: 'Custom close icon template.'
     }
 ];
 
@@ -59,6 +72,7 @@ module.exports = {
         name: 'OverlayPanel',
         description: 'OverlayPanel is a container component positioned as connected to its target.',
         props: OverlayPanelProps,
+        slots: MessageSlots,
         events: OverlayPanelEvents
     }
 };
diff --git a/components/lib/overlaypanel/OverlayPanel.d.ts b/components/lib/overlaypanel/OverlayPanel.d.ts
index c7c7ab39b..da1287241 100755
--- a/components/lib/overlaypanel/OverlayPanel.d.ts
+++ b/components/lib/overlaypanel/OverlayPanel.d.ts
@@ -65,6 +65,10 @@ export interface OverlayPanelProps {
      * Object literal to define widths per screen size.
      */
     breakpoints?: OverlayPanelBreakpoints;
+    /**
+     * Icon to display in the message close button.
+     */
+    closeIcon?: string | undefined;
 }
 
 /**
@@ -75,6 +79,10 @@ export interface OverlayPanelSlots {
      * Custom content template.
      */
     default(): VNode[];
+    /**
+     * Custom close icon template.
+     */
+    closeicon(): VNode[];
 }
 
 /**
diff --git a/components/lib/overlaypanel/OverlayPanel.vue b/components/lib/overlaypanel/OverlayPanel.vue
index 6e45767ab..0a78f546a 100755
--- a/components/lib/overlaypanel/OverlayPanel.vue
+++ b/components/lib/overlaypanel/OverlayPanel.vue
@@ -6,7 +6,9 @@
                     <slot></slot>
                 </div>
                 <button v-if="showCloseIcon" v-ripple class="p-overlaypanel-close p-link" :aria-label="closeAriaLabel" type="button" autofocus @click="hide" @keydown="onButtonKeydown">
-                    <span class="p-overlaypanel-close-icon pi pi-times"></span>
+                    <slot name="closeicon">
+                        <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-overlaypanel-close-icon ', closeIcon]"></component>
+                    </slot>
                 </button>
             </div>
         </transition>
@@ -19,6 +21,7 @@ import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
 import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import TimesIcon from 'primevue/icon/times';
 
 export default {
     name: 'OverlayPanel',
@@ -48,6 +51,10 @@ export default {
         breakpoints: {
             type: Object,
             default: null
+        },
+        closeIcon: {
+            type: String,
+            default: undefined
         }
     },
     data() {
@@ -315,7 +322,8 @@ export default {
         ripple: Ripple
     },
     components: {
-        Portal: Portal
+        Portal: Portal,
+        TimesIcon
     }
 };
 </script>