From b070a9a5eb2ea2ec435ab2a95bc25ddee1027182 Mon Sep 17 00:00:00 2001
From: Martin Vladic <martin.vladic@gmail.com>
Date: Mon, 14 Oct 2024 23:03:08 +0200
Subject: [PATCH] fix dynamic CSS for some widget types

---
 .../project-editor/features/style/style.tsx   |  3 ++-
 .../components/widgets/dashboard/index.tsx    | 21 +++++++++++++------
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/project-editor/features/style/style.tsx b/packages/project-editor/features/style/style.tsx
index ae137caa..396acb5d 100644
--- a/packages/project-editor/features/style/style.tsx
+++ b/packages/project-editor/features/style/style.tsx
@@ -1071,7 +1071,8 @@ export class Style extends EezObject {
 
             cssDeclarations: computed,
             cssPreview: computed,
-            classNames: computed
+            classNames: computed,
+            dynamicCSS: observable
         });
     }
 
diff --git a/packages/project-editor/flow/components/widgets/dashboard/index.tsx b/packages/project-editor/flow/components/widgets/dashboard/index.tsx
index 2e700a50..137ae665 100644
--- a/packages/project-editor/flow/components/widgets/dashboard/index.tsx
+++ b/packages/project-editor/flow/components/widgets/dashboard/index.tsx
@@ -226,7 +226,8 @@ export class TextDashboardWidget extends Widget {
                 <span
                     className={classNames(
                         this.style.classNames,
-                        this.style.getConditionalClassNames(flowContext)
+                        this.style.getConditionalClassNames(flowContext),
+                        this.style.getDynamicCSSClassName(flowContext)
                     )}
                     onClick={this.onClick(flowContext)}
                     style={{ opacity: style.opacity }}
@@ -828,7 +829,8 @@ export class NumberInputDashboardWidget extends Widget {
                 <NumberInputDashboardWidgetElement
                     className={classNames(
                         this.style.classNames,
-                        this.style.getConditionalClassNames(flowContext)
+                        this.style.getConditionalClassNames(flowContext),
+                        this.style.getDynamicCSSClassName(flowContext)
                     )}
                     component={this}
                     flowContext={flowContext}
@@ -975,7 +977,8 @@ export class CheckboxWidget extends Widget {
                     className={classNames(
                         "form-check",
                         this.style.classNames,
-                        this.style.getConditionalClassNames(flowContext)
+                        this.style.getConditionalClassNames(flowContext),
+                        this.style.getDynamicCSSClassName(flowContext)
                     )}
                     style={{ opacity: style.opacity }}
                 >
@@ -1154,7 +1157,8 @@ export class RadioWidget extends Widget {
                     className={classNames(
                         "form-check",
                         this.style.classNames,
-                        this.style.getConditionalClassNames(flowContext)
+                        this.style.getConditionalClassNames(flowContext),
+                        this.style.getDynamicCSSClassName(flowContext)
                     )}
                     style={{ opacity: style.opacity }}
                 >
@@ -1300,7 +1304,8 @@ export class SwitchDashboardWidget extends Widget {
                     className={classNames(
                         "form-check form-switch",
                         this.style.classNames,
-                        this.style.getConditionalClassNames(flowContext)
+                        this.style.getConditionalClassNames(flowContext),
+                        this.style.getDynamicCSSClassName(flowContext)
                     )}
                     style={{ opacity: style.opacity }}
                 >
@@ -1993,7 +1998,8 @@ export class ButtonDashboardWidget extends Widget {
                 <button
                     className={classNames(
                         buttonStyle.classNames,
-                        this.style.getConditionalClassNames(flowContext)
+                        this.style.getConditionalClassNames(flowContext),
+                        this.style.getDynamicCSSClassName(flowContext)
                     )}
                     style={{ opacity: style.opacity }}
                     disabled={!buttonEnabled}
@@ -2327,6 +2333,9 @@ const SliderDashboardWidgetElement = observer(
                         this.props.component.style.classNames,
                         this.props.component.style.getConditionalClassNames(
                             flowContext
+                        ),
+                        this.props.component.style.getDynamicCSSClassName(
+                            flowContext
                         )
                     )}
                     type="range"