Ensure that table element fields can be styled. (baserow#4427)

* Ensure that nested styles work in the new custom style components.

Author: picklepete

backend/src/baserow/contrib/builder/elements/element_types.py

@@ -322,6 +322,7 @@ def serializer_field_overrides(self):
         )
         from baserow.contrib.builder.theme.theme_config_block_types import (
             ButtonThemeConfigBlockType,
+            TypographyThemeConfigBlockType,
         )
 
         return {
@@ -336,7 +337,10 @@ def serializer_field_overrides(self):
                 property_name=["button", "table", "header_button"],
                 theme_config_block_type_name=[
                     ButtonThemeConfigBlockType.type,
-                    TableThemeConfigBlockType.type,
+                    [
+                        TableThemeConfigBlockType.type,
+                        TypographyThemeConfigBlockType.type,
+                    ],
                     ButtonThemeConfigBlockType.type,
                 ],
                 serializer_kwargs={"required": False},

changelog/entries/unreleased/bug/resolved_a_bug_which_prevented_the_table_element_fields_from.json

@@ -0,0 +1,9 @@
+{
+    "type": "bug",
+    "message": "Resolved a bug which prevented the table element fields from being styled.",
+    "issue_origin": "github",
+    "issue_number": null,
+    "domain": "builder",
+    "bullet_points": [],
+    "created_at": "2025-12-11"
+}

web-frontend/modules/builder/components/elements/components/collectionField/form/BooleanFieldForm.vue

@@ -17,6 +17,7 @@
           style-key="cell"
           :config-block-types="['table']"
           :theme="baseTheme"
+          :on-styles-changed="onFieldStylesChanged"
           :extra-args="{ onlyCell: true, noAlignment: true }"
           variant="normal"
         />

web-frontend/modules/builder/components/elements/components/collectionField/form/LinkFieldForm.vue

@@ -18,6 +18,7 @@
           style-key="cell"
           :config-block-types="linkFieldBlockTypes"
           :theme="baseTheme"
+          :on-styles-changed="onFieldStylesChanged"
           :extra-args="{ onlyCell: true, noAlignment: true }"
           variant="normal"
         />

web-frontend/modules/builder/components/elements/components/collectionField/form/TagsFieldForm.vue

@@ -17,6 +17,7 @@
           style-key="cell"
           :config-block-types="['table', 'typography']"
           :theme="baseTheme"
+          :on-styles-changed="onFieldStylesChanged"
           :extra-args="{ onlyCell: true, onlyBody: true, noAlignment: true }"
           variant="normal"
         />

web-frontend/modules/builder/components/elements/components/collectionField/form/TextFieldForm.vue

@@ -17,6 +17,7 @@
           style-key="cell"
           :config-block-types="['table', 'typography']"
           :theme="baseTheme"
+          :on-styles-changed="onFieldStylesChanged"
           :extra-args="{ onlyCell: true, onlyBody: true, noAlignment: true }"
           variant="normal"
         />

web-frontend/modules/builder/components/elements/components/forms/style/CustomStyleButton.vue

@@ -48,6 +48,11 @@ export default {
       required: false,
       default: () => null,
     },
+    onStylesChanged: {
+      type: Function,
+      required: false,
+      default: null,
+    },
   },
   methods: {
     /**
@@ -59,8 +64,9 @@ export default {
         theme: this.theme,
         styleKey: this.styleKey,
         extraArgs: this.extraArgs,
+        onStylesChanged: this.onStylesChanged,
         configBlockTypes: this.configBlockTypes,
-        defaultValues: this.value?.[this.styleKey],
+        defaultStyleValues: this.value?.[this.styleKey],
       })
     },
   },

web-frontend/modules/builder/components/elements/components/forms/style/CustomStyleForm.vue

@@ -16,9 +16,9 @@
         <div class="custom-style__config-block-content">
           <ThemeConfigBlock
             ref="configBlocks"
-            :theme="customStylesContext.theme"
-            :default-values="customStylesContext.defaultValues"
             :preview="false"
+            :theme="customStylesContext.theme"
+            :default-values="customStylesContext.defaultStyleValues"
             :theme-config-block-type="themeConfigBlock"
             :extra-args="customStylesContext.extraArgs"
             @values-changed="$emit('values-changed', $event)"
@@ -41,7 +41,7 @@ export default {
      * @property {object} theme - The current theme object.
      * @property {string} styleKey - The key of the style being edited.
      * @property {object|null} extraArgs - Any extra args needed for the blocks.
-     * @property {object} defaultValues - The default values for the styles.
+     * @property {object} defaultStyleValues - The default values for the styles.
      * @property {Array<string>} configBlockTypes - The types of config blocks
      *  to render for this custom style form.
      */

web-frontend/modules/builder/components/page/sidePanels/GeneralSidePanel.vue

@@ -2,15 +2,15 @@
   <div class="general-side-panel">
     <component
       :is="elementType.generalFormComponent"
-      v-show="elementFormVisible"
+      v-if="elementFormVisible"
       :key="`element-form-${element.id}`"
       ref="panelForm"
       class="element-form"
       :default-values="defaultValues"
       @values-changed="onChange($event)"
     />
     <CustomStyleForm
-      v-if="!elementFormVisible"
+      v-else
       :key="`style-form-${element.id}`"
       :custom-styles-context="customStylesContext"
       @hide="elementFormVisible = true"
@@ -39,12 +39,14 @@ export default {
         theme: {},
         styleKey: '',
         extraArgs: null,
-        defaultValues: {},
+        defaultStyleValues: {},
         configBlockTypes: [],
+        // Optional callback to allow the form component to
+        // modify the final object before sending it to onChange.
+        onStylesChanged: null,
       },
     }
   },
