Fixed #2236 - Added Inline style and class option for ToastMessage

primefaces · Aug 10, 2021 · db40a4a · db40a4a
1 parent 2f8c2d2
commit db40a4a
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 4 deletions.
diff --git a/src/components/toast/Toast.d.ts b/src/components/toast/Toast.d.ts
@@ -14,6 +14,10 @@ export interface ToastMessage {
     closable?: boolean;
     sticky?: boolean;
     life?: number;
+    className?: string;
+    style?: object;
+    contentClassName: string;
+    contentStyle?: object;
 }
 
 export interface ToastProps {

diff --git a/src/components/toast/ToastMessage.js b/src/components/toast/ToastMessage.js
@@ -94,18 +94,22 @@ class ToastMessageComponent extends Component {
 
     render() {
         const severity = this.props.message.severity;
+        const contentClassName = this.props.message.contentClassName;
+        const contentStyle = this.props.message.contentStyle;
+        const style = this.props.message.style;
+
         const className = classNames('p-toast-message', {
             'p-toast-message-info': severity === 'info',
             'p-toast-message-warn': severity === 'warn',
             'p-toast-message-error': severity === 'error',
             'p-toast-message-success': severity === 'success'
-        });
+        }, this.props.message.className);
         const message = this.renderMessage();
         const closeIcon = this.renderCloseIcon();
 
         return (
-            <div ref={this.props.forwardRef} className={className} role="alert" aria-live="assertive" aria-atomic="true" onClick={this.onClick}>
-                <div className="p-toast-message-content">
+            <div ref={this.props.forwardRef} className={className} style={style} role="alert" aria-live="assertive" aria-atomic="true" onClick={this.onClick}>
+                <div className={classNames('p-toast-message-content', contentClassName)} style={contentStyle}>
                     {message}
                     {closeIcon}
                 </div>

diff --git a/src/showcase/toast/ToastDoc.js b/src/showcase/toast/ToastDoc.js
@@ -574,6 +574,30 @@ toast.current.show({severity: 'success', summary: 'Success Message', detail: 'Or
                                         <td>null</td>
                                         <td>Custom content of the message. If enabled, summary and details properties are ignored.</td>
                                     </tr>
+                                    <tr>
+                                        <td>className</td>
+                                        <td>string</td>
+                                        <td>null</td>
+                                        <td>Style class of the message.</td>
+                                    </tr>
+                                    <tr>
+                                        <td>style</td>
+                                        <td>object</td>
+                                        <td>null</td>
+                                        <td>Inline style of the message.</td>
+                                    </tr>
+                                    <tr>
+                                        <td>contentClassName</td>
+                                        <td>string</td>
+                                        <td>null</td>
+                                        <td>Style class of the message content.</td>
+                                    </tr>
+                                    <tr>
+                                        <td>contentStyle</td>
+                                        <td>object</td>
+                                        <td>null</td>
+                                        <td>Inline style of the message content.</td>
+                                    </tr>
                                     <tr>
                                         <td>closable</td>
                                         <td>boolean</td>
@@ -718,7 +742,7 @@ toast.current.show({life: 5000, severity: 'error', summary: 'Error Message', det
                                     </tr>
                                     <tr>
                                         <td>style</td>
-                                        <td>string</td>
+                                        <td>object</td>
                                         <td>null</td>
                                         <td>Inline style of the element.</td>
                                     </tr>