Fix #13851 - Button: New props

primefaces · Oct 11, 2023 · 6e7d42b · 6e7d42b
1 parent 4ab301e
commit 6e7d42b
Show file tree

Hide file tree

Showing 10 changed files with 194 additions and 139 deletions.
diff --git a/src/app/components/button/button.ts b/src/app/components/button/button.ts
@@ -320,6 +320,46 @@ export class Button implements AfterContentInit {
      * @group Props
      */
     @Input() loadingIcon: string | undefined;
+    /**
+     * Add a shadow to indicate elevation.
+     * @group Props
+     */
+    @Input() raised: boolean = false;
+    /**
+     * Add a circular border radius to the button.
+     * @group Props
+     */
+    @Input() rounded: boolean = false;
+    /**
+     * Add a textual class to the button without a background initially.
+     * @group Props
+     */
+    @Input() text: boolean = false;
+    /**
+     * Add a plain textual class to the button without a background initially.
+     * @group Props
+     */
+    @Input() plain: boolean = false;
+    /**
+     * Defines the style of the button.
+     * @group Props
+     */
+    @Input() severity: 'secondary' | 'success' | 'info' | 'warning' | 'help' | 'danger' | string | undefined;
+    /**
+     * Add a border class without a background initially.
+     * @group Props
+     */
+    @Input() outlined: boolean = false;
+    /**
+     *  Add a link style to the button.
+     * @group Props
+     */
+    @Input() link: boolean = false;
+    /**
+     * Defines the size of the button.
+     * @group Props
+     */
+    @Input() size: 'small' | 'large' | undefined;
     /**
      * Inline style of the element.
      * @group Props
@@ -393,7 +433,16 @@ export class Button implements AfterContentInit {
             'p-button-vertical': (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label,
             'p-disabled': this.disabled || this.loading,
             'p-button-loading': this.loading,
-            'p-button-loading-label-only': this.loading && !this.icon && this.label && !this.loadingIcon && this.iconPos === 'left'
+            'p-button-loading-label-only': this.loading && !this.icon && this.label && !this.loadingIcon && this.iconPos === 'left',
+            'p-button-link': this.link,
+            [`p-button-${this.severity}`]: this.severity,
+            'p-button-raised': this.raised,
+            'p-button-rounded': this.rounded,
+            'p-button-text': this.text,
+            'p-button-outlined': this.outlined,
+            'p-button-sm': this.size === 'small',
+            'p-button-lg': this.size === 'large',
+            'p-button-plain': this.plain
         };
     }
 

diff --git a/src/app/showcase/doc/button/linkdoc.ts b/src/app/showcase/doc/button/linkdoc.ts
@@ -8,7 +8,7 @@ import { Code } from '../../domain/code';
             <p>A button can be rendered as a link as well.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-button label="Submit" styleClass="p-button-link"></p-button>
+            <p-button label="Submit" [link]="true"></p-button>
         </div>
         <app-code [code]="code" selector="button-link-demo"></app-code>
     </section>`
@@ -20,11 +20,11 @@ export class LinkDoc {
 
     code: Code = {
         basic: `
-<p-button label="Submit" styleClass="p-button-link"></p-button>`,
+<p-button label="Submit" [link]="true"></p-button>`,
 
         html: `
 <div class="card flex justify-content-center">
-    <p-button label="Submit" styleClass="p-button-link"></p-button>
+    <p-button label="Submit" [link]="true"></p-button>
 </div>`,
 
         typescript: `

diff --git a/src/app/showcase/doc/button/outlineddoc.ts b/src/app/showcase/doc/button/outlineddoc.ts
@@ -8,13 +8,13 @@ import { Code } from '../../domain/code';
             <p>Outlined buttons display a border without a background initially.</p>
         </app-docsectiontext>
         <div class="card flex flex-wrap gap-3 justify-content-center">
-            <p-button label="Primary" styleClass="p-button-outlined"></p-button>
-            <p-button label="Secondary" styleClass="p-button-outlined p-button-secondary"></p-button>
-            <p-button label="Success" styleClass="p-button-outlined p-button-success"></p-button>
-            <p-button label="Info" styleClass="p-button-outlined p-button-info"></p-button>
-            <p-button label="Warning" styleClass="p-button-outlined p-button-warning"></p-button>
-            <p-button label="Help" styleClass="p-button-outlined p-button-help"></p-button>
-            <p-button label="Danger" styleClass="p-button-outlined p-button-danger"></p-button>
+            <p-button label="Primary" [outlined]="true"></p-button>
+            <p-button label="Secondary" [outlined]="true" severity="secondary"></p-button>
+            <p-button label="Success" [outlined]="true" severity="success"></p-button>
+            <p-button label="Info" [outlined]="true" severity="info"></p-button>
+            <p-button label="Warning" [outlined]="true" severity="warning"></p-button>
+            <p-button label="Help" [outlined]="true" severity="help"></p-button>
+            <p-button label="Danger" [outlined]="true" severity="danger"></p-button>
         </div>
         <app-code [code]="code" selector="button-outlined-demo"></app-code>
     </section>`
@@ -26,23 +26,23 @@ export class OutlinedDoc {
 
     code: Code = {
         basic: `
-<p-button label="Primary" styleClass="p-button-outlined"></p-button>
-<p-button label="Secondary" styleClass="p-button-outlined p-button-secondary"></p-button>
-<p-button label="Success" styleClass="p-button-outlined p-button-success"></p-button>
-<p-button label="Info" styleClass="p-button-outlined p-button-info"></p-button>
-<p-button label="Warning" styleClass="p-button-outlined p-button-warning"></p-button>
-<p-button label="Help" styleClass="p-button-outlined p-button-help"></p-button>
-<p-button label="Danger" styleClass="p-button-outlined p-button-danger"></p-button>`,
+<p-button label="Primary" [outlined]="true"></p-button>
+<p-button label="Secondary" [outlined]="true" severity="secondary"></p-button>
+<p-button label="Success" [outlined]="true" severity="success"></p-button>
+<p-button label="Info" [outlined]="true" severity="info"></p-button>
+<p-button label="Warning" [outlined]="true" severity="warning"></p-button>
+<p-button label="Help" [outlined]="true" severity="help"></p-button>
+<p-button label="Danger" [outlined]="true" severity="danger"></p-button>`,
 
         html: `
 <div class="card flex flex-wrap gap-3 justify-content-center">
-    <p-button label="Primary" styleClass="p-button-outlined"></p-button>
-    <p-button label="Secondary" styleClass="p-button-outlined p-button-secondary"></p-button>
-    <p-button label="Success" styleClass="p-button-outlined p-button-success"></p-button>
-    <p-button label="Info" styleClass="p-button-outlined p-button-info"></p-button>
-    <p-button label="Warning" styleClass="p-button-outlined p-button-warning"></p-button>
-    <p-button label="Help" styleClass="p-button-outlined p-button-help"></p-button>
-    <p-button label="Danger" styleClass="p-button-outlined p-button-danger"></p-button>
+    <p-button label="Primary" [outlined]="true"></p-button>
+    <p-button label="Secondary" [outlined]="true" severity="secondary"></p-button>
+    <p-button label="Success" [outlined]="true" severity="success"></p-button>
+    <p-button label="Info" [outlined]="true" severity="info"></p-button>
+    <p-button label="Warning" [outlined]="true" severity="warning"></p-button>
+    <p-button label="Help" [outlined]="true" severity="help"></p-button>
+    <p-button label="Danger" [outlined]="true" severity="danger"></p-button>
 </div>`,
 
         typescript: `

diff --git a/src/app/showcase/doc/button/raiseddoc.ts b/src/app/showcase/doc/button/raiseddoc.ts
@@ -8,13 +8,13 @@ import { Code } from '../../domain/code';
             <p>Raised buttons display a shadow to indicate elevation.</p>
         </app-docsectiontext>
         <div class="card flex flex-wrap gap-3 justify-content-center">
-            <p-button label="Primary" styleClass="p-button-raised"></p-button>
-            <p-button label="Secondary" styleClass="p-button-raised p-button-secondary"></p-button>
-            <p-button label="Success" styleClass="p-button-raised p-button-success"></p-button>
-            <p-button label="Info" styleClass="p-button-raised p-button-info"></p-button>
-            <p-button label="Warning" styleClass="p-button-raised p-button-warning"></p-button>
-            <p-button label="Help" styleClass="p-button-raised p-button-help"></p-button>
-            <p-button label="Danger" styleClass="p-button-raised p-button-danger"></p-button>
+            <p-button label="Primary" [raised]="true"></p-button>
+            <p-button label="Secondary" [raised]="true" severity="secondary"></p-button>
+            <p-button label="Success" [raised]="true" severity="success"></p-button>
+            <p-button label="Info" [raised]="true" severity="info"></p-button>
+            <p-button label="Warning" [raised]="true" severity="warning"></p-button>
+            <p-button label="Help" [raised]="true" severity="help"></p-button>
+            <p-button label="Danger" [raised]="true" severity="danger"></p-button>
         </div>
         <app-code [code]="code" selector="button-raised-demo"></app-code>
     </section>`
@@ -26,23 +26,23 @@ export class RaisedDoc {
 
     code: Code = {
         basic: `
-<p-button label="Primary" styleClass="p-button-raised"></p-button>
-<p-button label="Secondary" styleClass="p-button-raised p-button-secondary"></p-button>
-<p-button label="Success" styleClass="p-button-raised p-button-success"></p-button>
-<p-button label="Info" styleClass="p-button-raised p-button-info"></p-button>
-<p-button label="Warning" styleClass="p-button-raised p-button-warning"></p-button>
-<p-button label="Help" styleClass="p-button-raised p-button-help"></p-button>
-<p-button label="Danger" styleClass="p-button-raised p-button-danger"></p-button>`,
+<p-button label="Primary" [raised]="true"></p-button>
+<p-button label="Secondary" [raised]="true" severity="secondary"></p-button>
+<p-button label="Success" [raised]="true" severity="success"></p-button>
+<p-button label="Info" [raised]="true" severity="info"></p-button>
+<p-button label="Warning" [raised]="true" severity="warning"></p-button>
+<p-button label="Help" [raised]="true" severity="help"></p-button>
+<p-button label="Danger" [raised]="true" severity="danger"></p-button>`,
 
         html: `
 <div class="card flex flex-wrap gap-3 justify-content-center">
-    <p-button label="Primary" styleClass="p-button-raised"></p-button>
-    <p-button label="Secondary" styleClass="p-button-raised p-button-secondary"></p-button>
-    <p-button label="Success" styleClass="p-button-raised p-button-success"></p-button>
-    <p-button label="Info" styleClass="p-button-raised p-button-info"></p-button>
-    <p-button label="Warning" styleClass="p-button-raised p-button-warning"></p-button>
-    <p-button label="Help" styleClass="p-button-raised p-button-help"></p-button>
-    <p-button label="Danger" styleClass="p-button-raised p-button-danger"></p-button>
+    <p-button label="Primary" [raised]="true"></p-button>
+    <p-button label="Secondary" [raised]="true" severity="secondary"></p-button>
+    <p-button label="Success" [raised]="true" severity="success"></p-button>
+    <p-button label="Info" [raised]="true" severity="info"></p-button>
+    <p-button label="Warning" [raised]="true" severity="warning"></p-button>
+    <p-button label="Help" [raised]="true" severity="help"></p-button>
+    <p-button label="Danger" [raised]="true" severity="danger"></p-button>
 </div>`,
 
         typescript: `

diff --git a/src/app/showcase/doc/button/raisedtextdoc.ts b/src/app/showcase/doc/button/raisedtextdoc.ts
@@ -8,13 +8,14 @@ import { Code } from '../../domain/code';
             <p>Text buttons can be displayed as raised for elevation.</p>
         </app-docsectiontext>
         <div class="card flex flex-wrap gap-3 justify-content-center">
-            <p-button label="Primary" styleClass="p-button-raised p-button-text"></p-button>
-            <p-button label="Secondary" styleClass="p-button-raised p-button-text p-button-secondary"></p-button>
-            <p-button label="Success" styleClass="p-button-raised p-button-text p-button-success"></p-button>
-            <p-button label="Info" styleClass="p-button-raised p-button-text p-button-info"></p-button>
-            <p-button label="Warning" styleClass="p-button-raised p-button-text p-button-warning"></p-button>
-            <p-button label="Help" styleClass="p-button-raised p-button-text p-button-help"></p-button>
-            <p-button label="Danger" styleClass="p-button-raised p-button-text p-button-danger"></p-button>
+            <p-button label="Primary" [text]="true" [raised]="true"></p-button>
+            <p-button label="Secondary" [text]="true" [raised]="true" severity="secondary"></p-button>
+            <p-button label="Success" [text]="true" [raised]="true" severity="success"></p-button>
+            <p-button label="Info" [text]="true" [raised]="true" severity="info"></p-button>
+            <p-button label="Warning" [text]="true" [raised]="true" severity="warning"></p-button>
+            <p-button label="Help" [text]="true" [raised]="true" severity="help"></p-button>
+            <p-button label="Danger" [text]="true" [raised]="true" severity="danger"></p-button>
+            <p-button label="Plain" [text]="true" [raised]="true" [plain]="true"></p-button>
         </div>
         <app-code [code]="code" selector="button-raisedtext-demo"></app-code>
     </section>`
@@ -26,23 +27,25 @@ export class RaisedTextDoc {
 
     code: Code = {
         basic: `
-<p-button label="Primary" styleClass="p-button-raised p-button-text"></p-button>
-<p-button label="Secondary" styleClass="p-button-raised p-button-text p-button-secondary"></p-button>
-<p-button label="Success" styleClass="p-button-raised p-button-text p-button-success"></p-button>
-<p-button label="Info" styleClass="p-button-raised p-button-text p-button-info"></p-button>
-<p-button label="Warning" styleClass="p-button-raised p-button-text p-button-warning"></p-button>
-<p-button label="Help" styleClass="p-button-raised p-button-text p-button-help"></p-button>
-<p-button label="Danger" styleClass="p-button-raised p-button-text p-button-danger"></p-button>`,
+<p-button label="Primary" [text]="true" [raised]="true"></p-button>
+<p-button label="Secondary" [text]="true" [raised]="true" severity="secondary"></p-button>
+<p-button label="Success" [text]="true" [raised]="true" severity="success"></p-button>
+<p-button label="Info" [text]="true" [raised]="true" severity="info"></p-button>
+<p-button label="Warning" [text]="true" [raised]="true" severity="warning"></p-button>
+<p-button label="Help" [text]="true" [raised]="true" severity="help"></p-button>
+<p-button label="Danger" [text]="true" [raised]="true" severity="danger"></p-button>
+<p-button label="Plain" [text]="true" [raised]="true" [plain]="true"></p-button>`,
 
         html: `
 <div class="card flex flex-wrap gap-3 justify-content-center">
-    <p-button label="Primary" styleClass="p-button-raised p-button-text"></p-button>
-    <p-button label="Secondary" styleClass="p-button-raised p-button-text p-button-secondary"></p-button>
-    <p-button label="Success" styleClass="p-button-raised p-button-text p-button-success"></p-button>
-    <p-button label="Info" styleClass="p-button-raised p-button-text p-button-info"></p-button>
-    <p-button label="Warning" styleClass="p-button-raised p-button-text p-button-warning"></p-button>
-    <p-button label="Help" styleClass="p-button-raised p-button-text p-button-help"></p-button>
-    <p-button label="Danger" styleClass="p-button-raised p-button-text p-button-danger"></p-button>
+    <p-button label="Primary" [text]="true" [raised]="true"></p-button>
+    <p-button label="Secondary" [text]="true" [raised]="true" severity="secondary"></p-button>
+    <p-button label="Success" [text]="true" [raised]="true" severity="success"></p-button>
+    <p-button label="Info" [text]="true" [raised]="true" severity="info"></p-button>
+    <p-button label="Warning" [text]="true" [raised]="true" severity="warning"></p-button>
+    <p-button label="Help" [text]="true" [raised]="true" severity="help"></p-button>
+    <p-button label="Danger" [text]="true" [raised]="true" severity="danger"></p-button>
+    <p-button label="Plain" [text]="true" [raised]="true" [plain]="true"></p-button>
 </div>`,
 
         typescript: `

diff --git a/src/app/showcase/doc/button/roundeddoc.ts b/src/app/showcase/doc/button/roundeddoc.ts
@@ -8,13 +8,13 @@ import { Code } from '../../domain/code';
             <p>Rounded buttons have a circular border radius.</p>
         </app-docsectiontext>
         <div class="card flex flex-wrap gap-3 justify-content-center">
-            <p-button label="Primary" styleClass="p-button-rounded"></p-button>
-            <p-button label="Secondary" styleClass="p-button-rounded p-button-secondary"></p-button>
-            <p-button label="Success" styleClass="p-button-rounded p-button-success"></p-button>
-            <p-button label="Info" styleClass="p-button-rounded p-button-info"></p-button>
-            <p-button label="Warning" styleClass="p-button-rounded p-button-warning"></p-button>
-            <p-button label="Help" styleClass="p-button-rounded p-button-help"></p-button>
-            <p-button label="Danger" styleClass="p-button-rounded p-button-danger"></p-button>
+            <p-button label="Primary" [rounded]="true"></p-button>
+            <p-button label="Secondary" [rounded]="true" severity="secondary"></p-button>
+            <p-button label="Success" [rounded]="true" severity="success"></p-button>
+            <p-button label="Info" [rounded]="true" severity="info"></p-button>
+            <p-button label="Warning" [rounded]="true" severity="warning"></p-button>
+            <p-button label="Help" [rounded]="true" severity="help"></p-button>
+            <p-button label="Danger" [rounded]="true" severity="danger"></p-button>
         </div>
         <app-code [code]="code" selector="button-rounded-demo"></app-code>
     </section>`
@@ -26,23 +26,23 @@ export class RoundedDoc {
 
     code: Code = {
         basic: `
-<p-button label="Primary" styleClass="p-button-rounded"></p-button>
-<p-button label="Secondary" styleClass="p-button-rounded p-button-secondary"></p-button>
-<p-button label="Success" styleClass="p-button-rounded p-button-success"></p-button>
-<p-button label="Info" styleClass="p-button-rounded p-button-info"></p-button>
-<p-button label="Warning" styleClass="p-button-rounded p-button-warning"></p-button>
-<p-button label="Help" styleClass="p-button-rounded p-button-help"></p-button>
-<p-button label="Danger" styleClass="p-button-rounded p-button-danger"></p-button>`,
+<p-button label="Primary" [rounded]="true"></p-button>
+<p-button label="Secondary" [rounded]="true" severity="secondary"></p-button>
+<p-button label="Success" [rounded]="true" severity="success"></p-button>
+<p-button label="Info" [rounded]="true" severity="info"></p-button>
+<p-button label="Warning" [rounded]="true" severity="warning"></p-button>
+<p-button label="Help" [rounded]="true" severity="help"></p-button>
+<p-button label="Danger" [rounded]="true" severity="danger"></p-button>`,
 
         html: `
 <div class="card flex flex-wrap gap-3 justify-content-center">
-    <p-button label="Primary" styleClass="p-button-rounded"></p-button>
-    <p-button label="Secondary" styleClass="p-button-rounded p-button-secondary"></p-button>
-    <p-button label="Success" styleClass="p-button-rounded p-button-success"></p-button>
-    <p-button label="Info" styleClass="p-button-rounded p-button-info"></p-button>
-    <p-button label="Warning" styleClass="p-button-rounded p-button-warning"></p-button>
-    <p-button label="Help" styleClass="p-button-rounded p-button-help"></p-button>
-    <p-button label="Danger" styleClass="p-button-rounded p-button-danger"></p-button>
+    <p-button label="Primary" [rounded]="true"></p-button>
+    <p-button label="Secondary" [rounded]="true" severity="secondary"></p-button>
+    <p-button label="Success" [rounded]="true" severity="success"></p-button>
+    <p-button label="Info" [rounded]="true" severity="info"></p-button>
+    <p-button label="Warning" [rounded]="true" severity="warning"></p-button>
+    <p-button label="Help" [rounded]="true" severity="help"></p-button>
+    <p-button label="Danger" [rounded]="true" severity="danger"></p-button>
 </div>`,
 
         typescript: `