Merge 652059a into 4f9eda9

SAP · Dec 18, 2020 · a8b6571 · a8b6571
2 parents 4f9eda9 + 652059a
commit a8b6571
Show file tree

Hide file tree

Showing 71 changed files with 563 additions and 752 deletions.
diff --git a/apps/docs/src/app/core/component-docs/bar/examples/bar-default-example.component.html b/apps/docs/src/app/core/component-docs/bar/examples/bar-default-example.component.html
@@ -1,8 +1,6 @@
 <div fd-bar>
     <div fd-bar-left>
-        <fd-bar-element>
-            <button fd-button [fdType]="'transparent'" [glyph]="navigationArrow$ | async" [compact]="true"></button>
-        </fd-bar-element>
+        <fd-button-bar [glyph]="navigationArrow$ | async"></fd-button-bar>
         <fd-bar-element>
             Left Section
         </fd-bar-element>

diff --git a/.../docs/src/app/core/component-docs/bar/examples/bar-floating-footer-example.component.html b/.../docs/src/app/core/component-docs/bar/examples/bar-floating-footer-example.component.html
@@ -1,10 +1,6 @@
 <div fd-bar [barDesign]="'floating-footer'">
     <div fd-bar-right>
-        <fd-bar-element>
-            <button fd-button label="Save" [fdType]="'transparent'" [compact]="true"></button>
-        </fd-bar-element>
-        <fd-bar-element>
-            <button fd-button label="Cancel" [fdType]="'transparent'" [compact]="true"></button>
-        </fd-bar-element>
+        <fd-button-bar label="Save"></fd-button-bar>
+        <fd-button-bar label="Cancel"></fd-button-bar>
     </div>
 </div>
diff --git a/apps/docs/src/app/core/component-docs/bar/examples/bar-footer-example.component.html b/apps/docs/src/app/core/component-docs/bar/examples/bar-footer-example.component.html
@@ -1,10 +1,6 @@
 <div fd-bar [barDesign]="'footer'">
     <div fd-bar-right>
-        <fd-bar-element>
-            <button fd-button label="Save" [fdType]="'transparent'" [compact]="true"></button>
-        </fd-bar-element>
-        <fd-bar-element>
-            <button fd-button label="Cancel" [fdType]="'transparent'" [compact]="true"></button>
-        </fd-bar-element>
+        <fd-button-bar label="Save"></fd-button-bar>
+        <fd-button-bar label="Cancel"></fd-button-bar>
     </div>
 </div>
diff --git a/apps/docs/src/app/core/component-docs/bar/examples/bar-header-example.component.html b/apps/docs/src/app/core/component-docs/bar/examples/bar-header-example.component.html
@@ -1,8 +1,6 @@
 <div fd-bar [barDesign]="'header'">
     <div fd-bar-left>
-        <fd-bar-element>
-            <button fd-button [fdType]="'transparent'" [glyph]="navigationArrow$ | async" [compact]="true"></button>
-        </fd-bar-element>
+        <fd-button-bar [glyph]="navigationArrow$ | async"></fd-button-bar>
         <fd-bar-element>
             Left Section
         </fd-bar-element>

diff --git a/apps/docs/src/app/core/component-docs/bar/examples/bar-page-example.component.html b/apps/docs/src/app/core/component-docs/bar/examples/bar-page-example.component.html
@@ -1,8 +1,6 @@
 <div fd-bar [inPage]="true">
     <div fd-bar-left>
-        <fd-bar-element>
-            <button fd-button [fdType]="'transparent'" [glyph]="navigationArrow$ | async" [compact]="true"></button>
-        </fd-bar-element>
+        <fd-button-bar [glyph]="navigationArrow$ | async"></fd-button-bar>
         <fd-bar-element>
             Left Section
         </fd-bar-element>

diff --git a/.../docs/src/app/core/component-docs/bar/examples/bar-page-responsive-example.component.html b/.../docs/src/app/core/component-docs/bar/examples/bar-page-responsive-example.component.html
@@ -1,8 +1,6 @@
 <div fd-bar [inPage]="true" [size]="'m_l'">
     <div fd-bar-left>
-        <fd-bar-element>
-            <button fd-button [fdType]="'transparent'" [glyph]="navigationArrow$ | async" [compact]="true"></button>
-        </fd-bar-element>
+        <fd-button-bar [glyph]="navigationArrow$ | async"></fd-button-bar>
         <fd-bar-element>
             Left Section
         </fd-bar-element>

