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";