Refactor #3832 Refactor #3833 - For OverlayPanel

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

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

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

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>