From 9ba62ee95cd6e88a33238f8215d46e6db3ea8cb6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mircea=20Ril=C4=83?= Date: Sat, 10 Feb 2024 10:16:18 +0200 Subject: [PATCH] fix for #5837 - ConfirmDialog unstyled / Tailwind default theme --- .../doc/confirmdialog/theming/tailwinddoc.js | 79 +++---------------- components/lib/confirmdialog/ConfirmDialog.js | 5 +- components/lib/passthrough/tailwind/index.js | 16 ++++ 3 files changed, 33 insertions(+), 67 deletions(-) diff --git a/components/doc/confirmdialog/theming/tailwinddoc.js b/components/doc/confirmdialog/theming/tailwinddoc.js index f4d7c78816..3ad42f1c35 100644 --- 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 index 8fccf6577d..4e13635f87 100644 --- 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 index be467e6cfa..9e376cb93f 100644 --- 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(