From ce4b984e27370b5c5dc93774ec725cb336896f75 Mon Sep 17 00:00:00 2001
From: Aswath K <aswath.sana@gmail.com>
Date: Thu, 14 Oct 2021 16:25:03 +0530
Subject: [PATCH] fix: unable to change button color on table widget (#8521)

* fix: unable to change button color on table widget

* Adds test for Table button color validation

* removes commented out code
---
 .../Table_Widget_Add_button_spec.js             | 17 +++++++++++++++++
 .../TableWidget/widget/getTableColumns.tsx      |  1 +
 2 files changed, 18 insertions(+)

diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Widget_Add_button_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Widget_Add_button_spec.js
index 11973adb7d..2123a82771 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Widget_Add_button_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Widget_Add_button_spec.js
@@ -45,6 +45,23 @@ describe("Table Widget property pane feature validation", function() {
         expect(someText).to.equal("Successful tobias.funke@reqres.in");
       });
   });
+
+  it("Table Button color validation", function() {
+    cy.openPropertyPane("tablewidget");
+    // Open column details of "id".
+    cy.editColumn("id");
+    // Changing column data type to "Button"
+    cy.changeColumnType("Button");
+    const color = "rgb(255, 0, 0)";
+    cy.get(widgetsPage.buttonColor)
+      .click({ force: true })
+      .clear()
+      .type(color);
+    // Close Property pane
+    cy.get(commonlocators.editPropCrossButton).click({ force: true });
+    cy.get(widgetsPage.tableBtn).should("have.css", "background-color", color);
+  });
+
   it("Table widget triggeredRow property should be accessible", function() {
     cy.get(commonlocators.TextInside).should("have.text", "Tobias Funke");
   });
diff --git a/app/client/src/widgets/TableWidget/widget/getTableColumns.tsx b/app/client/src/widgets/TableWidget/widget/getTableColumns.tsx
index e2c08e7895..ad9e1248f0 100644
--- a/app/client/src/widgets/TableWidget/widget/getTableColumns.tsx
+++ b/app/client/src/widgets/TableWidget/widget/getTableColumns.tsx
@@ -47,6 +47,7 @@ export const getCellProperties = (
         columnProperties.cellBackground,
         rowIndex,
       ),
+      buttonColor: getPropertyValue(columnProperties.buttonColor, rowIndex),
       buttonLabelColor: getPropertyValue(
         columnProperties.buttonLabelColor,
         rowIndex,