fix(components/action-bars): summary action bar should stack with back to top (#3096)

apps/integration-e2e/src/e2e/vertical-tabset-back-to-top.cy.ts

@@ -17,22 +17,63 @@ describe('vertical-tabset-back-to-top', () => {
               if (device === 'iphone-6') {
                 cy.get('.sky-vertical-tabset-content button')
                   .should('be.visible')
-                  .should('contain', 'Tab list')
-                  .click();
+                  .should('contain', 'Tab list');
+                cy.get('.sky-vertical-tabset-content button').click();
               }
               cy.get('#sky-vertical-tab-1')
                 .should('be.visible')
-                .should('contain', 'Group 1 Tab 1')
-                .click();
+                .should('contain', 'Group 1 Tab 1');
+              cy.get('#sky-vertical-tab-1').click();
               cy.get(
                 'div[aria-labelledby="sky-vertical-tab-1"] > div:first-child',
               )
                 .should('be.visible')
-                .should('contain', 'Group 1 Tab 1 content')
-                .scrollTo('bottom');
+                .should('contain', 'Group 1 Tab 1 content');
+              cy.get(
+                'div[aria-labelledby="sky-vertical-tab-1"] > div:first-child',
+              ).scrollTo('bottom');
+              cy.get('sky-back-to-top button')
+                .should('be.visible')
+                .should('contain', 'Back to top');
+            });
+
+            it('verify back-to-top with summary action', () => {
+              /* spell-checker:disable */
+              if (device === 'iphone-6') {
+                cy.get('.sky-vertical-tabset-content button')
+                  .should('be.visible')
+                  .should('contain', 'Tab list');
+                cy.get('.sky-vertical-tabset-content button').click();
+              }
+              cy.get('#sky-vertical-tab-1')
+                .should('be.visible')
+                .should('contain', 'Group 1 Tab 1');
+              cy.get('#sky-vertical-tab-1').click();
+              cy.get(
+                'div[aria-labelledby="sky-vertical-tab-1"] > div:first-child',
+              )
+                .should('be.visible')
+                .should('contain', 'Group 1 Tab 1 content');
+              cy.get('button[aria-label="Toggle summary"]')
+                .should('exist')
+                .should('be.visible');
+              cy.get('button[aria-label="Toggle summary"]')
+                .first()
+                .scrollIntoView();
+              cy.get('button[aria-label="Toggle summary"]')
+                .first()
+                .click('topLeft');
+              cy.get('sky-summary-action-bar button').should('be.visible');
+              cy.get(
+                'div[aria-labelledby="sky-vertical-tab-1"] > div:first-child',
+              ).scrollTo('bottom');
               cy.get('sky-back-to-top button')
                 .should('be.visible')
                 .should('contain', 'Back to top');
+              cy.window().skyVisualTest(
+                `vertical-tabset-back-to-top-summary-action-${device}-${theme}`,
+                { capture: 'viewport' },
+              );
             });
           });
         },

apps/integration/src/app/integrations/modal-viewkept-toolbars/modal-viewkept-toolbars-modal.component.html

@@ -3,6 +3,7 @@
     'viewkeeper inside a modal' | skyAppResources
   }}</sky-modal-header>
   <sky-modal-content
+    skyBackToTop
     [skyViewkeeper]="['.sky-lookup-show-more-toolbar-wrapper']"
   >
     <div class="sky-lookup-show-more-toolbar-wrapper">
@@ -75,13 +76,14 @@
     }
   </sky-modal-content>
   <sky-modal-footer>
-    <button
-      id="modal-viewkept-toolbars-modal-close"
-      class="sky-btn sky-btn-primary"
-      type="button"
-      (click)="modalInstance.close()"
-    >
-      Close
-    </button>
+    <sky-summary-action-bar>
+      <sky-summary-action-bar-actions>
+        <sky-summary-action-bar-primary-action
+          (actionClick)="modalInstance.close()"
+        >
+          Close
+        </sky-summary-action-bar-primary-action>
+      </sky-summary-action-bar-actions>
+    </sky-summary-action-bar>
   </sky-modal-footer>
 </sky-modal>

apps/integration/src/app/integrations/modal-viewkept-toolbars/modal-viewkept-toolbars-modal.component.ts

@@ -1,9 +1,10 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { SkySummaryActionBarModule } from '@skyux/action-bars';
 import { SkyViewkeeperModule } from '@skyux/core';
 import { SkyCheckboxModule } from '@skyux/forms';
 import { SkyI18nModule } from '@skyux/i18n';
 import { SkyIconModule } from '@skyux/icon';
-import { SkyToolbarModule } from '@skyux/layout';
+import { SkyBackToTopModule, SkyToolbarModule } from '@skyux/layout';
 import { SkySearchModule } from '@skyux/lookup';
 import { SkyModalInstance, SkyModalModule } from '@skyux/modals';
 import { SkyThemeModule } from '@skyux/theme';
