fix(modal): close button

ng-bootstrap · May 12, 2021 · 4794632 · 4794632
1 parent ddfde57
commit 4794632
Show file tree

Hide file tree

Showing 12 changed files with 36 additions and 90 deletions.
diff --git a/demo/src/app/components/modal/demos/basic/modal-basic.html b/demo/src/app/components/modal/demos/basic/modal-basic.html
@@ -1,9 +1,7 @@
 <ng-template #content let-modal>
   <div class="modal-header">
     <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
-    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
-      <span aria-hidden="true">&times;</span>
-    </button>
+    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
   </div>
   <div class="modal-body">
     <form>

diff --git a/demo/src/app/components/modal/demos/component/modal-component.ts b/demo/src/app/components/modal/demos/component/modal-component.ts
@@ -1,14 +1,12 @@
-import { Component, Input } from '@angular/core';
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import {Component, Input} from '@angular/core';
+import {NgbActiveModal, NgbModal} from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'ngbd-modal-content',
   template: `
     <div class="modal-header">
       <h4 class="modal-title">Hi there!</h4>
-      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
-        <span aria-hidden="true">&times;</span>
-      </button>
+      <button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss('Cross click')"></button>
     </div>
     <div class="modal-body">
       <p>Hello, {{name}}!</p>
@@ -24,10 +22,7 @@ export class NgbdModalContent {
   constructor(public activeModal: NgbActiveModal) {}
 }
 
-@Component({
-  selector: 'ngbd-modal-component',
-  templateUrl: './modal-component.html'
-})
+@Component({selector: 'ngbd-modal-component', templateUrl: './modal-component.html'})
 export class NgbdModalComponent {
   constructor(private modalService: NgbModal) {}
 

diff --git a/demo/src/app/components/modal/demos/config/modal-config.html b/demo/src/app/components/modal/demos/config/modal-config.html
@@ -1,9 +1,7 @@
 <ng-template #content let-c="close" let-d="dismiss">
   <div class="modal-header">
     <h4 class="modal-title" id="modal-basic-title">Hi there!</h4>
-    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
-      <span aria-hidden="true">&times;</span>
-    </button>
+    <button type="button" class="btn-close" aria-label="Close" (click)="d('Cross click')"></button>
   </div>
   <div class="modal-body">
     <p>Hello, World!</p>

diff --git a/demo/src/app/components/modal/demos/focus/modal-focus.ts b/demo/src/app/components/modal/demos/focus/modal-focus.ts
@@ -1,14 +1,12 @@
 import {Component, Type} from '@angular/core';
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import {NgbActiveModal, NgbModal} from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'ngbd-modal-confirm',
   template: `
   <div class="modal-header">
     <h4 class="modal-title" id="modal-title">Profile deletion</h4>
-    <button type="button" class="close" aria-describedby="modal-title" (click)="modal.dismiss('Cross click')">
-      <span aria-hidden="true">&times;</span>
-    </button>
+    <button type="button" class="btn-close" aria-describedby="modal-title" (click)="modal.dismiss('Cross click')"></button>
   </div>
   <div class="modal-body">
     <p><strong>Are you sure you want to delete <span class="text-primary">"John Doe"</span> profile?</strong></p>
