feat(igxExpansionPanel): update styles, remove wrappers, adjust tests, …

…#307
IgniteUI · Sep 12, 2018 · 688fbda · 688fbda
1 parent b9d5cbb
commit 688fbda
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 71 deletions.
diff --git a/...niteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss b/...niteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss
@@ -154,6 +154,7 @@
         display: flex;
         align-content: center;
         justify-content: center;
+        user-select: none;
 
         igx-icon {
             color: --var($theme, 'header-icon-color');
@@ -208,6 +209,7 @@
 
         %igx-expansion-panel__body {
             @include igx-type-style($type-scale, $body);
+            overflow: hidden;
         }
     }
 }
diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-body.component.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-body.component.ts
@@ -1,18 +1,34 @@
-import { Component, HostBinding, Inject, forwardRef, ElementRef } from '@angular/core';
+import { Component, HostBinding, Inject, forwardRef, ElementRef, Input } from '@angular/core';
 import { IgxExpansionPanelComponent } from './expansion-panel.component';
 
 @Component({
     // tslint:disable-next-line:directive-selector
     selector: 'igx-expansion-panel-body',
-    template: `<div style="display:flex">
-            <ng-content></ng-content>
-        </div>`
+    template: `
+            <ng-content></ng-content>`
 })
 export class IgxExpansionPanelBodyComponent {
     constructor(@Inject(forwardRef(() => IgxExpansionPanelComponent))
     public panel: IgxExpansionPanelComponent, public element: ElementRef) {
     }
-    @HostBinding('class.igx-expansion-panel__header-body')
-    public cssClass = `igx-expansion-panel__header-body`;
+    @HostBinding('class.igx-expansion-panel__body')
+    public cssClass = `igx-expansion-panel__body`;
+    public _title = '';
 
+    @Input()
+    @HostBinding('attr.aria-label')
+    public label = this.panel.id + '-region';
+
+    @Input()
+    @HostBinding('attr.aria-labelledby')
+    public get labelledBy(): string {
+        return this.panel.title ? this.panel.title.id : this._title;
+    }
+    public set labelledBy(val: string) {
+        this._title = val;
+    }
+
+    @Input()
+    @HostBinding('attr.role')
+    public role = 'region';
 }
diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.html b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.html
@@ -1,7 +1,5 @@
 
 <ng-content select="igx-expansion-panel-header"></ng-content>
-<div #collapseBody [attr.aria-labelledby] = "labelledby" [attr.role] = "'region'"
-   [attr.aria-label] = "label || id + '-region'">
-    <ng-content *ngIf="!collapsed" select="igx-expansion-panel-body"></ng-content>
-</div>
+<ng-content *ngIf="!collapsed" select="igx-expansion-panel-body"></ng-content>
+
 
diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts
@@ -9,6 +9,7 @@ import {
     Output,
     ViewChild,
     ContentChild,
+    forwardRef,
 } from '@angular/core';
 import { AnimationBuilder, AnimationReferenceMetadata, useAnimation } from '@angular/animations';
 import { growVerOut, growVerIn } from '../animations/main';
@@ -63,31 +64,20 @@ export class IgxExpansionPanelComponent {
         public elementRef: ElementRef,
         private builder: AnimationBuilder) { }
 
-    @ContentChild(IgxExpansionPanelBodyComponent, { read: IgxExpansionPanelBodyComponent })
-    private body: IgxExpansionPanelBodyComponent;
+    @ContentChild(forwardRef(() => IgxExpansionPanelBodyComponent), { read: IgxExpansionPanelBodyComponent })
+    public body: IgxExpansionPanelBodyComponent;
 
     @ContentChild(IgxExpansionPanelTitleDirective, { read: IgxExpansionPanelTitleDirective })
     public title: IgxExpansionPanelTitleDirective;
 
