fix(sn-filter-pane): move background definition so reset only affects…

… this setting (#395)
qlik-oss · Dec 21, 2023 · 610449b · 610449b
1 parent 12a1942
commit 610449b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/packages/sn-filter-pane/src/ext/property-panel/settings/presentation/styling-panel-def.ts b/packages/sn-filter-pane/src/ext/property-panel/settings/presentation/styling-panel-def.ts
@@ -4,6 +4,7 @@ import { fontResolver as createFontResolver } from 'qlik-chart-modules';
 import { getFontSizes, parseFontWeight } from './styling-utils/font-utils';
 import styleDefaults from './style-defaults';
 import { IEnv } from '../../../../types/types';
+import { IComponent } from '../../../../hooks/types/components';
 
 export default function getStyling(env: IEnv) {
   const { translator, flags, sense } = env || {};
@@ -213,6 +214,14 @@ export default function getStyling(env: IEnv) {
           backgroundOptions: {
             component: 'panel-section',
             translation: 'properties.background.options',
+            reset(data: any, _def: any, args: any) {
+              // Without this reset function, the entire section will be reset.
+              const themeComponent = data?.components?.find((component: IComponent) => component?.key === 'theme');
+              if (themeComponent) {
+                themeComponent.background = {};
+                args?.saveProperties?.(args.properties); // explicit save needed
+              }
+            },
             items: {
               background: {
                 items: {

diff --git a/packages/sn-filter-pane/src/hooks/types/components.d.ts b/packages/sn-filter-pane/src/hooks/types/components.d.ts
@@ -67,11 +67,12 @@ export interface IStyles {
   listbox: {
     background: {
       color?: string;
-      image?: {
-        url?: string;
-        position?: string;
-        size?: string;
-      }
+      backgroundColor?: string;
+      backgroundImage?: string;
+      backgroundRepeat?: string;
+      backgroundSize?: string;
+      backgroundPosition?: string;
+      opacity?: number;
     };
     color?: string;
   }