Contrast and Secondary Variants for Badge/Tag/Message/Toast

components/doc/badge/severitydoc.js

@@ -10,6 +10,8 @@ export function SeverityDoc(props) {
 <Badge value="4" severity="info"></Badge>
 <Badge value="12" severity="warning"></Badge>
 <Badge value="3" severity="danger"></Badge>
+<Badge value="7" severity="secondary"></Badge>
+<Badge value="5" severity="contrast"></Badge>
         `,
         javascript: `
 import React from 'react';
@@ -23,6 +25,8 @@ export default function SeverityDemo() {
             <Badge value="4" severity="info"></Badge >
             <Badge value="12" severity="warning"></Badge>
             <Badge value="3" severity="danger"></Badge>
+            <Badge value="7" severity="secondary"></Badge>
+            <Badge value="5" severity="contrast"></Badge>
         </div>
     );
 }
@@ -39,6 +43,8 @@ export default function SeverityDemo() {
             <Badge value="4" severity="info"></Badge >
             <Badge value="12" severity="warning"></Badge>
             <Badge value="3" severity="danger"></Badge>
+            <Badge value="7" severity="secondary"></Badge>
+            <Badge value="5" severity="contrast"></Badge>
         </div>
     );
 }
@@ -58,6 +64,8 @@ export default function SeverityDemo() {
                 <Badge value="4" severity="info"></Badge>
                 <Badge value="12" severity="warning"></Badge>
                 <Badge value="3" severity="danger"></Badge>
+                <Badge value="7" severity="secondary"></Badge>
+                <Badge value="5" severity="contrast"></Badge>
             </div>
             <DocSectionCode code={code} />
         </>

components/doc/message/severitydoc.js

@@ -9,6 +9,8 @@ export function SeverityDoc(props) {
 <Message severity="success" text="Success Message" />
 <Message severity="warn" text="Warning Message" />
 <Message severity="error" text="Error Message" />
+<Message severity="secondary" text="Secondary Message" />
+<Message severity="contrast" text="Contrast Message" />
         `,
         javascript: `
 import React from 'react'; 
@@ -21,6 +23,8 @@ export default function SeverityDemo() {
             <Message severity="info" text="Info Message" />
             <Message severity="warn" text="Warning Message" />
             <Message severity="error" text="Error Message" />
+            <Message severity="secondary" text="Secondary Message" />
+            <Message severity="contrast" text="Contrast Message" />
         </div>
     )
 }
@@ -36,6 +40,8 @@ export default function SeverityDemo() {
             <Message severity="info" text="Info Message" />
             <Message severity="warn" text="Warning Message" />
             <Message severity="error" text="Error Message" />
+            <Message severity="secondary" text="Secondary Message" />
+            <Message severity="contrast" text="Contrast Message" />
         </div>
     )
 }
@@ -54,6 +60,8 @@ export default function SeverityDemo() {
                 <Message severity="info" text="Info Message" />
                 <Message severity="warn" text="Warning Message" />
                 <Message severity="error" text="Error Message" />
+                <Message severity="secondary" text="Secondary Message" />
+                <Message severity="contrast" text="Contrast Message" />
             </div>
             <DocSectionCode code={code} />
         </>

components/doc/message/theming/tailwinddoc.js

@@ -33,6 +33,8 @@ export default function UnstyledDemo() {
             <Message severity="success" text="Success Message" />
             <Message severity="warn" text="Warning Message" />
             <Message severity="error" text="Error Message" />
+            <Message severity="secondary" text="Secondary Message" />
+            <Message severity="contrast" text="Contrast Message" />
         </div>
     )
 }

components/doc/messages/severitydoc.js

@@ -14,7 +14,9 @@ export function SeverityDoc(props) {
                 { sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false },
                 { sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false },
                 { sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content', closable: false },
-                { sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false }
+                { sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false },
+                { sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content', closable: false },
+                { sticky: true, severity: 'contrast', summary: 'Contrast', detail: 'Message Content', closable: false }
             ]);
         }
     });
