From 3510636429cc7585d7527fc9a6d6d323e29676db Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 13 Jun 2024 11:04:57 +0300
Subject: [PATCH] Cosmetics on message demos

---
 apps/showcase/doc/message/DynamicDoc.vue         | 16 ++++++++--------
 apps/showcase/doc/message/FormDoc.vue            |  8 ++++----
 .../message/{CustomIconDoc.vue => IconDoc.vue}   | 10 +++++-----
 apps/showcase/pages/message/index.vue            | 12 ++++++------
 packages/primevue/src/message/Message.d.ts       |  4 ++--
 packages/primevue/src/message/Message.vue        |  4 ++--
 .../primevue/src/message/style/MessageStyle.js   |  3 ++-
 7 files changed, 29 insertions(+), 28 deletions(-)
 rename apps/showcase/doc/message/{CustomIconDoc.vue => IconDoc.vue} (87%)

diff --git a/apps/showcase/doc/message/DynamicDoc.vue b/apps/showcase/doc/message/DynamicDoc.vue
index dacdcd49c..25394b42d 100644
--- a/apps/showcase/doc/message/DynamicDoc.vue
+++ b/apps/showcase/doc/message/DynamicDoc.vue
@@ -7,8 +7,8 @@
             <Button label="Show" @click="addMessages()" />
             <Button label="Clear" severity="secondary" @click="clearMessages()" />
         </div>
-        <transition-group name="p-message" tag="div" class="flex flex-col gap-4">
-            <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity">{{ msg.content }}</Message>
+        <transition-group name="p-message" tag="div" class="flex flex-col">
+            <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity" class="mt-4">{{ msg.content }}</Message>
         </transition-group>
     </div>
     <DocSectionCode :code="code" />
