From 6c9f315b7764f332b5f2419f8b1685b269908da1 Mon Sep 17 00:00:00 2001
From: AAfghahi <48933336+AAfghahi@users.noreply.github.com>
Date: Wed, 10 Feb 2021 23:36:33 -0500
Subject: [PATCH] fix: Disabled state button transition time (#13008)

* button fix

* tooltips disabled when it is disabled, border width changed

* added isDisabled to tooltip

* worked on transition times

* cleaned up transition to be local instead of global

* made it local

* linted

* trying to resolve a conflict
---
 .../src/SqlLab/components/RunQueryActionButton.tsx          | 2 ++
 superset-frontend/src/common/components/Dropdown.tsx        | 6 ++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx b/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx
index c2534c6352e47..18f2ebaba6e8e 100644
--- a/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx
+++ b/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx
@@ -69,6 +69,8 @@ const onClick = (
 const StyledButton = styled.span`
   button {
     line-height: 13px;
+    // this is to over ride a previous transition built into the component
+    transition: background-color 0ms;
     &:last-of-type {
       margin-right: ${({ theme }) => theme.gridUnit * 2}px;
     }
diff --git a/superset-frontend/src/common/components/Dropdown.tsx b/superset-frontend/src/common/components/Dropdown.tsx
index 0dc18833e93da..001383e3415c1 100644
--- a/superset-frontend/src/common/components/Dropdown.tsx
+++ b/superset-frontend/src/common/components/Dropdown.tsx
@@ -82,7 +82,8 @@ const StyledDropdownButton = styled.div`
         margin: 0;
         width: 120px;
       }
-      :disabled {
+
+      &:disabled {
         background-color: ${({ theme }) => theme.colors.grayscale.light2};
         color: ${({ theme }) => theme.colors.grayscale.base};
       }
@@ -102,7 +103,8 @@ const StyledDropdownButton = styled.div`
           top: ${({ theme }) => theme.gridUnit * 0.75}px;
           width: ${({ theme }) => theme.gridUnit * 0.25}px;
         }
-        :disabled:before {
+
+        &:disabled:before {
           border-left: 1px solid ${({ theme }) => theme.colors.grayscale.base};
         }
       }