fix(toast): new css class for btn-close (ng-bootstrap#3986)

Co-authored-by: Nordine Bittich <nordine.bittich@ext.europa.ec.eu>
fbasso · Mar 10, 2021 · 5fa1ebd · 5fa1ebd
1 parent eefa19e
commit 5fa1ebd
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/demo/src/app/components/toast/demos/custom-header/toast-custom-header.html b/demo/src/app/components/toast/demos/custom-header/toast-custom-header.html
@@ -1,10 +1,13 @@
 <ngb-toast *ngIf="show" [autohide]="false" (hidden)="show=false">
   <ng-template ngbToastHeader>
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
-      <path
-        d="M16.896 10l-4.896-8-4.896 8-7.104-4 3 11v5h18v-5l3-11-7.104 4zm-11.896 10v-2h14v2h-14zm14.2-4h-14.4l-1.612-5.909 4.615 2.598 4.197-6.857 4.197 6.857 4.615-2.598-1.612 5.909z" />
-    </svg>
-    <strong class="mx-1">Fancy</strong>header here
+    <div class="me-auto">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
+        <path
+          d="M16.896 10l-4.896-8-4.896 8-7.104-4 3 11v5h18v-5l3-11-7.104 4zm-11.896 10v-2h14v2h-14zm14.2-4h-14.4l-1.612-5.909 4.615 2.598 4.197-6.857 4.197 6.857 4.615-2.598-1.612 5.909z" />
+      </svg>
+      <strong class="mx-1">Fancy</strong>header here
+    </div>
+
   </ng-template>
   Hello, I am toast. Have you noticed my header has been generated from a Template?
 </ngb-toast>
diff --git a/src/toast/toast.spec.ts b/src/toast/toast.spec.ts
@@ -51,7 +51,7 @@ describe('ngb-toast', () => {
     it('should contain a close button when header is specified', () => {
       const fixture = createTestComponent(`<ngb-toast header="header">body</ngb-toast>`);
       const toastHeader = getToastHeaderElement(fixture.nativeElement);
-      expect(toastHeader.querySelector('button.close')).toBeDefined();
+      expect(toastHeader.querySelector('button.btn-close')).toBeDefined();
     });
 
     it('should contain a close button when ngbToastHeader is used', () => {
@@ -60,15 +60,15 @@ describe('ngb-toast', () => {
         body
       </ngb-toast>`);
       const toastHeader = getToastHeaderElement(fixture.nativeElement);
-      expect(toastHeader.querySelector('button.close')).toBeDefined();
+      expect(toastHeader.querySelector('button.btn-close')).toBeDefined();
     });
 
     it('should emit hide output when close is clicked', () => {
       const fixture =
           createTestComponent(`<ngb-toast header="header" [autohide]="false" (hidden)="hide()">body</ngb-toast>`);
 
       const toast = getToastElement(fixture.nativeElement);
-      const closeButton = toast.querySelector('button.close') as HTMLElement;
+      const closeButton = toast.querySelector('button.btn-close') as HTMLElement;
       closeButton.click();
       fixture.detectChanges();
       expect(fixture.componentInstance.hide).toHaveBeenCalled();

diff --git a/src/toast/toast.ts b/src/toast/toast.ts
@@ -57,8 +57,7 @@ export class NgbToastHeader {
     <ng-template [ngIf]="contentHeaderTpl || header">
       <div class="toast-header">
         <ng-template [ngTemplateOutlet]="contentHeaderTpl || headerTpl"></ng-template>
-        <button type="button" class="close" aria-label="Close" i18n-aria-label="@@ngb.toast.close-aria" (click)="hide()">
-          <span aria-hidden="true">&times;</span>
+        <button type="button" class="btn-close" aria-label="Close" i18n-aria-label="@@ngb.toast.close-aria" (click)="hide()">
         </button>
       </div>
     </ng-template>