Smooth expansion/collapse for Material Expansion Panels with hidden headers.

PiperOrigin-RevId: 220719200

Author: Googler

angular_components/lib/material_expansionpanel/_mixins.scss

@@ -146,11 +146,11 @@ $_panel: 'div.panel.themeable';
 
 @mixin expansionpanel-header-min-height($min-height, $open-min-height) {
   ::ng-deep #{$_panel} {
-    header > .header {
+    header:not(.hidden) > .header {
       min-height: $min-height;
     }
 
-    &.open > header > .header[buttonDecorator] {
+    &.open > header:not(.hidden)  > .header[buttonDecorator] {
       min-height: $open-min-height;
     }
   }
@@ -173,7 +173,7 @@ $_panel: 'div.panel.themeable';
   ::ng-deep #{$_panel} {
     transition: none;
 
-    &.open > header > .header {
+    &.open > header:not(.hidden) > .header {
       // Need to override the min-height increase which happens by default.
       min-height: $mat-grid * 6;
     }
@@ -192,7 +192,7 @@ $_panel: 'div.panel.themeable';
 @mixin expansionpanel-dense-theme() {
   ::ng-deep #{$_panel} {
     .header,
-    &.open .header {
+    &.open > header:not(.hidden) > .header {
       min-height: $mat-grid * 4;
     }
 
@@ -249,7 +249,7 @@ $_panel: 'div.panel.themeable';
 
 @mixin expansionpanel-top-align-expand-button($margin-top: $mat-grid-type * 3) {
   ::ng-deep #{$_panel} {
-    &.open > header > .header .expand-button {
+    &.open > header:not(.hidden) > .header .expand-button {
       margin-top: $margin-top + $mat-grid;
     }
 

angular_components/lib/material_expansionpanel/material_expansionpanel.dart

@@ -4,6 +4,7 @@
 
 import 'dart:async';
 import 'dart:html';
+import 'dart:math';
 
 import 'package:angular/angular.dart';
 import 'package:intl/intl.dart';
@@ -93,10 +94,30 @@ class MaterialExpansionPanel
     }));
   }
 
+  HtmlElement _headerPanel;
+  @ViewChild('headerPanel')
+  set headerPanel(HtmlElement headerPanel) {
+    _headerPanel = headerPanel;
+    _disposer.addStreamSubscription(_headerPanel.onTransitionEnd.listen((_) {
+      // Clear height override so it will match the active child's height.
+      _headerPanel.style.height = '';
+    }));
+  }
+
   HtmlElement _mainContent;
   @ViewChild('mainContent')
   set mainContent(HtmlElement mainContent) => _mainContent = mainContent;
 
+  HtmlElement _headerContent;
+  @ViewChild('headerContent')
+  set headerContent(HtmlElement headerContent) =>
+      _headerContent = headerContent;
+
+  HtmlElement _actionContent;
+  @ViewChild('action')
+  set actionContent(HtmlElement headerContent) =>
+      _actionContent = headerContent;
+
   HtmlElement _contentWrapper;
   @ViewChild('contentWrapper')
   set contentWrapper(HtmlElement contentWrapper) {
@@ -441,28 +462,45 @@ class MaterialExpansionPanel
     } else {
       _domService.nextFrame.then((_) => _mainPanel.style.height = '');
     }
+
+    // If the header has to disappear, animate that transition as well
+    if (hideExpandedHeader) {
+      // Make current height explicit as a starting point for animation.
+      _headerPanel.style.height = '${_headerPanel.scrollHeight}px';
+
+      // On next frame, set target height for animation.
+      if (expand) {
+        _domService.nextFrame.then((_) {
+          _headerPanel.style.height = '';
+        });
+      } else {
+        _readExpandedHeaderHeight().then((expandedHeaderHeight) {
+          _headerPanel.style.height = expandedHeaderHeight;
+        });
+      }
+    }
   }
 
   /// Reads the DOM state to calculate the height of the "expanded" panel in its
   /// current condition.
   ///
   /// This defined end point will be used to animate expansion.
   Future<String> _readExpandedPanelHeight() {
-    var completeExpandedHeight = Completer<String>();
+    final completeExpandedHeight = Completer<String>();
 
     _domService.scheduleRead(() {
-      var contentHeight = _mainContent.scrollHeight;
+      final contentHeight = _mainContent.scrollHeight;
       var expandedPanelHeight = '';
 
-      var mainPanelStyle = _mainPanel.getComputedStyle();
+      final mainPanelStyle = _mainPanel.getComputedStyle();
       // Do our best to make sure that onTransitionEnd will fire later.
-      var hasHeightTransition =
+      final hasHeightTransition =
           contentHeight > 0 && mainPanelStyle.transition.contains('height');
 
       if (hasHeightTransition) {
         // If the content-wrapper has a top margin, it is not reflected in the
         // scroll height.
-        var topMargin = _contentWrapper.getComputedStyle().marginTop;
+        final topMargin = _contentWrapper.getComputedStyle().marginTop;
         expandedPanelHeight = 'calc(${contentHeight}px + ${topMargin})';
       }
       completeExpandedHeight.complete(expandedPanelHeight);
@@ -471,6 +509,31 @@ class MaterialExpansionPanel
     return completeExpandedHeight.future;
   }
 
+  /// Reads the DOM state to calculate the height of the header in its
+  /// current condition.
+  ///
+  /// This defined end point will be used to animate expansion.
+  Future<String> _readExpandedHeaderHeight() {
+    final completeExpandedHeight = Completer<String>();
+
+    _domService.scheduleRead(() {
+      final contentHeight =
+          max(_headerContent.scrollHeight, _actionContent?.scrollHeight ?? 0);
+      var expandedHeaderHeight = '';
+
+      final headerPanelStyle = _headerPanel.getComputedStyle();
+      // Do our best to make sure that onTransitionEnd will fire later.
+      final hasHeightTransition =
+          contentHeight > 0 && headerPanelStyle.transition.contains('height');
+
+      if (hasHeightTransition) expandedHeaderHeight = '${contentHeight}px';
+
+      completeExpandedHeight.complete(expandedHeaderHeight);
+    });
+
+    return completeExpandedHeight.future;
+  }
+
   @override
   void ngOnDestroy() {
     _disposer.dispose();

angular_components/lib/material_expansionpanel/material_expansionpanel.html

@@ -12,10 +12,11 @@
      keyupBoundary>
 
   <!-- Title section -->
-<header [class.hidden]="isExpanded && hideExpandedHeader">
+<header [class.hidden]="isExpanded && hideExpandedHeader" #headerPanel>
   <div class="header"
           buttonDecorator
           #expandCollapseButton
+          #headerContent
           [disabled]="disabled"
           [class.closed] = "!isExpanded"
           [class.disable-header-expansion]="disableHeaderExpansion"
@@ -48,7 +49,7 @@
                    [attr.aria-label]="expandAriaMsg">
     </material-icon>
   </div>
-  <div class="action" *ngIf="!shouldShowExpandIcon">
+  <div class="action" *ngIf="!shouldShowExpandIcon" #action>
     <ng-content select="[action]"></ng-content>
   </div>
 </header>

angular_components/lib/material_expansionpanel/material_expansionpanel.scss

@@ -61,7 +61,8 @@
 header {
   display: flex;
   color: $mat-transparent-black;
-  transition: min-height $mat-transition-slow $mat-transition-standard,
+  transition: height $mat-transition $mat-transition-standard,
+              min-height $mat-transition $mat-transition-standard,
               opacity $mat-transition-slow $mat-transition-standard;
 
   &.hidden {
@@ -84,7 +85,7 @@ header {
   min-width: 0;
   outline: none;
   padding: 0 $mat-grid * 3;
-  transition: min-height $mat-transition-slow $mat-transition-standard;
+  transition: min-height $mat-transition $mat-transition-standard;
 
   &.closed:not(.is-disabled) {
     &:hover,
@@ -99,7 +100,7 @@ header {
   }
 }
 
-.panel.open > header > .header {
+.panel.open > header:not(.hidden) > .header {
   min-height: $mat-grid * 8;
 }