From 82fb1e1c65dd2c2ef2f3621d6eb502e25fd412e2 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:36:13 +0300
Subject: [PATCH] Refactor #3832 Refactor #3833 - For Sidebar

---
 api-generator/components/sidebar.js           | 10 ++++++++++
 components/lib/overlaypanel/OverlayPanel.d.ts |  2 +-
 components/lib/sidebar/Sidebar.d.ts           |  5 ++++-
 components/lib/sidebar/Sidebar.vue            | 10 +++++++---
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/api-generator/components/sidebar.js b/api-generator/components/sidebar.js
index 039930a1c..333484b7b 100644
--- a/api-generator/components/sidebar.js
+++ b/api-generator/components/sidebar.js
@@ -52,6 +52,12 @@ const SidebarProps = [
         type: 'boolean',
         default: 'false',
         description: 'Whether background scroll should be blocked when sidebar is visible.'
+    },
+    {
+        name: 'closeIcon',
+        type: 'string',
+        default: 'undefined',
+        description: 'Icon to display in the sidebar close button.'
     }
 ];
 
@@ -63,6 +69,10 @@ const SidebarEvents = [
     {
         name: 'show',
         description: 'Callback to invoke when sidebar gets shown.'
+    },
+    {
+        name: 'closeicon',
+        description: 'Custom close icon template.'
     }
 ];
 
diff --git a/components/lib/overlaypanel/OverlayPanel.d.ts b/components/lib/overlaypanel/OverlayPanel.d.ts
index da1287241..333888ac1 100755
--- a/components/lib/overlaypanel/OverlayPanel.d.ts
+++ b/components/lib/overlaypanel/OverlayPanel.d.ts
@@ -66,7 +66,7 @@ export interface OverlayPanelProps {
      */
     breakpoints?: OverlayPanelBreakpoints;
     /**
-     * Icon to display in the message close button.
+     * Icon to display in the overlaypanel close button.
      */
     closeIcon?: string | undefined;
 }
diff --git a/components/lib/sidebar/Sidebar.d.ts b/components/lib/sidebar/Sidebar.d.ts
index 4209543a8..6dc071c69 100755
--- a/components/lib/sidebar/Sidebar.d.ts
+++ b/components/lib/sidebar/Sidebar.d.ts
@@ -46,7 +46,6 @@ export interface SidebarProps {
     showCloseIcon?: boolean | undefined;
     /**
      * Icon to display in the sidebar close button.
-     * @defaultValue pi pi-times
      */
     closeIcon?: string | undefined;
     /**
@@ -73,6 +72,10 @@ export interface SidebarSlots {
      * Custom header template.
      */
     header(): VNode[];
+    /**
+     * Custom close icon template.
+     */
+    closeicon(): VNode[];
 }
 
 /**
diff --git a/components/lib/sidebar/Sidebar.vue b/components/lib/sidebar/Sidebar.vue
index 65a7f38f2..140cd9bea 100755
--- a/components/lib/sidebar/Sidebar.vue
+++ b/components/lib/sidebar/Sidebar.vue
@@ -8,7 +8,9 @@
                             <slot name="header"></slot>
                         </div>
                         <button v-if="showCloseIcon" :ref="closeButtonRef" v-ripple autofocus type="button" class="p-sidebar-close p-sidebar-icon p-link" :aria-label="closeAriaLabel" @click="hide">
-                            <span :class="['p-sidebar-close-icon', closeIcon]" />
+                            <slot name="closeicon">
+                                <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-sidebar-close-icon ', closeIcon]"></component>
+                            </slot>
                         </button>
                     </div>
                     <div :ref="contentRef" class="p-sidebar-content">
@@ -25,6 +27,7 @@ import FocusTrap from 'primevue/focustrap';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ZIndexUtils } from 'primevue/utils';
+import TimesIcon from 'primevue/icon/times';
 
 export default {
     name: 'Sidebar',
@@ -57,7 +60,7 @@ export default {
         },
         closeIcon: {
             type: String,
-            default: 'pi pi-times'
+            default: undefined
         },
         modal: {
             type: Boolean,
@@ -246,7 +249,8 @@ export default {
         ripple: Ripple
     },
     components: {
-        Portal: Portal
+        Portal: Portal,
+        TimesIcon
     }
 };
 </script>