-    @Input()
-    public label = '';
-
-    @Input()
-    public set labelledby(val: string) {
-        this._title = val;
-    }
-
-    public get labelledby(): string {
-        return this.title ? this.title.id : this._title;
-    }
 
     private playOpenAnimation(cb: () => void) {
         if (!this.body) { // if not body element is passed, there is nothing to animate
             return;
         }
         const animation = useAnimation(this.animationSettings.openAnimation);
         const animationBuilder = this.builder.build(animation);
-        const openAnimationPlayer = animationBuilder.create(this.body.element.nativeElement.firstElementChild);
+        const openAnimationPlayer = animationBuilder.create(this.body.element.nativeElement);
 
         openAnimationPlayer.onDone(() => {
             cb();
@@ -103,7 +93,7 @@ export class IgxExpansionPanelComponent {
         }
         const animation = useAnimation(this.animationSettings.closeAnimation);
         const animationBuilder = this.builder.build(animation);
-        const closeAnimationPlayer = animationBuilder.create(this.body.element.nativeElement.firstElementChild);
+        const closeAnimationPlayer = animationBuilder.create(this.body.element.nativeElement);
         closeAnimationPlayer.onDone(() => {
             cb();
             closeAnimationPlayer.reset();

diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.spec.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.spec.ts
@@ -25,7 +25,7 @@ const enum IconPositionClass {
     RIGHT = 'igx-expansion-panel__header-icon--end',
     NONE = 'igx-expansion-panel__header-icon--none',
 }
-describe('igxExpansionPanel', () => {
+fdescribe('igxExpansionPanel', () => {
     beforeEach(async(() => {
         // TestBed.resetTestingModule();
         TestBed.configureTestingModule({
@@ -116,7 +116,6 @@ describe('igxExpansionPanel', () => {
             header.onAction(mockEvent);
             tick();
             fixture.detectChanges();
-            tick();
             expect(panel.onCollapsed.emit).toHaveBeenCalledTimes(0); // Initially collapsed
             expect(header.onInteraction.emit).toHaveBeenCalledTimes(1);
             expect(panel.toggle).toHaveBeenCalledTimes(1);
@@ -130,7 +129,6 @@ describe('igxExpansionPanel', () => {
             header.onAction(mockEvent);
             tick();
             fixture.detectChanges();
-            tick();
             expect(panel.onCollapsed.emit).toHaveBeenCalledTimes(1); // First Collapse
             expect(header.onInteraction.emit).toHaveBeenCalledTimes(2);
             expect(panel.toggle).toHaveBeenCalledTimes(2);
@@ -144,7 +142,7 @@ describe('igxExpansionPanel', () => {
             header.onAction(mockEvent);
             tick();
             fixture.detectChanges();
-            tick(); // No additional calls, because panel.disabled === true
+            // No additional calls, because panel.disabled === true
             expect(panel.onCollapsed.emit).toHaveBeenCalledTimes(1);
             expect(header.onInteraction.emit).toHaveBeenCalledTimes(2);
             expect(panel.onExpanded.emit).toHaveBeenCalledTimes(1);
@@ -169,7 +167,7 @@ describe('igxExpansionPanel', () => {
                 expect(button.getAttribute('ng-reflect-icon-name')).toMatch(iconName);
             }
             if (collapsed) {
-                expect(panelContainer.lastElementChild.children.length).toEqual(0);
+                expect(panelContainer.lastElementChild.nodeName).toEqual('IGX-EXPANSION-PANEL-HEADER');
             } else {
                 const panelBody = panelContainer.getElementsByTagName(CSS_CLASS_PANEL_BODY)[0];
                 expect(panelBody).toBeDefined();
@@ -814,12 +812,12 @@ describe('igxExpansionPanel', () => {
             fixture.detectChanges();
             expect(panelElement.lastElementChild.getAttribute('aria-labelledby')).toEqual(null);
             expect(panelElement.lastElementChild.getAttribute('aria-label')).toEqual(`${panel.id}-region`);
-            panel.label = 'custom-test-label';
+            panel.body.label = 'custom-test-label';
             tick();
             fixture.detectChanges();
             expect(panelElement.lastElementChild.getAttribute('aria-labelledby')).toEqual(null);
             expect(panelElement.lastElementChild.getAttribute('aria-label')).toEqual(`custom-test-label`);
-            panel.label = '';
+            panel.body.label = '';
             tick();
             fixture.detectChanges();
             expect(panelElement.lastElementChild.getAttribute('aria-labelledby')).toEqual(null);
@@ -835,7 +833,7 @@ describe('igxExpansionPanel', () => {
             const panelContainer = fixture.nativeElement.querySelector('.' + CSS_CLASS_EXPANSION_PANEL);
             expect(panelContainer).not.toBeNull();
             expect(panelContainer.attributes.getNamedItem('id').nodeValue).toEqual(panel.id);
-            expect(panelContainer.childElementCount).toEqual(2);
+            expect(panelContainer.childElementCount).toEqual(1);
 
             const header = panelContainer.children[0];
             expect(header.attributes.getNamedItem('class').nodeValue).toContain(CSS_CLASS_PANEL_HEADER);
@@ -865,28 +863,28 @@ describe('igxExpansionPanel', () => {
             const description = headerBtn.firstElementChild.lastElementChild;
             expect(description.textContent).toEqual('Example Description');
 
-            const bodyWrapper = panelContainer.children[1];
-            expect(bodyWrapper.attributes.getNamedItem('role').nodeValue).toEqual('region');
-            expect(bodyWrapper.attributes.getNamedItem('aria-label').nodeValue).toEqual(panel.id + '-region');
             // expect(bodyWrapper.attributes.getNamedItem('aria-labelledby').nodeValue).toEqual('igx-expansion-panel-header-title-0');
-            expect(bodyWrapper.childElementCount).toEqual(0);
+            expect(panelContainer.childElementCount).toEqual(1);
 
             header.click();
             tick();
             fixture.detectChanges();
-
+            tick();
+            const bodyWrapper = panelContainer.children[1];
+            expect(bodyWrapper.attributes.getNamedItem('role').nodeValue).toEqual('region');
+            expect(bodyWrapper.attributes.getNamedItem('aria-label').nodeValue).toEqual(panel.id + '-region');
             expect(bodyWrapper.childElementCount).toEqual(1);
             const panelBody = bodyWrapper.children[0];
             expect(panelBody.textContent.trim()).toEqual('Example body');
         }));
-        it('Should apply all appropriate classes on combo initialization_grid content', fakeAsync(() => {
+        it('Should apply all appropriate classes on initialization_grid content', fakeAsync(() => {
             const fixture: ComponentFixture<IgxExpansionPanelGridComponent> = TestBed.createComponent(IgxExpansionPanelGridComponent);
             fixture.detectChanges();
             const panel = fixture.componentInstance.expansionPanel;
             const panelContainer = fixture.nativeElement.querySelector('.' + CSS_CLASS_EXPANSION_PANEL);
             expect(panelContainer).not.toBeNull();
             expect(panelContainer.attributes.getNamedItem('id').nodeValue).toEqual(panel.id);
-            expect(panelContainer.childElementCount).toEqual(2);
+            expect(panelContainer.childElementCount).toEqual(1);
 
             const header = panelContainer.children[0];
             expect(header.attributes.getNamedItem('class').nodeValue).toContain(CSS_CLASS_PANEL_HEADER);
@@ -916,18 +914,18 @@ describe('igxExpansionPanel', () => {
             const description = headerBtn.firstElementChild.lastElementChild;
             expect(description.textContent).toEqual('Product orders details');
 
-            const bodyWrapper = panelContainer.children[1];
-            expect(bodyWrapper.attributes.getNamedItem('role').nodeValue).toEqual('region');
-            expect(bodyWrapper.attributes.getNamedItem('aria-label').nodeValue).toEqual(panel.id + '-region');
             // expect(bodyWrapper.attributes.getNamedItem('aria-labelledby').nodeValue).toEqual('igx-expansion-panel-header-title-0');
-            expect(bodyWrapper.childElementCount).toEqual(0);
+            expect(panelContainer.childElementCount).toEqual(1);
 
             header.click();
             tick();
             fixture.detectChanges();
             tick();
-            expect(bodyWrapper.childElementCount).toEqual(1);
-            const grid = bodyWrapper.firstElementChild.firstElementChild.firstElementChild; // wrapping div
+            const bodyWrapper = panelContainer.children[1];
+            expect(bodyWrapper.attributes.getNamedItem('role').nodeValue).toEqual('region');
+            expect(bodyWrapper.attributes.getNamedItem('aria-label').nodeValue).toEqual(panel.id + '-region');
+            expect(bodyWrapper.firstElementChild.nodeName).toEqual('IGX-GRID');
+            const grid = bodyWrapper.firstElementChild; // wrapping div
             expect(grid.attributes.getNamedItem('class').nodeValue).toContain(CSS_CLASS_GRID);
             expect(grid.attributes.getNamedItem('role').nodeValue).toEqual('grid');
             expect(grid.attributes.getNamedItem('id').nodeValue).toEqual(fixture.componentInstance.grid1.id);
@@ -944,7 +942,7 @@ describe('igxExpansionPanel', () => {
             const panelContainer = fixture.nativeElement.querySelector('.' + CSS_CLASS_EXPANSION_PANEL);
             expect(panelContainer).not.toBeNull();
             expect(panelContainer.attributes.getNamedItem('id').nodeValue).toEqual(panel.id);
-            expect(panelContainer.childElementCount).toEqual(2);
+            expect(panelContainer.childElementCount).toEqual(1);
 
             const header = panelContainer.children[0];
             expect(header.attributes.getNamedItem('class').nodeValue).toContain(CSS_CLASS_PANEL_HEADER);
@@ -973,19 +971,18 @@ describe('igxExpansionPanel', () => {
 
             const description = headerBtn.firstElementChild.lastElementChild;
             expect(description.textContent).toEqual('Frog description');
-
-            const bodyWrapper = panelContainer.children[1];
-            expect(bodyWrapper.attributes.getNamedItem('role').nodeValue).toEqual('region');
-            expect(bodyWrapper.attributes.getNamedItem('aria-label').nodeValue).toEqual(panel.id + '-region');
             // expect(bodyWrapper.attributes.getNamedItem('aria-labelledby').nodeValue).toEqual('igx-expansion-panel-header-title-0');
-            expect(bodyWrapper.childElementCount).toEqual(0);
+            expect(panelContainer.childElementCount).toEqual(1);
 
             header.click();
             tick();
             fixture.detectChanges();
             tick();
+            const bodyWrapper = panelContainer.children[1];
+            expect(bodyWrapper.attributes.getNamedItem('role').nodeValue).toEqual('region');
+            expect(bodyWrapper.attributes.getNamedItem('aria-label').nodeValue).toEqual(panel.id + '-region');
             expect(bodyWrapper.childElementCount).toEqual(1);
-            const textWrapper = bodyWrapper.firstElementChild.firstElementChild.firstElementChild; // wrapping div
+            const textWrapper = bodyWrapper.firstElementChild; // wrapping div
             expect(textWrapper.attributes.getNamedItem('class').nodeValue).toContain('sample-wrapper');
             expect(textWrapper.childElementCount).toEqual(1);
             const image = textWrapper.children[0] as HTMLElement;

diff --git a/src/app/expansion-panel/expansion-panel-sample.html b/src/app/expansion-panel/expansion-panel-sample.html
@@ -2,14 +2,15 @@
     <app-page-header title="Expansion Panel" description="IgxExpansionPanel lets you display content with a toggleable details view"></app-page-header>
     <section class="sample-flex-item">
         <div class="sample-flex-row">
-            <button igxButton class="igx-button--flat" (click)="templateIcon()">{{ templatedIcon ? 'Disabled' : 'Enable'}} icon template</button>
+            <button igxButton class="igx-button--flat" (click)="templateIcon()">{{ templatedIcon ? 'Disabled' :
+                'Enable'}} icon template</button>
             <button igxButton class="igx-button--flat" (click)="toggleLeftRight()">Current Position: {{ iconPosition }}</button>
         </div>
         <div class="game-board">
-            <igx-expansion-panel [animationSettings]="animationSettings" class="game-board__collapsible"
-            (onCollapsed)="handleCollapsed($event)"
-            (onExpanded)="handleExpanded($event)" #collapsibleComponent>
-                <igx-expansion-panel-header [iconPosition]="iconPosition" (onInterraction)="onInterraction($event)" [disabled]="false">
+            <igx-expansion-panel [animationSettings]="animationSettings" class="game-board__collapsible" (onCollapsed)="handleCollapsed($event)"
+                (onExpanded)="handleExpanded($event)" #collapsibleComponent>
+                <igx-expansion-panel-header [iconPosition]="iconPosition" (onInterraction)="onInterraction($event)"
+                    [disabled]="false">
                     <igx-expansion-panel-title>Current Winning Player:</igx-expansion-panel-title>
                     <igx-expansion-panel-description>{{ getWinningPlayer }}</igx-expansion-panel-description>
                     <button igxButton class='igx-button--flat' (click)="resetScore($event)">Reset score</button>
@@ -19,20 +20,21 @@
                     </igx-expansion-panel-icon>
                 </igx-expansion-panel-header>
                 <igx-expansion-panel-body>
-                    <!-- <div style="width: 400px; height: 400px; background-color: #adadad;"></div> -->
-                    <igx-grid class="game-board__grid" [data]="data">
-                        <igx-column [sortable]="true" [field]="'Game'" [header]="'Game'" [width]="'120px'" [pinned]="true">
-                            <ng-template igxCell let-value>
-                                <span class="game-board__grid__match">{{value}}</span>
-                            </ng-template>
-                        </igx-column>
-                        <igx-column [sortable]="true" [field]="'Player 1'" [header]="'Score: Player 1'">
-                        </igx-column>
-                        <igx-column [sortable]="true" [field]="'Player 2'" [header]="'Score: Player 2'">
-                        </igx-column>
-                    </igx-grid>
+                    <div style='width: 100%; height: 100%'>
+                        <igx-grid class="game-board__grid" [data]="data">
+                            <igx-column [sortable]="true" [field]="'Game'" [header]="'Game'" [pinned]="true">
+                                <ng-template igxCell let-value>
+                                    <span class="game-board__grid__match">{{value}}</span>
+                                </ng-template>
+                            </igx-column>
+                            <igx-column [sortable]="true" [field]="'Player 1'" [header]="'Score: Player 1'">
+                            </igx-column>
+                            <igx-column [sortable]="true" [field]="'Player 2'" [header]="'Score: Player 2'">
+                            </igx-column>
+                        </igx-grid>
+                    </div>
                 </igx-expansion-panel-body>
             </igx-expansion-panel>
         </div>
     </section>
-</div>
+</div>