Refactored OverlayPanel

components/lib/overlaypanel/OverlayPanel.vue

@@ -1,6 +1,6 @@
 <template>
     <Portal :appendTo="appendTo">
-        <transition name="p-overlaypanel" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
+        <transition name="p-popover" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
             <div v-if="visible" :ref="containerRef" v-focustrap role="dialog" :aria-modal="visible" @click="onOverlayClick" :class="cx('root')" v-bind="ptmi('root')">
                 <slot v-if="$slots.container" name="container" :onClose="hide" :onKeydown="(event) => onButtonKeydown(event)" :closeCallback="hide" :keydownCallback="(event) => onButtonKeydown(event)"></slot>
                 <template v-else>

components/lib/overlaypanel/style/OverlayPanelStyle.js

@@ -2,14 +2,12 @@ import BaseStyle from 'primevue/base/style';
 
 const classes = {
     root: ({ instance }) => [
-        'p-overlaypanel p-component',
+        'p-popover p-component',
         {
             'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
-    content: 'p-overlaypanel-content',
+    content: 'p-popover-content'
-    closeButton: 'p-overlaypanel-close p-link',
-    closeIcon: 'p-overlaypanel-close-icon'
 };
 
 export default BaseStyle.extend({

components/lib/themes/primeone/base/overlaypanel/index.js

@@ -1,6 +1,6 @@
 export default {
     css: ({ dt }) => `
-.p-overlaypanel {
+.p-popover {
     margin-top: 10px;
     background: ${dt('overlaypanel.background')};
     color: ${dt('overlaypanel.color')};
@@ -9,62 +9,34 @@ export default {
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
 }
 
-.p-overlaypanel-content {
+.p-popover-content {
     padding: 0.75rem;
 }
 
-.p-overlaypanel-flipped {
+.p-popover-flipped {
     margin-top: 0;
     margin-bottom: 10px;
 }
 
-.p-overlaypanel-close {
+.p-popover-enter-from {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-    width: 1.75rem;
-    height: 1.75rem;
-    background: transparent;
-    color: ${dt('overlaypanel.close.icon.color')};
-    border: 0 none;
-    border-radius: 50%;
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
-    outline-color: transparent;
-    position: absolute;
-    top: 0.25rem;
-    right: 0.25rem;
-}
-
-.p-overlaypanel-close:enabled:hover {
-    background: ${dt('overlaypanel.close.icon.hover.background')};
-    color: ${dt('overlaypanel.close.icon.hover.color')};
-}
-
-.p-overlaypanel-close:focus-visible {
-    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
-    outline-offset: ${dt('focus.ring.offset')};
-}
-
-.p-overlaypanel-enter-from {
     opacity: 0;
     transform: scaleY(0.8);
 }
 
-.p-overlaypanel-leave-to {
+.p-popover-leave-to {
     opacity: 0;
 }
 
-.p-overlaypanel-enter-active {
+.p-popover-enter-active {
     transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
 }
 
-.p-overlaypanel-leave-active {
+.p-popover-leave-active {
     transition: opacity 0.1s linear;
 }
 
-.p-overlaypanel:after,
+.p-popover:after,
-.p-overlaypanel:before {
+.p-popover:before {
     bottom: 100%;
     left: ${dt('{overlay.arrow.left} + 1.25rem', 0)};
     content: " ";
@@ -74,7 +46,7 @@ export default {
     pointer-events: none;
 }
 
-.p-overlaypanel:after {
+.p-popover:after {
     border-width: 8px;
     margin-left: -8px;
     border-style: solid;
@@ -82,7 +54,7 @@ export default {
     border-bottom-color: ${dt('overlaypanel.background')};
 }
 
-.p-overlaypanel:before {
+.p-popover:before {
     border-width: 10px;
     margin-left: -10px;
     border-style: solid;
@@ -90,18 +62,18 @@ export default {
     border-bottom-color: ${dt('overlaypanel.border.color')};
 }
 
-.p-overlaypanel-flipped:after,
+.p-popover-flipped:after,
-.p-overlaypanel-flipped:before {
+.p-popover-flipped:before {
     bottom: auto;
     top: 100%;
 }
 
-.p-overlaypanel.p-overlaypanel-flipped:after {
+.p-popover.p-popover-flipped:after {
     border-bottom-color: transparent;
     border-top-color: ${dt('overlaypanel.background')};
 }
 
-.p-overlaypanel.p-overlaypanel-flipped:before {
+.p-popover.p-popover-flipped:before {
     border-bottom-color: transparent;
     border-top-color: ${dt('overlaypanel.border.color')};
 }

components/lib/themes/primeone/presets/aura/overlaypanel/index.js

@@ -5,11 +5,6 @@ export default {
                 background: '{surface.0}',
                 borderColor: '{surface.200}',
                 color: '{surface.700}'
-            },
-            closeIcon: {
-                color: '{surface.500}',
-                hoverColor: '{surface.600}',
-                hoverBackground: '{surface.100}'
             }
         },
         dark: {
@@ -17,11 +12,6 @@ export default {
                 background: '{surface.900}',
                 borderColor: '{surface.700}',
                 color: '{surface.0}'
-            },
-            closeIcon: {
-                color: '{surface.400}',
-                hoverColor: '{surface.300}',
-                hoverBackground: '{surface.800}'
             }
         }
     }