@@ -31,9 +29,7 @@ export class NgbdModalConfirm {
   template: `
   <div class="modal-header">
     <h4 class="modal-title" id="modal-title">Profile deletion</h4>
-    <button type="button" class="close" aria-label="Close button" aria-describedby="modal-title" (click)="modal.dismiss('Cross click')">
-      <span aria-hidden="true">&times;</span>
-    </button>
+    <button type="button" class="btn-close" aria-label="Close button" aria-describedby="modal-title" (click)="modal.dismiss('Cross click')"></button>
   </div>
   <div class="modal-body">
     <p><strong>Are you sure you want to delete <span class="text-primary">"John Doe"</span> profile?</strong></p>
@@ -56,17 +52,12 @@ const MODALS: {[name: string]: Type<any>} = {
   autofocus: NgbdModalConfirmAutofocus
 };
 
-@Component({
-  selector: 'ngbd-modal-focus',
-  templateUrl: './modal-focus.html'
-})
+@Component({selector: 'ngbd-modal-focus', templateUrl: './modal-focus.html'})
 export class NgbdModalFocus {
   withAutofocus = `<button type="button" ngbAutofocus class="btn btn-danger"
       (click)="modal.close('Ok click')">Ok</button>`;
 
   constructor(private _modalService: NgbModal) {}
 
-  open(name: string) {
-    this._modalService.open(MODALS[name]);
-  }
+  open(name: string) { this._modalService.open(MODALS[name]); }
 }
diff --git a/demo/src/app/components/modal/demos/options/modal-options.html b/demo/src/app/components/modal/demos/options/modal-options.html
@@ -1,9 +1,7 @@
 <ng-template #content let-modal>
   <div class="modal-header">
     <h4 class="modal-title">Modal title</h4>
-    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
-      <span aria-hidden="true">&times;</span>
-    </button>
+    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
   </div>
   <div class="modal-body">
     <p>One fine body&hellip;</p>
@@ -16,9 +14,7 @@ <h4 class="modal-title">Modal title</h4>
 <ng-template #longContent let-modal>
   <div class="modal-header">
     <h4 class="modal-title">Modal title</h4>
-    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
-      <span aria-hidden="true">&times;</span>
-    </button>
+    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
   </div>
   <div class="modal-body">
     <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>

diff --git a/demo/src/app/components/modal/demos/stacked/modal-stacked.ts b/demo/src/app/components/modal/demos/stacked/modal-stacked.ts
@@ -1,13 +1,11 @@
-import { Component } from '@angular/core';
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import {Component} from '@angular/core';
+import {NgbActiveModal, NgbModal} from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   template: `
     <div class="modal-header">
       <h4 class="modal-title">Hi there!</h4>
-      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
-        <span aria-hidden="true">&times;</span>
-      </button>
+      <button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss('Cross click')"></button>
     </div>
     <div class="modal-body">
       <p>Hello, World!</p>
@@ -21,20 +19,14 @@ import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
 export class NgbdModal1Content {
   constructor(private modalService: NgbModal, public activeModal: NgbActiveModal) {}
 
-  open() {
-    this.modalService.open(NgbdModal2Content, {
-      size: 'lg'
-    });
-  }
+  open() { this.modalService.open(NgbdModal2Content, {size: 'lg'}); }
 }
 
 @Component({
   template: `
     <div class="modal-header">
       <h4 class="modal-title">Hi there!</h4>
-      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
-        <span aria-hidden="true">&times;</span>
-      </button>
+      <button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss('Cross click')"></button>
     </div>
     <div class="modal-body">
       <p>Hello, World!</p>
@@ -48,20 +40,13 @@ export class NgbdModal2Content {
   constructor(public activeModal: NgbActiveModal) {}
 }
 
-@Component({
-  selector: 'ngbd-modal-stacked',
-  templateUrl: './modal-stacked.html'
-})
+@Component({selector: 'ngbd-modal-stacked', templateUrl: './modal-stacked.html'})
 export class NgbdModalStacked {
   modalsNumber = 0;
 
   constructor(private modalService: NgbModal) {
-    this.modalService.activeInstances.subscribe((list) => {
-      this.modalsNumber = list.length;
-    });
+    this.modalService.activeInstances.subscribe((list) => { this.modalsNumber = list.length; });
   }
 
-  open() {
-    this.modalService.open(NgbdModal1Content);
-  }
+  open() { this.modalService.open(NgbdModal1Content); }
 }
diff --git a/e2e-app/src/app/modal/focus/modal-focus.component.html b/e2e-app/src/app/modal/focus/modal-focus.component.html
@@ -8,9 +8,7 @@ <h3>Modal focus tests</h3>
 <ng-template #closeable let-modal>
   <div class="modal-header">
     <h4 class="modal-title">Closeable modal</h4>
-    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss()">
-      <span aria-hidden="true">&times;</span>
-    </button>
+    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss()"></button>
   </div>
   <div class="modal-body">
     <form>
@@ -32,9 +30,7 @@ <h4 class="modal-title">Closeable modal</h4>
 <ng-template #autofocus let-modal>
   <div class="modal-header">
     <h4 class="modal-title">Autofocus modal</h4>
-    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss()">
-      <span aria-hidden="true">&times;</span>
-    </button>
+    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss()"></button>
   </div>
   <div class="modal-body">
     <p>Close button should be focused</p>

diff --git a/e2e-app/src/app/modal/nesting/modal-nesting.component.html b/e2e-app/src/app/modal/nesting/modal-nesting.component.html
@@ -3,9 +3,7 @@ <h3>Modal nesting tests</h3>
 <ng-template #t let-modal>
   <div class="modal-header">
     <h4 class="modal-title">Modal with nested popups</h4>
-    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss()">
-      <span aria-hidden="true">&times;</span>
-    </button>
+    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss()"></button>
   </div>
   <div class="modal-body">
     <form>

diff --git a/e2e-app/src/app/modal/stack-confirmation/modal-stack-confirmation.component.html b/e2e-app/src/app/modal/stack-confirmation/modal-stack-confirmation.component.html
@@ -3,9 +3,7 @@ <h3>Modal stack confirmation test</h3>
 <ng-template #modal let-modal>
   <div id="modal" class="modal-header">
     <h4 class="modal-title">Modal with closure confirmation</h4>
-    <button id="close" type="button" class="close" aria-label="Close" (click)="modal.dismiss()">
-      <span aria-hidden="true">&times;</span>
-    </button>
+    <button id="close" type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss()"></button>
   </div>
   <div class="modal-body">
     <p>This modal will trigger confirmation</p>
@@ -15,9 +13,7 @@ <h4 class="modal-title">Modal with closure confirmation</h4>
 <ng-template #confirmation let-modal>
   <div id="stack-modal" class="modal-header">
     <h4 class="modal-title">Are you sure you want to close the modal?</h4>
-    <button id="dismiss" type="button" class="close" aria-label="Close" (click)="modal.dismiss()">
-      <span aria-hidden="true">&times;</span>
-    </button>
+    <button id="dismiss" type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss()"></button>
   </div>
   <div class="modal-body">
     <button id="confirm" class="btn btn-primary" (click)="modal.close()">Yep</button>

diff --git a/e2e-app/src/app/modal/stack/modal-stack.component.html b/e2e-app/src/app/modal/stack/modal-stack.component.html
@@ -3,9 +3,7 @@ <h3>Modal stack tests</h3>
 <ng-template #t let-modal>
   <div id="modal" class="modal-header">
     <h4 class="modal-title">Modal with nested popups</h4>
-    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss()">
-      <span aria-hidden="true">&times;</span>
-    </button>
+    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss()"></button>
   </div>
   <div class="modal-body">
     <!-- modal -->
@@ -16,9 +14,7 @@ <h4 class="modal-title">Modal with nested popups</h4>
 <ng-template #t2 let-modal>
   <div id="stack-modal" class="modal-header">
     <h4 class="modal-title">Stacked modal</h4>
-    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss()">
-      <span aria-hidden="true">&times;</span>
-    </button>
+    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss()"></button>
   </div>
 </ng-template>
 

diff --git a/e2e-app/src/app/modal/stack/modal-stack.po.ts b/e2e-app/src/app/modal/stack/modal-stack.po.ts
@@ -5,7 +5,7 @@ import {waitForModalCount} from '../modal.po';
 export const SELECTOR_MODAL_BUTTON = '#open-modal';
 export const SELECTOR_STACK_MODAL_BUTTON = '#open-inner-modal';
 export const SELECTOR_STACK_MODAL = '#stack-modal';
-export const SELECTOR_CLOSE_ICON = 'button.close';
+export const SELECTOR_CLOSE_ICON = 'button.btn-close';
 
 export const openModal = async() => {
   await test.page.click(SELECTOR_MODAL_BUTTON);

diff --git a/ssr-app/src/app/components/modal.component.ts b/ssr-app/src/app/components/modal.component.ts
@@ -1,5 +1,5 @@
-import { Component } from '@angular/core';
-import { ModalDismissReasons, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import {Component} from '@angular/core';
+import {ModalDismissReasons, NgbModal} from '@ng-bootstrap/ng-bootstrap';
 
 function getDismissReason(reason: any): string {
   switch (reason) {
@@ -18,9 +18,7 @@ function getDismissReason(reason: any): string {
     <ng-template #content let-modal>
       <div class="modal-header">
         <h4 class="modal-title" id="modal-basic-title">Modal</h4>
-        <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
-          <span aria-hidden="true">&times;</span>
-        </button>
+        <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
       </div>
       <div class="modal-body">
         Hello from modal
@@ -41,10 +39,9 @@ export class ModalComponent {
   constructor(private modalService: NgbModal) {}
 
   open(content) {
-    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
-      this.closeResult = `Closed with: ${result}`;
-    }, (reason) => {
-      this.closeResult = `Dismissed ${getDismissReason(reason)}`;
-    });
+    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'})
+        .result.then(
+            (result) => { this.closeResult = `Closed with: ${result}`; },
+            (reason) => { this.closeResult = `Dismissed ${getDismissReason(reason)}`; });
   }
 }