Refactor #5437 - For OverlayPanel

components/lib/overlaypanel/BaseOverlayPanel.vue

@@ -10,10 +10,6 @@ export default {
             type: Boolean,
             default: true
         },
-        showCloseIcon: {
-            type: Boolean,
-            default: false
-        },
         appendTo: {
             type: [String, Object],
             default: 'body'
@@ -30,10 +26,6 @@ export default {
             type: Object,
             default: null
         },
-        closeIcon: {
-            type: String,
-            default: undefined
-        },
         closeOnEscape: {
             type: Boolean,
             default: true

components/lib/overlaypanel/OverlayPanel.d.ts

@@ -10,7 +10,7 @@
 import { TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
-import { ClassComponent, GlobalComponentConstructor, PassThrough, HintedString } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, HintedString, PassThrough } from '../ts-helpers';
 
 export declare type OverlayPanelPassThroughOptionType = OverlayPanelPassThroughAttributes | ((options: OverlayPanelPassThroughMethodOptions) => OverlayPanelPassThroughAttributes | string) | string | null | undefined;
 
@@ -59,14 +59,6 @@ export interface OverlayPanelPassThroughOptions {
      * Used to pass attributes to the content's DOM element.
      */
     content?: OverlayPanelPassThroughOptionType;
-    /**
-     * Used to pass attributes to the close button's DOM element.
-     */
-    closeButton?: OverlayPanelPassThroughOptionType;
-    /**
-     * Used to pass attributes to the close icon's DOM element.
-     */
-    closeIcon?: OverlayPanelPassThroughOptionType;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
@@ -127,11 +119,6 @@ export interface OverlayPanelProps {
      * @defaultValue true
      */
     dismissable?: boolean;
-    /**
-     * When enabled, displays a close icon at top right corner.
-     * @defaultValue false
-     */
-    showCloseIcon?: boolean;
     /**
      * A valid query selector or an HTMLElement to specify where the overlay gets attached.
      * @defaultValue body
@@ -151,11 +138,6 @@ export interface OverlayPanelProps {
      * Object literal to define widths per screen size.
      */
     breakpoints?: OverlayPanelBreakpoints;
-    /**
-     * Icon to display in the overlaypanel close button.
-     * @deprecated since v3.27.0. Use 'closeicon' slot.
-     */
-    closeIcon?: string | undefined;
     /**
      * Used to pass attributes to DOM elements inside the component.
      * @type {OverlayPanelPassThroughOptions}
@@ -186,10 +168,6 @@ export interface OverlayPanelSlots {
      * Custom content template.
      */
     default(): VNode[];
-    /**
-     * Custom close icon template.
-     */
-    closeicon(): VNode[];
     /**
      * Custom container slot.
      * @param {Object} scope - container slot's params.

components/lib/overlaypanel/OverlayPanel.vue

@@ -7,11 +7,6 @@
                     <div :class="cx('content')" @click="onContentClick" @mousedown="onContentClick" @keydown="onContentKeydown" v-bind="ptm('content')">
                         <slot></slot>
                     </div>
-                    <button v-if="showCloseIcon" v-ripple :class="cx('closeButton')" :aria-label="closeAriaLabel" type="button" autofocus @click="hide" @keydown="onButtonKeydown" v-bind="ptm('closeButton')">
-                        <slot name="closeicon">
-                            <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeIcon'), closeIcon]" v-bind="ptm('closeIcon')"></component>
-                        </slot>
-                    </button>
                 </template>
             </div>
         </transition>
@@ -20,7 +15,6 @@
 
 <script>
 import FocusTrap from 'primevue/focustrap';
-import TimesIcon from 'primevue/icons/times';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
@@ -306,9 +300,6 @@ export default {
     computed: {
         attributeSelector() {
             return UniqueComponentId();
-        },
-        closeAriaLabel() {
-            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
         }
     },
     directives: {
@@ -316,8 +307,7 @@ export default {
         ripple: Ripple
     },
     components: {
-        Portal: Portal,
+        Portal
-        TimesIcon
     }
 };
 </script>