From 7712c0b6f3be37f912c2f737ea0f056ee3008cfb Mon Sep 17 00:00:00 2001
From: habubey <habubey@outlook.com>
Date: Thu, 6 Jul 2023 12:10:57 +0300
Subject: [PATCH] Refactor #4602 - for Message

---
 components/lib/message/Message.css    | 15 -----------
 components/lib/message/Message.js     | 31 ++++++++---------------
 components/lib/message/MessageBase.js | 36 +++++++++++++++++++++++++++
 components/lib/message/message.d.ts   |  5 ++++
 styles/primereact.css                 |  1 -
 5 files changed, 52 insertions(+), 36 deletions(-)
 delete mode 100644 components/lib/message/Message.css

diff --git a/components/lib/message/Message.css b/components/lib/message/Message.css
deleted file mode 100644
index a439a9faa7..0000000000
--- a/components/lib/message/Message.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.p-inline-message {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    vertical-align: top;
-}
-
-.p-inline-message-icon-only .p-inline-message-text {
-    visibility: hidden;
-    width: 0;
-}
-
-.p-fluid .p-inline-message {
-    display: flex;
-}
diff --git a/components/lib/message/Message.js b/components/lib/message/Message.js
index 24338cb6d5..fad2ede549 100644
--- a/components/lib/message/Message.js
+++ b/components/lib/message/Message.js
@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { classNames, IconUtils, ObjectUtils, mergeProps } from '../utils/Utils';
-import { MessageBase } from './MessageBase';
+import { PrimeReactContext } from '../api/Api';
+import { useStyle } from '../hooks/Hooks';
+import { CheckIcon } from '../icons/check';
 import { ExclamationTriangleIcon } from '../icons/exclamationtriangle';
 import { InfoCircleIcon } from '../icons/infocircle';
 import { TimesCircleIcon } from '../icons/timescircle';
-import { CheckIcon } from '../icons/check';
-import { PrimeReactContext } from '../api/Api';
+import { IconUtils, ObjectUtils, mergeProps } from '../utils/Utils';
+import { MessageBase } from './MessageBase';
 
 export const Message = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -14,7 +15,9 @@ export const Message = React.memo(
 
         const elementRef = React.useRef(null);
 
-        const { ptm } = MessageBase.setMetaData({
+        useStyle(MessageBase.css.styles, { name: 'primereact_message_style' });
+
+        const { ptm, cx } = MessageBase.setMetaData({
             props
         });
 
@@ -24,11 +27,10 @@ export const Message = React.memo(
             }
 
             const text = ObjectUtils.getJSXElement(props.text, props);
-            let iconClassName = 'p-inline-message-icon';
 
             const iconProps = mergeProps(
                 {
-                    className: iconClassName
+                    className: cx('icon')
                 },
                 ptm('icon')
             );
@@ -58,7 +60,7 @@ export const Message = React.memo(
 
             const textProps = mergeProps(
                 {
-                    className: 'p-inline-message-text'
+                    className: cx('text')
                 },
                 ptm('text')
             );
@@ -76,24 +78,13 @@ export const Message = React.memo(
             getElement: () => elementRef.current
         }));
 
-        const 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
-            },
-            props.className
-        );
         const content = createContent();
 
         const rootProps = mergeProps(
             {
                 id: props.id,
                 ref: elementRef,
-                className,
+                className: cx('root'),
                 style: props.style,
                 role: 'alert',
                 'aria-live': 'polite'
diff --git a/components/lib/message/MessageBase.js b/components/lib/message/MessageBase.js
index 17e6567d08..26bccd3178 100644
--- a/components/lib/message/MessageBase.js
+++ b/components/lib/message/MessageBase.js
@@ -1,4 +1,5 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/utils';
 
 export const MessageBase = ComponentBase.extend({
     defaultProps: {
@@ -11,5 +12,40 @@ export const MessageBase = ComponentBase.extend({
         severity: 'info',
         content: null,
         children: undefined
+    },
+    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
+                ),
+            icon: 'p-inline-message-icon',
+            text: 'p-inline-message-text'
+        },
+        styles: `
+        .p-inline-message {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            vertical-align: top;
+        }
+        
+        .p-inline-message-icon-only .p-inline-message-text {
+            visibility: hidden;
+            width: 0;
+        }
+        
+        .p-fluid .p-inline-message {
+            display: flex;
+        }        
+        `
     }
 });
diff --git a/components/lib/message/message.d.ts b/components/lib/message/message.d.ts
index 83c97b30be..333bb83626 100644
--- a/components/lib/message/message.d.ts
+++ b/components/lib/message/message.d.ts
@@ -70,6 +70,11 @@ export interface MessageProps extends Omit<React.DetailedHTMLProps<React.HTMLAtt
      * @type {MessagePassThroughOptions}
      */
     pt?: MessagePassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**
diff --git a/styles/primereact.css b/styles/primereact.css
index 1725f28d00..d3f51ccf57 100644
--- a/styles/primereact.css
+++ b/styles/primereact.css
@@ -29,7 +29,6 @@
 @import "../components/lib/menu/Menu.css";
 @import "../components/lib/megamenu/MegaMenu.css";
 @import "../components/lib/menubar/Menubar.css";
-@import "../components/lib/message/Message.css";
 @import "../components/lib/messages/Messages.css";
 @import "../components/lib/multiselect/MultiSelect.css";
 @import "../components/lib/orderlist/OrderList.css";