@@ -24,8 +24,8 @@ export default {
                 basic: `
 <Button label="Show" @click="addMessages()" />
 <Button label="Clear" severity="secondary" class="ml-2" @click="clearMessages()" />
-<transition-group name="p-message" tag="div" class="mt-4 flex flex-col gap-4">
-    <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity">{{ msg.content }}</Message>
+<transition-group name="p-message" tag="div" class="flex flex-col">
+    <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity" class="mt-4">{{ msg.content }}</Message>
 </transition-group>
 `,
                 options: `
@@ -35,8 +35,8 @@ export default {
             <Button label="Show" @click="addMessages()" />
             <Button label="Clear" severity="secondary" @click="clearMessages()" />
         </div>
-        <transition-group name="p-message" tag="div" class="flex flex-col gap-4">
-            <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity">{{ msg.content }}</Message>
+        <transition-group name="p-message" tag="div" class="flex flex-col">
+            <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity" class="mt-4">{{ msg.content }}</Message>
         </transition-group>
     </div>
 </template>
@@ -72,8 +72,8 @@ export default {
             <Button label="Show" @click="addMessages()" />
             <Button label="Clear" severity="secondary" @click="clearMessages()" />
         </div>
-        <transition-group name="p-message" tag="div" class="flex flex-col gap-4">
-            <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity">{{ msg.content }}</Message>
+        <transition-group name="p-message" tag="div" class="flex flex-col">
+            <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity" class="mt-4">{{ msg.content }}</Message>
         </transition-group>
     </div>
 </template>
diff --git a/apps/showcase/doc/message/FormDoc.vue b/apps/showcase/doc/message/FormDoc.vue
index c56d9578a..765d5431e 100644
--- a/apps/showcase/doc/message/FormDoc.vue
+++ b/apps/showcase/doc/message/FormDoc.vue
@@ -9,7 +9,7 @@
         </div>
         <div class="flex flex-wrap gap-2">
             <InputText placeholder="Email" aria-label="email" invalid />
-            <Message severity="error" />
+            <Message severity="error" icon="pi pi-times-circle" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -27,7 +27,7 @@ export default {
 </div>
 <div class="flex flex-wrap gap-2">
     <InputText placeholder="Email" aria-label="email" invalid />
-    <Message severity="error" />
+    <Message severity="error" icon="pi pi-times-circle" />
 </div>
 `,
                 options: `
@@ -39,7 +39,7 @@ export default {
         </div>
         <div class="flex flex-wrap gap-2">
             <InputText placeholder="Email" aria-label="email" invalid />
-            <Message severity="error" />
+            <Message severity="error" icon="pi pi-times-circle" />
         </div>
     </div>
 </template>
@@ -56,7 +56,7 @@ export default {
         </div>
         <div class="flex flex-wrap gap-2">
             <InputText placeholder="Email" aria-label="email" invalid />
-            <Message severity="error" />
+            <Message severity="error" icon="pi pi-times-circle" />
         </div>
     </div>
 </template>
diff --git a/apps/showcase/doc/message/CustomIconDoc.vue b/apps/showcase/doc/message/IconDoc.vue
similarity index 87%
rename from apps/showcase/doc/message/CustomIconDoc.vue
rename to apps/showcase/doc/message/IconDoc.vue
index b99db1908..ae6b0d799 100644
--- a/apps/showcase/doc/message/CustomIconDoc.vue
+++ b/apps/showcase/doc/message/IconDoc.vue
@@ -1,11 +1,11 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Icon property and the <i>messageicon</i> slots are available to customize the icon of the message</p>
+        <p>Icon property and the <i>icon</i> slots are available to customize the icon of the message</p>
     </DocSectionText>
     <div class="card flex justify-center gap-4">
         <Message severity="info" icon="pi pi-send">Info Message</Message>
         <Message severity="success">
-            <template #messageicon>
+            <template #icon>
                 <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
             </template>
             <span class="ml-2">How may I help you?</span>
@@ -22,7 +22,7 @@ export default {
                 basic: `
 <Message severity="info" icon="pi pi-send">Info Message</Message>
 <Message severity="success">
-    <template #messageicon>
+    <template #icon>
         <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
     </template>
     <span class="ml-2">How may I help you?</span>
@@ -33,7 +33,7 @@ export default {
     <div class="card flex justify-center gap-4">
         <Message severity="info" icon="pi pi-send">Info Message</Message>
         <Message severity="success">
-            <template #messageicon>
+            <template #icon>
                 <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
             </template>
             <span class="ml-2">How may I help you?</span>
@@ -49,7 +49,7 @@ export default {
     <div class="card flex justify-center gap-4">
         <Message severity="info" icon="pi pi-send">Info Message</Message>
         <Message severity="success">
-            <template #messageicon>
+            <template #icon>
                 <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
             </template>
             <span class="ml-2">How may I help you?</span>
diff --git a/apps/showcase/pages/message/index.vue b/apps/showcase/pages/message/index.vue
index e556cf294..1bff163bf 100755
--- a/apps/showcase/pages/message/index.vue
+++ b/apps/showcase/pages/message/index.vue
@@ -6,9 +6,9 @@
 import AccessibilityDoc from '@/doc/message/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/message/BasicDoc.vue';
 import ClosabledDoc from '@/doc/message/ClosableDoc.vue';
-import CustomIconDoc from '@/doc/message/CustomIconDoc.vue';
 import DynamicDoc from '@/doc/message/DynamicDoc.vue';
 import FormDoc from '@/doc/message/FormDoc.vue';
+import IconDoc from '@/doc/message/IconDoc.vue';
 import ImportDoc from '@/doc/message/ImportDoc.vue';
 import LifeDoc from '@/doc/message/LifeDoc.vue';
 import SeverityDoc from '@/doc/message/SeverityDoc.vue';
@@ -34,6 +34,11 @@ export default {
                     label: 'Severity',
                     component: SeverityDoc
                 },
+                {
+                    id: 'icon',
+                    label: 'Icon',
+                    component: IconDoc
+                },
                 {
                     id: 'form',
                     label: 'Form',
@@ -54,11 +59,6 @@ export default {
                     label: 'Life',
                     component: LifeDoc
                 },
-                {
-                    id: 'custom-icon',
-                    label: 'Custom Icon',
-                    component: CustomIconDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
diff --git a/packages/primevue/src/message/Message.d.ts b/packages/primevue/src/message/Message.d.ts
index 2e0ea2b55..d462b8bbe 100755
--- a/packages/primevue/src/message/Message.d.ts
+++ b/packages/primevue/src/message/Message.d.ts
@@ -168,9 +168,9 @@ export interface MessageSlots {
     default(): VNode[];
     /**
      * Custom message icon template.
-     * @param {Object} scope - messageicon slot's params.
+     * @param {Object} scope - icon slot's params.
      */
-    messageicon(scope: {
+    icon(scope: {
         /**
          * Style class of the item icon element.
          */
diff --git a/packages/primevue/src/message/Message.vue b/packages/primevue/src/message/Message.vue
index a627b3647..96d89b275 100755
--- a/packages/primevue/src/message/Message.vue
+++ b/packages/primevue/src/message/Message.vue
@@ -3,8 +3,8 @@
         <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" :closeCallback="close"></slot>
             <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 name="icon" class="p-message-icon">
+                    <component :is="icon ? 'span' : null" :class="[cx('icon'), icon]" v-bind="ptm('icon')"></component>
                 </slot>
                 <div v-if="$slots.default" class="p-message-text" :class="cx('text')" v-bind="ptm('text')">
                     <slot></slot>
diff --git a/packages/primevue/src/message/style/MessageStyle.js b/packages/primevue/src/message/style/MessageStyle.js
index 2b391700c..107bdac7c 100644
--- a/packages/primevue/src/message/style/MessageStyle.js
+++ b/packages/primevue/src/message/style/MessageStyle.js
@@ -174,11 +174,12 @@ const theme = ({ dt }) => `
 .p-message.p-message-leave-to {
     max-height: 0;
     opacity: 0;
+    margin: 0;
 }
 
 .p-message-leave-active {
     overflow: hidden;
-    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s;
+    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.3s;
 }
 
 .p-message-leave-active .p-message-close-button {