@@ -26,6 +28,8 @@ msgs.current.show([
     {sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false},
     {sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content', closable: false},
     {sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false}
+    {sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content', closable: false}
+    {sticky: true, severity: 'contrast', summary: 'Contrast', detail: 'Message Content', closable: false}
 ]);
         `,
         javascript: `
@@ -44,6 +48,8 @@ export default function SeverityDemo() {
                 { sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false },
                 { sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content', closable: false },
                 { sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false }
+                { sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content', closable: false }
+                { sticky: true, severity: 'contrast', summary: 'Contrast', detail: 'Message Content', closable: false }
             ]);
         }
     });
@@ -68,6 +74,8 @@ export default function SeverityDemo() {
             {sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content'},
             {sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content'},
             {sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content'}
+            {sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content'}
+            {sticky: true, severity: 'contrast', summary: 'Contrast', detail: 'Message Content'}
         ]);
     });
 

components/doc/tag/pilldoc.js

@@ -10,6 +10,8 @@ export function PillDoc(props) {
 <Tag severity="info" value="Info" rounded></Tag>
 <Tag severity="warning" value="Warning" rounded></Tag>
 <Tag severity="danger" value="Danger" rounded></Tag>
+<Tag severity="secondary" value="Secondary" rounded></Tag>
+<Tag severity="contrast" value="Contrast" rounded></Tag>
         `,
         javascript: `
 import React from 'react';
@@ -23,6 +25,8 @@ export default function PillDemo() {
             <Tag severity="info" value="Info" rounded></Tag>
             <Tag severity="warning" value="Warning" rounded></Tag>
             <Tag severity="danger" value="Danger" rounded></Tag>
+            <Tag severity="secondary" value="Secondary" rounded></Tag>
+            <Tag severity="contrast" value="Contrast" rounded></Tag>
         </div>
     );
 }
@@ -39,6 +43,8 @@ export default function PillDemo() {
             <Tag severity="info" value="Info" rounded></Tag>
             <Tag severity="warning" value="Warning" rounded></Tag>
             <Tag severity="danger" value="Danger" rounded></Tag>
+            <Tag severity="secondary" value="Secondary" rounded></Tag>
+            <Tag severity="contrast" value="Contrast" rounded></Tag>
         </div>
     );
 }
@@ -58,6 +64,8 @@ export default function PillDemo() {
                 <Tag severity="info" value="Info" rounded></Tag>
                 <Tag severity="warning" value="Warning" rounded></Tag>
                 <Tag severity="danger" value="Danger" rounded></Tag>
+                <Tag severity="secondary" value="Secondary" rounded></Tag>
+                <Tag severity="contrast" value="Contrast" rounded></Tag>
             </div>
             <DocSectionCode code={code} />
         </>

components/doc/tag/severitydoc.js

@@ -10,6 +10,8 @@ export function SeverityDoc(props) {
 <Tag severity="info" value="Info"></Tag>
 <Tag severity="warning" value="Warning"></Tag>
 <Tag severity="danger" value="Danger"></Tag>
+<Tag severity="secondary" value="Secondary"></Tag>
+<Tag severity="contrast" value="Contrast"></Tag>
         `,
         javascript: `
 import React from 'react';
@@ -23,6 +25,8 @@ export default function SeverityDemo() {
             <Tag severity="info" value="Info"></Tag>
             <Tag severity="warning" value="Warning"></Tag>
             <Tag severity="danger" value="Danger"></Tag>
+            <Tag severity="secondary" value="Secondary"></Tag>
+            <Tag severity="contrast" value="Contrast"></Tag>
         </div>
     );
 }
@@ -39,6 +43,8 @@ export default function SeverityDemo() {
             <Tag severity="info" value="Info"></Tag>
             <Tag severity="warning" value="Warning"></Tag>
             <Tag severity="danger" value="Danger"></Tag>
+            <Tag severity="secondary" value="Secondary"></Tag>
+            <Tag severity="contrast" value="Contrast"></Tag>
         </div>
     );
 }
