Size part for #6653

apps/showcase/doc/message/OutlinedDoc.vue

@@ -0,0 +1,45 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Message provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <Message size="small">Small Message</Message>
+        <Message>Normal Message</Message>
+        <Message size="large">Large Message</Message>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Message>Message Content</Message>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Message>Message Content</Message>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Message>Message Content</Message>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>

apps/showcase/doc/message/SizesDoc.vue

@@ -0,0 +1,51 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Message provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <Message size="small" icon="pi pi-send">Small Message</Message>
+        <Message icon="pi pi-user">Normal Message</Message>
+        <Message size="large" icon="pi pi-check">Large Message</Message>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Message size="small" icon="pi pi-send">Small Message</Message>
+<Message icon="pi pi-user">Normal Message</Message>
+<Message size="large" icon="pi pi-check">Large Message</Message>
+`,
+                options: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <Message size="small" icon="pi pi-send">Small Message</Message>
+        <Message icon="pi pi-user">Normal Message</Message>
+        <Message size="large" icon="pi pi-check">Large Message</Message>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <Message size="small" icon="pi pi-send">Small Message</Message>
+        <Message icon="pi pi-user">Normal Message</Message>
+        <Message size="large" icon="pi pi-check">Large Message</Message>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>

apps/showcase/doc/message/TextDoc.vue

@@ -0,0 +1,45 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Message provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <Message size="small">Small Message</Message>
+        <Message>Normal Message</Message>
+        <Message size="large">Large Message</Message>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Message>Message Content</Message>
+`,
+                options: `
+<template>
+    <div class="card">
+        <Message>Message Content</Message>
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <Message>Message Content</Message>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>

apps/showcase/pages/message/index.vue

@@ -11,7 +11,10 @@ import FormsDoc from '@/doc/message/FormsDoc.vue';
 import IconDoc from '@/doc/message/IconDoc.vue';
 import ImportDoc from '@/doc/message/ImportDoc.vue';
 import LifeDoc from '@/doc/message/LifeDoc.vue';
+import OutlinedDoc from '@/doc/message/OutlinedDoc.vue';
 import SeverityDoc from '@/doc/message/SeverityDoc.vue';
+import SizesDoc from '@/doc/message/SizesDoc.vue';
+import TextDoc from '@/doc/message/TextDoc.vue';
 import PTComponent from '@/doc/message/pt/index.vue';
 import ThemingDoc from '@/doc/message/theming/index.vue';
 
@@ -39,6 +42,21 @@ export default {
                     label: 'Icon',
                     component: IconDoc
                 },
+                {
+                    id: 'outlined',
+                    label: 'Outlined',
+                    component: OutlinedDoc
+                },
+                {
+                    id: 'text',
+                    label: 'Text',
+                    component: TextDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
                 {
                     id: 'forms',
                     label: 'Forms',

packages/primevue/src/message/BaseMessage.vue

@@ -29,6 +29,14 @@ export default {
         closeButtonProps: {
             type: null,
             default: null
+        },
+        size: {
+            type: String,
+            default: null
+        },
+        variant: {
+            type: String,
+            default: null
         }
     },
     style: MessageStyle,

packages/primevue/src/message/Message.d.ts

@@ -156,6 +156,15 @@ export interface MessageProps {
      * @defaultValue false
      */
     unstyled?: boolean;
+    /**
+     * Defines the size of the component.
+     */
+    size?: 'small' | 'large' | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'text' | undefined;
 }
 
 /**

packages/primevue/src/message/style/MessageStyle.js

@@ -185,10 +185,58 @@ const theme = ({ dt }) => `
 .p-message-leave-active .p-message-close-button {
     opacity: 0;
 }
