fix(expansion): fix expansion .mat-expansion-panel-header styles (#20019)

* Add margin to `.mat-content` element to account for consumer using
  `mat-expansion-panel` components with the toggle hidden alongside
  `mat-expansion-panel` components where the toggle is visible
* Adjust sizing of `.mat-expansion-panel-header-title` and
  `.mat-expansion-panel-header-description` elements so that the width
  of each respective element is uniform across multiple adjacent
  `mat-expansion-panel` elements
* Fixes #20002

(cherry picked from commit 2615b5f)

Author: swseverance

src/components-examples/material/expansion/expansion-expand-collapse-all/expansion-expand-collapse-all-example.css

@@ -2,11 +2,6 @@
   padding-bottom: 20px;
 }
 
-.example-headers-align .mat-expansion-panel-header-title,
-.example-headers-align .mat-expansion-panel-header-description {
-  flex-basis: 0;
-}
-
 .example-headers-align .mat-expansion-panel-header-description {
   justify-content: space-between;
   align-items: center;

src/components-examples/material/expansion/expansion-steps/expansion-steps-example.css

@@ -1,8 +1,3 @@
-.example-headers-align .mat-expansion-panel-header-title,
-.example-headers-align .mat-expansion-panel-header-description {
-  flex-basis: 0;
-}
-
 .example-headers-align .mat-expansion-panel-header-description {
   justify-content: space-between;
   align-items: center;

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

@@ -1,4 +1,4 @@
-<span class="mat-content">
+<span class="mat-content" [class.mat-content-hide-toggle]="!_showToggle()">
   <ng-content select="mat-panel-title"></ng-content>
   <ng-content select="mat-panel-description"></ng-content>
   <ng-content></ng-content>

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

@@ -46,12 +46,33 @@
   flex: 1;
   flex-direction: row;
   overflow: hidden;
+
+  // width of .mat-expansion-indicator::after element
+  &.mat-content-hide-toggle {
+    margin-right: 8px;
+
+    [dir='rtl'] & {
+      margin-right: 0;
+      margin-left: 8px;
+    }
+
+    .mat-expansion-toggle-indicator-before & {
+      margin-left: 24px;
+      margin-right: 0;
+
+      [dir='rtl'] & {
+        margin-right: 24px;
+        margin-left: 0;
+      }
+    }
+  }
 }
 
 .mat-expansion-panel-header-title,
 .mat-expansion-panel-header-description {
   display: flex;
   flex-grow: 1;
+  flex-basis: 0;
   margin-right: 16px;
   align-items: center;
 

src/material/expansion/expansion.spec.ts

@@ -61,9 +61,8 @@ describe('MatExpansionPanel', () => {
 
   it('should be able to render panel content lazily', fakeAsync(() => {
     const fixture = TestBed.createComponent(LazyPanelWithContent);
-    const content = fixture.debugElement.query(
-      By.css('.mat-expansion-panel-content'),
-    )!.nativeElement;
+    const content = fixture.debugElement.query(By.css('.mat-expansion-panel-content'))!
+      .nativeElement;
     fixture.detectChanges();
 
     expect(content.textContent.trim())
@@ -80,9 +79,8 @@ describe('MatExpansionPanel', () => {
 
   it('should render the content for a lazy-loaded panel that is opened on init', fakeAsync(() => {
     const fixture = TestBed.createComponent(LazyPanelOpenOnLoad);
-    const content = fixture.debugElement.query(
-      By.css('.mat-expansion-panel-content'),
-    )!.nativeElement;
+    const content = fixture.debugElement.query(By.css('.mat-expansion-panel-content'))!
+      .nativeElement;
     fixture.detectChanges();
 
     expect(content.textContent.trim())
@@ -312,19 +310,22 @@ describe('MatExpansionPanel', () => {
   it('should be able to hide the toggle', () => {
     const fixture = TestBed.createComponent(PanelWithContent);
     const header = fixture.debugElement.query(By.css('.mat-expansion-panel-header'))!.nativeElement;
+    const content = fixture.debugElement.query(By.css('.mat-content'))!.nativeElement;
 
     fixture.detectChanges();
 
     expect(header.querySelector('.mat-expansion-indicator'))
       .withContext('Expected indicator to be shown.')
       .toBeTruthy();
+    expect(content.classList).not.toContain('mat-content-hide-toggle');
 
     fixture.componentInstance.hideToggle = true;
     fixture.detectChanges();
 
     expect(header.querySelector('.mat-expansion-indicator'))
       .withContext('Expected indicator to be hidden.')
       .toBeFalsy();
+    expect(content.classList).toContain('mat-content-hide-toggle');
   });
 
   it('should update the indicator rotation when the expanded state is toggled programmatically', fakeAsync(() => {