refactor: removed the duplicate style properties for the list widget (#13605)

* refactor: removed the duplicate style properties for the list widget

* test: fixed list_spec cypress failures

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/LayoutWidgets/List_spec.js

@@ -131,7 +131,26 @@ describe("Container Widget Functionality", function() {
     cy.CheckAndUnfoldEntityItem("WIDGETS");
     cy.selectEntityByName("List1");
     // Verify Action type and Message of List Item
-    cy.addAction("{{currentItem.first_name}}");
+    // Click on the onListItemClick action dropdown.
+    cy.get(commonlocators.dropdownSelectButton)
+      .last()
+      .click();
+
+    cy.get(commonlocators.chooseAction)
+      .children()
+      .contains("Show message")
+      .click();
+
+    // Write binding inside the Message code textarea
+    cy.contains("Message")
+      .siblings()
+      .last()
+      .find(".CodeMirror textarea")
+      .focus()
+      .type("{{currentItem.first_name}}", {
+        force: true,
+        parseSpecialCharSequences: false,
+      });
 
     cy.PublishtheApp();
     // Click on list first item
@@ -172,7 +191,7 @@ describe("Container Widget Functionality", function() {
     cy.CheckAndUnfoldEntityItem("WIDGETS");
     cy.selectEntityByName("List1");
     // Scroll down to Styles and Add background colour
-    cy.selectColor("background");
+    cy.selectColor("backgroundcolor");
     cy.wait(1000);
     cy.selectColor("itembackgroundcolor");
     // Click on Deploy and ensure it is deployed appropriately
@@ -197,8 +216,8 @@ describe("Container Widget Functionality", function() {
     cy.CheckAndUnfoldEntityItem("WIDGETS");
     cy.selectEntityByName("List1");
     // Scroll down to Styles and Add background colour
-    cy.get(widgetsPage.backgroundColorToggle).click({ force: true });
-    cy.testJsontext("background", "#FFC13D");
+    cy.get(widgetsPage.backgroundColorToggleNew).click({ force: true });
+    cy.testJsontext("backgroundcolor", "#FFC13D");
     cy.wait(1000);
     cy.get(widgetsPage.itemBackgroundColorToggle).click({ force: true });
     cy.testJsontext("itembackgroundcolor", "#38AFF4");

app/client/cypress/locators/Widgets.json

@@ -171,6 +171,7 @@
     "selectWidgetDisabled": ".t--property-control-disabled input",
     "itemBackgroundColorToggle": ".t--property-control-itembackgroundcolor .t--js-toggle",
     "backgroundColorToggle": ".t--property-control-background .t--js-toggle",
+    "backgroundColorToggleNew": ".t--property-control-backgroundcolor .t--js-toggle",
     "cellBackground": ".t--property-control-cellbackgroundcolor",
     "cellBackgroundToggle": ".t--property-control-cellbackgroundcolor .t--js-toggle",
     "borderColorPickerNew": ".t--property-control-bordercolor input",

app/client/src/widgets/ListWidget/widget/propertyConfig.ts

@@ -57,59 +57,6 @@ const PropertyPaneConfig = [
       },
     ],
   },
-  {
-    sectionName: "Styles",
-    children: [
-      {
-        propertyName: "backgroundColor",
-        label: "Background Color",
-        controlType: "COLOR_PICKER",
-        isJSConvertible: true,
-        isBindProperty: true,
-        isTriggerProperty: false,
-        validation: {
-          type: ValidationTypes.TEXT,
-          params: {
-            expected: {
-              type: "Color name | hex code",
-              example: "#FFFFFF",
-              autocompleteDataType: AutocompleteDataType.STRING,
-            },
-          },
-        },
-      },
-      {
-        propertyName: "itemBackgroundColor",
-        label: "Item Background Color",
-        controlType: "COLOR_PICKER",
-        isJSConvertible: true,
-        isBindProperty: true,
-        isTriggerProperty: false,
-        defaultValue: "#FFFFFF",
-        validation: {
-          type: ValidationTypes.TEXT,
-          params: {
-            expected: {
-              type: "Color name | hex code",
-              example: "#FFFFFF",
-              autocompleteDataType: AutocompleteDataType.STRING,
-            },
-          },
-        },
-      },
-      {
-        helpText: "Spacing between items in Pixels",
-        placeholderText: "0",
-        propertyName: "gridGap",
-        label: "Item Spacing (px)",
-        controlType: "INPUT_TEXT",
-        isBindProperty: true,
-        isTriggerProperty: false,
-        inputType: "INTEGER",
-        validation: { type: ValidationTypes.NUMBER, params: { min: -8 } },
-      },
-    ],
-  },
   {
     sectionName: "Events",
     children: [
@@ -172,7 +119,7 @@ const PropertyPaneConfig = [
     children: [
       {
         propertyName: "backgroundColor",
-        label: "Background",
+        label: "Background Color",
         controlType: "COLOR_PICKER",
         isJSConvertible: true,
         isBindProperty: true,
@@ -188,6 +135,36 @@ const PropertyPaneConfig = [
           },
         },
       },
+      {
+        propertyName: "itemBackgroundColor",
+        label: "Item Background Color",
+        controlType: "COLOR_PICKER",
+        isJSConvertible: true,
+        isBindProperty: true,
+        isTriggerProperty: false,
+        defaultValue: "#FFFFFF",
+        validation: {
+          type: ValidationTypes.TEXT,
+          params: {
+            expected: {
+              type: "Color name | hex code",
+              example: "#FFFFFF",
+              autocompleteDataType: AutocompleteDataType.STRING,
+            },
+          },
+        },
+      },
+      {
+        helpText: "Spacing between items in Pixels",
+        placeholderText: "0",
+        propertyName: "gridGap",
+        label: "Item Spacing (px)",
+        controlType: "INPUT_TEXT",
+        isBindProperty: true,
+        isTriggerProperty: false,
+        inputType: "INTEGER",
+        validation: { type: ValidationTypes.NUMBER, params: { min: -8 } },
+      },
       {
         propertyName: "borderRadius",
         label: "Border Radius",