From 721219a210b9b8049ca0d45f68150a7aa99f9b32 Mon Sep 17 00:00:00 2001
From: Will Chen <willchen90@gmail.com>
Date: Wed, 4 Dec 2024 16:04:09 -0800
Subject: [PATCH] Do not render expansion panel description if unused (#1129)

---
 mesop/components/expansion_panel/e2e/expansion_panel_app.py  | 3 +--
 mesop/components/expansion_panel/e2e/expansion_panel_test.ts | 2 +-
 mesop/components/expansion_panel/expansion_panel.ng.html     | 2 ++
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/mesop/components/expansion_panel/e2e/expansion_panel_app.py b/mesop/components/expansion_panel/e2e/expansion_panel_app.py
index 0e99b257..56b3af68 100644
--- a/mesop/components/expansion_panel/e2e/expansion_panel_app.py
+++ b/mesop/components/expansion_panel/e2e/expansion_panel_app.py
@@ -38,8 +38,7 @@ def app():
       me.text("Pineapple content.")
 
     with me.expansion_panel(
-      title="Cantalope title",
-      description="Type of fruit",
+      title="Cantalope (no description)",
       hide_toggle=True,
     ):
       me.text("Cantalope content.")
diff --git a/mesop/components/expansion_panel/e2e/expansion_panel_test.ts b/mesop/components/expansion_panel/e2e/expansion_panel_test.ts
index 458892d4..92ceb1dd 100644
--- a/mesop/components/expansion_panel/e2e/expansion_panel_test.ts
+++ b/mesop/components/expansion_panel/e2e/expansion_panel_test.ts
@@ -23,7 +23,7 @@ test.describe('Expansion Panel', () => {
       await page
         .locator('[aria-disabled="false"] span.mat-content-hide-toggle')
         .textContent(),
-    ).toContain('Cantalope title');
+    ).toContain('Cantalope (no description)');
   });
 });
 
diff --git a/mesop/components/expansion_panel/expansion_panel.ng.html b/mesop/components/expansion_panel/expansion_panel.ng.html
index ace96041..b6254b6c 100644
--- a/mesop/components/expansion_panel/expansion_panel.ng.html
+++ b/mesop/components/expansion_panel/expansion_panel.ng.html
@@ -8,11 +8,13 @@
 >
   <mat-expansion-panel-header>
     <mat-panel-title>{{config().getTitle()}}</mat-panel-title>
+    @if (config().getDescription()) {
     <mat-panel-description>
       {{config().getDescription()}} @if (config().getIcon()) {
       <mat-icon>{{config().getIcon()}}</mat-icon>
       }
     </mat-panel-description>
+    }
   </mat-expansion-panel-header>
   <ng-content></ng-content>
 </mat-expansion-panel>