diff --git a/...ent-docs/calendar/examples/calendar-mobile-example/calendar-mobile-example.component.html b/...ent-docs/calendar/examples/calendar-mobile-example/calendar-mobile-example.component.html
@@ -17,16 +17,11 @@
         </fd-dialog-body>
 
         <fd-dialog-footer>
-            <fd-dialog-footer-button>
-                <button
-                    fd-button
-                    fd-dialog-decisive-button
+            <fd-button-bar
                     fdType="emphasized"
                     label="Ok"
-                    (click)="dialog.close('Continue'); dateChanged(landscapeCalendar.selectedDate)"
-                >
-                </button>
-            </fd-dialog-footer-button>
+                    (click)="dialog.close('Continue'); dateChanged(landscapeCalendar.selectedDate)">
+            </fd-button-bar>
         </fd-dialog-footer>
     </fd-dialog>
 </ng-template>
@@ -67,16 +62,11 @@ <h3 fd-title>Pick a date</h3>
         </fd-dialog-body>
 
         <fd-dialog-footer>
-            <fd-dialog-footer-button>
-                <button
-                    fd-button
-                    fd-dialog-decisive-button
+            <fd-button-bar
                     fdType="emphasized"
                     label="Ok"
-                    (click)="dialog.close('Continue'); dateChanged(portraitCalendar.selectedDate)"
-                >
-                </button>
-            </fd-dialog-footer-button>
+                    (click)="dialog.close('Continue'); dateChanged(portraitCalendar.selectedDate)">
+            </fd-button-bar>
         </fd-dialog-footer>
     </fd-dialog>
 </ng-template>

diff --git a/apps/docs/src/app/core/component-docs/dialog/dialog-docs.component.html b/apps/docs/src/app/core/component-docs/dialog/dialog-docs.component.html
@@ -211,16 +211,11 @@ <h1 fd-title>Playground Dialog</h1>
         </fd-dialog-body>
 
         <fd-dialog-footer>
-            <fd-dialog-footer-button>
-                <button
-                    fd-button
-                    fd-dialog-decisive-button
+            <fd-button-bar
                     fdType="emphasized"
                     label="Close"
-                    [compact]="true"
                     (click)="dialog.close()">
-                </button>
-            </fd-dialog-footer-button>
+            </fd-button-bar>
         </fd-dialog-footer>
     </fd-dialog>
 </ng-template>
diff --git a/apps/docs/src/app/core/component-docs/dialog/dialog-docs.module.ts b/apps/docs/src/app/core/component-docs/dialog/dialog-docs.module.ts
@@ -13,6 +13,7 @@ import {
     FirstDialogExampleComponent,
     SecondDialogExampleComponent
 } from './examples';