@@ -14,6 +15,8 @@ import { SkyThemeModule } from '@skyux/theme';
   styleUrls: ['./modal-viewkept-toolbars-modal.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
+    SkySummaryActionBarModule,
+    SkyBackToTopModule,
     SkyCheckboxModule,
     SkyIconModule,
     SkyI18nModule,

apps/integration/src/app/integrations/vertical-tabset-back-to-top/vertical-tabset-back-to-top.component.html

@@ -14,56 +14,72 @@ <h2>Vertical tabset</h2>
           Group 1 Tab 1 content
           <p skyBackToTop>Stuff</p>
           <p>
-            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
-            commodo ligula eget dolor. Aenean massa. Cum sociis natoque
-            penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-            Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
-            Nulla consequat massa quis enim. Donec pede justo, fringilla vel,
-            aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
-            imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
-            mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum
-            semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,
-            porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
-            ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
-            nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.
-            Etiam ultricies Lorem ipsum dolor sit amet, consectetuer adipiscing
-            elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
-            natoque penatibus et magnis dis parturient montes, nascetur
-            ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
-            pretium quis, sem. Nulla consequat massa quis enim. Donec pede
-            justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim
-            justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam
-            dictum felis eu pede mollis pretium. Integer tincidunt. Cras
-            dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
-            tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend
-            ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,
-            tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque
-            rutrum. Aenean imperdiet. Etiam ultricies Lorem ipsum dolor sit
-            amet, consectetuer adipiscing elit. Aenean commodo ligula eget
-            dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
-            parturient montes, nascetur ridiculus mus. Donec quam felis,
-            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat
-            massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
-            vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,
-            venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
-            Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
-            Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu,
-            consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
-            viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus
-            varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies
-            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
-            commodo ligula eget dolor. Aenean massa. Cum sociis natoque
-            penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-            Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
-            Nulla consequat massa quis enim. Donec pede justo, fringilla vel,
-            aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
-            imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
-            mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum
-            semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,
-            porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
-            ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
-            nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.
-            Etiam ultricies
+            <button
+              type="button"
+              style="
+                appearance: none;
+                background: none;
+                border: none;
+                outline: none;
+                padding: 0;
+                text-align: start;
+              "
+              aria-label="Toggle summary"
+              (click)="showSummary.set(!showSummary())"
+            >
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
+              commodo ligula eget dolor. Aenean massa. Cum sociis natoque
+              penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+              Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
+              sem. Nulla consequat massa quis enim. Donec pede justo, fringilla
+              vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
+              imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
+              mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum
+              semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,
+              porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
+              ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus
+              viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean
+              imperdiet. Etiam ultricies Lorem ipsum dolor sit amet,
+              consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
+              Aenean massa. Cum sociis natoque penatibus et magnis dis
+              parturient montes, nascetur ridiculus mus. Donec quam felis,
+              ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat
+              massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
+              vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,
+              venenatis vitae, justo. Nullam dictum felis eu pede mollis
+              pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper
+              nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,
+              porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
+              ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus
+              viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean
+              imperdiet. Etiam ultricies Lorem ipsum dolor sit amet,
+              consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
+              Aenean massa. Cum sociis natoque penatibus et magnis dis
+              parturient montes, nascetur ridiculus mus. Donec quam felis,
+              ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat
+              massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
+              vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,
+              venenatis vitae, justo. Nullam dictum felis eu pede mollis
+              pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper
+              nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,
+              porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
+              ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus
+              viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean
+              imperdiet. Etiam ultricies Lorem ipsum dolor sit amet,
+              consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
+              Aenean massa. Cum sociis natoque penatibus et magnis dis
+              parturient montes, nascetur ridiculus mus. Donec quam felis,
+              ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat
+              massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
+              vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,
+              venenatis vitae, justo. Nullam dictum felis eu pede mollis
+              pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper
+              nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,
+              porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
+              ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus
+              viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean
+              imperdiet. Etiam ultricies
+            </button>
           </p>
           <p>
             Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
@@ -270,3 +286,13 @@ <h2>Vertical tabset</h2>
     </sky-vertical-tabset-group>
   </sky-vertical-tabset>
 </div>
+
+@if (showSummary()) {
+  <sky-summary-action-bar>
+    <sky-summary-action-bar-actions>
+      <sky-summary-action-bar-primary-action>
+        Primary Action
+      </sky-summary-action-bar-primary-action>
+    </sky-summary-action-bar-actions>
+  </sky-summary-action-bar>
+}

apps/integration/src/app/integrations/vertical-tabset-back-to-top/vertical-tabset-back-to-top.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, model } from '@angular/core';
 
 @Component({
   selector: 'app-vertical-tabset-back-to-top',
@@ -42,4 +42,6 @@ export class VerticalTabsetBackToTopComponent {
       content: 'Tab 3 content',
     },
   ];
+
+  protected readonly showSummary = model(false);
 }

apps/integration/src/app/integrations/vertical-tabset-back-to-top/vertical-tabset-back-to-top.module.ts

@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
+import { SkySummaryActionBarModule } from '@skyux/action-bars';
 import { SkyBackToTopModule } from '@skyux/layout';
 import { SkyVerticalTabsetModule } from '@skyux/tabs';
 
@@ -9,6 +10,7 @@ import { VerticalTabsetBackToTopComponent } from './vertical-tabset-back-to-top.
   declarations: [VerticalTabsetBackToTopComponent],
   imports: [
     SkyBackToTopModule,
+    SkySummaryActionBarModule,
     SkyVerticalTabsetModule,
     VerticalTabsetBackToTopRoutingModule,
   ],