From 43bf1ef72bc9a21a063d6a6927fe9e490417f16f Mon Sep 17 00:00:00 2001
From: Yash Vibhandik <vibhandikyash@gmail.com>
Date: Wed, 7 Jul 2021 10:44:18 +0530
Subject: [PATCH] FIX #1983 : Updated Css to move disabled button smoothly
 (#4744)

- conditionally updated css to move disabled button smoothly
- omit disabled property of button and mange disable by className
- update cypress CheckBox_spec test
---
 .../ClientSideTests/FormWidgets/CheckBox_spec.js           | 2 +-
 .../components/designSystems/blueprint/ButtonComponent.tsx | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/CheckBox_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/CheckBox_spec.js
index e987207b66..f3503292c7 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/CheckBox_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/CheckBox_spec.js
@@ -81,7 +81,7 @@ describe("Checkbox Widget Functionality", function() {
     cy.get(publish.checkboxWidget).click();
     cy.get(widgetsPage.formButtonWidget)
       .contains("Submit")
-      .should("have.attr", "disabled");
+      .should("have.class", "bp3-disabled");
 
     cy.get(publish.checkboxWidget).click();
     cy.get(widgetsPage.formButtonWidget)
diff --git a/app/client/src/components/designSystems/blueprint/ButtonComponent.tsx b/app/client/src/components/designSystems/blueprint/ButtonComponent.tsx
index daa1459448..7c62f26290 100644
--- a/app/client/src/components/designSystems/blueprint/ButtonComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/ButtonComponent.tsx
@@ -42,7 +42,7 @@ const AccentColorMap: Record<ButtonStyleName, string> = {
 };
 
 const ButtonWrapper = styled((props: ButtonStyleProps & IButtonProps) => (
-  <Button {..._.omit(props, ["accent", "filled"])} />
+  <Button {..._.omit(props, ["accent", "filled", "disabled"])} />
 ))<ButtonStyleProps>`
   &&&& {
     ${ButtonColorStyles};
@@ -122,7 +122,10 @@ type ButtonStyleProps = {
 
 // To be used in any other part of the app
 export function BaseButton(props: IButtonProps & ButtonStyleProps) {
-  return <ButtonWrapper {...props} />;
+  const className = props.disabled
+    ? `${props.className} bp3-disabled`
+    : props.className;
+  return <ButtonWrapper {...props} className={className} />;
 }
 
 BaseButton.defaultProps = {