Fix Fast progress indicator height (#8652)

Co-authored-by: Philipp Rudiger <prudiger@anaconda.com>

Author: Kkkakania

panel/models/progress.ts

@@ -25,6 +25,9 @@ export class ProgressView extends HTMLBoxView {
   override render(): void {
     super.render()
     const style: any = {...this.model.styles, display: "inline-block"}
+    if (this.model.height != null) {
+      style.height = `${this.model.height}px`
+    }
     this.progressEl = document.createElement("progress")
     this.setValue()
     this.setMax()

panel/tests/ui/widgets/test_indicators.py

@@ -8,8 +8,9 @@
 import panel as pn
 
 from panel.tests.util import serve_component, wait_until
+from panel.theme import Fast
 from panel.widgets import TooltipIcon
-from panel.widgets.indicators import Gauge
+from panel.widgets.indicators import Gauge, Progress
 
 pytestmark = pytest.mark.ui
 
@@ -133,3 +134,23 @@ def test_gauge_value_update(page):
 
     # Canvas should still be present after update
     expect(page.locator("canvas")).to_have_count(1, timeout=5000)
+
+
+def test_fast_progress_indicator_height(page):
+    progress = Progress(value=20, design=Fast)
+
+    serve_component(page, progress)
+
+    progress_el = page.locator("progress")
+    expect(progress_el).to_have_count(1)
+    expect(progress_el).to_have_css("height", "20px")
+
+
+def test_fast_progress_indicator_explicit_height(page):
+    progress = Progress(value=20, height=32, design=Fast)
+
+    serve_component(page, progress)
+
+    progress_el = page.locator("progress")
+    expect(progress_el).to_have_count(1)
+    expect(progress_el).to_have_css("height", "32px")

panel/theme/css/fast.css

@@ -805,7 +805,6 @@ select:not([size]).bk-input {
 
 progress {
   border-radius: calc(var(--corner-radius) * 1px);
-  height: 5px;
   margin: 0 0 0.5em;
 }
 
@@ -831,7 +830,6 @@ progress:not([value])::-webkit-progress-bar {
 
 progress:not([value])::before {
   border-radius: calc(var(--corner-radius) * 1px);
-  height: 5px;
 }
 
 /* Panes */