Related #4432, #4602 - For Message Section

primefaces · Aug 30, 2023 · 1405b49 · 1405b49
1 parent 2f80e87
commit 1405b49
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 48 deletions.
diff --git a/components/lib/message/Message.js b/components/lib/message/Message.js
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { CheckIcon } from '../icons/check';
 import { ExclamationTriangleIcon } from '../icons/exclamationtriangle';
 import { InfoCircleIcon } from '../icons/infocircle';
 import { TimesCircleIcon } from '../icons/timescircle';
-import { IconUtils, ObjectUtils, mergeProps } from '../utils/Utils';
+import { IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils';
 import { MessageBase } from './MessageBase';
-import { useHandleStyle } from '../componentbase/ComponentBase';
 
 export const Message = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -82,9 +82,7 @@ export const Message = React.memo(
 
         const rootProps = mergeProps(
             {
-                id: props.id,
-                ref: elementRef,
-                className: cx('root'),
+                className: classNames(props.className, cx('root')),
                 style: props.style,
                 role: 'alert',
                 'aria-live': 'polite'
@@ -93,7 +91,11 @@ export const Message = React.memo(
             ptm('root')
         );
 
-        return <div {...rootProps}>{content}</div>;
+        return (
+            <div id={props.id} ref={elementRef} {...rootProps}>
+                {content}
+            </div>
+        );
     })
 );
 

diff --git a/components/lib/message/MessageBase.js b/components/lib/message/MessageBase.js
@@ -16,17 +16,13 @@ export const MessageBase = ComponentBase.extend({
     css: {
         classes: {
             root: ({ props }) =>
-                classNames(
-                    'p-inline-message p-component',
-                    {
-                        'p-inline-message-info': props.severity === 'info',
-                        'p-inline-message-warn': props.severity === 'warn',
-                        'p-inline-message-error': props.severity === 'error',
-                        'p-inline-message-success': props.severity === 'success',
-                        'p-inline-message-icon-only': !props.text
-                    },
-                    props.className
-                ),
+                classNames('p-inline-message p-component', {
+                    'p-inline-message-info': props.severity === 'info',
+                    'p-inline-message-warn': props.severity === 'warn',
+                    'p-inline-message-error': props.severity === 'error',
+                    'p-inline-message-success': props.severity === 'success',
+                    'p-inline-message-icon-only': !props.text
+                }),
             icon: 'p-inline-message-icon',
             text: 'p-inline-message-text'
         },

diff --git a/components/lib/messages/Messages.js b/components/lib/messages/Messages.js
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { TransitionGroup } from 'react-transition-group';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { CSSTransition } from '../csstransition/CSSTransition';
+import { mergeProps } from '../utils/Utils';
 import { MessagesBase } from './MessagesBase';
 import { UIMessage } from './UIMessage';
-import { mergeProps } from '../utils/Utils';
-import { PrimeReactContext } from '../api/Api';
-import { useHandleStyle } from '../componentbase/ComponentBase';
 
 let messageIdx = 0;
 

diff --git a/components/lib/messages/UIMessage.js b/components/lib/messages/UIMessage.js
@@ -7,8 +7,7 @@ import { InfoCircleIcon } from '../icons/infocircle';
 import { TimesIcon } from '../icons/times';
 import { TimesCircleIcon } from '../icons/timescircle';
 import { Ripple } from '../ripple/Ripple';
-import { classNames, IconUtils } from '../utils/Utils';
-import { mergeProps } from '../utils/Utils';
+import { classNames, IconUtils, mergeProps } from '../utils/Utils';
 
 export const UIMessage = React.memo(
     React.forwardRef((props, ref) => {

diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
@@ -489,15 +489,17 @@ const Tailwind = {
         uploadicon: 'mr-2'
     },
     //Messages
-    message: {
-        root: ({ props }) => ({
-            className: classNames('my-4 rounded-md', {
-                'bg-blue-100 border-solid border-0 border-l-4 border-blue-500 text-blue-700': props.severity == 'info',
-                'bg-green-100 border-solid border-0 border-l-4 border-green-500 text-green-700': props.severity == 'success',
-                'bg-orange-100 border-solid border-0 border-l-4 border-orange-500 text-orange-700': props.severity == 'warn',
-                'bg-red-100 border-solid border-0 border-l-4 border-red-500 text-red-700': props.severity == 'error'
-            })
-        }),
+    messages: {
+        root: ({ state, index }) => {
+            return {
+                className: classNames('my-4 rounded-md', {
+                    'bg-blue-100 border-solid border-0 border-l-4 border-blue-500 text-blue-700': state.messages[index] && state.messages[index].message.severity == 'info',
+                    'bg-green-100 border-solid border-0 border-l-4 border-green-500 text-green-700': state.messages[index] && state.messages[index].message.severity == 'success',
+                    'bg-orange-100 border-solid border-0 border-l-4 border-orange-500 text-orange-700': state.messages[index] && state.messages[index].message.severity == 'warn',
+                    'bg-red-100 border-solid border-0 border-l-4 border-red-500 text-red-700': state.messages[index] && state.messages[index].message.severity == 'error'
+                })
+            };
+        },
         wrapper: 'flex items-center py-5 px-7',
         icon: {
             className: classNames('w-6 h-6', 'text-lg mr-2')
@@ -514,7 +516,7 @@ const Tailwind = {
             leaveToClass: 'max-h-0 opacity-0 !m-0'
         }
     },
-    inlinemessage: {
+    message: {
         root: ({ props }) => ({
             className: classNames('inline-flex items-center justify-center align-top', 'p-3 m-0 rounded-md', {
                 'bg-blue-100 border-0 text-blue-700': props.severity == 'info',
@@ -529,12 +531,12 @@ const Tailwind = {
         root: {
             className: classNames('w-96', 'opacity-90')
         },
-        container: ({ props }) => ({
+        message: ({ state, index }) => ({
             className: classNames('my-4 rounded-md w-full', {
-                'bg-blue-100 border-solid border-0 border-l-4 border-blue-500 text-blue-700': props.message.severity == 'info',
-                'bg-green-100 border-solid border-0 border-l-4 border-green-500 text-green-700': props.message.severity == 'success',
-                'bg-orange-100 border-solid border-0 border-l-4 border-orange-500 text-orange-700': props.message.severity == 'warn',
-                'bg-red-100 border-solid border-0 border-l-4 border-red-500 text-red-700': props.message.severity == 'error'
+                'bg-blue-100 border-solid border-0 border-l-4 border-blue-500 text-blue-700': state.messages[index] && state.messages[index].message.severity == 'info',
+                'bg-green-100 border-solid border-0 border-l-4 border-green-500 text-green-700': state.messages[index] && state.messages[index].message.severity == 'success',
+                'bg-orange-100 border-solid border-0 border-l-4 border-orange-500 text-orange-700': state.messages[index] && state.messages[index].message.severity == 'warn',
+                'bg-red-100 border-solid border-0 border-l-4 border-red-500 text-red-700': state.messages[index] && state.messages[index].message.severity == 'error'
             })
         }),
         content: 'flex items-center py-5 px-7',

diff --git a/components/lib/toast/ToastBase.js b/components/lib/toast/ToastBase.js
@@ -91,6 +91,7 @@ const classes = {
             classNames('p-toast-message', {
                 [`p-toast-message-${severity}`]: severity
             }),
+        content: 'p-toast-message-content',
         buttonicon: 'p-toast-icon-close-icon',
         button: 'p-toast-icon-close p-link',
         icon: 'p-toast-message-icon',

diff --git a/components/lib/toast/ToastMessage.js b/components/lib/toast/ToastMessage.js
@@ -82,21 +82,21 @@ export const ToastMessage = React.memo(
             const closeIcon = IconUtils.getJSXIcon(icon, { ...buttonIconProps }, { props });
             const ariaLabel = props.ariaCloseLabel || localeOption('close');
 
-            const buttonProps = mergeProps(
+            const closeButtonProps = mergeProps(
                 {
                     type: 'button',
-                    className: cx('message.button'),
+                    className: cx('message.closeButton'),
                     onClick: onClose,
                     'aria-label': ariaLabel
                 },
-                ptm('button', parentParams),
-                ptmo(pt, 'button', params)
+                ptm('closeButton', parentParams),
+                ptmo(pt, 'closeButton', params)
             );
 
             if (closable !== false) {
                 return (
                     <div>
-                        <button {...buttonProps}>
+                        <button {...closeButtonProps}>
                             {closeIcon}
                             <Ripple />
                         </button>
@@ -181,7 +181,6 @@ export const ToastMessage = React.memo(
             return null;
         };
 
-        const contentClassName = classNames('p-toast-message-content', _contentClassName);
         const message = createMessage();
         const closeIcon = createCloseIcon();
 
@@ -203,7 +202,7 @@ export const ToastMessage = React.memo(
 
         const contentProps = mergeProps(
             {
-                className: contentClassName,
+                className: classNames(_contentClassName, cx('message.content')),
                 style: contentStyle
             },
             ptm('content', parentParams),

diff --git a/components/lib/toast/toast.d.ts b/components/lib/toast/toast.d.ts
@@ -55,13 +55,13 @@ export interface ToastPassThroughOptions {
      */
     detail?: ToastPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
     /**
-     * Uses to pass attributes to the button's DOM element.
+     * Uses to pass attributes to the close button's DOM element.
      */
-    button?: ToastPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    closeButton?: ToastPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
     /**
-     * Uses to pass attributes to the button icon's DOM element.
+     * Uses to pass attributes to the close button icon's DOM element.
      */
-    buttonIcon?: ToastPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    closeButtonIcon?: ToastPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
 }
 
 /**