The reset button on properties behaves incorrect for JSONForm fields and Table primary columns (#14768)

Reset value in primary columns in table widget and fields in JSONFOrm was not working as expected. This commit fixes that.
2022-06-30 15:52:20 +05:30 · 2022-06-30 15:52:20 +05:30 · d60ea07e65
commit d60ea07e65
parent 41789c71bc
8 changed files with 210 additions and 90 deletions
--- a/app/client/src/entities/AppTheming/utils.ts
+++ b/app/client/src/entities/AppTheming/utils.ts
@ -5,10 +5,7 @@ import {
  isDynamicValue,
  THEME_BINDING_REGEX,
 } from "utils/DynamicBindingUtils";
-import {
-  getBindingTemplate,
-  ROOT_SCHEMA_KEY,
-} from "widgets/JSONFormWidget/constants";
+import { ROOT_SCHEMA_KEY } from "widgets/JSONFormWidget/constants";
 import { parseSchemaItem } from "widgets/WidgetUtils";
 import { getFieldStylesheet } from "widgets/JSONFormWidget/helper";
 import { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer";
@ -107,28 +104,21 @@ export const getPropertiesToUpdateForReset = (
            `schema.${ROOT_SCHEMA_KEY}`,
            (schemaItem, propertyPath) => {
              const fieldStylesheet = getFieldStylesheet(
+                widget.widgetName,
                schemaItem.fieldType,
                themeStylesheet[widget.type].childStylesheet as any,
              );

              Object.keys(fieldStylesheet).map((fieldPropertyKey) => {
                const fieldStylesheetValue = fieldStylesheet[fieldPropertyKey];
-                const { jsSnippets, stringSegments } = getDynamicBindings(
-                  fieldStylesheet[fieldPropertyKey],
-                );
-                const js = combineDynamicBindings(jsSnippets, stringSegments);
-                const { prefixTemplate, suffixTemplate } = getBindingTemplate(
-                  widget.widgetName,
-                );
-                const computedValue = `${prefixTemplate}${js}${suffixTemplate}`;

                if (
                  isDynamicValue(fieldStylesheetValue) &&
-                  computedValue !== get(schemaItem, fieldPropertyKey)
+                  fieldStylesheetValue !== get(schemaItem, fieldPropertyKey)
                ) {
                  modifications[
                    `${[propertyPath]}.${fieldPropertyKey}`
-                  ] = computedValue;
+                  ] = fieldStylesheetValue;
                }
              });
            },
--- a/app/client/src/widgets/JSONFormWidget/helper.ts
+++ b/app/client/src/widgets/JSONFormWidget/helper.ts
@ -1,6 +1,11 @@
 import { isNil, isPlainObject, merge } from "lodash";
 import { LabelValueType } from "rc-select/lib/interface/generator";

+import {
+  isDynamicValue,
+  getDynamicBindings,
+  combineDynamicBindings,
+} from "utils/DynamicBindingUtils";
 import {
  ARRAY_ITEM_KEY,
  FieldThemeStylesheet,
@ -8,6 +13,7 @@ import {
  inverseFieldType,
  Schema,
  SchemaItem,
+  getBindingTemplate,
 } from "./constants";

 type ConvertFormDataOptions = {
@ -42,13 +48,37 @@ const valueLookup = (
 };

 export const getFieldStylesheet = (
+  widgetName: string,
  fieldType: FieldType,
  fieldThemeStylesheets?: FieldThemeStylesheet,
 ) => {
+  const computedFieldStylesheet: { [key: string]: string } = {};
  const fieldTypeKey = inverseFieldType[fieldType];
-  return fieldThemeStylesheets && fieldTypeKey in fieldThemeStylesheets
-    ? fieldThemeStylesheets[fieldTypeKey]
-    : {};
+
+  if (fieldThemeStylesheets && fieldTypeKey in fieldThemeStylesheets) {
+    const fieldStylesheet = fieldThemeStylesheets[fieldTypeKey];
+
+    Object.keys(fieldStylesheet).map((fieldPropertyKey) => {
+      const fieldStylesheetValue = fieldStylesheet[fieldPropertyKey];
+
+      if (isDynamicValue(fieldStylesheetValue)) {
+        const { jsSnippets, stringSegments } = getDynamicBindings(
+          fieldStylesheet[fieldPropertyKey],
+        );
+        const js = combineDynamicBindings(jsSnippets, stringSegments);
+        const { prefixTemplate, suffixTemplate } = getBindingTemplate(
+          widgetName,
+        );
+        const computedValue = `${prefixTemplate}${js}${suffixTemplate}`;
+
+        computedFieldStylesheet[fieldPropertyKey] = computedValue;
+      } else {
+        computedFieldStylesheet[fieldPropertyKey] = fieldStylesheetValue;
+      }
+    });
+  }
+
+  return computedFieldStylesheet;
 };

 const convertObjectTypeToFormData = (
--- a/app/client/src/widgets/JSONFormWidget/schemaParser.ts
+++ b/app/client/src/widgets/JSONFormWidget/schemaParser.ts
@ -492,6 +492,7 @@ class SchemaParser {
    const FieldComponent = FIELD_MAP[fieldType];
    const bindingTemplate = getBindingTemplate(widgetName);
    const fieldStylesheet = getFieldStylesheet(
+      widgetName,
      fieldType,
      fieldThemeStylesheets,
    );
--- a/app/client/src/widgets/JSONFormWidget/schemaTestData.ts
+++ b/app/client/src/widgets/JSONFormWidget/schemaTestData.ts
@ -56,8 +56,10 @@ const initialDataset = {
          identifier: "name",
          originalIdentifier: "name",
          position: 0,
-          accentColor: "{{appsmith.theme.colors.primaryColor}}",
-          borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}",
+          accentColor:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
+          borderRadius:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
          boxShadow: "none",
        },
        age: {
@ -79,8 +81,10 @@ const initialDataset = {
          identifier: "age",
          originalIdentifier: "age",
          position: 1,
-          accentColor: "{{appsmith.theme.colors.primaryColor}}",
-          borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}",
+          accentColor:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
+          borderRadius:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
          boxShadow: "none",
        },
        dob: {
@ -107,8 +111,10 @@ const initialDataset = {
          identifier: "dob",
          originalIdentifier: "dob",
          position: 2,
-          accentColor: "{{appsmith.theme.colors.primaryColor}}",
-          borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}",
+          accentColor:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
+          borderRadius:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
          boxShadow: "none",
        },
        boolean: {
@ -129,7 +135,8 @@ const initialDataset = {
          identifier: "boolean",
          originalIdentifier: "boolean",
          position: 3,
-          backgroundColor: "{{appsmith.theme.colors.primaryColor}}",
+          backgroundColor:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
          boxShadow: "none",
        },
        hobbies: {
@ -155,8 +162,10 @@ const initialDataset = {
          identifier: "hobbies",
          originalIdentifier: "hobbies",
          position: 4,
-          accentColor: "{{appsmith.theme.colors.primaryColor}}",
-          borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}",
+          accentColor:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
+          borderRadius:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
          boxShadow: "none",
        },
        __: {
@ -178,8 +187,10 @@ const initialDataset = {
          identifier: "__",
          originalIdentifier: "%%",
          position: 5,
-          accentColor: "{{appsmith.theme.colors.primaryColor}}",
-          borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}",
+          accentColor:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
+          borderRadius:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
          boxShadow: "none",
        },
        xn__j2bd4cyac6f: {
@ -201,8 +212,10 @@ const initialDataset = {
          identifier: "xn__j2bd4cyac6f",
          originalIdentifier: "हिन्दि",
          position: 6,
-          accentColor: "{{appsmith.theme.colors.primaryColor}}",
-          borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}",
+          accentColor:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
+          borderRadius:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
          boxShadow: "none",
        },
        education: {
@ -239,9 +252,10 @@ const initialDataset = {
                  identifier: "college",
                  originalIdentifier: "college",
                  position: 0,
-                  accentColor: "{{appsmith.theme.colors.primaryColor}}",
+                  accentColor:
+                    "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
                  borderRadius:
-                    "{{appsmith.theme.borderRadius.appBorderRadius}}",
+                    "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
                  boxShadow: "none",
                },
                number: {
@ -262,9 +276,10 @@ const initialDataset = {
                  identifier: "number",
                  originalIdentifier: "number",
                  position: 1,
-                  accentColor: "{{appsmith.theme.colors.primaryColor}}",
+                  accentColor:
+                    "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
                  borderRadius:
-                    "{{appsmith.theme.borderRadius.appBorderRadius}}",
+                    "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
                  boxShadow: "none",
                },
                graduationDate: {
@ -290,9 +305,10 @@ const initialDataset = {
                  identifier: "graduationDate",
                  originalIdentifier: "graduationDate",
                  position: 2,
-                  accentColor: "{{appsmith.theme.colors.primaryColor}}",
+                  accentColor:
+                    "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
                  borderRadius:
-                    "{{appsmith.theme.borderRadius.appBorderRadius}}",
+                    "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
                  boxShadow: "none",
                },
                boolean: {
@ -312,7 +328,8 @@ const initialDataset = {
                  identifier: "boolean",
                  originalIdentifier: "boolean",
                  position: 3,
-                  backgroundColor: "{{appsmith.theme.colors.primaryColor}}",
+                  backgroundColor:
+                    "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
                  boxShadow: "none",
                },
              },
@ -376,8 +393,10 @@ const initialDataset = {
              identifier: "Line1",
              originalIdentifier: "Line1",
              position: 0,
-              accentColor: "{{appsmith.theme.colors.primaryColor}}",
-              borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}",
+              accentColor:
+                "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
+              borderRadius:
+                "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
              boxShadow: "none",
            },
            city: {
@ -399,8 +418,10 @@ const initialDataset = {
              identifier: "city",
              originalIdentifier: "city",
              position: 1,
-              accentColor: "{{appsmith.theme.colors.primaryColor}}",
-              borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}",
+              accentColor:
+                "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
+              borderRadius:
+                "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
              boxShadow: "none",
            },
          },
@ -498,8 +519,10 @@ const withRemovedKeyFromInitialDataset = {
          identifier: "name",
          originalIdentifier: "name",
          position: 0,
-          accentColor: "{{appsmith.theme.colors.primaryColor}}",
-          borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}",
+          accentColor:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
+          borderRadius:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
          boxShadow: "none",
        },
        age: {
@ -521,8 +544,10 @@ const withRemovedKeyFromInitialDataset = {
          identifier: "age",
          originalIdentifier: "age",
          position: 1,
-          accentColor: "{{appsmith.theme.colors.primaryColor}}",
-          borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}",
+          accentColor:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
+          borderRadius:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
          boxShadow: "none",
        },
        dob: {
@ -549,8 +574,10 @@ const withRemovedKeyFromInitialDataset = {
          identifier: "dob",
          originalIdentifier: "dob",
          position: 2,
-          accentColor: "{{appsmith.theme.colors.primaryColor}}",
-          borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}",
+          accentColor:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
+          borderRadius:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
          boxShadow: "none",
        },
        hobbies: {
@ -577,8 +604,10 @@ const withRemovedKeyFromInitialDataset = {
          identifier: "hobbies",
          originalIdentifier: "hobbies",
          position: 4,
-          accentColor: "{{appsmith.theme.colors.primaryColor}}",
-          borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}",
+          accentColor:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
+          borderRadius:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
          boxShadow: "none",
        },
        xn__j2bd4cyac6f: {
@ -600,8 +629,10 @@ const withRemovedKeyFromInitialDataset = {
          identifier: "xn__j2bd4cyac6f",
          originalIdentifier: "हिन्दि",
          position: 6,
-          accentColor: "{{appsmith.theme.colors.primaryColor}}",
-          borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}",
+          accentColor:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
+          borderRadius:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
          boxShadow: "none",
        },
        education: {
@ -638,9 +669,10 @@ const withRemovedKeyFromInitialDataset = {
                  identifier: "college",
                  originalIdentifier: "college",
                  position: 0,
-                  accentColor: "{{appsmith.theme.colors.primaryColor}}",
+                  accentColor:
+                    "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
                  borderRadius:
-                    "{{appsmith.theme.borderRadius.appBorderRadius}}",
+                    "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
                  boxShadow: "none",
                },
                number: {
@ -661,9 +693,10 @@ const withRemovedKeyFromInitialDataset = {
                  identifier: "number",
                  originalIdentifier: "number",
                  position: 1,
-                  accentColor: "{{appsmith.theme.colors.primaryColor}}",
+                  accentColor:
+                    "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
                  borderRadius:
-                    "{{appsmith.theme.borderRadius.appBorderRadius}}",
+                    "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
                  boxShadow: "none",
                },
                graduationDate: {
@ -689,9 +722,10 @@ const withRemovedKeyFromInitialDataset = {
                  identifier: "graduationDate",
                  originalIdentifier: "graduationDate",
                  position: 2,
-                  accentColor: "{{appsmith.theme.colors.primaryColor}}",
+                  accentColor:
+                    "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
                  borderRadius:
-                    "{{appsmith.theme.borderRadius.appBorderRadius}}",
+                    "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
                  boxShadow: "none",
                },
                boolean: {
@ -711,7 +745,8 @@ const withRemovedKeyFromInitialDataset = {
                  identifier: "boolean",
                  originalIdentifier: "boolean",
                  position: 3,
-                  backgroundColor: "{{appsmith.theme.colors.primaryColor}}",
+                  backgroundColor:
+                    "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
                  boxShadow: "none",
                },
              },
@ -775,8 +810,10 @@ const withRemovedKeyFromInitialDataset = {
              identifier: "Line1",
              originalIdentifier: "Line1",
              position: 0,
-              accentColor: "{{appsmith.theme.colors.primaryColor}}",
-              borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}",
+              accentColor:
+                "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
+              borderRadius:
+                "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
              boxShadow: "none",
            },
            city: {
@ -798,8 +835,10 @@ const withRemovedKeyFromInitialDataset = {
              identifier: "city",
              originalIdentifier: "city",
              position: 1,
-              accentColor: "{{appsmith.theme.colors.primaryColor}}",
-              borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}",
+              accentColor:
+                "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
+              borderRadius:
+                "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
              boxShadow: "none",
            },
          },
@ -896,8 +935,10 @@ const withRemovedAddedKeyToInitialDataset = {
          identifier: "name",
          originalIdentifier: "name",
          position: 0,
-          accentColor: "{{appsmith.theme.colors.primaryColor}}",
-          borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}",
+          accentColor:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
+          borderRadius:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
          boxShadow: "none",
        },
        age: {
@ -919,8 +960,10 @@ const withRemovedAddedKeyToInitialDataset = {
          identifier: "age",
          originalIdentifier: "age",
          position: 1,
-          accentColor: "{{appsmith.theme.colors.primaryColor}}",
-          borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}",
+          accentColor:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
+          borderRadius:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
          boxShadow: "none",
        },
        dob: {
@ -947,8 +990,10 @@ const withRemovedAddedKeyToInitialDataset = {
          identifier: "dob",
          originalIdentifier: "dob",
          position: 2,
-          accentColor: "{{appsmith.theme.colors.primaryColor}}",
-          borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}",
+          accentColor:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
+          borderRadius:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
          boxShadow: "none",
        },
        hobbies: {
@ -975,8 +1020,10 @@ const withRemovedAddedKeyToInitialDataset = {
          identifier: "hobbies",
          originalIdentifier: "hobbies",
          position: 3,
-          accentColor: "{{appsmith.theme.colors.primaryColor}}",
-          borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}",
+          accentColor:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
+          borderRadius:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
          boxShadow: "none",
        },
        xn__j2bd4cyac6f: {
@ -998,8 +1045,10 @@ const withRemovedAddedKeyToInitialDataset = {
          identifier: "xn__j2bd4cyac6f",
          originalIdentifier: "हिन्दि",
          position: 4,
-          accentColor: "{{appsmith.theme.colors.primaryColor}}",
-          borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}",
+          accentColor:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
+          borderRadius:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
          boxShadow: "none",
        },
        education: {
@ -1036,9 +1085,10 @@ const withRemovedAddedKeyToInitialDataset = {
                  identifier: "college",
                  originalIdentifier: "college",
                  position: 0,
-                  accentColor: "{{appsmith.theme.colors.primaryColor}}",
+                  accentColor:
+                    "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
                  borderRadius:
-                    "{{appsmith.theme.borderRadius.appBorderRadius}}",
+                    "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
                  boxShadow: "none",
                },
                number: {
@ -1059,9 +1109,10 @@ const withRemovedAddedKeyToInitialDataset = {
                  identifier: "number",
                  originalIdentifier: "number",
                  position: 1,
-                  accentColor: "{{appsmith.theme.colors.primaryColor}}",
+                  accentColor:
+                    "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
                  borderRadius:
-                    "{{appsmith.theme.borderRadius.appBorderRadius}}",
+                    "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
                  boxShadow: "none",
                },
                graduationDate: {
@ -1087,9 +1138,10 @@ const withRemovedAddedKeyToInitialDataset = {
                  identifier: "graduationDate",
                  originalIdentifier: "graduationDate",
                  position: 2,
-                  accentColor: "{{appsmith.theme.colors.primaryColor}}",
+                  accentColor:
+                    "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
                  borderRadius:
-                    "{{appsmith.theme.borderRadius.appBorderRadius}}",
+                    "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
                  boxShadow: "none",
                },
                boolean: {
@ -1109,7 +1161,8 @@ const withRemovedAddedKeyToInitialDataset = {
                  identifier: "boolean",
                  originalIdentifier: "boolean",
                  position: 3,
-                  backgroundColor: "{{appsmith.theme.colors.primaryColor}}",
+                  backgroundColor:
+                    "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
                  boxShadow: "none",
                },
              },
@ -1173,8 +1226,10 @@ const withRemovedAddedKeyToInitialDataset = {
              identifier: "Line1",
              originalIdentifier: "Line1",
              position: 0,
-              accentColor: "{{appsmith.theme.colors.primaryColor}}",
-              borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}",
+              accentColor:
+                "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
+              borderRadius:
+                "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
              boxShadow: "none",
            },
            city: {
@ -1196,8 +1251,10 @@ const withRemovedAddedKeyToInitialDataset = {
              identifier: "city",
              originalIdentifier: "city",
              position: 1,
-              accentColor: "{{appsmith.theme.colors.primaryColor}}",
-              borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}",
+              accentColor:
+                "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
+              borderRadius:
+                "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
              boxShadow: "none",
            },
          },
@ -1231,8 +1288,10 @@ const withRemovedAddedKeyToInitialDataset = {
          identifier: "gender",
          originalIdentifier: "gender",
          position: 7,
-          accentColor: "{{appsmith.theme.colors.primaryColor}}",
-          borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}",
+          accentColor:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
+          borderRadius:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
          boxShadow: "none",
        },
      },
--- a/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/helper.test.ts
+++ b/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/helper.test.ts
@ -55,8 +55,10 @@ describe(".fieldTypeUpdateHook", () => {
          originalIdentifier: ARRAY_ITEM_KEY,
          isSpellCheck: false,
          position: -1,
-          accentColor: "{{appsmith.theme.colors.primaryColor}}",
-          borderRadius: "{{appsmith.theme.borderRadius.appBorderRadius}}",
+          accentColor:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.colors.primaryColor))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
+          borderRadius:
+            "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(JSONForm1.sourceData, JSONForm1.formData, JSONForm1.fieldState)}}",
          boxShadow: "none",
          labelTextSize: "0.875rem",
        },
@ -366,6 +368,7 @@ describe(".updateChildrenDisabledStateHook", () => {
 describe(".getStylesheetValue", () => {
  it("returns valid stylesheet value", () => {
    const props = ({
+      widgetName: "Form1",
      schema: schemaTestData.initialDataset.schemaOutput,
    } as unknown) as JSONFormWidgetProps;

@ -374,7 +377,7 @@ describe(".getStylesheetValue", () => {
      ["schema.__root_schema__.children.education.isDisabled", ""],
      [
        "schema.__root_schema__.children.name.borderRadius",
-        "{{appsmith.theme.borderRadius.appBorderRadius}}",
+        "{{((sourceData, formData, fieldState) => (appsmith.theme.borderRadius.appBorderRadius))(Form1.sourceData, Form1.formData, Form1.fieldState)}}",
      ],
      ["schema", ""],
    ];
--- a/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/helper.ts
+++ b/app/client/src/widgets/JSONFormWidget/widget/propertyConfig/helper.ts
@ -108,6 +108,7 @@ export const getStylesheetValue = (
  return getSchemaItem(props, propertyPath).compute(
    (schemaItem, propertyName) => {
      const fieldStylesheet = getFieldStylesheet(
+        props.widgetName,
        schemaItem.fieldType,
        widgetStylesheet?.childStylesheet as FieldThemeStylesheet,
      );
--- a/app/client/src/widgets/TableWidget/widget/helpers.ts
+++ b/app/client/src/widgets/TableWidget/widget/helpers.ts
@ -1,6 +1,10 @@
 import { AppTheme } from "entities/AppTheming";
 import { TableWidgetProps } from "../constants";
 import { get } from "lodash";
+import {
+  combineDynamicBindings,
+  getDynamicBindings,
+} from "utils/DynamicBindingUtils";

 /**
 * this is a getter function to get stylesheet value of the property from the config
@ -21,3 +25,33 @@ export const getStylesheetValue = (

  return get(widgetStylesheet, `childStylesheet.${columnType}.${propertyName}`);
 };
+
+/**
+ * this is a getter function to get stylesheet value of the property from the config
+ *
+ * @param props
+ * @param propertyPath
+ * @param widgetStylesheet
+ * @returns
+ */
+export const getPrimaryColumnStylesheetValue = (
+  props: TableWidgetProps,
+  propertyPath: string,
+  widgetStylesheet?: AppTheme["stylesheet"][string],
+) => {
+  const propertyName = propertyPath.split(".").slice(-1)[0];
+  const columnName = propertyPath.split(".").slice(-2)[0];
+  const columnType = get(props, `primaryColumns.${columnName}.columnType`);
+  const themeStylesheetValue: any = get(
+    widgetStylesheet,
+    `childStylesheet.${columnType}.${propertyName}`,
+  );
+
+  const { jsSnippets, stringSegments } = getDynamicBindings(
+    themeStylesheetValue,
+  );
+
+  const js = combineDynamicBindings(jsSnippets, stringSegments);
+
+  return `{{${props.widgetName}.sanitizedTableData.map((currentRow) => ( ${js}))}}`;
+};
--- a/app/client/src/widgets/TableWidget/widget/propertyConfig.ts
+++ b/app/client/src/widgets/TableWidget/widget/propertyConfig.ts
@ -23,7 +23,7 @@ import {
  TABLE_WIDGET_TOTAL_RECORD_TOOLTIP,
 } from "@appsmith/constants/messages";
 import { IconNames } from "@blueprintjs/icons";
-import { getStylesheetValue } from "./helpers";
+import { getPrimaryColumnStylesheetValue } from "./helpers";

 const ICON_NAMES = Object.keys(IconNames).map(
  (name: string) => IconNames[name as keyof typeof IconNames],
@ -904,7 +904,7 @@ export default [
                },
                {
                  propertyName: "buttonColor",
-                  getStylesheetValue,
+                  getStylesheetValue: getPrimaryColumnStylesheetValue,
                  label: "Button Color",
                  controlType: "PRIMARY_COLUMNS_COLOR_PICKER",
                  helpText: "Changes the color of the button",
@ -989,6 +989,7 @@ export default [
                  label: "Border Radius",
                  customJSControl: "COMPUTE_VALUE",
                  isJSConvertible: true,
+                  getStylesheetValue: getPrimaryColumnStylesheetValue,
                  helpText:
                    "Rounds the corners of the icon button's outer border edge",
                  controlType: "BORDER_RADIUS_OPTIONS",
@ -1052,6 +1053,7 @@ export default [
                  customJSControl: "COMPUTE_VALUE",
                  isJSConvertible: true,
                  isBindProperty: true,
+                  getStylesheetValue: getPrimaryColumnStylesheetValue,
                  isTriggerProperty: false,
                  placeholderText: "#FFFFFF / Gray / rgb(255, 99, 71)",
                  validation: {