Refactor #3832 Refactor #3833 - For Sidebar

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.'
     }
 ];
 

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;
 }

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[];
 }
 
 /**

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>