Skip to content

Commit

Permalink
Aura - SplitButton | Update button styles, add new input properties, …
Browse files Browse the repository at this point in the history
…update demos fixed #15220
  • Loading branch information
cetincakiroglu committed Apr 8, 2024
1 parent 45c23ac commit f06b099
Show file tree
Hide file tree
Showing 30 changed files with 325 additions and 152 deletions.
63 changes: 61 additions & 2 deletions src/app/components/splitbutton/splitbutton.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,16 @@ type SplitButtonIconPosition = 'left' | 'right';
@Component({
selector: 'p-splitButton',
template: `
<div #container [ngClass]="'p-splitbutton p-component'" [ngStyle]="style" [class]="styleClass">
<div #container [ngClass]="containerClass" [class]="styleClass" [ngStyle]="style">
<ng-container *ngIf="contentTemplate; else defaultButton">
<button
class="p-splitbutton-defaultbutton"
type="button"
pButton
[severity]="severity"
[text]="text"
[outlined]="outlined"
[size]="size"
[icon]="icon"
[iconPos]="iconPos"
(click)="onDefaultButtonClick($event)"
Expand All @@ -37,6 +41,10 @@ type SplitButtonIconPosition = 'left' | 'right';
class="p-splitbutton-defaultbutton"
type="button"
pButton
[severity]="severity"
[text]="text"
[outlined]="outlined"
[size]="size"
[icon]="icon"
[iconPos]="iconPos"
[label]="label"
Expand All @@ -49,6 +57,10 @@ type SplitButtonIconPosition = 'left' | 'right';
<button
type="button"
pButton
[size]="size"
[severity]="severity"
[text]="text"
[outlined]="outlined"
class="p-splitbutton-menubutton p-button-icon-only"
(click)="onDropdownButtonClick($event)"
(keydown)="onDropdownButtonKeydown($event)"
Expand Down Expand Up @@ -87,6 +99,41 @@ export class SplitButton {
* @group Props
*/
@Input() model: MenuItem[] | undefined;
/**
* Defines the style of the button.
* @group Props
*/
@Input() severity: 'success' | 'info' | 'warning' | 'danger' | 'help' | 'primary' | 'secondary' | 'contrast' | null | undefined;
/**
* Add a shadow to indicate elevation.
* @group Props
*/
@Input({ transform: booleanAttribute }) raised: boolean = false;
/**
* Add a circular border radius to the button.
* @group Props
*/
@Input({ transform: booleanAttribute }) rounded: boolean = false;
/**
* Add a textual class to the button without a background initially.
* @group Props
*/
@Input({ transform: booleanAttribute }) text: boolean = false;
/**
* Add a border class without a background initially.
* @group Props
*/
@Input({ transform: booleanAttribute }) outlined: boolean = false;
/**
* Defines the size of the button.
* @group Props
*/
@Input() size: 'small' | 'large' | undefined | null = null;
/**
* Add a plain textual class to the button without a background initially.
* @group Props
*/
@Input({ transform: booleanAttribute }) plain: boolean = false;
/**
* Name of the icon.
* @group Props
Expand Down Expand Up @@ -126,7 +173,6 @@ export class SplitButton {
* When present, it specifies that the element should be disabled.
* @group Props
*/

@Input({ transform: numberAttribute }) tabindex: number | undefined;
/**
* Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
Expand Down Expand Up @@ -253,6 +299,19 @@ export class SplitButton {
});
}

get containerClass() {
const cls = {
'p-splitbutton p-component': true,
'p-button-raised': this.raised,
'p-button-rounded': this.rounded,
'p-button-outlined': this.outlined,
'p-button-text': this.text,
[`p-button-${this.size === 'small' ? 'sm' : 'lg'}`]: this.size
};

return { ...cls };
}

onDefaultButtonClick(event: MouseEvent) {
this.onClick.emit(event);
this.menu.hide();
Expand Down
6 changes: 3 additions & 3 deletions src/app/showcase/doc/splitbutton/basicdoc.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { Code } from '../../domain/code';
</app-docsectiontext>
<div class="card flex justify-content-center">
<p-toast></p-toast>
<p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items"></p-splitButton>
<p-splitButton label="Save" (onClick)="save('info')" [model]="items"></p-splitButton>
</div>
<app-code [code]="code" selector="split-button-basic-demo"></app-code>
`,
Expand Down Expand Up @@ -54,12 +54,12 @@ export class BasicDoc {
}

code: Code = {
basic: `<p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items"></p-splitButton>`,
basic: `<p-splitButton label="Save" (onClick)="save('info')" [model]="items"></p-splitButton>`,

html: `
<div class="card flex justify-content-center">
<p-toast></p-toast>
<p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items"></p-splitButton>
<p-splitButton label="Save" (onClick)="save('info')" [model]="items"></p-splitButton>
</div>`,

typescript: `
Expand Down
6 changes: 3 additions & 3 deletions src/app/showcase/doc/splitbutton/nesteddoc.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { Code } from '../../domain/code';
</app-docsectiontext>
<div class="card flex justify-content-center">
<p-toast></p-toast>
<p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items"></p-splitButton>
<p-splitButton label="Save" (onClick)="save('info')" [model]="items"></p-splitButton>
</div>
<app-code [code]="code" selector="split-button-nested-demo"></app-code>
`,
Expand Down Expand Up @@ -153,12 +153,12 @@ export class NestedDoc {
}

code: Code = {
basic: `<p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items"></p-splitButton>`,
basic: `<p-splitButton label="Save" (onClick)="save('info')" [model]="items"></p-splitButton>`,

html: `
<div class="card flex justify-content-center">
<p-toast></p-toast>
<p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items"></p-splitButton>
<p-splitButton label="Save" (onClick)="save('info')" [model]="items"></p-splitButton>
</div>`,

typescript: `
Expand Down
42 changes: 21 additions & 21 deletions src/app/showcase/doc/splitbutton/outlineddoc.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ import { Code } from '../../domain/code';
</app-docsectiontext>
<div class="card flex justify-content-center flex-wrap gap-3">
<p-toast></p-toast>
<p-splitButton label="Primary" [model]="this.items" (onClick)="save('info')" styleClass="p-button-outlined mr-2 mb-2"></p-splitButton>
<p-splitButton label="Secondary" [model]="this.items" (onClick)="save('info')" styleClass="p-button-outlined p-button-secondary mr-2 mb-2"></p-splitButton>
<p-splitButton label="Success" [model]="this.items" (onClick)="save('info')" styleClass="p-button-outlined p-button-success mr-2 mb-2"></p-splitButton>
<p-splitButton label="Info" [model]="this.items" (onClick)="save('info')" styleClass="p-button-outlined p-button-info mr-2 mb-2"></p-splitButton>
<p-splitButton label="Warning" [model]="this.items" (onClick)="save('info')" styleClass="p-button-outlined p-button-warning mr-2 mb-2"></p-splitButton>
<p-splitButton label="Help" [model]="this.items" (onClick)="save('info')" styleClass="p-button-outlined p-button-help mr-2 mb-2"></p-splitButton>
<p-splitButton label="Danger" [model]="this.items" (onClick)="save('info')" styleClass="p-button-outlined p-button-danger mr-2 mb-2"></p-splitButton>
<p-splitButton label="Primary" [model]="this.items" (onClick)="save('info')" outlined></p-splitButton>
<p-splitButton label="Secondary" [model]="this.items" (onClick)="save('info')" outlined severity="secondary"></p-splitButton>
<p-splitButton label="Success" [model]="this.items" (onClick)="save('info')" outlined severity="success"></p-splitButton>
<p-splitButton label="Info" [model]="this.items" (onClick)="save('info')" outlined severity="info"></p-splitButton>
<p-splitButton label="Warning" [model]="this.items" (onClick)="save('info')" outlined severity="warning"></p-splitButton>
<p-splitButton label="Help" [model]="this.items" (onClick)="save('info')" outlined severity="help"></p-splitButton>
<p-splitButton label="Danger" [model]="this.items" (onClick)="save('info')" outlined severity="danger"></p-splitButton>
</div>
<app-code [code]="code" selector="split-button-outlined-demo"></app-code>
`,
Expand Down Expand Up @@ -60,24 +60,24 @@ export class OutlinedDoc {
}

code: Code = {
basic: `<p-splitButton label="Primary" [model]="this.items" (onClick)="save('info')" styleClass="p-button-outlined mr-2 mb-2"></p-splitButton>
<p-splitButton label="Secondary" [model]="this.items" (onClick)="save('info')" styleClass="p-button-outlined p-button-secondary mr-2 mb-2"></p-splitButton>
<p-splitButton label="Success" [model]="this.items" (onClick)="save('info')" styleClass="p-button-outlined p-button-success mr-2 mb-2"></p-splitButton>
<p-splitButton label="Info" [model]="this.items" (onClick)="save('info')" styleClass="p-button-outlined p-button-info mr-2 mb-2"></p-splitButton>
<p-splitButton label="Warning" [model]="this.items" (onClick)="save('info')" styleClass="p-button-outlined p-button-warning mr-2 mb-2"></p-splitButton>
<p-splitButton label="Help" [model]="this.items" (onClick)="save('info')" styleClass="p-button-outlined p-button-help mr-2 mb-2"></p-splitButton>
<p-splitButton label="Danger" [model]="this.items" (onClick)="save('info')" styleClass="p-button-outlined p-button-danger mr-2 mb-2"></p-splitButton>`,
basic: `<p-splitButton label="Primary" [model]="this.items" (onClick)="save('info')" outlined></p-splitButton>
<p-splitButton label="Secondary" [model]="this.items" (onClick)="save('info')" outlined severity="secondary"></p-splitButton>
<p-splitButton label="Success" [model]="this.items" (onClick)="save('info')" outlined severity="success"></p-splitButton>
<p-splitButton label="Info" [model]="this.items" (onClick)="save('info')" outlined severity="info"></p-splitButton>
<p-splitButton label="Warning" [model]="this.items" (onClick)="save('info')" outlined severity="warning"></p-splitButton>
<p-splitButton label="Help" [model]="this.items" (onClick)="save('info')" outlined severity="help"></p-splitButton>
<p-splitButton label="Danger" [model]="this.items" (onClick)="save('info')" outlined severity="danger"></p-splitButton>`,

html: `
<div class="card flex justify-content-center flex-wrap gap-3">
<p-toast></p-toast>
<p-splitButton label="Primary" [model]="this.items" (onClick)="save('info')" styleClass="p-button-outlined mr-2 mb-2"></p-splitButton>
<p-splitButton label="Secondary" [model]="this.items" (onClick)="save('info')" styleClass="p-button-outlined p-button-secondary mr-2 mb-2"></p-splitButton>
<p-splitButton label="Success" [model]="this.items" (onClick)="save('info')" styleClass="p-button-outlined p-button-success mr-2 mb-2"></p-splitButton>
<p-splitButton label="Info" [model]="this.items" (onClick)="save('info')" styleClass="p-button-outlined p-button-info mr-2 mb-2"></p-splitButton>
<p-splitButton label="Warning" [model]="this.items" (onClick)="save('info')" styleClass="p-button-outlined p-button-warning mr-2 mb-2"></p-splitButton>
<p-splitButton label="Help" [model]="this.items" (onClick)="save('info')" styleClass="p-button-outlined p-button-help mr-2 mb-2"></p-splitButton>
<p-splitButton label="Danger" [model]="this.items" (onClick)="save('info')" styleClass="p-button-outlined p-button-danger mr-2 mb-2"></p-splitButton>
<p-splitButton label="Primary" [model]="this.items" (onClick)="save('info')" outlined></p-splitButton>
<p-splitButton label="Secondary" [model]="this.items" (onClick)="save('info')" outlined severity="secondary"></p-splitButton>
<p-splitButton label="Success" [model]="this.items" (onClick)="save('info')" outlined severity="success"></p-splitButton>
<p-splitButton label="Info" [model]="this.items" (onClick)="save('info')" outlined severity="info"></p-splitButton>
<p-splitButton label="Warning" [model]="this.items" (onClick)="save('info')" outlined severity="warning"></p-splitButton>
<p-splitButton label="Help" [model]="this.items" (onClick)="save('info')" outlined severity="help"></p-splitButton>
<p-splitButton label="Danger" [model]="this.items" (onClick)="save('info')" outlined severity="danger"></p-splitButton>
</div>`,

typescript: `
Expand Down
42 changes: 21 additions & 21 deletions src/app/showcase/doc/splitbutton/raiseddoc.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ import { Code } from '../../domain/code';
</app-docsectiontext>
<div class="card flex justify-content-center flex-wrap gap-3">
<p-toast></p-toast>
<p-splitButton label="Primary" [model]="items" (onClick)="save('info')" styleClass="p-button-raised mr-2 mb-2"></p-splitButton>
<p-splitButton label="Secondary" [model]="items" (onClick)="save('info')" styleClass="p-button-raised p-button-secondary mr-2 mb-2"></p-splitButton>
<p-splitButton label="Success" [model]="items" (onClick)="save('info')" styleClass="p-button-raised p-button-success mr-2 mb-2"></p-splitButton>
<p-splitButton label="Info" [model]="items" (onClick)="save('info')" styleClass="p-button-raised p-button-info mr-2 mb-2"></p-splitButton>
<p-splitButton label="Warning" [model]="items" (onClick)="save('info')" styleClass="p-button-raised p-button-warning mr-2 mb-2"></p-splitButton>
<p-splitButton label="Help" [model]="items" (onClick)="save('info')" styleClass="p-button-raised p-button-help mr-2 mb-2"></p-splitButton>
<p-splitButton label="Danger" [model]="items" (onClick)="save('info')" styleClass="p-button-raised p-button-danger mr-2 mb-2"></p-splitButton>
<p-splitButton label="Primary" [model]="items" (onClick)="save('info')" raised></p-splitButton>
<p-splitButton label="Secondary" [model]="items" (onClick)="save('info')" raised severity="secondary"></p-splitButton>
<p-splitButton label="Success" [model]="items" (onClick)="save('info')" raised severity="success"></p-splitButton>
<p-splitButton label="Info" [model]="items" (onClick)="save('info')" raised severity="info"></p-splitButton>
<p-splitButton label="Warning" [model]="items" (onClick)="save('info')" raised severity="warning"></p-splitButton>
<p-splitButton label="Help" [model]="items" (onClick)="save('info')" raised severity="help"></p-splitButton>
<p-splitButton label="Danger" [model]="items" (onClick)="save('info')" raised severity="danger"></p-splitButton>
</div>
<app-code [code]="code" selector="split-button-raised-demo"></app-code>
`,
Expand Down Expand Up @@ -60,24 +60,24 @@ export class RaisedDoc {
}

code: Code = {
basic: `<p-splitButton label="Primary" [model]="items" (onClick)="save('info')" styleClass="p-button-raised mr-2 mb-2"></p-splitButton>
<p-splitButton label="Secondary" [model]="items" (onClick)="save('info')" styleClass="p-button-raised p-button-secondary mr-2 mb-2"></p-splitButton>
<p-splitButton label="Success" [model]="items" (onClick)="save('info')" styleClass="p-button-raised p-button-success mr-2 mb-2"></p-splitButton>
<p-splitButton label="Info" [model]="items" (onClick)="save('info')" styleClass="p-button-raised p-button-info mr-2 mb-2"></p-splitButton>
<p-splitButton label="Warning" [model]="items" (onClick)="save('info')" styleClass="p-button-raised p-button-warning mr-2 mb-2"></p-splitButton>
<p-splitButton label="Help" [model]="items" (onClick)="save('info')" styleClass="p-button-raised p-button-help mr-2 mb-2"></p-splitButton>
<p-splitButton label="Danger" [model]="items" (onClick)="save('info')" styleClass="p-button-raised p-button-danger mr-2 mb-2"></p-splitButton>`,
basic: `<p-splitButton label="Primary" [model]="items" (onClick)="save('info')" raised></p-splitButton>
<p-splitButton label="Secondary" [model]="items" (onClick)="save('info')" raised severity="secondary"></p-splitButton>
<p-splitButton label="Success" [model]="items" (onClick)="save('info')" raised severity="success"></p-splitButton>
<p-splitButton label="Info" [model]="items" (onClick)="save('info')" raised severity="info"></p-splitButton>
<p-splitButton label="Warning" [model]="items" (onClick)="save('info')" raised severity="warning"></p-splitButton>
<p-splitButton label="Help" [model]="items" (onClick)="save('info')" raised severity="help"></p-splitButton>
<p-splitButton label="Danger" [model]="items" (onClick)="save('info')" raised severity="danger"></p-splitButton>`,

html: `
<div class="card flex justify-content-center flex-wrap gap-3">
<p-toast></p-toast>
<p-splitButton label="Primary" [model]="items" (onClick)="save('info')" styleClass="p-button-raised mr-2 mb-2"></p-splitButton>
<p-splitButton label="Secondary" [model]="items" (onClick)="save('info')" styleClass="p-button-raised p-button-secondary mr-2 mb-2"></p-splitButton>
<p-splitButton label="Success" [model]="items" (onClick)="save('info')" styleClass="p-button-raised p-button-success mr-2 mb-2"></p-splitButton>
<p-splitButton label="Info" [model]="items" (onClick)="save('info')" styleClass="p-button-raised p-button-info mr-2 mb-2"></p-splitButton>
<p-splitButton label="Warning" [model]="items" (onClick)="save('info')" styleClass="p-button-raised p-button-warning mr-2 mb-2"></p-splitButton>
<p-splitButton label="Help" [model]="items" (onClick)="save('info')" styleClass="p-button-raised p-button-help mr-2 mb-2"></p-splitButton>
<p-splitButton label="Danger" [model]="items" (onClick)="save('info')" styleClass="p-button-raised p-button-danger mr-2 mb-2"></p-splitButton>
<p-splitButton label="Primary" [model]="items" (onClick)="save('info')" raised></p-splitButton>
<p-splitButton label="Secondary" [model]="items" (onClick)="save('info')" raised severity="secondary"></p-splitButton>
<p-splitButton label="Success" [model]="items" (onClick)="save('info')" raised severity="success"></p-splitButton>
<p-splitButton label="Info" [model]="items" (onClick)="save('info')" raised severity="info"></p-splitButton>
<p-splitButton label="Warning" [model]="items" (onClick)="save('info')" raised severity="warning"></p-splitButton>
<p-splitButton label="Help" [model]="items" (onClick)="save('info')" raised severity="help"></p-splitButton>
<p-splitButton label="Danger" [model]="items" (onClick)="save('info')" raised severity="danger"></p-splitButton>
</div>`,

typescript: `
Expand Down
Loading

0 comments on commit f06b099

Please sign in to comment.