-
   methods: {
     /**
      * The handler that is injected into the element's general form
@@ -57,17 +59,32 @@ export default {
       this.elementFormVisible = !this.elementFormVisible
     },
     /**
-     * Called when the values in the `CustomStyleForm` change. It merges
-     * the new values with the default values and emits the `onChange`
-     * event to update the element's styles.
+     * Called when the values in the `CustomStyleForm` change. If the form
+     * component provided an onStylesChanged callback, use that to build the
+     * update object. Otherwise, apply to root element styles (default behavior).
      */
-    onThemeValuesChanged(newValues) {
-      const { styleKey, defaultValues } = this.customStylesContext
-      this.onChange({
+    onThemeValuesChanged(newStyleValues) {
+      const { styleKey, onStylesChanged } = this.customStylesContext
+
+      // The default behaviour is to just update the styles on the root element.
+      let updatedElement = {
         styles: {
-          [styleKey]: { ...defaultValues, ...newValues },
+          ...this.element.styles,
+          [styleKey]: newStyleValues,
         },
-      })
+      }
+      if (onStylesChanged) {
+        // If we have an onStylesChanged callback, use that to build the final update
+        // object. This is probably going to be for a table element's field styles.
+        updatedElement = onStylesChanged(
+          newStyleValues,
+          this.customStylesContext
+        )
+      }
+      this.onChange(updatedElement)
+      // Update the context so that other theme blocks
+      // are aware of the new default style values.
+      this.customStylesContext.defaultStyleValues = newStyleValues
     },
   },
 }

web-frontend/modules/builder/mixins/collectionFieldForm.js

@@ -13,4 +13,29 @@ export default {
       required: true,
     },
   },
+  methods: {
+    /**
+     * Handles the field style changes made in the form. When the custom style form
+     * is changed, this method is called with the new style values and the context
+     * of the custom styles. It updates the styles of the specific field within the
+     * element's fields array and returns the updated table element.
+     * @param newStyleValues - The new style values to be applied to the field.
+     * @param customStylesContext - The custom style context
+     * @return {object} - The updated table element with the modified field styles.
+     */
+    onFieldStylesChanged(newStyleValues, customStylesContext) {
+      const elementToUpdate = { ...this.element }
+      const { styleKey } = customStylesContext
+      elementToUpdate.fields = elementToUpdate.fields.map((field) => {
+        if (field.id === this.defaultValues.id) {
+          return {
+            ...field,
+            styles: { ...field.styles, [styleKey]: newStyleValues },
+          }
+        }
+        return field
+      })
+      return elementToUpdate
+    },
+  },
 }