diff --git a/components/lib/messages/Messages.css b/components/lib/messages/Messages.css
deleted file mode 100644
index 0e680a2f67..0000000000
--- a/components/lib/messages/Messages.css
+++ /dev/null
@@ -1,42 +0,0 @@
-.p-message-wrapper {
- display: flex;
- align-items: center;
-}
-
-.p-message-close {
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.p-message-close.p-link {
- margin-left: auto;
- overflow: hidden;
- position: relative;
-}
-
-.p-message-enter {
- opacity: 0;
-}
-
-.p-message-enter-active {
- opacity: 1;
- transition: opacity .3s;
-}
-
-.p-message-exit {
- opacity: 1;
- max-height: 1000px;
-}
-
-.p-message-exit-active {
- opacity: 0;
- max-height: 0;
- margin: 0;
- overflow: hidden;
- transition: max-height .3s cubic-bezier(0, 1, 0, 1), opacity .3s, margin .3s;
-}
-
-.p-message-exit-active .p-message-close {
- display: none;
-}
diff --git a/components/lib/messages/Messages.js b/components/lib/messages/Messages.js
index 9eec4b3f71..4650cfd2f3 100644
--- a/components/lib/messages/Messages.js
+++ b/components/lib/messages/Messages.js
@@ -5,6 +5,7 @@ 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;
@@ -23,6 +24,8 @@ export const Messages = React.memo(
const ptCallbacks = MessagesBase.setMetaData(metaData);
+ useHandleStyle(MessagesBase.css.styles, ptCallbacks.isUnstyled, { name: 'messages' });
+
const show = (messageInfo) => {
if (messageInfo) {
setMessagesState((prev) => assignIdentifiers(prev, messageInfo, true));
@@ -87,7 +90,6 @@ export const Messages = React.memo(
const rootProps = mergeProps(
{
id: props.id,
- ref: elementRef,
className: props.className,
style: props.style
},
@@ -96,7 +98,7 @@ export const Messages = React.memo(
);
return (
-
+
{messagesState &&
messagesState.map((message, index) => {
diff --git a/components/lib/messages/MessagesBase.js b/components/lib/messages/MessagesBase.js
index 2fb371dc4c..c7dcbb651b 100644
--- a/components/lib/messages/MessagesBase.js
+++ b/components/lib/messages/MessagesBase.js
@@ -1,4 +1,65 @@
import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const styles = `
+.p-message-wrapper {
+ display: flex;
+ align-items: center;
+}
+
+.p-message-close {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.p-message-close.p-link {
+ margin-left: auto;
+ overflow: hidden;
+ position: relative;
+}
+
+.p-message-enter {
+ opacity: 0;
+}
+
+.p-message-enter-active {
+ opacity: 1;
+ transition: opacity .3s;
+}
+
+.p-message-exit {
+ opacity: 1;
+ max-height: 1000px;
+}
+
+.p-message-exit-active {
+ opacity: 0;
+ max-height: 0;
+ margin: 0;
+ overflow: hidden;
+ transition: max-height .3s cubic-bezier(0, 1, 0, 1), opacity .3s, margin .3s;
+}
+
+.p-message-exit-active .p-message-close {
+ display: none;
+}
+`;
+
+const classes = {
+ uimessage: {
+ root: ({ severity }) =>
+ classNames('p-message p-component', {
+ [`p-message-${severity}`]: severity
+ }),
+ wrapper: 'p-message-wrapper',
+ detail: 'p-message-detail',
+ summary: 'p-message-summary',
+ icon: 'p-message-icon',
+ buttonicon: 'p-message-close-icon',
+ button: 'p-message-close p-link'
+ }
+};
export const MessagesBase = ComponentBase.extend({
defaultProps: {
@@ -10,5 +71,9 @@ export const MessagesBase = ComponentBase.extend({
onRemove: null,
onClick: null,
children: undefined
+ },
+ css: {
+ classes,
+ styles
}
});
diff --git a/components/lib/messages/UIMessage.js b/components/lib/messages/UIMessage.js
index d46e088b0a..186849e578 100644
--- a/components/lib/messages/UIMessage.js
+++ b/components/lib/messages/UIMessage.js
@@ -15,7 +15,7 @@ export const UIMessage = React.memo(
const {
message: messageInfo,
metaData: parentMetaData,
- ptCallbacks: { ptm, ptmo },
+ ptCallbacks: { ptm, ptmo, cx },
index
} = props;
const { severity, content, summary, detail, closable, life, sticky, className: _className, style, contentClassName: _contentClassName, contentStyle, icon: _icon, closeIcon: _closeIcon, pt } = messageInfo.message;
@@ -47,10 +47,10 @@ export const UIMessage = React.memo(
if (closable !== false) {
const ariaLabel = localeOption('close');
- const iconProps = { className: 'p-message-close-icon', 'aria-hidden': true };
const buttonIconProps = mergeProps(
{
- className: iconProps
+ className: cx('uimessage.buttonicon'),
+ 'aria-hidden': true
},
ptm('buttonicon', parentParams),
ptmo(pt, 'buttonicon', params)
@@ -62,7 +62,7 @@ export const UIMessage = React.memo(
const buttonProps = mergeProps(
{
type: 'button',
- className: 'p-message-close p-link',
+ className: cx('uimessage.button'),
'aria-label': ariaLabel,
onClick: onClose
},
@@ -83,10 +83,9 @@ export const UIMessage = React.memo(
const createMessage = () => {
if (props.message) {
- const iconClassName = 'p-message-icon';
const iconProps = mergeProps(
{
- className: iconClassName
+ className: cx('uimessage.icon')
},
ptm('icon', parentParams),
ptmo(pt, 'icon', params)
@@ -117,7 +116,7 @@ export const UIMessage = React.memo(
const summaryProps = mergeProps(
{
- className: 'p-message-summary'
+ className: cx('uimessage.summary')
},
ptm('summary', parentParams),
ptmo(pt, 'summary', params)
@@ -125,7 +124,7 @@ export const UIMessage = React.memo(
const detailProps = mergeProps(
{
- className: 'p-message-detail'
+ className: cx('uimessage.detail')
},
ptm('detail', parentParams),
ptmo(pt, 'detail', params)
@@ -145,20 +144,12 @@ export const UIMessage = React.memo(
return null;
};
- const className = classNames(
- 'p-message p-component',
- {
- [`p-message-${severity}`]: severity
- },
- _className
- );
- const contentClassName = classNames('p-message-wrapper', _contentClassName);
const closeIcon = createCloseIcon();
const message = createMessage();
const wrapperProps = mergeProps(
{
- className: contentClassName,
+ className: classNames(_contentClassName, cx('uimessage.wrapper')),
style: contentStyle
},
ptm('wrapper', parentParams),
@@ -168,7 +159,7 @@ export const UIMessage = React.memo(
const rootProps = mergeProps(
{
ref,
- className,
+ className: classNames(_className, cx('uimessage.root', { severity })),
style,
onClick
},
diff --git a/components/lib/messages/messages.d.ts b/components/lib/messages/messages.d.ts
index 57dd58c0a3..54de80ce8e 100644
--- a/components/lib/messages/messages.d.ts
+++ b/components/lib/messages/messages.d.ts
@@ -104,6 +104,11 @@ export interface MessagesMessage {
* @type {MessagesPassThroughOptions}
*/
pt?: MessagesPassThroughOptions;
+ /**
+ * 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 f6f533267e..5b296feb87 100644
--- a/styles/primereact.css
+++ b/styles/primereact.css
@@ -2,7 +2,6 @@
@import "../components/lib/iconbase/IconBase.css";
@import "../components/lib/datatable/DataTable.css";
@import "../components/lib/toast/Toast.css";
-@import "../components/lib/messages/Messages.css";
@import "../components/lib/tooltip/Tooltip.css";
@import "../components/lib/treetable/TreeTable.css";
@import "../components/lib/ripple/Ripple.css";