Merge pull request #14902 from primefaces/buttongroup-new

Buttongroup new

src/app/components/button/button.css

@@ -43,29 +43,29 @@
         order: 2;
     }
 
-    .p-buttonset .p-button {
+    .p-button-group .p-button {
         margin: 0;
     }
 
-    .p-buttonset .p-button:not(:last-child) {
+    .p-button-group .p-button:not(:last-child) {
         border-right: 0 none;
     }
 
-    .p-buttonset .p-button:not(:first-of-type):not(:last-of-type) {
+    .p-button-group .p-button:not(:first-of-type):not(:last-of-type) {
         border-radius: 0;
     }
 
-    .p-buttonset .p-button:first-of-type {
+    .p-button-group .p-button:first-of-type {
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
     }
 
-    .p-buttonset .p-button:last-of-type {
+    .p-button-group .p-button:last-of-type {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
     }
 
-    .p-buttonset .p-button:focus {
+    .p-button-group .p-button:focus {
         position: relative;
         z-index: 1;
     }

src/app/components/buttongroup/buttongroup.ts

@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, NgModule, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'p-buttonGroup',
+    template: `
+        <span class="p-button-group p-component" role="group">
+            <ng-content></ng-content>
+        </span>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+})
+export class ButtonGroup {}
+
+@NgModule({
+    imports: [CommonModule],
+    exports: [ButtonGroup],
+    declarations: [ButtonGroup]
+})
+export class ButtonGroupModule {}

src/app/components/buttongroup/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "ng-packagr/ng-package.schema.json",
+    "lib": {
+      "entryFile": "public_api.ts"
+    }
+  }

src/app/components/buttongroup/public_api.ts

@@ -0,0 +1 @@
+export * from './buttongroup';

src/app/showcase/doc/button/buttondoc.module.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { ButtonModule } from 'primeng/button';
+import { ButtonGroupModule } from 'primeng/buttongroup';
 import { RippleModule } from 'primeng/ripple';
 import { AppDocModule } from '../../layout/doc/app.doc.module';
 import { AppCodeModule } from '../../layout/doc/app.code.component';
@@ -25,9 +26,11 @@ import { SizesDoc } from './sizesdoc';
 import { StyleDoc } from './styledoc';
 import { TemplateDoc } from './templatedoc';
 import { TextDoc } from './textdoc';
+import { ButtonGroupDoc } from './buttongroupdoc';
+
 
 @NgModule({
-    imports: [CommonModule, AppCodeModule, AppDocModule, ButtonModule, RippleModule, RouterModule],
+    imports: [CommonModule, AppCodeModule, AppDocModule, ButtonModule, ButtonGroupModule, RippleModule, RouterModule],
     exports: [AppDocModule],
     declarations: [
         ImportDoc,
@@ -44,12 +47,13 @@ import { TextDoc } from './textdoc';
         OutlinedDoc,
         IconOnlyDoc,
         BadgeDoc,
+        ButtonGroupDoc,
         ButtonsetDoc,
         SizesDoc,
         TemplateDoc,
         StyleDoc,
         AccessibilityDoc,
-        DirectiveDoc
+        DirectiveDoc,
     ]
 })
 export class ButtonDocModule {}

src/app/showcase/doc/button/buttongroupdoc.ts

@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+import { Code } from '../../domain/code';
+
+@Component({
+    selector: 'button-group-demo',
+    template: `
+        <app-docsectiontext>
+            <p>Multiple buttons are grouped when wrapped inside an element with <i>ButtonGroup</i> component.</p>
+        </app-docsectiontext>
+        <div class="card flex justify-content-center">
+            <p-buttonGroup>
+                <button pButton pRipple label="Save" icon="pi pi-check"></button>
+                <button pButton pRipple label="Delete" icon="pi pi-trash"></button>
+                <button pButton pRipple label="Cancel" icon="pi pi-times"></button>
+            </p-buttonGroup>
+        </div>
+        <app-code [code]="code" selector="button-group-demo"></app-code>
+    `
+})
+export class ButtonGroupDoc {
+    code: Code = {
+        basic: `<p-buttonGroup>
+    <button pButton pRipple label="Save" icon="pi pi-check"></button>
+    <button pButton pRipple label="Delete" icon="pi pi-trash"></button>
+    <button pButton pRipple label="Cancel" icon="pi pi-times"></button>
+</p-buttonGroup>`,
+
+        html: `
+<div class="card flex justify-content-center">
+    <button pButton pRipple label="Save" icon="pi pi-check"></button>
+    <button pButton pRipple label="Delete" icon="pi pi-trash"></button>
+    <button pButton pRipple label="Cancel" icon="pi pi-times"></button>
+</div>`,
+
+        typescript: `
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'button-group-demo',
+    templateUrl: './button-group-demo.html'
+})
+export class ButtonGroupDemo { }`
+    };
+}

src/app/showcase/pages/button/buttondemo.scss

@@ -2,7 +2,7 @@
     margin-right: .5rem;
 }
 
-:host ::ng-deep .p-buttonset {
+:host ::ng-deep .p-button-group {
     .p-button {
         margin-right: 0;
     }
@@ -29,7 +29,7 @@
         }
     }
 
-    .p-buttonset {
+    .p-button-group {
         .p-button {
             margin-bottom: 0;
         }

src/app/showcase/pages/button/buttondemo.ts

@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 import { AccessibilityDoc } from '../../doc/button/accessibilitydoc';
 import { BadgeDoc } from '../../doc/button/badgedoc';
 import { BasicDoc } from '../../doc/button/basicdoc';
-import { ButtonsetDoc } from '../../doc/button/buttonsetdoc';
 import { DirectiveDoc } from '../../doc/button/directivedoc';
 import { DisabledDoc } from '../../doc/button/disableddoc';
 import { IconsDoc } from '../../doc/button/iconsdoc';
@@ -19,7 +18,7 @@ import { SizesDoc } from '../../doc/button/sizesdoc';
 import { StyleDoc } from '../../doc/button/styledoc';
 import { TemplateDoc } from '../../doc/button/templatedoc';
 import { TextDoc } from '../../doc/button/textdoc';
-
+import { ButtonGroupDoc } from '../../doc/button/buttongroupdoc';
 @Component({
     templateUrl: './buttondemo.html',
     styleUrls: ['./buttondemo.scss']
@@ -102,9 +101,9 @@ export class ButtonDemo {
             component: BadgeDoc
         },
         {
-            id: 'buttonset',
-            label: 'Button Set',
-            component: ButtonsetDoc
+            id: 'buttongroup',
+            label: 'Button Group',
+            component: ButtonGroupDoc
         },
         {
             id: 'sizes',