Refactor #5592 - Message components

components/lib/message/Message.d.ts

@@ -52,9 +52,9 @@ export interface MessagePassThroughOptions<T = any> {
      */
     root?: MessagePassThroughOptionType<T>;
     /**
-     * Used to pass attributes to the wrapper's DOM element.
+     * Used to pass attributes to the content's DOM element.
      */
-    wrapper?: MessagePassThroughOptionType<T>;
+    content?: MessagePassThroughOptionType<T>;
     /**
      * Used to pass attributes to the icon's DOM element.
      */

components/lib/message/Message.vue

@@ -2,7 +2,7 @@
     <transition name="p-message" appear v-bind="ptmi('transition')">
         <div v-show="visible" :class="cx('root')" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('root')">
             <slot v-if="$slots.container" name="container" :onClose="close" :closeCallback="close"></slot>
-            <div v-else :class="cx('wrapper')" v-bind="ptm('wrapper')">
+            <div v-else :class="cx('content')" v-bind="ptm('content')">
                 <slot name="messageicon" class="p-message-icon">
                     <component :is="icon ? 'span' : iconComponent" :class="[cx('icon'), icon]" v-bind="ptm('icon')"></component>
                 </slot>

components/lib/toast/Toast.d.ts

@@ -75,21 +75,17 @@ export interface ToastPassThroughOptions {
      */
     message?: ToastPassThroughOptionType;
     /**
-     * Used to pass attributes to the container's DOM element.
+     * Used to pass attributes to the message content's DOM element.
      */
-    container?: ToastPassThroughOptionType;
+    messageContent?: ToastPassThroughOptionType;
     /**
-     * Used to pass attributes to the content's DOM element.
+     * Used to pass attributes to the message icon's DOM element.
      */
-    content?: ToastPassThroughOptionType;
+    messageIcon?: ToastPassThroughOptionType;
     /**
-     * Used to pass attributes to the icon's DOM element.
+     * Used to pass attributes to the message text's DOM element.
      */
-    icon?: ToastPassThroughOptionType;
-    /**
-     * Used to pass attributes to the text's DOM element.
-     */
-    text?: ToastPassThroughOptionType;
+    messageText?: ToastPassThroughOptionType;
     /**
      * Used to pass attributes to the summary's DOM element.
      */

components/lib/toast/ToastMessage.vue

@@ -1,10 +1,10 @@
 <template>
-    <div :class="[cx('container'), message.styleClass]" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('container')">
+    <div :class="[cx('message'), message.styleClass]" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('message')">
         <component v-if="templates.container" :is="templates.container" :message="message" :onClose="onCloseClick" :closeCallback="onCloseClick" />
-        <div v-else :class="[cx('content'), message.contentStyleClass]" v-bind="ptm('content')">
+        <div v-else :class="[cx('messageContent'), message.contentStyleClass]" v-bind="ptm('messageContent')">
             <template v-if="!templates.message">
-                <component :is="templates.icon ? templates.icon : iconComponent && iconComponent.name ? iconComponent : 'span'" :class="cx('icon')" v-bind="ptm('icon')" />
-                <div :class="cx('text')" v-bind="ptm('text')">
+                <component :is="templates.icon ? templates.icon : iconComponent && iconComponent.name ? iconComponent : 'span'" :class="cx('messageIcon')" v-bind="ptm('messageIcon')" />
+                <div :class="cx('messageText')" v-bind="ptm('messageText')">
                     <span :class="cx('summary')" v-bind="ptm('summary')">{{ message.summary }}</span>
                     <div :class="cx('detail')" v-bind="ptm('detail')">{{ message.detail }}</div>
                 </div>

components/lib/toast/style/ToastStyle.js

@@ -18,7 +18,7 @@ const classes = {
             'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
-    container: ({ props }) => [
+    message: ({ props }) => [
         'p-toast-message',
         {
             'p-toast-message-info': props.message.severity === 'info' || props.message.severity === undefined,
@@ -29,8 +29,8 @@ const classes = {
             'p-toast-message-contrast': props.message.severity === 'contrast'
         }
     ],
-    content: 'p-toast-message-content',
-    icon: ({ props }) => [
+    messageContent: 'p-toast-message-content',
+    messageIcon: ({ props }) => [
         'p-toast-message-icon',
         {
             [props.infoIcon]: props.message.severity === 'info',
@@ -39,7 +39,7 @@ const classes = {
             [props.successIcon]: props.message.severity === 'success'
         }
     ],
-    text: 'p-toast-message-text',
+    messageText: 'p-toast-message-text',
     summary: 'p-toast-summary',
     detail: 'p-toast-detail',
     closeButton: 'p-toast-close-button',