+import { A11yModule } from '@angular/cdk/a11y';
 
 const routes: Routes = [
     {
@@ -32,7 +33,8 @@ const routes: Routes = [
         FormModule,
         ListModule,
         DialogModule,
-        InputGroupModule
+        InputGroupModule,
+        A11yModule
     ],
     exports: [RouterModule],
     declarations: [

diff --git a/...s/src/app/core/component-docs/dialog/examples/component-based/dialog-example.component.ts b/...s/src/app/core/component-docs/dialog/examples/component-based/dialog-example.component.ts
@@ -18,28 +18,17 @@ import { DialogRef } from '@fundamental-ngx/core';
             </fd-dialog-body>
 
             <fd-dialog-footer>
-                <fd-dialog-footer-button>
-                    <button
-                        fd-button
-                        fdType="emphasized"
-                        fd-dialog-decisive-button
+                <fd-button-bar 
                         label="Interesting"
-                        [compact]="true"
+                        fdType="emphasized"
                         (click)="this.dialogRef.close('Continue')">
-                    </button>
-                </fd-dialog-footer-button>
-
-                <fd-dialog-footer-button>
-                    <button
-                        fd-button
-                        fdType="transparent"
-                        fd-dialog-decisive-button
-                        fd-initial-focus
+                </fd-button-bar>
+                <fd-button-bar 
                         label="Cancel"
-                        [compact]="true"
+                        fdInitialFocus
+                        fdType="transparent"
                         (click)="this.dialogRef.dismiss('Cancel')">
-                    </button>
-                </fd-dialog-footer-button>
+                </fd-button-bar>
             </fd-dialog-footer>
         </fd-dialog>
     `

diff --git a/...ialog/examples/dialog-backdrop-container/dialog-backdrop-container-example.component.html b/...ialog/examples/dialog-backdrop-container/dialog-backdrop-container-example.component.html
@@ -26,17 +26,12 @@ <h1 fd-title>Backdrop Configuration</h1>
         </fd-dialog-body>
 
         <fd-dialog-footer>
-            <fd-dialog-footer-button>
-                <button
-                    fd-button
+            <fd-button-bar
                     fd-initial-focus
-                    fd-dialog-decisive-button
                     fdType="emphasized"
                     label="Close"
-                    [compact]="true"
                     (click)="dialog.close()">
-                </button>
-            </fd-dialog-footer-button>
+            </fd-button-bar>
         </fd-dialog-footer>
     </fd-dialog>
 </ng-template>
diff --git a/.../core/component-docs/dialog/examples/dialog-complex/dialog-complex-example.component.html b/.../core/component-docs/dialog/examples/dialog-complex/dialog-complex-example.component.html
@@ -8,9 +8,7 @@ <h1 fd-title>Fresh Market</h1>
                     </fd-bar-element>
                 </div>
                 <div fd-bar-right>
-                    <fd-bar-element>
-                        <button fd-button fdType="transparent" compact="true" label="Clear" (click)="clear()"></button>
-                    </fd-bar-element>
+                    <fd-button-bar label="Clear" (click)="clear()"></fd-button-bar>
                 </div>
             </ng-template>
 
@@ -52,17 +50,13 @@ <h1 fd-title>Fresh Market</h1>
                     <fd-bar-element> Total price: {{ totalPrice }}€ </fd-bar-element>
                 </div>
                 <div fd-bar-right>
-                    <fd-bar-element>
-                        <button
-                            fd-button
-                            fd-dialog-decisive-button
+                    <fd-button-bar
+                            fd-initial-focus
                             glyph="cart"
                             fdType="emphasized"
                             label="Checkout"
-                            [compact]="true"
                             (click)="checkout()">
-                        </button>
-                    </fd-bar-element>
+                    </fd-button-bar>
                 </div>
             </ng-template>
         </fd-dialog-footer>

diff --git a/...ent-docs/dialog/examples/dialog-configuration/dialog-configuration-example.component.html b/...ent-docs/dialog/examples/dialog-configuration/dialog-configuration-example.component.html
@@ -13,17 +13,12 @@ <h1 fd-title>Origin of the Pineapple Word</h1>
         </fd-dialog-body>
 
         <fd-dialog-footer>
-            <fd-dialog-footer-button>
-                <button
-                    fd-button
-                    fdType="emphasized"
+            <fd-button-bar
                     fd-initial-focus
-                    fd-dialog-decisive-button
+                    fdType="emphasized"
                     label="Interesting"
-                    [compact]="true"
                     (click)="dialog.close()">
-                </button>
-            </fd-dialog-footer-button>
+            </fd-button-bar>
         </fd-dialog-footer>
     </fd-dialog>
 </ng-template>

diff --git a/...pp/core/component-docs/dialog/examples/dialog-mobile/dialog-mobile-example.component.html b/...pp/core/component-docs/dialog/examples/dialog-mobile/dialog-mobile-example.component.html
@@ -10,15 +10,12 @@ <h1 fd-title>Wild pineapples</h1>
         </fd-dialog-body>
 
         <fd-dialog-footer>
-            <fd-dialog-footer-button>
-                <button fd-button
-                        fd-initial-focus
-                        fd-dialog-decisive-button
-                        fdType="emphasized"
-                        label="Interesting"
-                        (click)="dialog.close()">
-                </button>
-            </fd-dialog-footer-button>
+            <fd-button-bar
+                    fd-initial-focus
+                    fdType="emphasized"
+                    label="Interesting"
+                    (click)="dialog.close()">
+            </fd-button-bar>
         </fd-dialog-footer>
     </fd-dialog>
 </ng-template>

diff --git a/...ore/component-docs/dialog/examples/dialog-position/dialog-position-example.component.html b/...ore/component-docs/dialog/examples/dialog-position/dialog-position-example.component.html
@@ -11,17 +11,11 @@ <h1 fd-title>More Facts about the Pineapple</h1>
         </fd-dialog-body>
 
         <fd-dialog-footer>
-            <fd-dialog-footer-button>
-                <button
-                    fd-button
+            <fd-button-bar
                     fdType="emphasized"
-                    fd-initial-focus
-                    fd-dialog-decisive-button
                     label="Interesting"
-                    [compact]="true"
                     (click)="dialog.close()">
-                </button>
-            </fd-dialog-footer-button>
+            </fd-button-bar>
         </fd-dialog-footer>
     </fd-dialog>
 </ng-template>

diff --git a/.../app/core/component-docs/dialog/examples/dialog-state/dialog-state-example.component.html b/.../app/core/component-docs/dialog/examples/dialog-state/dialog-state-example.component.html
@@ -9,17 +9,12 @@ <h1 fd-title>Dialog states</h1>
         </fd-dialog-body>
 
         <fd-dialog-footer>
-            <fd-dialog-footer-button>
-                <button
-                    fd-button
+            <fd-button-bar
+                    fd-initial-focus
                     fdType="emphasized"
                     label="Ok"
-                    fd-initial-focus
-                    fd-dialog-decisive-button
-                    [compact]="true"
                     (click)="dialog.close()">
-                </button>
-            </fd-dialog-footer-button>
+            </fd-button-bar>
         </fd-dialog-footer>
     </fd-dialog>
 </ng-template>

diff --git a/...app/core/component-docs/dialog/examples/stacked-dialogs/first-dialog-example.component.ts b/...app/core/component-docs/dialog/examples/stacked-dialogs/first-dialog-example.component.ts
@@ -16,17 +16,12 @@ import { SecondDialogExampleComponent } from './second-dialog-example.component'
             </fd-dialog-body>
 
             <fd-dialog-footer>
-                <fd-dialog-footer-button>
-                    <button
-                        fd-button
-                        fdType="emphasized"
+                <fd-button-bar
                         fd-initial-focus
-                        fd-dialog-decisive-button
+                        fdType="emphasized"
                         label="Open Second Dialog"
-                        [compact]="true"
                         (click)="openDialog()">
-                    </button>
-                </fd-dialog-footer-button>
+                </fd-button-bar>
             </fd-dialog-footer>
         </fd-dialog>
     `

diff --git a/...pp/core/component-docs/dialog/examples/stacked-dialogs/second-dialog-example.component.ts b/...pp/core/component-docs/dialog/examples/stacked-dialogs/second-dialog-example.component.ts
@@ -15,17 +15,12 @@ import { DialogRef } from '@fundamental-ngx/core';
             </fd-dialog-body>
 
             <fd-dialog-footer>
-                <fd-dialog-footer-button>
-                    <button
-                        fd-button
-                        fdType="emphasized"
+                <fd-button-bar
                         fd-initial-focus
-                        fd-dialog-decisive-button
+                        fdType="emphasized"
                         label="Close"
-                        [compact]="true"
                         (click)="dialogRef.close()">
-                    </button>
-                </fd-dialog-footer-button>
+                </fd-button-bar>
             </fd-dialog-footer>
         </fd-dialog>
     `

diff --git a/...omponent-docs/dialog/examples/template-based/template-based-dialog-example.component.html b/...omponent-docs/dialog/examples/template-based/template-based-dialog-example.component.html
@@ -10,28 +10,16 @@ <h1 fd-title>The History of Pineapple</h1>
         </fd-dialog-body>
 
         <fd-dialog-footer>
-            <fd-dialog-footer-button>
-                <button
-                    fd-button
-                    fd-dialog-decisive-button
+            <fd-button-bar
                     fdType="emphasized"
                     label="Interested"
-                    [compact]="true"
                     (click)="dialog.close('Continue')">
-                </button>
-            </fd-dialog-footer-button>
-
-            <fd-dialog-footer-button>
-                <button
-                    fd-button
+            </fd-button-bar>
+            <fd-button-bar
                     fd-initial-focus
-                    fd-dialog-decisive-button
-                    fdType="transparent"
                     label="Cancel"
-                    [compact]="true"
                     (click)="dialog.dismiss('Cancel')">
-                </button>
-            </fd-dialog-footer-button>
+            </fd-button-bar>
         </fd-dialog-footer>
     </fd-dialog>
 </ng-template>