Skip to content

Commit

Permalink
Merge pull request #13852 from primefaces/issue-13851
Browse files Browse the repository at this point in the history 
Fix #13851 - Button: New props
  • Loading branch information
@gucal
gucal authored Oct 11, 2023
2 parents a45bc1c + c355d7d commit b3064c1
Show file tree
Hide file tree
Showing 11 changed files with 258 additions and 141 deletions.
51 changes: 50 additions & 1 deletion src/app/components/button/button.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
};
}

Expand Down
66 changes: 64 additions & 2 deletions src/app/showcase/doc/apidoc/index.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4251,7 +4251,7 @@
"name": "severity",
"optional": false,
"readonly": false,
"type": "\"success\" | \"warning\" | \"danger\" | \"info\"",
"type": "\"success\" | \"warning\" | \"info\" | \"danger\"",
"description": "Severity type of the badge."
}
]
Expand Down Expand Up @@ -4287,7 +4287,7 @@
"name": "severity",
"optional": false,
"readonly": false,
"type": "\"success\" | \"warning\" | \"danger\" | \"info\"",
"type": "\"success\" | \"warning\" | \"info\" | \"danger\"",
"description": "Severity type of the badge."
},
{
Expand Down Expand Up @@ -4588,6 +4588,68 @@
"type": "string",
"description": "Icon to display in loading state."
},
{
"name": "raised",
"optional": false,
"readonly": false,
"type": "boolean",
"default": "false",
"description": "Add a shadow to indicate elevation."
},
{
"name": "rounded",
"optional": false,
"readonly": false,
"type": "boolean",
"default": "false",
"description": "Add a circular border radius to the button."
},
{
"name": "text",
"optional": false,
"readonly": false,
"type": "boolean",
"default": "false",
"description": "Add a textual class to the button without a background initially."
},
{
"name": "plain",
"optional": false,
"readonly": false,
"type": "boolean",
"default": "false",
"description": "Add a plain textual class to the button without a background initially."
},
{
"name": "severity",
"optional": false,
"readonly": false,
"type": "string",
"description": "Defines the style of the button."
},
{
"name": "outlined",
"optional": false,
"readonly": false,
"type": "boolean",
"default": "false",
"description": "Add a border class without a background initially."
},
{
"name": "link",
"optional": false,
"readonly": false,
"type": "boolean",
"default": "false",
"description": "Add a link style to the button."
},
{
"name": "size",
"optional": false,
"readonly": false,
"type": "\"small\" | \"large\"",
"description": "Defines the size of the button."
},
{
"name": "style",
"optional": false,
Expand Down
6 changes: 3 additions & 3 deletions src/app/showcase/doc/button/linkdoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>`
Expand All @@ -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: `
Expand Down
42 changes: 21 additions & 21 deletions src/app/showcase/doc/button/outlineddoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>`
Expand All @@ -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: `
Expand Down
42 changes: 21 additions & 21 deletions src/app/showcase/doc/button/raiseddoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>`
Expand All @@ -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: `
Expand Down
45 changes: 24 additions & 21 deletions src/app/showcase/doc/button/raisedtextdoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>`
Expand All @@ -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: `
Expand Down
Loading

1 comment on commit b3064c1

@vercel
Copy link

@vercel vercel bot commented on b3064c1 Oct 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

primeng-ssr-test – ./

primeng-ssr-test.vercel.app
primeng-ssr-test-git-master-primeng-test.vercel.app
primeng-ssr-test-primeng-test.vercel.app

Please sign in to comment.