Merge pull request #15471 from primefaces/issue-15470

Fixed #15470 - Add new severity options
primefaces · May 7, 2024 · 44f6d87 · 44f6d87
2 parents 665ce7b + cd820cf
commit 44f6d87
Show file tree

Hide file tree

Showing 48 changed files with 2,348 additions and 41 deletions.
diff --git a/src/app/components/badge/badge.ts b/src/app/components/badge/badge.ts
@@ -223,7 +223,7 @@ export class Badge {
      * Severity type of the badge.
      * @group Props
      */
-    @Input() severity: 'success' | 'info' | 'warning' | 'danger' | null | undefined;
+    @Input() severity: 'success' | 'info' | 'warning' | 'danger' | 'help' | 'primary' | 'secondary' | 'contrast' | null | undefined;
     /**
      * Value to display inside the badge.
      * @group Props
@@ -254,10 +254,7 @@ export class Badge {
             'p-badge-no-gutter': this.value != undefined && String(this.value).length === 1,
             'p-badge-lg': this.badgeSize === 'large' || this.size === 'large',
             'p-badge-xl': this.badgeSize === 'xlarge' || this.size === 'xlarge',
-            'p-badge-info': this.severity === 'info',
-            'p-badge-success': this.severity === 'success',
-            'p-badge-warning': this.severity === 'warning',
-            'p-badge-danger': this.severity === 'danger'
+            [`p-badge-${this.severity}`]: this.severity
         };
     }
 }

diff --git a/src/app/components/button/button.ts b/src/app/components/button/button.ts
@@ -439,7 +439,7 @@ export class Button implements AfterContentInit {
      * Defines the style of the button.
      * @group Props
      */
-    @Input() severity: 'secondary' | 'success' | 'info' | 'warning' | 'help' | 'danger' | 'contrast' | string | undefined;
+    @Input() severity: 'success' | 'info' | 'warning' | 'danger' | 'help' | 'primary' | 'secondary' | 'contrast' | null | undefined;
     /**
      * Add a border class without a background initially.
      * @group Props

diff --git a/src/app/components/message/message.ts b/src/app/components/message/message.ts
@@ -11,19 +11,7 @@ import { TimesCircleIcon } from 'primeng/icons/timescircle';
 @Component({
     selector: 'p-message',
     template: `
-        <div
-            aria-live="polite"
-            class="p-inline-message p-component p-inline-message"
-            [ngStyle]="style"
-            [class]="styleClass"
-            [ngClass]="{
-                'p-inline-message-info': severity === 'info',
-                'p-inline-message-warn': severity === 'warn',
-                'p-inline-message-error': severity === 'error',
-                'p-inline-message-success': severity === 'success',
-                'p-inline-message-icon-only': this.text == null
-            }"
-        >
+        <div aria-live="polite" class="p-inline-message p-component p-inline-message" [ngStyle]="style" [class]="styleClass" [ngClass]="containerClass">
             <CheckIcon *ngIf="icon === 'success'" [styleClass]="'p-inline-message-icon'" />
             <InfoCircleIcon *ngIf="icon === 'info'" [styleClass]="'p-inline-message-icon'" />
             <TimesCircleIcon *ngIf="icon === 'error'" [styleClass]="'p-inline-message-icon'" />
@@ -48,7 +36,7 @@ export class UIMessage {
      * Severity level of the message.
      * @group Props
      */
-    @Input() severity: 'success' | 'info' | 'warn' | 'error' | string | undefined;
+    @Input() severity: 'success' | 'info' | 'warning' | 'danger' | 'help' | 'primary' | 'secondary' | 'contrast' | null | undefined;
     /**
      * Text content.
      * @group Props
@@ -71,12 +59,19 @@ export class UIMessage {
     @Input() styleClass: string | undefined;
 
     get icon() {
-        if (this.severity && this.severity.trim()) {
-            return this.severity;
+        if (this.severity) {
+            return this.severity === 'success' ? 'success' : this.severity === 'info' ? 'info' : this.severity === 'warning' ? 'warn' : this.severity === 'danger' ? 'error' : 'info';
         } else {
             return 'info';
         }
     }
+
+    get containerClass() {
+        return {
+            [`p-inline-message-${this.severity}`]: this.severity,
+            'p-inline-message-icon-only': this.text == null
+        };
+    }
 }
 
 @NgModule({

diff --git a/src/app/components/tag/tag.ts b/src/app/components/tag/tag.ts
@@ -47,7 +47,7 @@ export class Tag {
      * Severity type of the tag.
      * @group Props
      */
-    @Input() severity: 'success' | 'info' | 'warning' | 'danger' | string | undefined;
+    @Input() severity: 'success' | 'secondary' | 'info' | 'warning' | 'danger' | 'contrast' | undefined;
     /**
      * Value to display inside the tag.
      * @group Props
@@ -86,10 +86,7 @@ export class Tag {
     containerClass() {
         return {
             'p-tag p-component': true,
-            'p-tag-info': this.severity === 'info',
-            'p-tag-success': this.severity === 'success',
-            'p-tag-warning': this.severity === 'warning',
-            'p-tag-danger': this.severity === 'danger',
+            [`p-tag-${this.severity}`]: this.severity,
             'p-tag-rounded': this.rounded
         };
     }

diff --git a/src/app/showcase/doc/messages/severitydoc.ts b/src/app/showcase/doc/messages/severitydoc.ts
@@ -22,7 +22,9 @@ export class SeverityDoc implements OnInit {
             { severity: 'info', detail: 'Info Message' },
             { severity: 'success', detail: 'Success Message' },
             { severity: 'warn', detail: 'Warning Message' },
-            { severity: 'error', detail: 'Error Message' }
+            { severity: 'error', detail: 'Error Message' },
+            { severity: 'secondary', detail: 'Secondary Message' },
+            { severity: 'contrast', detail: 'Contrast Message' }
         ];
     }
 
@@ -49,7 +51,9 @@ export class MessagesSeverityDemo implements OnInit {
             { severity: 'info', detail: 'Info Message' },
             { severity: 'success', detail: 'Success Message' },
             { severity: 'warn', detail: 'Warning Message' },
-            { severity: 'error', detail: 'Error Message' }
+            { severity: 'error', detail: 'Error Message' },
+            { severity: 'secondary', detail: 'Secondary Message' },
+            { severity: 'contrast', detail: 'Contrast Message' }
         ];
     }
 }`

diff --git a/src/app/showcase/doc/tag/pilldoc.ts b/src/app/showcase/doc/tag/pilldoc.ts
@@ -8,25 +8,29 @@ import { Code } from '@domain/code';
             <p>Enabling <i>rounded</i>, displays a tag as a pill.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center gap-2">
-            <p-tag value="Primary" [rounded]="true"></p-tag>
-            <p-tag severity="success" value="Success" [rounded]="true"></p-tag>
-            <p-tag severity="info" value="Info" [rounded]="true"></p-tag>
-            <p-tag severity="warning" value="Warning" [rounded]="true"></p-tag>
-            <p-tag severity="danger" value="Danger" [rounded]="true"></p-tag>
+            <p-tag value="Primary" [rounded]="true" />
+            <p-tag severity="success" value="Success" [rounded]="true" />
+            <p-tag severity="info" value="Info" [rounded]="true" />
+            <p-tag severity="secondary" value="Secondary" [rounded]="true" />
+            <p-tag severity="warning" value="Warning" [rounded]="true" />
+            <p-tag severity="danger" value="Danger" [rounded]="true" />
+            <p-tag severity="contrast" value="Contrast" [rounded]="true" />
         </div>
         <app-code [code]="code" selector="tag-pill-demo"></app-code>
     `
 })
 export class PillDoc {
     code: Code = {
-        basic: `<p-tag value="Primary" [rounded]="true"></p-tag>`,
+        basic: `<p-tag value="Primary" [rounded]="true" />`,
         html: `
 <div class="card flex justify-content-center gap-2">
-    <p-tag value="Primary" [rounded]="true"></p-tag>
-    <p-tag severity="success" value="Success" [rounded]="true"></p-tag>
-    <p-tag severity="info" value="Info" [rounded]="true"></p-tag>
-    <p-tag severity="warning" value="Warning" [rounded]="true"></p-tag>
-    <p-tag severity="danger" value="Danger" [rounded]="true"></p-tag>
+    <p-tag value="Primary" [rounded]="true" />
+    <p-tag severity="success" value="Success" [rounded]="true" />
+    <p-tag severity="info" value="Info" [rounded]="true" />
+    <p-tag severity="secondary" value="Secondary" [rounded]="true" />
+    <p-tag severity="warning" value="Warning" [rounded]="true" />
+    <p-tag severity="danger" value="Danger" [rounded]="true" />
+    <p-tag severity="contrast" value="Contrast" [rounded]="true" />
 </div>`,
         typescript: `
 import { Component } from '@angular/core';

diff --git a/src/app/showcase/doc/tag/severitydoc.ts b/src/app/showcase/doc/tag/severitydoc.ts
@@ -10,9 +10,11 @@ import { Code } from '@domain/code';
         <div class="card flex justify-content-center gap-2">
             <p-tag value="Primary"></p-tag>
             <p-tag severity="success" value="Success"></p-tag>
+            <p-tag severity="secondary" value="Secondary"></p-tag>
             <p-tag severity="info" value="Info"></p-tag>
             <p-tag severity="warning" value="Warning"></p-tag>
             <p-tag severity="danger" value="Danger"></p-tag>
+            <p-tag severity="contrast" value="Contrast"></p-tag>
         </div>
         <app-code [code]="code" selector="tag-severity-demo"></app-code>
     `
@@ -24,9 +26,11 @@ export class SeverityDoc {
 <div class="card flex justify-content-center gap-2">
     <p-tag value="Primary"></p-tag>
     <p-tag severity="success" value="Success"></p-tag>
+    <p-tag severity="secondary" value="Secondary"></p-tag>
     <p-tag severity="info" value="Info"></p-tag>
     <p-tag severity="warning" value="Warning"></p-tag>
     <p-tag severity="danger" value="Danger"></p-tag>
+    <p-tag severity="contrast" value="Contrast"></p-tag>
 </div>`,
         typescript: `
 import { Component } from '@angular/core';

diff --git a/src/app/showcase/doc/toast/severitydoc.ts b/src/app/showcase/doc/toast/severitydoc.ts
@@ -17,6 +17,8 @@ import { Code } from '@domain/code';
             <p-button type="button" pRipple (click)="showInfo()" label="Info" severity="info" />
             <p-button type="button" pRipple (click)="showWarn()" label="Warn" severity="warning" />
             <p-button type="button" pRipple (click)="showError()" label="Error" severity="danger" />
+            <p-button type="button" pRipple (click)="showSecondary()" label="Secondary" severity="secondary" />
+            <p-button type="button" pRipple (click)="showContrast()" label="Contrast" severity="contrast" />
         </div>
         <app-code [code]="code" selector="toast-severity-demo"></app-code>
     `,
@@ -41,6 +43,14 @@ export class SeverityDoc {
         this.messageService.add({ severity: 'error', summary: 'Error', detail: 'Message Content' });
     }
 
+    showContrast() {
+        this.messageService.add({ severity: 'contrast', summary: 'Error', detail: 'Message Content' });
+    }
+
+    showSecondary() {
+        this.messageService.add({ severity: 'secondary', summary: 'Secondary', detail: 'Message Content' });
+    }
+
     code: Code = {
         basic: `<p-toast />
 <p-button 
@@ -66,7 +76,19 @@ export class SeverityDoc {
     pRipple 
     (click)="showError()" 
     label="Error" 
-    severity="danger" />`,
+    severity="danger" />
+<p-button 
+    type="button" 
+    pRipple 
+    (click)="showSecondary()" 
+    label="Secondary" 
+    severity="secondary" />
+<p-button 
+    type="button" 
+    pRipple 
+    (click)="showContrast()" 
+    label="Contrast" 
+    severity="contrast" />`,
         html: `<div class="card flex justify-content-center gap-2">
     <p-toast />
     <p-button 
@@ -93,6 +115,18 @@ export class SeverityDoc {
         (click)="showError()" 
         label="Error" 
         severity="danger" />
+    <p-button 
+        type="button" 
+        pRipple 
+        (click)="showSecondary()" 
+        label="Secondary" 
+        severity="secondary" />
+    <p-button 
+        type="button" 
+        pRipple 
+        (click)="showContrast()" 
+        label="Contrast" 
+        severity="contrast" />
 </div>`,
         typescript: `import { Component } from '@angular/core';
 import { MessageService } from 'primeng/api';
@@ -125,6 +159,14 @@ export class ToastSeverityDemo {
     showError() {
         this.messageService.add({ severity: 'error', summary: 'Error', detail: 'Message Content' });
     }
+
+    showContrast() {
+        this.messageService.add({ severity: 'contrast', summary: 'Error', detail: 'Message Content' });
+    }
+
+    showSecondary() {
+        this.messageService.add({ severity: 'secondary', summary: 'Secondary', detail: 'Message Content' });
+    }
 }`
     };
 }
diff --git a/src/assets/components/themes/aura-dark-amber/theme.css b/src/assets/components/themes/aura-dark-amber/theme.css
@@ -5926,6 +5926,30 @@
   .p-message .p-message-detail {
     margin-left: 0.5rem;
   }
+  .p-message.p-message-secondary {
+    background: #27272a;
+    border: solid #3f3f46;
+    border-width: 1px;
+    color: #d4d4d8;
+  }
+  .p-message.p-message-secondary .p-message-icon {
+    color: #d4d4d8;
+  }
+  .p-message.p-message-secondary .p-message-close {
+    color: #d4d4d8;
+  }
+  .p-message.p-message-contrast {
+    background: #ffffff;
+    border: solid #f4f4f5;
+    border-width: 1px;
+    color: #09090b;
+  }
+  .p-message.p-message-contrast .p-message-icon {
+    color: #09090b;
+  }
+  .p-message.p-message-contrast .p-message-close {
+    color: #09090b;
+  }
 
   .p-toast {
     opacity: 1;
@@ -6010,6 +6034,26 @@
 .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
     color: #ef4444;
   }
+  .p-toast .p-toast-message.p-toast-message-secondary {
+    background: #27272a;
+    border: solid #3f3f46;
+    border-width: 1px;
+    color: #d4d4d8;
+  }
+  .p-toast .p-toast-message.p-toast-message-secondary .p-toast-message-icon,
+.p-toast .p-toast-message.p-toast-message-secondary .p-toast-icon-close {
+    color: #d4d4d8;
+  }
+  .p-toast .p-toast-message.p-toast-message-contrast {
+    background: #ffffff;
+    border: solid #f4f4f5;
+    border-width: 1px;
+    color: #09090b;
+  }
+  .p-toast .p-toast-message.p-toast-message-contrast .p-toast-message-icon,
+.p-toast .p-toast-message.p-toast-message-contrast .p-toast-icon-close {
+    color: #09090b;
+  }
 
   .p-galleria .p-galleria-close {
     margin: 0.5rem;
@@ -6457,6 +6501,14 @@
     width: 0.75rem;
     height: 0.75rem;
   }
+  .p-tag.p-tag-secondary {
+    background-color: #27272a;
+    color: #d4d4d8;
+  }
+  .p-tag.p-tag-contrast {
+    background-color: #ffffff;
+    color: #09090b;
+  }
 
   .p-terminal {
     background: #18181b;