From 3a442e09bf102a07e242554ee802b70c2de71ee0 Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Thu, 8 Dec 2022 13:38:56 -0500
Subject: [PATCH] fix: Button resizing in horizontal filter bar (#22365)

---
 superset-frontend/src/components/Badge/index.tsx       |  4 ++--
 .../src/components/DropdownContainer/index.tsx         | 10 +++++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/superset-frontend/src/components/Badge/index.tsx b/superset-frontend/src/components/Badge/index.tsx
index f33d9808e4db4..01c03f3fcf8f2 100644
--- a/superset-frontend/src/components/Badge/index.tsx
+++ b/superset-frontend/src/components/Badge/index.tsx
@@ -28,8 +28,8 @@ export interface BadgeProps extends AntdBadgeProps {
 const Badge = styled(
   (
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    { textColor, ...props }: BadgeProps,
-  ) => <AntdBadge {...props} />,
+    { textColor, color, text, ...props }: BadgeProps,
+  ) => <AntdBadge text={text} color={text ? color : undefined} {...props} />,
 )`
   & > sup {
     padding: 0 ${({ theme }) => theme.gridUnit * 2}px;
diff --git a/superset-frontend/src/components/DropdownContainer/index.tsx b/superset-frontend/src/components/DropdownContainer/index.tsx
index 38efa285e6993..c90372973efbc 100644
--- a/superset-frontend/src/components/DropdownContainer/index.tsx
+++ b/superset-frontend/src/components/DropdownContainer/index.tsx
@@ -376,10 +376,14 @@ const DropdownContainer = forwardRef(
                   {dropdownTriggerText}
                   <Badge
                     count={dropdownTriggerCount ?? overflowingCount}
+                    color={
+                      (dropdownTriggerCount ?? overflowingCount) > 0
+                        ? theme.colors.primary.base
+                        : theme.colors.grayscale.light1
+                    }
+                    showZero
                     css={css`
-                      margin-left: ${dropdownTriggerCount ?? overflowingCount
-                        ? `${theme.gridUnit * 2}px`
-                        : '0'};
+                      margin-left: ${theme.gridUnit * 2}px;
                     `}
                   />
                   <Icons.DownOutlined