diff --git a/apps/showcase/doc/message/OutlinedDoc.vue b/apps/showcase/doc/message/OutlinedDoc.vue new file mode 100644 index 000000000..21e576d38 --- /dev/null +++ b/apps/showcase/doc/message/OutlinedDoc.vue @@ -0,0 +1,45 @@ + + + Message provides small and large sizes as alternatives to the base. + + + Small Message + Normal Message + Large Message + + + + + diff --git a/apps/showcase/doc/message/SizesDoc.vue b/apps/showcase/doc/message/SizesDoc.vue new file mode 100644 index 000000000..15a21ca48 --- /dev/null +++ b/apps/showcase/doc/message/SizesDoc.vue @@ -0,0 +1,51 @@ + + + Message provides small and large sizes as alternatives to the base. + + + Small Message + Normal Message + Large Message + + + + + diff --git a/apps/showcase/doc/message/TextDoc.vue b/apps/showcase/doc/message/TextDoc.vue new file mode 100644 index 000000000..21e576d38 --- /dev/null +++ b/apps/showcase/doc/message/TextDoc.vue @@ -0,0 +1,45 @@ + + + Message provides small and large sizes as alternatives to the base. + + + Small Message + Normal Message + Large Message + + + + + diff --git a/apps/showcase/pages/message/index.vue b/apps/showcase/pages/message/index.vue index 945c1ccc6..d50ae8cbd 100755 --- a/apps/showcase/pages/message/index.vue +++ b/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', diff --git a/packages/primevue/src/message/BaseMessage.vue b/packages/primevue/src/message/BaseMessage.vue index 64280cbe7..33e305e4e 100644 --- a/packages/primevue/src/message/BaseMessage.vue +++ b/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, diff --git a/packages/primevue/src/message/Message.d.ts b/packages/primevue/src/message/Message.d.ts index a02aa06c2..f9a741353 100755 --- a/packages/primevue/src/message/Message.d.ts +++ b/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; } /** diff --git a/packages/primevue/src/message/style/MessageStyle.js b/packages/primevue/src/message/style/MessageStyle.js index 107bdac7c..1ece597df 100644 --- a/packages/primevue/src/message/style/MessageStyle.js +++ b/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', diff --git a/packages/themes/src/presets/aura/message/index.js b/packages/themes/src/presets/aura/message/index.js index f4072c4c8..75ca6a68f 100644 --- a/packages/themes/src/presets/aura/message/index.js +++ b/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: { diff --git a/packages/themes/src/presets/lara/message/index.js b/packages/themes/src/presets/lara/message/index.js index 7498cc51b..dbc49d4b0 100644 --- a/packages/themes/src/presets/lara/message/index.js +++ b/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: { diff --git a/packages/themes/src/presets/material/message/index.js b/packages/themes/src/presets/material/message/index.js index 1531ab51f..d88a48db9 100644 --- a/packages/themes/src/presets/material/message/index.js +++ b/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: { diff --git a/packages/themes/src/presets/nora/message/index.js b/packages/themes/src/presets/nora/message/index.js index ea6c6261b..52a55ec1e 100644 --- a/packages/themes/src/presets/nora/message/index.js +++ b/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: {
Message provides small and large sizes as alternatives to the base.