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