From 58cda8f8d6d147f95428afeae180d55514807c71 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Wed, 7 Jul 2021 14:13:44 -0700
Subject: [PATCH] refactor: icon to icons for nativeFilter components (#15528)

* initial commit for cascade filters

* migrate delete icon

* Update superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover/index.tsx

Co-authored-by: Geido <60598000+geido@users.noreply.github.com>

* add uniform style for icons

* fix lint

Co-authored-by: Geido <60598000+geido@users.noreply.github.com>
---
 .../CascadeFilters/CascadePopover/index.tsx   | 25 ++++++++++++-------
 .../FiltersConfigModal/FilterTabs.tsx         | 11 +++-----
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover/index.tsx
index 82afdcfcbd..332fe8773e 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover/index.tsx
@@ -17,9 +17,9 @@
  * under the License.
  */
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { styled, t, DataMask } from '@superset-ui/core';
+import { styled, t, DataMask, css, SupersetTheme } from '@superset-ui/core';
 import Popover from 'src/components/Popover';
-import Icon from 'src/components/Icon';
+import Icons from 'src/components/Icons';
 import { Pill } from 'src/dashboard/components/FiltersBadge/Styles';
 import { DataMaskStateWithId } from 'src/dataMask/types';
 import FilterControl from 'src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl';
@@ -61,10 +61,10 @@ const StyledTitle = styled.h4`
   padding: 0;
 `;
 
-const StyledIcon = styled(Icon)`
-  margin-right: ${({ theme }) => theme.gridUnit}px;
-  color: ${({ theme }) => theme.colors.grayscale.dark1};
-  width: ${({ theme }) => theme.gridUnit * 4}px;
+const IconStyles = (theme: SupersetTheme) => css`
+  margin-right: ${theme.gridUnit}px;
+  color: ${theme.colors.grayscale.dark1};
+  width: ${theme.gridUnit * 4}px;
 `;
 
 const StyledPill = styled(Pill)`
@@ -163,10 +163,17 @@ const CascadePopover: React.FC<CascadePopoverProps> = ({
   const title = (
     <StyledTitleBox>
       <StyledTitle>
-        <StyledIcon name="edit" />
+        <Icons.Edit
+          iconSize="l"
+          css={(theme: SupersetTheme) => IconStyles(theme)}
+        />
         {t('Select parent filters')} ({allFilters.length})
       </StyledTitle>
-      <StyledIcon name="close" onClick={() => onVisibleChange(false)} />
+      <Icons.Close
+        iconSize="l"
+        css={(theme: SupersetTheme) => IconStyles(theme)}
+        onClick={() => onVisibleChange(false)}
+      />
     </StyledTitleBox>
   );
 
@@ -207,7 +214,7 @@ const CascadePopover: React.FC<CascadePopoverProps> = ({
               <>
                 {filter.cascadeChildren.length !== 0 && (
                   <StyledPill onClick={() => onVisibleChange(true)}>
-                    <Icon name="filter" /> {allFilters.length}
+                    <Icons.Filter iconSize="m" /> {allFilters.length}
                   </StyledPill>
                 )}
               </>
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTabs.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTabs.tsx
index 3d687961ea..a5f1dd03fb 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTabs.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTabs.tsx
@@ -20,7 +20,7 @@ import { PlusOutlined } from '@ant-design/icons';
 import { styled, t } from '@superset-ui/core';
 import React, { FC } from 'react';
 import { LineEditableTabs } from 'src/components/Tabs';
-import Icon from 'src/components/Icon';
+import Icons from 'src/components/Icons';
 import { FilterRemoval } from './types';
 import { REMOVAL_DELAY_SECS } from './utils';
 
@@ -51,7 +51,7 @@ export const StyledAddFilterBox = styled.div`
   }
 `;
 
-export const StyledTrashIcon = styled(Icon)`
+export const StyledTrashIcon = styled(Icons.Trash)`
   color: ${({ theme }) => theme.colors.grayscale.light3};
 `;
 
@@ -124,14 +124,13 @@ const FilterTabsContainer = styled(LineEditableTabs)`
       margin: 0 ${theme.gridUnit * 2}px 0 0;
       padding: ${theme.gridUnit}px
         ${theme.gridUnit * 2}px;
-
       &:hover,
       &-active {
         color: ${theme.colors.grayscale.dark1};
         border-radius: ${theme.borderRadius}px;
         background-color: ${theme.colors.secondary.light4};
 
-        .ant-tabs-tab-remove > svg {
+        .ant-tabs-tab-remove > span {
           color: ${theme.colors.grayscale.base};
           transition: all 0.3s;
         }
@@ -238,9 +237,7 @@ const FilterTabs: FC<FilterTabsProps> = ({
           </FilterTabTitle>
         }
         key={id}
-        closeIcon={
-          removedFilters[id] ? <></> : <StyledTrashIcon name="trash" />
-        }
+        closeIcon={removedFilters[id] ? <></> : <StyledTrashIcon />}
       >
         {
           // @ts-ignore