fix(accordion): update classes for the headers

ng-bootstrap · May 12, 2021 · 7565054 · 7565054
1 parent 7558680
commit 7565054
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/demo/src/app/components/accordion/demos/header/accordion-header.html b/demo/src/app/components/accordion/demos/header/accordion-header.html
@@ -1,7 +1,7 @@
 <ngb-accordion #a="ngbAccordion" activeIds="custom-panel-1">
   <ngb-panel id="custom-panel-1">
     <ng-template ngbPanelHeader let-opened="opened">
-      <div class="d-flex align-items-center justify-content-between">
+      <div class="p-2 d-flex align-items-center justify-content-between">
         <h5 class="m-0">First panel - {{ opened ? 'opened' : 'collapsed' }}</h5>
         <button ngbPanelToggle class="btn btn-link p-0">Toggle first</button>
       </div>
@@ -17,7 +17,7 @@ <h5 class="m-0">First panel - {{ opened ? 'opened' : 'collapsed' }}</h5>
   </ngb-panel>
   <ngb-panel>
     <ng-template ngbPanelHeader>
-      <div class="d-flex align-items-center justify-content-between">
+      <div class="p-2 d-flex align-items-center justify-content-between">
         <h5 class="m-0">Second panel</h5>
         <div>
           <button ngbPanelToggle class="btn btn-sm btn-outline-primary ms-2">Toggle second</button>
@@ -39,7 +39,7 @@ <h5 class="m-0">Second panel</h5>
   </ngb-panel>
   <ngb-panel [disabled]="disabled" [cardClass]="disabled ? 'disabled' : ''">
     <ng-template ngbPanelHeader>
-      <div class="d-flex align-items-center justify-content-between">
+      <div class="p-2 d-flex align-items-center justify-content-between">
         <button ngbPanelToggle class="btn btn-link container-fluid text-start ps-0">Third panel</button>
         <p *ngIf="disabled" class="text-muted m-0 small">[I'm&nbsp;disabled]</p>
       </div>

diff --git a/src/accordion/accordion.spec.ts b/src/accordion/accordion.spec.ts
@@ -12,15 +12,15 @@ const createTestComponent = (html: string) =>
     createGenericTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
 
 function getPanels(element: HTMLElement): HTMLDivElement[] {
-  return <HTMLDivElement[]>Array.from(element.querySelectorAll('.card > .card-header'));
+  return <HTMLDivElement[]>Array.from(element.querySelectorAll('.card > .accordion-header'));
 }
 
 function getPanelsContent(element: HTMLElement): HTMLDivElement[] {
   return <HTMLDivElement[]>Array.from(element.querySelectorAll('.card > .collapse, .card > .collapsing'));
 }
 
 function getPanelsButton(element: HTMLElement): HTMLButtonElement[] {
-  return <HTMLButtonElement[]>Array.from(element.querySelectorAll('.card > .card-header button'));
+  return <HTMLButtonElement[]>Array.from(element.querySelectorAll('.card > .accordion-header button'));
 }
 
 function getPanelsTitle(element: HTMLElement): string[] {
@@ -615,7 +615,7 @@ describe('ngb-accordion', () => {
     fixture.componentInstance.classType = 'warning';
     fixture.detectChanges();
 
-    let el = fixture.nativeElement.querySelectorAll('.card-header');
+    let el = fixture.nativeElement.querySelectorAll('.accordion-header');
     expect(el[0]).toHaveCssClass('bg-warning');
     expect(el[1]).toHaveCssClass('bg-warning');
     expect(el[2]).toHaveCssClass('bg-warning');
@@ -631,7 +631,7 @@ describe('ngb-accordion', () => {
     tc.panels[1].type = 'danger';
     fixture.detectChanges();
 
-    let el = fixture.nativeElement.querySelectorAll('.card-header');
+    let el = fixture.nativeElement.querySelectorAll('.accordion-header');
     expect(el[0]).toHaveCssClass('bg-success');
     expect(el[1]).toHaveCssClass('bg-danger');
     expect(el[2]).toHaveCssClass('bg-warning');

diff --git a/src/accordion/accordion.ts b/src/accordion/accordion.ts
@@ -185,13 +185,13 @@ export interface NgbPanelChangeEvent {
   host: {'class': 'accordion', 'role': 'tablist', '[attr.aria-multiselectable]': '!closeOtherPanels'},
   template: `
     <ng-template #t ngbPanelHeader let-panel>
-      <button class="btn btn-link" [ngbPanelToggle]="panel">
+      <button class="accordion-button" [ngbPanelToggle]="panel">
         {{panel.title}}<ng-template [ngTemplateOutlet]="panel.titleTpl?.templateRef"></ng-template>
       </button>
     </ng-template>
     <ng-template ngFor let-panel [ngForOf]="panels">
       <div [class]="'card ' + (panel.cardClass || '')">
-        <div role="tab" id="{{panel.id}}-header" [class]="'card-header ' + (panel.type ? 'bg-'+panel.type: type ? 'bg-'+type : '')">
+        <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>