+
+.p-message-sm .p-message-content {
+    padding: ${dt('message.content.sm.padding')};
+}
+
+.p-message-sm .p-message-text {
+    font-size: ${dt('message.text.sm.font.size')};
+}
+
+.p-message-sm .p-message-icon {
+    font-size: ${dt('message.icon.sm.size')};
+    width: ${dt('message.icon.sm.size')};
+    height: ${dt('message.icon.sm.size')};
+}
+
+.p-message-sm .p-message-close-icon {
+    font-size: ${dt('message.close.icon.sm.size')};
+    width: ${dt('message.close.icon.sm.size')};
+    height: ${dt('message.close.icon.sm.size')};
+}
+
+.p-message-lg .p-message-content {
+    padding: ${dt('message.content.lg.padding')};
+}
+
+.p-message-lg .p-message-text {
+    font-size: ${dt('message.text.lg.font.size')};
+}
+
+.p-message-lg .p-message-icon {
+    font-size: ${dt('message.icon.lg.size')};
+    width: ${dt('message.icon.lg.size')};
+    height: ${dt('message.icon.lg.size')};
+}
+
+.p-message-lg .p-message-close-icon {
+    font-size: ${dt('message.close.icon.lg.size')};
+    width: ${dt('message.close.icon.lg.size')};
+    height: ${dt('message.close.icon.lg.size')};
+}
 `;
 
 const classes = {
-    root: ({ props }) => 'p-message p-component p-message-' + props.severity,
+    root: ({ props }) => [
+        'p-message p-component p-message-' + props.severity,
+        {
+            'p-message-variant-outlined': props.variant === 'outlined',
+            'p-message-variant-text': props.variant === 'text',
+            'p-message-sm': props.size === 'small',
+            'p-message-lg': props.size === 'large'
+        }
+    ],
     content: 'p-message-content',
     icon: 'p-message-icon',
     text: 'p-message-text',

packages/themes/src/presets/aura/message/index.js

@@ -6,14 +6,32 @@ export default {
     },
     content: {
         padding: '0.5rem 0.75rem',
-        gap: '0.5rem'
+        gap: '0.5rem',
+        sm: {
+            padding: '0.375rem 0.625rem'
+        },
+        lg: {
+            padding: '0.625rem 0.875rem'
+        }
     },
     text: {
         fontSize: '1rem',
-        fontWeight: '500'
+        fontWeight: '500',
+        sm: {
+            fontSize: '0.875rem'
+        },
+        lg: {
+            fontSize: '1.125rem'
+        }
     },
     icon: {
-        size: '1.125rem'
+        size: '1.125rem',
+        sm: {
+            size: '1rem'
+        },
+        lg: {
+            size: '1.25rem'
+        }
     },
     closeButton: {
         width: '1.75rem',
@@ -26,7 +44,13 @@ export default {
         }
     },
     closeIcon: {
-        size: '1rem'
+        size: '1rem',
+        sm: {
+            size: '0.875rem'
+        },
+        lg: {
+            size: '1.125rem'
+        }
     },
     colorScheme: {
         light: {

packages/themes/src/presets/lara/message/index.js

@@ -6,14 +6,32 @@ export default {
     },
     content: {
         padding: '0.75rem 1rem',
-        gap: '0.5rem'
+        gap: '0.5rem',
+        sm: {
+            padding: '0.5rem 0.625rem'
+        },
+        lg: {
+            padding: '0.75rem 0.875rem'
+        }
     },
     text: {
         fontSize: '1rem',
-        fontWeight: '500'
+        fontWeight: '500',
+        sm: {
+            fontSize: '0.875rem'
+        },
+        lg: {
+            fontSize: '1.125rem'
+        }
     },
     icon: {
-        size: '1.25rem'
+        size: '1.25rem',
+        sm: {
+            size: '1rem'
+        },
+        lg: {
+            size: '1.5rem'
+        }
     },
     closeButton: {
         width: '2rem',
@@ -26,7 +44,13 @@ export default {
         }
     },
     closeIcon: {
-        size: '1rem'
+        size: '1rem',
+        sm: {
+            fontSize: '0.875rem'
+        },
+        lg: {
+            fontSize: '1.125rem'
+        }
     },
     colorScheme: {
         light: {

packages/themes/src/presets/material/message/index.js

@@ -6,14 +6,32 @@ export default {
     },
     content: {
         padding: '1rem 1.25rem',
-        gap: '0.5rem'
+        gap: '0.5rem',
+        sm: {
+            padding: '0.625rem 0.625rem'
+        },
+        lg: {
+            padding: '0.825rem 0.825rem'
+        }
     },
     text: {
         fontSize: '1rem',
-        fontWeight: '500'
+        fontWeight: '500',
+        sm: {
+            fontSize: '0.875rem'
+        },
+        lg: {
+            fontSize: '1.125rem'
+        }
     },
     icon: {
-        size: '1.25rem'
+        size: '1.25rem',
+        sm: {
+            size: '1rem'
+        },
+        lg: {
+            size: '1.5rem'
+        }
     },
     closeButton: {
         width: '2rem',
@@ -26,7 +44,13 @@ export default {
         }
     },
     closeIcon: {
-        size: '1rem'
+        size: '1rem',
+        sm: {
+            fontSize: '0.875rem'
+        },
+        lg: {
+            fontSize: '1.125rem'
+        }
     },
     colorScheme: {
         light: {

packages/themes/src/presets/nora/message/index.js

@@ -6,14 +6,32 @@ export default {
     },
     content: {
         padding: '0.5rem 0.75rem',
-        gap: '0.5rem'
+        gap: '0.5rem',
+        sm: {
+            padding: '0.375rem 0.625rem'
+        },
+        lg: {
+            padding: '0.625rem 0.875rem'
+        }
     },
     text: {
         fontSize: '1rem',
-        fontWeight: '700'
+        fontWeight: '700',
+        sm: {
+            fontSize: '0.875rem'
+        },
+        lg: {
+            fontSize: '1.125rem'
+        }
     },
     icon: {
-        size: '1.125rem'
+        size: '1.125rem',
+        sm: {
+            size: '1rem'
+        },
+        lg: {
+            size: '1.25rem'
+        }
     },
     closeButton: {
         width: '1.75rem',
@@ -26,7 +44,13 @@ export default {
         }
     },
     closeIcon: {
-        size: '1rem'
+        size: '1rem',
+        sm: {
+            size: '0.875rem'
+        },
+        lg: {
+            size: '1.125rem'
+        }
     },
     colorScheme: {
         light: {