fix(accordion): follow bootstrap 5 markup

ng-bootstrap · May 12, 2021 · 29f61d5 · 29f61d5
1 parent d598cb4
commit 29f61d5
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 13 deletions.
diff --git a/src/accordion/accordion.spec.ts b/src/accordion/accordion.spec.ts
@@ -12,15 +12,16 @@ const createTestComponent = (html: string) =>
     createGenericTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
 
 function getPanels(element: HTMLElement): HTMLDivElement[] {
-  return <HTMLDivElement[]>Array.from(element.querySelectorAll('.card > .accordion-header'));
+  return <HTMLDivElement[]>Array.from(element.querySelectorAll('.accordion-item > .accordion-header'));
 }
 
 function getPanelsContent(element: HTMLElement): HTMLDivElement[] {
-  return <HTMLDivElement[]>Array.from(element.querySelectorAll('.card > .collapse, .card > .collapsing'));
+  return <HTMLDivElement[]>Array.from(
+      element.querySelectorAll('.accordion-item > .collapse, .accordion-item > .collapsing'));
 }
 
 function getPanelsButton(element: HTMLElement): HTMLButtonElement[] {
-  return <HTMLButtonElement[]>Array.from(element.querySelectorAll('.card > .accordion-header button'));
+  return <HTMLButtonElement[]>Array.from(element.querySelectorAll('.accordion-item > .accordion-header button'));
 }
 
 function getPanelsTitle(element: HTMLElement): string[] {
@@ -505,23 +506,23 @@ describe('ngb-accordion', () => {
       </ngb-accordion>
     `;
     const fixture = createTestComponent(testHtml);
-    const cards = <HTMLDivElement[]>Array.from(fixture.nativeElement.querySelectorAll('.card'));
+    const cards = <HTMLDivElement[]>Array.from(fixture.nativeElement.querySelectorAll('.accordion-item'));
 
     fixture.detectChanges();
     expect(cards[0].classList.length).toBe(1);
-    expect(cards[0]).toHaveCssClass('card');
+    expect(cards[0]).toHaveCssClass('accordion-item');
 
     expect(cards[1].classList.length).toBe(2);
-    expect(cards[1]).toHaveCssClass('card');
+    expect(cards[1]).toHaveCssClass('accordion-item');
     expect(cards[1]).toHaveCssClass('custom-class');
 
     expect(cards[2].classList.length).toBe(3);
-    expect(cards[2]).toHaveCssClass('card');
+    expect(cards[2]).toHaveCssClass('accordion-item');
     expect(cards[2]).toHaveCssClass('custom-class');
     expect(cards[2]).toHaveCssClass('custom-class-2');
 
     expect(cards[3].classList.length).toBe(1);
-    expect(cards[3]).toHaveCssClass('card');
+    expect(cards[3]).toHaveCssClass('accordion-item');
   });
 
   it('should remove collapsed panels content from DOM', () => {

diff --git a/src/accordion/accordion.ts b/src/accordion/accordion.ts
@@ -190,16 +190,14 @@ export interface NgbPanelChangeEvent {
       </button>
     </ng-template>
     <ng-template ngFor let-panel [ngForOf]="panels">
-      <div [class]="'card ' + (panel.cardClass || '')">
+      <div [class]="'accordion-item ' + (panel.cardClass || '')">
         <div role="tab" id="{{panel.id}}-header" [class]="'accordion-header ' + (panel.type ? 'bg-'+panel.type: type ? 'bg-'+type : '')">
           <ng-template [ngTemplateOutlet]="panel.headerTpl?.templateRef || t"
                        [ngTemplateOutletContext]="{$implicit: panel, opened: panel.isOpen}"></ng-template>
         </div>
-        <div id="{{panel.id}}" role="tabpanel" [attr.aria-labelledby]="panel.id + '-header'"
+        <div id="{{panel.id}}" class="accordion-body" role="tabpanel" [attr.aria-labelledby]="panel.id + '-header'"
              *ngIf="!destroyOnHide || panel.isOpen || panel.transitionRunning">
-          <div class="card-body">
-               <ng-template [ngTemplateOutlet]="panel.contentTpl?.templateRef || null"></ng-template>
-          </div>
+          <ng-template [ngTemplateOutlet]="panel.contentTpl?.templateRef || null"></ng-template>
         </div>
       </div>
     </ng-template>