Fixed #5200 - Contrast and Secondary Variants for Badge/Tag/Message/T…

…oast
primefaces · Feb 3, 2024 · 5830048 · 5830048
1 parent feb24d1
commit 5830048
Show file tree

Hide file tree

Showing 87 changed files with 152,167 additions and 3,313 deletions.
diff --git a/api-generator/components/inlinemessage.js b/api-generator/components/inlinemessage.js
@@ -3,7 +3,7 @@ const InlineMessageProps = [
         name: 'severity',
         type: 'string',
         default: 'error',
-        description: 'Severity level of the message. Valid severities are "success", "info", "warn" and "error".'
+        description: 'Severity level of the message. Valid severities are "success", "info", "warn", "error", "secondary" and "contrast".'
     },
     {
         name: 'icon',

diff --git a/api-generator/components/message.js b/api-generator/components/message.js
@@ -3,7 +3,7 @@ const MessageProps = [
         name: 'severity',
         type: 'string',
         default: 'info',
-        description: 'Severity level of the message. Valid severities are "success", "info", "warn" and "error".'
+        description: 'Severity level of the message. Valid severities are "success", "info", "warn", "error", "secondary" and "contrast".'
     },
     {
         name: 'closable',

diff --git a/components/lib/inlinemessage/InlineMessage.d.ts b/components/lib/inlinemessage/InlineMessage.d.ts
@@ -94,7 +94,7 @@ export interface InlineMessageProps {
      * Severity level of the message.
      * @defaultValue info
      */
-    severity?: 'success' | 'info' | 'warn' | 'error' | string | undefined;
+    severity?: 'success' | 'info' | 'warn' | 'error' | 'secondary' | 'contrast' | string | undefined;
     /**
      * Display a custom icon for the message.
      * @deprecated since v3.27.0. Use 'icon' slot.

diff --git a/components/lib/message/Message.d.ts b/components/lib/message/Message.d.ts
@@ -118,7 +118,7 @@ export interface MessageProps {
      * Severity level of the message.
      * @defaultValue info
      */
-    severity?: 'success' | 'info' | 'warn' | 'error' | string | undefined;
+    severity?: 'success' | 'info' | 'warn' | 'error' | 'secondary' | 'contrast' | string | undefined;
     /**
      * Whether the message can be closed manually using the close icon.
      * @defaultValue true

diff --git a/components/lib/toast/Toast.d.ts b/components/lib/toast/Toast.d.ts
@@ -131,7 +131,7 @@ export interface ToastMessageOptions {
      * Severity level of the message.
      * @defaultValue info
      */
-    severity?: 'success' | 'info' | 'warn' | 'error' | undefined;
+    severity?: 'success' | 'info' | 'warn' | 'error' | 'secondary' | 'contrast' | undefined;
     /**
      * Summary content of the message.
      */

diff --git a/components/lib/toast/style/ToastStyle.js b/components/lib/toast/style/ToastStyle.js
@@ -101,7 +101,9 @@ const classes = {
             'p-toast-message-info': props.message.severity === 'info' || props.message.severity === undefined,
             'p-toast-message-warn': props.message.severity === 'warn',
             'p-toast-message-error': props.message.severity === 'error',
-            'p-toast-message-success': props.message.severity === 'success'
+            'p-toast-message-success': props.message.severity === 'success',
+            'p-toast-message-secondary': props.message.severity === 'secondary',
+            'p-toast-message-contrast': props.message.severity === 'contrast'
         }
     ],
     content: 'p-toast-message-content',

diff --git a/doc/inlinemessage/SeverityDoc.vue b/doc/inlinemessage/SeverityDoc.vue
@@ -7,6 +7,8 @@
         <InlineMessage severity="info">Info Message</InlineMessage>
         <InlineMessage severity="warn">Warning Message</InlineMessage>
         <InlineMessage severity="error">Error Message</InlineMessage>
+        <InlineMessage severity="secondary">Secondary Message</InlineMessage>
+        <InlineMessage severity="contrast">Contrast Message</InlineMessage>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -21,6 +23,8 @@ export default {
 <InlineMessage severity="info">Info Message</InlineMessage>
 <InlineMessage severity="warn">Warning Message</InlineMessage>
 <InlineMessage severity="error">Error Message</InlineMessage>
+<InlineMessage severity="secondary">Secondary Message</InlineMessage>
+<InlineMessage severity="contrast">Contrast Message</InlineMessage>
 `,
                 options: `
 <template>
@@ -29,6 +33,8 @@ export default {
         <InlineMessage severity="info">Info Message</InlineMessage>
         <InlineMessage severity="warn">Warning Message</InlineMessage>
         <InlineMessage severity="error">Error Message</InlineMessage>
+        <InlineMessage severity="secondary">Secondary Message</InlineMessage>
+        <InlineMessage severity="contrast">Contrast Message</InlineMessage>
     </div>
 </template>
 
@@ -42,6 +48,8 @@ export default {
         <InlineMessage severity="info">Info Message</InlineMessage>
         <InlineMessage severity="warn">Warning Message</InlineMessage>
         <InlineMessage severity="error">Error Message</InlineMessage>
+        <InlineMessage severity="secondary">Secondary Message</InlineMessage>
+        <InlineMessage severity="contrast">Contrast Message</InlineMessage>
     </div>
 </template>
 

diff --git a/doc/message/SeverityDoc.vue b/doc/message/SeverityDoc.vue
@@ -7,6 +7,8 @@
         <Message severity="info">Info Message</Message>
         <Message severity="warn">Warning Message</Message>
         <Message severity="error">Error Message</Message>
+        <Message severity="secondary">Secondary Message</Message>
+        <Message severity="contrast">Contrast Message</Message>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -21,6 +23,8 @@ export default {
 <Message severity="info">Info Message</Message>
 <Message severity="warn">Warning Message</Message>
 <Message severity="error">Error Message</Message>
+<Message severity="secondary">Secondary Message</Message>
+<Message severity="contrast">Contrast Message</Message>
 `,
                 options: `
 <template>
@@ -29,6 +33,8 @@ export default {
         <Message severity="info">Info Message</Message>
         <Message severity="warn">Warning Message</Message>
         <Message severity="error">Error Message</Message>
+        <Message severity="secondary">Secondary Message</Message>
+        <Message severity="contrast">Contrast Message</Message>
     </div>
 </template>
 
@@ -42,6 +48,8 @@ export default {
         <Message severity="info">Info Message</Message>
         <Message severity="warn">Warning Message</Message>
         <Message severity="error">Error Message</Message>
+        <Message severity="secondary">Secondary Message</Message>
+        <Message severity="contrast">Contrast Message</Message>
     </div>
 </template>
 

diff --git a/doc/toast/SeverityDoc.vue b/doc/toast/SeverityDoc.vue
@@ -8,6 +8,8 @@
             <Button label="Info" severity="info" @click="showInfo" />
             <Button label="Warn" severity="warning" @click="showWarn" />
             <Button label="Error" severity="danger" @click="showError" />
+            <Button label="Secondary" severity="secondary" @click="showSecondary" />
+            <Button label="Contrast" severity="contrast" @click="showContrast" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -24,6 +26,8 @@ export default {
 <Button label="Info" severity="info" @click="showInfo" />
 <Button label="Warn" severity="warning" @click="showWarn" />
 <Button label="Error" severity="danger" @click="showError" />
+<Button label="Secondary" severity="secondary" @click="showSecondary" />
+<Button label="Contrast" severity="contrast" @click="showContrast" />
 `,
                 options: `
 <template>
@@ -34,6 +38,8 @@ export default {
             <Button label="Info" severity="info" @click="showInfo" />
             <Button label="Warn" severity="warning" @click="showWarn" />
             <Button label="Error" severity="danger" @click="showError" />
+            <Button label="Secondary" severity="secondary" @click="showSecondary" />
+            <Button label="Contrast" severity="contrast" @click="showContrast" />
         </div>
     </div>
 </template>
@@ -52,6 +58,12 @@ export default {
         },
         showError() {
             this.$toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Content', life: 3000 });
+        },
+        showSecondary() {
+            this.$toast.add({ severity: 'secondary', summary: 'Secondary Message', detail: 'Message Content', life: 3000 });
+        },
+        showContrast() {
+            this.$toast.add({ severity: 'contrast', summary: 'Contrast Message', detail: 'Message Content', life: 3000 });
         }
     }
 };
@@ -66,6 +78,8 @@ export default {
             <Button label="Info" severity="info" @click="showInfo" />
             <Button label="Warn" severity="warning" @click="showWarn" />
             <Button label="Error" severity="danger" @click="showError" />
+            <Button label="Secondary" severity="secondary" @click="showSecondary" />
+            <Button label="Contrast" severity="contrast" @click="showContrast" />
         </div>
     </div>
 </template>
@@ -89,6 +103,14 @@ const showWarn = () => {
 const showError = () => {
     toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Content', life: 3000 });
 };
+
+const showSecondary = () => {
+    toast.add({ severity: 'secondary', summary: 'Secondary Message', detail: 'Message Content', life: 3000 });
+};
+
+const showContrast = () => {
+    toast.add({ severity: 'contrast', summary: 'Contrast Message', detail: 'Message Content', life: 3000 });
+};
 <\/script>
 `
             }
@@ -106,6 +128,12 @@ const showError = () => {
         },
         showError() {
             this.$toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Content', life: 3000 });
+        },
+        showSecondary() {
+            this.$toast.add({ severity: 'secondary', summary: 'Secondary Message', detail: 'Message Content', life: 3000 });
+        },
+        showContrast() {
+            this.$toast.add({ severity: 'contrast', summary: 'Contrast Message', detail: 'Message Content', life: 3000 });
         }
     }
 };

diff --git a/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue
@@ -271,74 +271,6 @@
                     <div class="w-3"></div>
                 </div>
             </section>
-            <section class="py-4 border-bottom-1 surface-border">
-                <div class="flex align-items-center gap-2 mb-3">
-                    <img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap" class="border-circle" style="width: 1.5rem" />
-                    <span class="font-medium">Bootstrap</span>
-                </div>
-                <div class="flex align-items-center justify-content-between gap-3">
-                    <button
-                        :class="[
-                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
-                            { 'border-primary': isThemeActive('bootstrap4', 'blue'), 'hover:border-500 surface-border': !isThemeActive('bootstrap4', 'blue') }
-                        ]"
-                        style="border-radius: 30px"
-                        @click="changeTheme('bootstrap4', 'blue')"
-                    >
-                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #027bff 0%, rgba(2, 123, 255, 0.5) 100%)"></span>
-                    </button>
-                    <button
-                        :class="[
-                            'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
-                            { 'border-primary': isThemeActive('bootstrap4', 'purple'), 'hover:border-500 surface-border': !isThemeActive('bootstrap4', 'purple') }
-                        ]"
-                        style="border-radius: 30px"
-                        @click="changeTheme('bootstrap4', 'purple')"
-                    >
-                        <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #893cae 0%, rgba(137, 60, 174, 0.5) 100%)"></span>
-                    </button>
-                    <div class="w-3"></div>
-                    <div class="w-3"></div>
-                </div>
-            </section>
-            <section class="py-4 border-bottom-1 surface-border">
-                <div class="flex gap-3">
-                    <div class="w-3">
-                        <div class="flex align-items-center gap-2 mb-3">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/soho-light.png" alt="Soho" class="border-circle" style="width: 1.5rem" />
-                            <span class="font-medium">Soho</span>
-                        </div>
-                        <button
-                            :class="[
-                                'bg-transparent border-1 cursor-pointer p-2 w-full flex align-items-center justify-content-center transition-all transition-duration-200',
-                                { 'border-primary': isThemeActive('soho'), 'hover:border-500 surface-border': !isThemeActive('soho') }
-                            ]"
-                            style="border-radius: 30px"
-                            @click="changeTheme('soho')"
-                        >
-                            <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #664beb 0%, rgba(102, 75, 235, 0.5) 100%)"></span>
-                        </button>
-                    </div>
-                    <div class="w-3">
-                        <div class="flex align-items-center gap-2 mb-3">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/viva-light.svg" alt="Viva" class="border-circle" style="width: 1.5rem" />
-                            <span class="font-medium">Viva</span>
-                        </div>
-                        <button
-                            :class="[
-                                'bg-transparent border-1 cursor-pointer p-2 w-full flex align-items-center justify-content-center transition-all transition-duration-200',
-                                { 'border-primary': isThemeActive('viva'), 'hover:border-500 surface-border': !isThemeActive('viva') }
-                            ]"
-                            style="border-radius: 30px"
-                            @click="changeTheme('viva')"
-                        >
-                            <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #4a67c9 0%, rgba(74, 103, 201, 0.5) 100%)"></span>
-                        </button>
-                    </div>
-                    <div class="w-3"></div>
-                    <div class="w-3"></div>
-                </div>
-            </section>
         </div>
     </Sidebar>
 </template>
@@ -471,7 +403,7 @@ export default {
             return this.$appState.ripple;
         },
         inputStyle() {
-            return this.$primevue.config.inputStyle;
+            return this.$primevue.config.inputStyle || 'outlined';
         },
         containerClass() {
             return [