[superset] 29/39: Fix button styling issue

[lyndsi]

This is an automated email from the ASF dual-hosted git repository.

lyndsi pushed a commit to branch 
lyndsi/sql-lab-new-explore-button-functionality-and-move-save-dataset-to-split-save-button
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 9e5faae2be840de0eb7236cd8c79014ec8fb6d88
Author: lyndsiWilliams <kcatg...@gmail.com>
AuthorDate: Wed Jun 29 17:51:00 2022 -0500

    Fix button styling issue
---
 .../components/SaveDatasetActionButton/index.tsx   | 54 +++++++++++-----------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git 
a/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/index.tsx 
b/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/index.tsx
index da5a879539..41ad01841c 100644
--- a/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/index.tsx
@@ -21,7 +21,7 @@ import { t, styled, useTheme } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
 import { DropdownButton } from 'src/components/DropdownButton';
 import Button from 'src/components/Button';
-import { QueryButtonProps } from 'src/SqlLab/types';
+import { DropdownButtonProps } from 'antd/lib/dropdown';
 
 interface Props {
   toggleSave: () => void;
@@ -34,10 +34,12 @@ export default function SaveDatasetActionButton({
 }: Props) {
   const theme = useTheme();
 
-  const ButtonComponentStyles = styled.div`
-    .ant-btn-group button.ant-btn {
+  const ButtonComponentStyles = styled(
+    DropdownButton as React.FC<DropdownButtonProps>,
+  )`
+    button.ant-btn.ant-btn-default {
       &:first-of-type {
-        width: 64px;
+        width: ${theme.gridUnit * 16}px;
       }
       background-color: ${theme.colors.primary.light4};
       color: ${theme.colors.primary.dark1};
@@ -54,29 +56,27 @@ export default function SaveDatasetActionButton({
     }
   `;
 
-  const ButtonComponent: React.FC<QueryButtonProps> = overlayMenu
-    ? (DropdownButton as React.FC)
-    : Button;
-
-  return (
-    <ButtonComponentStyles>
-      <ButtonComponent
-        onClick={toggleSave}
-        {...(overlayMenu
-          ? {
-              overlay: overlayMenu,
-              icon: (
-                <Icons.CaretDown
-                  iconColor={theme.colors.grayscale.light5}
-                  name="caret-down"
-                />
-              ),
-              trigger: 'click',
-            }
-          : { buttonStyle: 'primary', css: { width: theme.gridUnit * 25 } })}
-      >
-        {t('Save')}
-      </ButtonComponent>
+  return overlayMenu ? (
+    <ButtonComponentStyles
+      onClick={toggleSave}
+      overlay={overlayMenu}
+      icon={
+        <Icons.CaretDown
+          iconColor={theme.colors.grayscale.light5}
+          name="caret-down"
+        />
+      }
+      trigger={['click']}
+    >
+      {t('Save')}
     </ButtonComponentStyles>
+  ) : (
+    <Button
+      onClick={toggleSave}
+      buttonStyle="primary"
+      css={{ width: theme.gridUnit * 25 }}
+    >
+      {t('Save')}
+    </Button>
   );
 }