@@ -58,6 +64,8 @@ export default function SeverityDemo() {
                 <Tag severity="info" value="Info"></Tag>
                 <Tag severity="warning" value="Warning"></Tag>
                 <Tag severity="danger" value="Danger"></Tag>
+                <Tag severity="secondary" value="Secondary"></Tag>
+                <Tag severity="contrast" value="Contrast"></Tag>
             </div>
             <DocSectionCode code={code} />
         </>

components/doc/toast/severitydoc.js

@@ -23,13 +23,23 @@ export function SeverityDoc(props) {
         toast.current.show({ severity: 'error', summary: 'Error', detail: 'Message Content', life: 3000 });
     };
 
+    const showSecondary = () => {
+        toast.current.show({ severity: 'secondary', summary: 'Secondary', detail: 'Message Content', life: 3000 });
+    };
+
+    const showContrast = () => {
+        toast.current.show({ severity: 'contrast', summary: 'Contrast', detail: 'Message Content', life: 3000 });
+    };
+
     const code = {
         basic: `
 <Toast ref={toast} />
-<Button label="Success" className="p-button-success" onClick={showSuccess} />
-<Button label="Info" className="p-button-info" onClick={showInfo} />
-<Button label="Warn" className="p-button-warning" onClick={showWarn} />
-<Button label="Error" className="p-button-danger" onClick={showError} />
+<Button label="Success" severity="success" onClick={showSuccess} />
+<Button label="Info" severity="info" onClick={showInfo} />
+<Button label="Warn" severity="warning" onClick={showWarn} />
+<Button label="Error" severity="danger" onClick={showError} />
+<Button label="Secondary" severity="secondary" onClick={showSecondary} />
+<Button label="Contrast" severity="contrast" onClick={showContrast} />
         `,
         javascript: `
 import React, { useRef } from 'react';
@@ -55,14 +65,24 @@ export default function SeverityDemo() {
         toast.current.show({severity:'error', summary: 'Error', detail:'Message Content', life: 3000});
     }
 
+    const showSecondary = () => {
+        toast.current.show({ severity: 'secondary', summary: 'Secondary', detail: 'Message Content', life: 3000 });
+    };
+
+    const showContrast = () => {
+        toast.current.show({ severity: 'contrast', summary: 'Contrast', detail: 'Message Content', life: 3000 });
+    };
+
     return (
         <div className="card flex justify-content-center">
             <Toast ref={toast} />
             <div className="flex flex-wrap gap-2">
-                <Button label="Success" className="p-button-success" onClick={showSuccess} />
-                <Button label="Info" className="p-button-info" onClick={showInfo} />
-                <Button label="Warn" className="p-button-warning" onClick={showWarn} />
-                <Button label="Error" className="p-button-danger" onClick={showError} />
+                <Button label="Success" severity="success" onClick={showSuccess} />
+                <Button label="Info" severity="info" onClick={showInfo} />
+                <Button label="Warn" severity="warning" onClick={showWarn} />
+                <Button label="Error" severity="danger" onClick={showError} />
+                <Button label="Secondary" severity="secondary" onClick={showSecondary} />
+                <Button label="Contrast" severity="contrast" onClick={showContrast} />
             </div>
         </div>
     )
@@ -92,14 +112,25 @@ export default function SeverityDemo() {
         toast.current?.show({severity:'error', summary: 'Error', detail:'Message Content', life: 3000});
     }
 
+    const showSecondary = () => {
+        toast.current?.show({ severity: 'secondary', summary: 'Secondary', detail: 'Message Content', life: 3000 });
+    };
+
+    const showContrast = () => {
+        toast.current?.show({ severity: 'contrast', summary: 'Contrast', detail: 'Message Content', life: 3000 });
+    };
+
+
     return (
         <div className="card flex justify-content-center">
             <Toast ref={toast} />
             <div className="flex flex-wrap gap-2">
-                <Button label="Success" className="p-button-success" onClick={showSuccess} />
-                <Button label="Info" className="p-button-info" onClick={showInfo} />
-                <Button label="Warn" className="p-button-warning" onClick={showWarn} />
-                <Button label="Error" className="p-button-danger" onClick={showError} />
+                <Button label="Success" severity="success" onClick={showSuccess} />
+                <Button label="Info" severity="info" onClick={showInfo} />
+                <Button label="Warn" severity="warning" onClick={showWarn} />
+                <Button label="Error" severity="danger" onClick={showError} />
+                <Button label="Secondary" severity="secondary" onClick={showSecondary} />
+                <Button label="Contrast" severity="contrast" onClick={showContrast} />
             </div>
         </div>
     )
@@ -117,10 +148,12 @@ export default function SeverityDemo() {
             <div className="card flex justify-content-center">
                 <Toast ref={toast} />
                 <div className="flex flex-wrap gap-2">
-                    <Button label="Success" className="p-button-success" onClick={showSuccess} />
-                    <Button label="Info" className="p-button-info" onClick={showInfo} />
-                    <Button label="Warn" className="p-button-warning" onClick={showWarn} />
-                    <Button label="Error" className="p-button-danger" onClick={showError} />
+                    <Button label="Success" severity="success" onClick={showSuccess} />
+                    <Button label="Info" severity="info" onClick={showInfo} />
+                    <Button label="Warn" severity="warning" onClick={showWarn} />
+                    <Button label="Error" severity="danger" onClick={showError} />
+                    <Button label="Secondary" severity="secondary" onClick={showSecondary} />
+                    <Button label="Contrast" severity="contrast" onClick={showContrast} />
                 </div>
             </div>
             <DocSectionCode code={code} />

components/lib/api/MessageSeverity.js

@@ -2,5 +2,7 @@ export const MessageSeverity = Object.freeze({
     SUCCESS: 'success',
     INFO: 'info',
     WARN: 'warn',
-    ERROR: 'error'
+    ERROR: 'error',
+    SECONDARY: 'secondary',
+    CONTRAST: 'contrast'
 });

components/lib/api/api.d.ts

@@ -1216,7 +1216,9 @@ export declare enum MessageSeverity {
     SUCCESS = 'success',
     INFO = 'info',
     WARN = 'warn',
-    ERROR = 'error'
+    ERROR = 'error',
+    SECONDARY = 'secondary',
+    CONTRAST = 'contrast'
 }
 
 // Filter

components/lib/message/MessageBase.js

@@ -15,13 +15,9 @@ export const MessageBase = ComponentBase.extend({
     },
     css: {
         classes: {
-            root: ({ props }) =>
+            root: ({ props: { severity } }) =>
                 classNames('p-inline-message p-component', {
-                    'p-inline-message-info': props.severity === 'info',
-                    'p-inline-message-warn': props.severity === 'warn',
-                    'p-inline-message-error': props.severity === 'error',
-                    'p-inline-message-success': props.severity === 'success',
-                    'p-inline-message-icon-only': !props.text
+                    [`p-inline-message-${severity}`]: severity
                 }),
             icon: 'p-inline-message-icon',
             text: 'p-inline-message-text'

components/lib/message/message.d.ts

@@ -57,7 +57,7 @@ export interface MessageProps extends Omit<React.DetailedHTMLProps<React.HTMLAtt
     /**
      * Severity level of the message.
      */
-    severity?: 'success' | 'info' | 'warn' | 'error' | undefined;
+    severity?: 'success' | 'info' | 'warn' | 'error' | 'secondary' | 'contrast' | undefined;
     /**
      * Custom template of the message.
      */

components/lib/messages/messages.d.ts

@@ -76,7 +76,7 @@ export interface MessagesMessage {
     /**
      * Severity of the message.
      */
-    severity?: 'success' | 'info' | 'warn' | 'error' | undefined;
+    severity?: 'success' | 'info' | 'warn' | 'error' | 'secondary' | 'contrast' | undefined;
     /**
      * Custom template of the message.
      */

components/lib/toast/toast.d.ts

@@ -85,7 +85,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.
      */