fix(animations): remove overflow from styles in steps and expansion-p…

…anel (#374)

* fix(): remove overflow from styles in steps and expansion-panel

tdCollapse animation needs overflow: hidden, but it was affecting the content of both components. Now we only add overflow: hidden when its animating.

* fix(): negate variable instead of setting true/false

* fix(): unit tests fix

src/platform/core/common/animations/collapse/collapse.animation.ts

@@ -14,12 +14,10 @@ export function TdCollapseAnimation(duration: number = 150): AnimationEntryMetad
   return trigger('tdCollapse', [
     state('true', style({
       height: '0',
-      overflow: 'hidden',
       display: 'none',
     })),
     state('false',  style({
       height: '*',
-      overflow: 'hidden',
       display: '*',
     })),
     transition('0 => 1', animate(duration + 'ms ease-in')),

src/platform/core/expansion-panel/expansion-panel.component.html

@@ -28,10 +28,18 @@
     </a>
   </md-nav-list>
   <div>
-    <div class="td-expansion-content" [@tdCollapse]="!expand">
+    <div class="td-expansion-content"
+         [@tdCollapse]="!expand"
+         [style.overflow]="hideContentOverflow ? 'hidden' : null"
+         (@tdCollapse.start)="hideContentOverflow = !hideContentOverflow"
+         (@tdCollapse.done)="hideContentOverflow = !hideContentOverflow">
       <ng-content></ng-content>
     </div>
-    <div class="td-expansion-summary" [@tdCollapse]="expand">
+    <div class="td-expansion-summary"
+         [@tdCollapse]="expand"
+         [style.overflow]="hideSummaryOverflow ? 'hidden' : null"
+         (@tdCollapse.start)="hideSummaryOverflow = !hideSummaryOverflow"
+         (@tdCollapse.done)="hideSummaryOverflow = !hideSummaryOverflow">
       <ng-content select="td-expansion-summary"></ng-content>
     </div>
   </div>

src/platform/core/expansion-panel/expansion-panel.component.scss

@@ -38,8 +38,4 @@ md-nav-list {
   overflow: hidden;
   text-overflow: ellipsis;
   margin-right: 5px;
-}
-.td-expansion-content,
-.td-expansion-summary {
-  overflow: hidden; // FF50 bugfix since overflow style in animation doesnt work
-}
+}

src/platform/core/expansion-panel/expansion-panel.component.spec.ts

@@ -81,7 +81,7 @@ describe('Component: ExpansionPanel', () => {
         expect(fixture.debugElement.query(By.css('.td-expansion-content'))).toBeTruthy();
 
         expect((<HTMLElement>fixture.debugElement.query(By.css('.td-expansion-content')).nativeElement)
-        .style.overflow).toBe('hidden');
+        .style.display).toBe('none');
 
         expect((<HTMLElement>fixture.debugElement.query(By.css('.td-expansion-summary')).nativeElement)
         .style.display).toBe('');

src/platform/core/steps/step-body/step-body.component.html

@@ -1,15 +1,23 @@
 <div layout="row" flex>
   <ng-content></ng-content>
   <div flex>
-    <div class="td-step-content-wrapper" [@tdCollapse]="!active">
+    <div class="td-step-content-wrapper"
+         [@tdCollapse]="!active"
+         [style.overflow]="hideContentOverflow ? 'hidden' : null"
+         (@tdCollapse.start)="hideContentOverflow = !hideContentOverflow"
+         (@tdCollapse.done)="hideContentOverflow = !hideContentOverflow">
       <div #contentRef [class.td-step-content]="contentRef.children.length || contentRef.textContent.trim()">
         <ng-content select="[td-step-body-content]"></ng-content>
       </div>
       <div #actionsRef layout="row" [class.td-step-actions]="actionsRef.children.length || actionsRef.textContent.trim()">
         <ng-content select="[td-step-body-actions]"></ng-content>
       </div>
     </div>
-    <div #summaryRef [@tdCollapse]="active || !isComplete()" [class.td-step-summary]="summaryRef.children.length || summaryRef.textContent.trim()">
+    <div #summaryRef [@tdCollapse]="active || !isComplete()"
+                     [style.overflow]="hideSummaryOverflow ? 'hidden' : null"
+                     (@tdCollapse.start)="hideSummaryOverflow = !hideSummaryOverflow"
+                     (@tdCollapse.done)="hideSummaryOverflow = !hideSummaryOverflow"
+                     [class.td-step-summary]="summaryRef.children.length || summaryRef.textContent.trim()">
       <ng-content select="[td-step-body-summary]"></ng-content>
     </div>
   </div>

src/platform/core/steps/step-body/step-body.component.scss

@@ -1,4 +0,0 @@
-.td-step-summary,
-.td-step-content-wrapper {
-  overflow: hidden; // FF50 bugfix since overflow style in animation doesnt work
-}