From abd999bd6b4fc23e3dbecc83a86839d534e967d6 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Wed, 7 Jul 2021 20:53:35 -0700
Subject: [PATCH] refactor: icon to icons for filterbadge components (#15557)

* initial commit

* fix test
---
 .../cypress/integration/dashboard/filter.test.ts            | 4 ++--
 .../components/FiltersBadge/DetailsPanel/index.tsx          | 6 +++---
 .../src/dashboard/components/FiltersBadge/Styles.tsx        | 2 +-
 .../src/dashboard/components/FiltersBadge/index.tsx         | 3 +--
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/filter.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/filter.test.ts
index 375f14dacd..9b30639c24 100644
--- a/superset-frontend/cypress-base/cypress/integration/dashboard/filter.test.ts
+++ b/superset-frontend/cypress-base/cypress/integration/dashboard/filter.test.ts
@@ -38,7 +38,7 @@ describe('Dashboard filter', () => {
       cy.get('.Select__placeholder:first').click();
 
       // should show the filter indicator
-      cy.get('svg[data-test="filter"]:visible').should(nodes => {
+      cy.get('span[aria-label="filter"]:visible').should(nodes => {
         expect(nodes.length).to.least(9);
       });
 
@@ -50,7 +50,7 @@ describe('Dashboard filter', () => {
       cy.get('.Select__menu').first().contains('South Asia').click();
 
       // should still have all filter indicators
-      cy.get('svg[data-test="filter"]:visible').should(nodes => {
+      cy.get('span[aria-label="filter"]:visible').should(nodes => {
         expect(nodes.length).to.least(9);
       });
 
diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/index.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/index.tsx
index 7140817a34..6a311c3bcb 100644
--- a/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/index.tsx
+++ b/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/index.tsx
@@ -26,7 +26,7 @@ import {
 } from '@ant-design/icons';
 import Popover from 'src/components/Popover';
 import Collapse from 'src/components/Collapse';
-import Icon from 'src/components/Icon';
+import Icons from 'src/components/Icons';
 import {
   Indent,
   Panel,
@@ -169,9 +169,9 @@ const DetailsPanelPopover = ({
               key="appliedCrossFilters"
               header={
                 <Title bold color={theme.colors.primary.light1}>
-                  <Icon
-                    name="cross-filter-badge"
+                  <Icons.CursorTarget
                     css={{ fill: theme.colors.primary.light1 }}
+                    iconSize="xl"
                   />
                   {t(
                     'Applied Cross Filters (%d)',
diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx
index 928996d451..2fa1afb944 100644
--- a/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx
+++ b/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx
@@ -35,7 +35,7 @@ export const Pill = styled.div`
 
   svg {
     position: relative;
-    top: -1px;
+    top: -2px;
     color: ${({ theme }) => theme.colors.grayscale.light5};
     width: 1em;
     height: 1em;
diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx
index 5cc86e1ebd..b9c2b5f736 100644
--- a/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx
+++ b/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx
@@ -20,7 +20,6 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { uniqWith } from 'lodash';
 import cx from 'classnames';
-import Icon from 'src/components/Icon';
 import Icons from 'src/components/Icons';
 import { usePrevious } from 'src/common/hooks/usePrevious';
 import { DataMaskStateWithId } from 'src/dataMask/types';
@@ -199,7 +198,7 @@ export const FiltersBadge = ({ chartId }: FiltersBadgeProps) => {
           isInactive && 'filters-inactive',
         )}
       >
-        <Icon name="filter" />
+        <Icons.Filter iconSize="m" />
         {!isInactive && (
           <span data-test="applied-filter-count">
             {appliedIndicators.length + appliedCrossFilterIndicators.length}