feat(sn-filter-pane): styling and new components property

packages/sn-filter-pane/src/components/ListboxContainer.tsx

@@ -33,9 +33,11 @@ const ListboxContainer = ({
     env,
     stardustTheme,
     directQueryEnabled,
+    fpLayout,
   } = stores.store.getState();
 
   const { sense } = env as IEnv;
+  const { components } = fpLayout || {};
 
   const dqOptionsOverrides = useDirectQuery({
     directQueryEnabled, layout, listBoxModel: model, constraints,
@@ -49,8 +51,8 @@ const ListboxContainer = ({
     if (!layout || !embed) {
       return;
     }
-    embed.field(layout.qInfo).then((inst) => {
-      setListboxInstance(inst as stardust.FieldInstance);
+    embed.field(layout.qInfo).then((inst: stardust.FieldInstance) => {
+      setListboxInstance(inst);
     });
   }, []);
 
@@ -68,6 +70,7 @@ const ListboxContainer = ({
       direction: options?.direction,
       search: isPopover ? true : 'toggle' as stardust.SearchMode,
       isPopover,
+      components,
     }, dqOptionsOverrides || {});
 
     // @ts-ignore

packages/sn-filter-pane/src/ext/property-panel/settings/index.ts

@@ -1,5 +1,5 @@
 import { IEnv } from '../../../types/types';
-import presentation from './presentation';
+import getPresentation from './presentation';
 
 function getSettings(env: IEnv) {
   const { flags } = env || {};
@@ -19,7 +19,7 @@ function getSettings(env: IEnv) {
   };
 
   if (flags?.isEnabled('IM_4073_FILTERPANE_STYLING')) {
-    Object.assign(settings.items, presentation);
+    Object.assign(settings.items, getPresentation(env));
   }
 
   return settings;

packages/sn-filter-pane/src/ext/property-panel/settings/presentation/index.js

@@ -1,12 +1,14 @@
-import styling from './styling-panel-def';
+import getStyling from './styling-panel-def';
 
-export default {
-  presentation: {
-    grouped: true,
-    type: 'items',
-    translation: 'properties.presentation',
-    items: {
-      ...styling,
+export default function getPresentation(env) {
+  return {
+    presentation: {
+      grouped: true,
+      type: 'items',
+      translation: 'properties.presentation',
+      items: {
+        ...getStyling(env),
+      },
     },
-  },
-};
+  };
+}

packages/sn-filter-pane/src/ext/property-panel/settings/presentation/styling-panel-def.js

@@ -1,110 +1,162 @@
-const stylingPanelDef = {
-  stylingPanel: {
-    component: 'styling-panel',
-    chartType: 'filterpane',
-    translation: 'LayerStyleEditor.component.styling',
-    chartTitle: 'Object.FilterPane',
-    useBackground: true,
-    subtitle: 'LayerStyleEditor.component.styling',
-    useGeneral: true,
-    items: {
-      headerSection: {
-        component: 'panel-section',
-        translation: 'properties.Header',
-        items: {
-          headerItems: {
-            component: 'items',
-            ref: 'components',
-            key: 'listBox',
-            items: {
-              fontWrapperItem: {
-                component: 'inline-wrapper',
-                items: {
-                  fontSizeItem: {
-                    component: 'integer',
-                    ref: 'header.fontSize',
-                    translation: 'properties.fontSize',
-                    width: 9,
-                    min: 5,
-                    max: 300,
-                    defaultValue(item, data, args) {
-                      const currentTheme = args.theme.current();
-                      return parseInt(
-                        currentTheme.object?.listBox?.title?.main?.fontSize ?? currentTheme.fontSize,
-                        10,
-                      );
+/* eslint-disable no-param-reassign */
+import { getFontSizes } from './styling-utils/font-utils';
+
+export default function getStyling(env) {
+  const { theme } = env?.anything?.sense || {};
+
+  const getListBoxStyle = (p = '') => {
+    // Utility func to prevent specifying 3 arguments for a simple property retrieval.
+    const [property, ...path] = p.split('.').reverse();
+    const pathString = path.join('.');
+    const s = theme.getStyle('object.listBox', !property ? '' : pathString, property || pathString);
+    return s;
+  };
+
+  const defaultFontSize = (getListBoxStyle('title.main.fontSize') ?? getListBoxStyle('fontSize'));
+  const defaultContentFontSize = getListBoxStyle('content.fontSize') ?? getListBoxStyle('fontSize');
+  const defaultColor = getListBoxStyle('content.color') ?? getListBoxStyle('color');
+
+  const stylingPanelDef = {
+    stylingPanel: {
+      component: 'styling-panel',
+      chartType: 'filterpane',
+      translation: 'LayerStyleEditor.component.styling',
+      chartTitle: 'Object.FilterPane',
+      useBackground: true,
+      subtitle: 'LayerStyleEditor.component.styling',
+      useGeneral: true,
+      items: {
+        headerSection: {
+          component: 'panel-section',
+          translation: 'properties.Header',
+          items: {
+            headerItems: {
+              component: 'items',
+              ref: 'components',
+              key: 'theme',
+              items: {
+                fontWrapperItem: {
+                  component: 'inline-wrapper',
+                  items: {
+                    fontSizeItem: {
+                      component: 'dropdown',
+                      ref: 'header.fontSize',
+                      options: getFontSizes({
+                        min: 10, max: 24, theme, defaultFontSize,
+                      }),
+                      defaultValue: defaultFontSize,
                     },
-                    change(data) {
-                      data.header.fontSize = !data.header.fontSize
-                        ? data.header.fontSize
-                        : Math.max(5, Math.min(300, Math.floor(data.header.fontSize)));
-                    },
-                  },
-                  fontColorItem: {
-                    show: true,
-                    ref: 'header.fontColor',
-                    component: 'color-picker',
-                    defaultValue(item, data, args) {
-                      const currentTheme = args.theme.current();
-                      return { color: currentTheme.object?.listBox?.title?.main?.color ?? currentTheme.color };
+                    fontColorItem: {
+                      ref: 'header.fontColor',
+                      component: 'color-picker',
+                      width: false,
+                      defaultValue: {
+                        color: getListBoxStyle('title.main.color'),
+                      },
                     },
                   },
                 },
               },
             },
           },
         },
-      },
-      contentSection: {
-        component: 'panel-section',
-        translation: 'properties.Content',
-        items: {
-          contentItems: {
-            component: 'items',
-            ref: 'components',
-            key: 'listBox',
-            items: {
-              contentFontWrapper: {
-                component: 'inline-wrapper',
-                items: {
-                  contentFontSize: {
-                    component: 'integer',
-                    ref: 'content.fontSize',
-                    translation: 'properties.fontSize',
-                    width: 9,
-                    min: 5,
-                    max: 300,
-                    defaultValue(item, data, args) {
-                      const currentTheme = args.theme.current();
-                      return parseInt(
-                        currentTheme.object?.listBox?.content?.fontSize ?? currentTheme.fontSize,
-                        10,
-                      );
+        contentSection: {
+          component: 'panel-section',
+          translation: 'properties.Content',
+          items: {
+            contentItems: {
+              component: 'items',
+              ref: 'components',
+              key: 'theme',
+              items: {
+                contentFontWrapper: {
+                  component: 'inline-wrapper',
+                  items: {
+                    contentFontSizeItem: {
+                      component: 'dropdown',
+                      ref: 'content.fontSize',
+                      options: getFontSizes({
+                        min: 5, max: 24, theme, defaultFontSize,
+                      }),
+                      defaultValue: defaultContentFontSize,
                     },
-                    change(data) {
-                      data.content.fontSize = !data.content.fontSize
-                        ? data.content.fontSize
-                        : Math.max(5, Math.min(300, Math.floor(data.content.fontSize)));
+                    contentFontColor: {
+                      ref: 'content.fontColor',
+                      type: 'object',
+                      component: 'color-picker',
+                      width: false,
+                      defaultValue: { color: defaultColor },
                     },
                   },
-                  contentFontColor: {
-                    show: true,
-                    ref: 'content.fontColor',
-                    type: 'object',
-                    component: 'color-picker',
-                    defaultValue(item, data, args) {
-                      const currentTheme = args.theme.current();
-                      return { color: currentTheme.object?.listBox?.content?.color ?? currentTheme.color };
+                },
+                autoContrast: {
+                  component: 'inline-wrapper',
+                  items: {
+                    useContrastColor: {
+                      ref: 'content.useContrastColor',
+                      type: 'boolean',
+                      grouped: false,
+                      component: 'checkbox',
+                      translation: 'properties.styling.autoContrastColor',
+                      defaultValue: true,
                     },
                   },
                 },
               },
             },
           },
         },
+        selectionStateSection: {
+          component: 'panel-section',
+          translation: 'properties.styling.selectionState',
+          items: {
+            selectionItems: {
+              component: 'items',
+              ref: 'components',
+              key: 'selections',
+              items: {
+                selectedColor: {
+                  ref: 'colors.selected',
+                  type: 'object',
+                  component: 'color-picker',
+                  translation: 'Object.Listbox.Selected',
+                  defaultValue: { color: '#009845' },
+                },
+                alternativeColor: {
+                  ref: 'colors.alternative',
+                  type: 'object',
+                  component: 'color-picker',
+                  translation: 'Object.Listbox.Alternative',
+                  defaultValue: { color: '#E4E4E4' },
+                },
+                excludedColor: {
+                  ref: 'colors.excluded',
+                  type: 'object',
+                  component: 'color-picker',
+                  translation: 'Object.Listbox.Excluded',
+                  defaultValue: { color: '#BEBEBE' },
+                },
+                selectedExcludedColor: {
+                  ref: 'colors.selectedExcluded',
+                  type: 'object',
+                  component: 'color-picker',
+                  translation: 'Object.Listbox.SelectedExcluded',
+                  defaultValue: { color: '#A9A9A9' },
+                },
+                possibleColor: {
+                  ref: 'colors.possible',
+                  type: 'object',
+                  component: 'color-picker',
+                  translation: 'Object.Listbox.Possible',
+                  defaultValue: { color: '#FFFFFF' },
+                },
+              },
+            },
+          },
+        },
       },
     },
-  },
-};
+  };
 
-export default stylingPanelDef;
+  return stylingPanelDef;
+}

packages/sn-filter-pane/src/ext/property-panel/settings/presentation/styling-utils/__tests__/font-utils.spec.js

@@ -0,0 +1,51 @@
+import { getFontSizes, getRange } from '../font-utils';
+
+describe('font-utils', () => {
+  describe('getRange', () => {
+    it('should return a range from 0 to 2', () => {
+      expect(getRange(0, 3)).toEqual([0, 1, 2]);
+    });
+    it('should return a range from -2 to 2', () => {
+      expect(getRange(-2, 3)).toEqual([-2, -1, 0, 1, 2]);
+    });
+
+    it('should return a range from -5 to -3', () => {
+      expect(getRange(-5, -2)).toEqual([-5, -4, -3]);
+    });
+  });
+
+  describe('getFontSizes', () => {
+    let theme;
+
+    beforeEach(() => {
+      theme = {
+        getStyle: () => undefined,
+      };
+    });
+
+    it('should return font sizes between 10px-12px and defaultFontSize inserted', () => {
+      const fontSizes = getFontSizes({
+        min: 10, max: 12, theme, defaultFontSize: '14px',
+      });
+      expect(fontSizes).toEqual([
+        {
+          value: 'header1', label: 'Theme font sizes', metaText: 'Theme', groupHeader: true,
+        },
+        {
+          value: '14px', label: '14px', groupHeader: false, disabled: false,
+        },
+        {
+          value: 'header2', label: 'All font sizes', metaText: 'Default', groupHeader: true,
+        },
+        {
+          value: '10px', label: '10px', groupHeader: false, disabled: false,
+        },
+        {
+          value: '11px', label: '11px', groupHeader: false, disabled: false,
+        },
+        {
+          value: '12px', label: '12px', groupHeader: false, disabled: false,
+        }]);
+    });
+  });
+});