fix for #5837 - ConfirmDialog unstyled / Tailwind default theme (#5934)

primefaces · Feb 10, 2024 · d8aead8 · d8aead8
1 parent e028771
commit d8aead8
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 67 deletions.
diff --git a/components/doc/confirmdialog/theming/tailwinddoc.js b/components/doc/confirmdialog/theming/tailwinddoc.js
@@ -6,75 +6,22 @@ export function TailwindDoc(props) {
     const code = {
         basic: `
 const Tailwind = {
-    dialog: {
-        root: ({ state }) => ({
-            className: classNames('rounded-lg shadow-lg border-0', 'max-h-90 transform scale-100', 'm-0 w-[50vw]', 'dark:border dark:border-blue-900/40', {
-                'transition-none transform-none !w-screen !h-screen !max-h-full !top-0 !left-0': state.maximized
-            })
-        }),
-        header: {
-            className: classNames('flex items-center justify-between shrink-0', 'bg-white text-gray-800 border-t-0  rounded-tl-lg rounded-tr-lg p-6', 'dark:bg-gray-900  dark:text-white/80')
-        },
-        headerTitle: 'font-bold text-lg',
-        headerIcons: 'flex items-center',
-        closeButton: {
+    confirmdialog: {
+        root: {
             className: classNames(
-                'flex items-center justify-center overflow-hidden relative',
-                'w-8 h-8 text-gray-500 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mr-2 last:mr-0',
-                'hover:text-gray-700 hover:border-transparent hover:bg-gray-200',
-                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', // focus
-                'dark:hover:text-white/80 dark:hover:border-transparent dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+                'bg-white text-gray-700 border-0 rounded-md shadow-lg',
+                'z-40 transform origin-center',
+                'mt-3 absolute left-0 top-0',
+                'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-6 before:border-x-[0.75rem] before:border-b-[0.75rem] before:border-t-0 before:border-b-white dark:before:border-b-gray-900',
+                'dark:border dark:border-blue-900/40 dark:bg-gray-900  dark:text-white/80'
             )
         },
-        closeButtonIcon: 'w-4 h-4 inline-block',
-        content: ({ state }) => ({
-            className: classNames('overflow-y-auto', 'bg-white text-gray-700 px-6 pb-8 pt-0', 'rounded-bl-lg rounded-br-lg', 'dark:bg-gray-900  dark:text-white/80 ', {
-                grow: state.maximized
-            })
-        }),
-        footer: {
-            className: classNames('shrink-0 ', 'border-t-0 bg-white text-gray-700 px-6 pb-6 text-right rounded-b-lg', 'dark:bg-gray-900  dark:text-white/80')
-        },
-        mask: ({ props }) => ({
-            className: classNames('transition duration-200', { 'bg-black/40': props.modal })
-        }),
-        transition: ({ props }) => {
-            return props.position === 'top'
-                ? {
-                      enterFromClass: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0',
-                      enterActiveClass: 'transition-all duration-200 ease-out',
-                      leaveActiveClass: 'transition-all duration-200 ease-out',
-                      leaveToClass: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0'
-                  }
-                : props.position === 'bottom'
-                ? {
-                      enterFromClass: 'opacity-0 scale-75 translate-y-full',
-                      enterActiveClass: 'transition-all duration-200 ease-out',
-                      leaveActiveClass: 'transition-all duration-200 ease-out',
-                      leaveToClass: 'opacity-0 scale-75 translate-x-0 translate-y-full translate-z-0'
-                  }
-                : props.position === 'left' || props.position === 'top-left' || props.position === 'bottom-left'
-                ? {
-                      enterFromClass: 'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0',
-                      enterActiveClass: 'transition-all duration-200 ease-out',
-                      leaveActiveClass: 'transition-all duration-200 ease-out',
-                      leaveToClass: 'opacity-0 scale-75  -translate-x-full translate-y-0 translate-z-0'
-                  }
-                : props.position === 'right' || props.position === 'top-right' || props.position === 'bottom-right'
-                ? {
-                      enterFromClass: 'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0',
-                      enterActiveClass: 'transition-all duration-200 ease-out',
-                      leaveActiveClass: 'transition-all duration-200 ease-out',
-                      leaveToClass: 'opacity-0 scale-75 opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0'
-                  }
-                : {
-                      enterFromClass: 'opacity-0 scale-75',
-                      enterActiveClass: 'transition-all duration-200 ease-out',
-                      leaveActiveClass: 'transition-all duration-200 ease-out',
-                      leaveToClass: 'opacity-0 scale-75'
-                  };
-        }
-    }
+        content: 'p-5 items-center flex',
+        icon: 'text-2xl',
+        message: 'ml-4',
+        footer: 'flex gap-2 justify-end align-center text-right px-5 py-5 pt-0',
+        transition: TRANSITIONS.overlay
+    },
 }
         `
     };

diff --git a/components/lib/confirmdialog/ConfirmDialog.js b/components/lib/confirmdialog/ConfirmDialog.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { PrimeReactContext, localeOption } from '../api/Api';
 import { Button } from '../button/Button';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { Dialog } from '../dialog/Dialog';
 import { useMergeProps, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { OverlayService } from '../overlayservice/OverlayService';
@@ -57,7 +58,9 @@ export const ConfirmDialog = React.memo(
                 visible: visibleState
             }
         };
-        const { ptm, cx } = ConfirmDialogBase.setMetaData(metaData);
+        const { ptm, cx, isUnstyled } = ConfirmDialogBase.setMetaData(metaData);
+
+        useHandleStyle(ConfirmDialogBase.css.styles, isUnstyled, { name: 'confirmdialog' });
 
         const accept = () => {
             if (!isCallbackExecuting.current) {

diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
@@ -370,6 +370,22 @@ const Tailwind = {
             };
         }
     },
+    confirmdialog: {
+        root: {
+            className: classNames(
+                'bg-white text-gray-700 border-0 rounded-md shadow-lg',
+                'z-40 transform origin-center',
+                'mt-3 absolute left-0 top-0',
+                'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-6 before:border-x-[0.75rem] before:border-b-[0.75rem] before:border-t-0 before:border-b-white dark:before:border-b-gray-900',
+                'dark:border dark:border-blue-900/40 dark:bg-gray-900  dark:text-white/80'
+            )
+        },
+        content: 'p-5 items-center flex',
+        icon: 'text-2xl',
+        message: 'ml-4',
+        footer: 'flex gap-2 justify-end align-center text-right px-5 py-5 pt-0',
+        transition: TRANSITIONS.overlay
+    },
     confirmpopup: {
         root: {
             className: classNames(