Refactored Dialog

components/lib/dialog/style/DialogStyle.js

@@ -43,11 +43,11 @@ const classes = {
     ],
     header: 'p-dialog-header',
     title: 'p-dialog-title',
-    icons: 'p-dialog-header-icons',
-    maximizableButton: 'p-dialog-header-icon p-dialog-header-maximize p-link',
-    maximizableIcon: 'p-dialog-header-maximize-icon',
-    closeButton: 'p-dialog-header-icon p-dialog-header-close p-link',
-    closeButtonIcon: 'p-dialog-header-close-icon',
+    icons: 'p-dialog-header-actions',
+    maximizableButton: 'p-dialog-maximize-button',
+    maximizableIcon: 'p-dialog-maximize-button-icon',
+    closeButton: 'p-dialog-close-button',
+    closeButtonIcon: 'p-dialog-close-button-icon',
     content: 'p-dialog-content',
     footer: 'p-dialog-footer'
 };

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

@@ -36,38 +36,11 @@ export default {
     gap: 0.5rem;
 }
 
-.p-dialog-header-icons {
+.p-dialog-header-actions {
     display: flex;
     align-items: center;
     gap: 0.5rem;
 }
-
-.p-dialog-header-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    position: relative;
-    width: 1.75rem;
-    height: 1.75rem;
-    color: ${dt('dialog.header.icon.color')};
-    border: 0 none;
-    background: transparent;
-    border-radius: 50%;
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
-    outline-color: transparent;
-}
-
-.p-dialog-header-icon:enabled:hover {
-    background: ${dt('dialog.header.icon.hover.background')};
-    color: ${dt('dialog.header.icon.hover.color')};
-}
-
-.p-dialog-header-icon:focus-visible {
-    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
-    outline-offset: ${dt('focus.ring.offset')};
-}
-
 .p-dialog-enter-active {
     transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
 }

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

@@ -5,11 +5,6 @@ export default {
                 background: '{surface.0}',
                 borderColor: '{surface.200}',
                 color: '{surface.700}'
-            },
-            headerIcon: {
-                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}'
-            },
-            headerIcon: {
-                color: '{surface.400}',
-                hoverColor: '{surface.300}',
-                hoverBackground: '{surface.800}'
             }
         }
     }