refactor: add support density scaling in the expansion panel

Note: This commit is intentionally not marked as a feature because
density styles for the expansion panel are not public API yet:

Adds support for density scaling to the Angular Material
expansion panel. To be able to add support for density, the
panel header animation had to be reworked to be CSS based.

The existing inputs for setting collapsed/expanded height
still work as expected, but will not respect density.

* chore: fix buildifier formatting due to update

fix: unable to set expanded or collapsed height in expansion panel (#19322)

For the density system, we reworked the expansion panel to no
longer rely on Angular animations. Looks like the refactoring
missed that units are already set for the `expandedHeight` and
`collapsedHeight` inputs.

This hasn't been catched in any unit test, so tests are updated to catch
this now.

Author: devversion

src/material-experimental/mdc-color/BUILD.bazel

@@ -1,7 +1,7 @@
-package(default_visibility = ["//visibility:public"])
-
 load("//tools:defaults.bzl", "sass_library")
 
+package(default_visibility = ["//visibility:public"])
+
 sass_library(
     name = "all_color",
     srcs = ["_all-color.scss"],

src/material-experimental/mdc-density/BUILD.bazel

@@ -1,7 +1,7 @@
-package(default_visibility = ["//visibility:public"])
-
 load("//tools:defaults.bzl", "sass_library")
 
+package(default_visibility = ["//visibility:public"])
+
 sass_library(
     name = "all_density",
     srcs = ["_all-density.scss"],

src/material/core/density/_index.scss

@@ -1,11 +1,11 @@
-// Taken from mat-density with small modifications to not rely on the new Sass module system.
+// Taken from mat-density with small modifications to not rely on the new Sass module
+// system, and to support arbitrary properties in a density configuration.
 // https://github.com/material-components/material-components-web/blob/master/packages/mdc-density
 
 $_mat-density-interval: 4px !default;
 $_mat-density-minimum-scale: minimum !default;
 $_mat-density-maximum-scale: maximum !default;
 $_mat-density-supported-scales: (default, minimum, maximum) !default;
-$_mat-density-supported-properties: (height, size) !default;
 $_mat-density-default-scale: 0 !default;
 
 @function _mat-density-prop-value($density-config, $density-scale, $property-name) {
@@ -15,11 +15,6 @@ $_mat-density-default-scale: 0 !default;
       'but received #{$density-scale}.';
   }
 
-  @if (index($list: $_mat-density-supported-properties, $value: $property-name) == null) {
-    @error 'mat-density: Supported density properties #{$_mat-density-supported-properties},' +
-      'but received #{$property-name}.';
-  }
-
   $value: null;
   $property-scale-map: map_get($density-config, $property-name);
 

src/material/core/theming/tests/BUILD.bazel

@@ -1,7 +1,7 @@
-package(default_visibility = ["//visibility:public"])
-
 load("//tools:defaults.bzl", "sass_binary", "sass_library")
 
+package(default_visibility = ["//visibility:public"])
+
 # Test theme used to ensure that our themes will compile using CSS variables in
 # the palettes.
 sass_binary(

src/material/expansion/BUILD.bazel

@@ -56,6 +56,7 @@ sass_binary(
 sass_binary(
     name = "expansion_panel_header_scss",
     src = "expansion-panel-header.scss",
+    deps = [":expansion_scss_lib"],
 )
 
 ng_test_library(

src/material/expansion/_expansion-theme.scss

@@ -1,7 +1,9 @@
+@import '../core/density/index';
 @import '../core/theming/palette';
 @import '../core/theming/theming';
 @import '../core/style/elevation';
 @import '../core/typography/typography-utils';
+@import './expansion-variables';
 
 @mixin mat-expansion-panel-color($config) {
   $background: map-get($config, background);
@@ -69,7 +71,20 @@
   }
 }
 
-@mixin _mat-expansion-panel-density($density-scale) {}
+@mixin _mat-expansion-panel-density($density-scale) {
+  $expanded-height: _mat-density-prop-value(
+        $mat-expansion-panel-header-density-config, $density-scale, expanded-height);
+  $collapsed-height: _mat-density-prop-value(
+      $mat-expansion-panel-header-density-config, $density-scale, collapsed-height);
+
+  .mat-expansion-panel-header {
+    height: $collapsed-height;
+
+    &.mat-expanded {
+      height: $expanded-height;
+    }
+  }
+}
 
 @mixin mat-expansion-panel-theme($theme) {
   $color: mat-get-color-config($theme);

src/material/expansion/_expansion-variables.scss

@@ -0,0 +1,30 @@
+// Default minimum and maximum height for collapsed panel headers.
+$mat-expansion-panel-header-collapsed-height: 48px !default;
+$mat-expansion-panel-header-collapsed-minimum-height: 36px !default;
+$mat-expansion-panel-header-collapsed-maximum-height:
+    $mat-expansion-panel-header-collapsed-height !default;
+
+// Default minimum and maximum height for expanded panel headers.
+$mat-expansion-panel-header-expanded-height: 64px !default;
+$mat-expansion-panel-header-expanded-minimum-height: 48px !default;
+$mat-expansion-panel-header-expanded-maximum-height:
+    $mat-expansion-panel-header-expanded-height !default;
+
+// Density configuration for the expansion panel. Captures the
+// height for both expanded and collapsed panel headers.
+$mat-expansion-panel-header-density-config: (
+  collapsed-height: (
+    default: $mat-expansion-panel-header-collapsed-height,
+    maximum: $mat-expansion-panel-header-collapsed-maximum-height,
+    minimum: $mat-expansion-panel-header-collapsed-minimum-height,
+  ),
+  expanded-height: (
+    default: $mat-expansion-panel-header-expanded-height,
+    maximum: $mat-expansion-panel-header-expanded-maximum-height,
+    minimum: $mat-expansion-panel-header-expanded-minimum-height,
+  )
+) !default;
+
+// Note: Keep this in sync with the animation timing for the toggle indicator
+// and body expansion. These are animated using Angular animations.
+$mat-expansion-panel-header-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1);

src/material/expansion/expansion-animations.ts

@@ -7,17 +7,15 @@
  */
 import {
   animate,
-  animateChild,
-  group,
+  AnimationTriggerMetadata,
   state,
   style,
   transition,
   trigger,
-  query,
-  AnimationTriggerMetadata,
 } from '@angular/animations';
 
 /** Time and timing curve for expansion panel animations. */
+// Note: Keep this in sync with the Sass variable for the panel header animation.
 export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)';
 
 /**
@@ -44,7 +42,6 @@ export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,
  */
 export const matExpansionAnimations: {
   readonly indicatorRotate: AnimationTriggerMetadata;
-  readonly expansionHeaderHeight: AnimationTriggerMetadata;
   readonly bodyExpansion: AnimationTriggerMetadata;
 } = {
   /** Animation that rotates the indicator arrow. */
@@ -54,25 +51,6 @@ export const matExpansionAnimations: {
     transition('expanded <=> collapsed, void => collapsed',
       animate(EXPANSION_PANEL_ANIMATION_TIMING)),
   ]),
-
-  /** Animation that expands and collapses the panel header height. */
-  expansionHeaderHeight: trigger('expansionHeight', [
-    state('collapsed, void', style({
-      height: '{{collapsedHeight}}',
-    }), {
-      params: {collapsedHeight: '48px'},
-    }),
-    state('expanded', style({
-      height: '{{expandedHeight}}'
-    }), {
-      params: {expandedHeight: '64px'}
-    }),
-    transition('expanded <=> collapsed, void => collapsed', group([
-      query('@indicatorRotate', animateChild(), {optional: true}),
-      animate(EXPANSION_PANEL_ANIMATION_TIMING),
-    ])),
-  ]),
-
   /** Animation that expands and collapses the panel content. */
   bodyExpansion: trigger('bodyExpansion', [
     state('collapsed, void', style({height: '0px', visibility: 'hidden'})),

src/material/expansion/expansion-panel-header.scss

@@ -1,10 +1,13 @@
+@import './expansion-variables';
+
 .mat-expansion-panel-header {
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 0 24px;
   border-radius: inherit;
   position: relative; // Necessary for the strong focus indication.
+  transition: height $mat-expansion-panel-header-transition;
 
   &:focus,
   &:hover {

src/material/expansion/expansion-panel-header.ts

@@ -45,7 +45,6 @@ import {MatAccordionTogglePosition} from './accordion-base';
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [
     matExpansionAnimations.indicatorRotate,
-    matExpansionAnimations.expansionHeaderHeight
   ],
   host: {
     'class': 'mat-expansion-panel-header mat-focus-indicator',
@@ -58,25 +57,14 @@ import {MatAccordionTogglePosition} from './accordion-base';
     '[class.mat-expanded]': '_isExpanded()',
     '[class.mat-expansion-toggle-indicator-after]': `_getTogglePosition() === 'after'`,
     '[class.mat-expansion-toggle-indicator-before]': `_getTogglePosition() === 'before'`,
+    '[style.height]': '_getHeaderHeight()',
     '(click)': '_toggle()',
     '(keydown)': '_keydown($event)',
-    '[@.disabled]': '_animationsDisabled',
-    '(@expansionHeight.start)': '_animationStarted()',
-    '[@expansionHeight]': `{
-        value: _getExpandedState(),
-        params: {
-          collapsedHeight: collapsedHeight,
-          expandedHeight: expandedHeight
-        }
-    }`,
   },
 })
 export class MatExpansionPanelHeader implements OnDestroy, FocusableOption {
   private _parentChangeSubscription = Subscription.EMPTY;
 
-  /** Whether Angular animations in the panel header should be disabled. */
-  _animationsDisabled = true;
-
   constructor(
       @Host() public panel: MatExpansionPanel,
       private _element: ElementRef,
@@ -120,18 +108,6 @@ export class MatExpansionPanelHeader implements OnDestroy, FocusableOption {
     }
   }
 
-  _animationStarted() {
-    // Currently the `expansionHeight` animation has a `void => collapsed` transition which is
-    // there to work around a bug in Angular (see #13088), however this introduces a different
-    // issue. The new transition will cause the header to animate in on init (see #16067), if the
-    // consumer has set a header height that is different from the default one. We work around it
-    // by disabling animations on the header and re-enabling them after the first animation has run.
-    // Note that Angular dispatches animation events even if animations are disabled. Ideally this
-    // wouldn't be necessary if we remove the `void => collapsed` transition, but we have to wait
-    // for https://github.com/angular/angular/issues/18847 to be resolved.
-    this._animationsDisabled = false;
-  }
-
   /** Height of the header while the panel is expanded. */
   @Input() expandedHeight: string;
 
@@ -178,6 +154,20 @@ export class MatExpansionPanelHeader implements OnDestroy, FocusableOption {
     return !this.panel.hideToggle && !this.panel.disabled;
   }
 
+  /**
+   * Gets the current height of the header. Null if no custom height has been
+   * specified, and if the default height from the stylesheet should be used.
+   */
+  _getHeaderHeight(): string|null {
+    const isExpanded = this._isExpanded();
+    if (isExpanded && this.expandedHeight) {
+      return this.expandedHeight;
+    } else if (!isExpanded && this.collapsedHeight) {
+      return this.collapsedHeight;
+    }
+    return null;
+  }
+
   /** Handle keydown event calling to toggle() if appropriate. */
   _keydown(event: KeyboardEvent) {
     switch (event.keyCode) {

src/material/expansion/expansion.spec.ts

@@ -351,6 +351,11 @@ describe('MatExpansionPanel', () => {
     expect(panel.componentInstance.hideToggle).toBe(true);
     expect(header.componentInstance.expandedHeight).toBe('10px');
     expect(header.componentInstance.collapsedHeight).toBe('16px');
+    expect(header.nativeElement.style.height).toBe('16px');
+
+    fixture.componentInstance.expanded = true;
+    fixture.detectChanges();
+    expect(header.nativeElement.style.height).toBe('10px');
   });
 
   describe('disabled state', () => {

tools/public_api_guard/material/expansion.d.ts

@@ -32,7 +32,6 @@ export declare type MatAccordionTogglePosition = 'before' | 'after';
 
 export declare const matExpansionAnimations: {
     readonly indicatorRotate: AnimationTriggerMetadata;
-    readonly expansionHeaderHeight: AnimationTriggerMetadata;
     readonly bodyExpansion: AnimationTriggerMetadata;
 };
 
@@ -97,14 +96,13 @@ export declare class MatExpansionPanelDescription {
 }
 
 export declare class MatExpansionPanelHeader implements OnDestroy, FocusableOption {
-    _animationsDisabled: boolean;
     collapsedHeight: string;
     get disabled(): any;
     expandedHeight: string;
     panel: MatExpansionPanel;
     constructor(panel: MatExpansionPanel, _element: ElementRef, _focusMonitor: FocusMonitor, _changeDetectorRef: ChangeDetectorRef, defaultOptions?: MatExpansionPanelDefaultOptions);
-    _animationStarted(): void;
     _getExpandedState(): string;
+    _getHeaderHeight(): string | null;
     _getPanelId(): string;
     _getTogglePosition(): MatAccordionTogglePosition;
     _isExpanded(): boolean;