refactor(icons): Replaces custom icons (Plus, PlusCircle) with antd5 …

…icons

superset-frontend/src/SqlLab/components/QueryLimitSelect/index.tsx

@@ -104,7 +104,10 @@ const QueryLimitSelect = ({
           <span className="limitDropdown">
             {convertToNumWithSpaces(queryLimit)}
           </span>
-          <Icons.CaretDownOutlined iconSize='m' iconColor={theme.colors.grayscale.base} />
+          <Icons.DownOutlined
+            iconSize="m"
+            iconColor={theme.colors.grayscale.base}
+          />
         </button>
       </AntdDropdown>
     </LimitSelectStyled>

superset-frontend/src/SqlLab/components/SaveDatasetActionButton/index.tsx

@@ -63,7 +63,7 @@ const SaveDatasetActionButton = ({
       overlay={overlayMenu}
       icon={
         <Icons.CaretDownOutlined
-          iconSize='xl'
+          iconSize="xl"
           iconColor={theme.colors.grayscale.light5}
           name="caret-down"
         />

superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.tsx

@@ -30,6 +30,7 @@ import * as Actions from 'src/SqlLab/actions/sqlLab';
 import { EmptyState } from 'src/components/EmptyState';
 import getBootstrapData from 'src/utils/getBootstrapData';
 import { locationContext } from 'src/pages/SqlLab/LocationContext';
+import Icons from 'src/components/Icons';
 import SqlEditor from '../SqlEditor';
 import SqlEditorTabHeader from '../SqlEditorTabHeader';
 
@@ -247,7 +248,11 @@ class TabbedSqlEditors extends PureComponent<TabbedSqlEditorsProps> {
               : t('New tab (Ctrl + t)')
           }
         >
-          <i data-test="add-tab-icon" className="fa fa-plus-circle" />
+          <Icons.PlusCircleOutlined
+            iconSize="s"
+            css={{ verticalAlign: 'middle', margin: '0!important' }}
+            data-test="add-tab-icon"
+          />
         </Tooltip>
       </StyledTab>
     );
@@ -289,7 +294,11 @@ class TabbedSqlEditors extends PureComponent<TabbedSqlEditorsProps> {
                 : t('New tab (Ctrl + t)')
             }
           >
-            <i data-test="add-tab-icon" className="fa fa-plus-circle" />
+            <Icons.PlusCircleOutlined
+              iconSize="l"
+              css={{ verticalAlign: 'middle' }}
+              data-test="add-tab-icon"
+            />
           </Tooltip>
         }
       >

superset-frontend/src/components/Datasource/CollectionTable.tsx

@@ -484,7 +484,10 @@ export default class CRUDCollection extends PureComponent<
                 onClick={this.onAddItem}
                 data-test="add-item-button"
               >
-                <i data-test="crud-add-table-item" className="fa fa-plus" />{' '}
+                <Icons.PlusOutlined
+                  iconSize="m"
+                  data-test="crud-add-table-item"
+                />
                 {t('Add item')}
               </Button>
             </StyledButtonWrapper>

superset-frontend/src/components/Datasource/DatasourceEditor.jsx

@@ -1052,9 +1052,21 @@ class DatasourceEditor extends PureComponent {
         <EditLockContainer>
           <span role="button" tabIndex={0} onClick={this.onChangeEditMode}>
             {this.state.isEditMode ? (
-              <Icons.UnlockOutlined iconSize='xl' iconColor={theme.colors.grayscale.base} />
+              <Icons.UnlockOutlined
+                iconSize="xl"
+                iconColor={theme.colors.grayscale.base}
+                css={theme => ({
+                  margin: `auto ${theme.gridUnit}px auto 0`,
+                })}
+              />
             ) : (
-              <Icons.LockOutlined iconSize='xl' iconColor={theme.colors.grayscale.base} />
+              <Icons.LockOutlined
+                iconSize="xl"
+                iconColor={theme.colors.grayscale.base}
+                css={theme => ({
+                  margin: `auto ${theme.gridUnit}px auto 0`,
+                })}
+              />
             )}
           </span>
           {!this.state.isEditMode && (

superset-frontend/src/components/Icons/AntdEnhanced.tsx

@@ -86,7 +86,7 @@ import {
   NumberOutlined,
   ThunderboltOutlined,
   FilterOutlined,
-  UnorderedListOutlined
+  UnorderedListOutlined,
 } from '@ant-design/icons';
 import { StyledIcon } from './Icon';
 import IconType from './IconType';
@@ -159,8 +159,8 @@ const AntdIcons = {
   NumberOutlined,
   ThunderboltOutlined,
   FilterOutlined,
-  UnorderedListOutlined
-}
+  UnorderedListOutlined,
+};
 
 const AntdEnhancedIcons = Object.keys(AntdIcons)
   .filter(k => !k.includes('TwoTone'))

superset-frontend/src/components/Icons/index.tsx

@@ -119,10 +119,6 @@ const IconFileNames = [
   'paperclip',
   'pie-chart-tile',
   'placeholder',
-  'plus',
-  'plus_large',
-  'plus_small',
-  'plus_solid',
   'queued',
   'refresh',
   'running',
@@ -161,6 +157,10 @@ const IconFileNames = [
   'table',
   'triangle_down',
   'triangle_up',
+  'plus',
+  'plus_large',
+  'plus_small',
+  'plus_solid',
 ];
 
 const iconOverrides: Record<string, FC<IconType>> = {};

superset-frontend/src/components/ListView/ListView.tsx

@@ -187,7 +187,7 @@ const ViewModeToggle = ({
       }}
       className={cx('toggle-button', { active: mode === 'card' })}
     >
-      <Icons.AppstoreOutlined iconSize='xl'/>
+      <Icons.AppstoreOutlined iconSize="xl" />
     </div>
     <div
       role="button"
@@ -198,7 +198,7 @@ const ViewModeToggle = ({
       }}
       className={cx('toggle-button', { active: mode === 'table' })}
     >
-      <Icons.UnorderedListOutlined iconSize='xl'/>
+      <Icons.UnorderedListOutlined iconSize="xl" />
     </div>
   </ViewModeContainer>
 );

superset-frontend/src/components/MessageToasts/Toast.tsx

@@ -33,7 +33,7 @@ const ToastContainer = styled.div`
   }
 `;
 
-const StyledIcon = (theme: SupersetTheme) => css`
+const NotificationStyledIcon = (theme: SupersetTheme) => css`
   min-width: ${theme.gridUnit * 5}px;
   color: ${theme.colors.grayscale.base};
 `;
@@ -77,16 +77,18 @@ export default function Toast({ toast, onCloseToast }: ToastPresenterProps) {
   }, [handleClosePress, toast.duration]);
 
   let className = 'toast--success';
-  let icon = <Icons.CircleCheckSolid css={theme => StyledIcon(theme)} />;
+  let icon = (
+    <Icons.CircleCheckSolid css={theme => NotificationStyledIcon(theme)} />
+  );
 
   if (toast.toastType === ToastType.Warning) {
-    icon = <Icons.WarningSolid css={StyledIcon} />;
+    icon = <Icons.WarningSolid css={NotificationStyledIcon} />;
     className = 'toast--warning';
   } else if (toast.toastType === ToastType.Danger) {
-    icon = <Icons.ErrorSolid css={StyledIcon} />;
+    icon = <Icons.ErrorSolid css={NotificationStyledIcon} />;
     className = 'toast--danger';
   } else if (toast.toastType === ToastType.Info) {
-    icon = <Icons.InfoSolid css={StyledIcon} />;
+    icon = <Icons.InfoSolid css={NotificationStyledIcon} />;
     className = 'toast--info';
   }
 

superset-frontend/src/components/PopoverDropdown/index.tsx

@@ -111,9 +111,12 @@ const PopoverDropdown = (props: PopoverDropdownProps) => {
       <div role="button" css={{ display: 'flex', alignItems: 'center' }}>
         {selected && renderButton(selected)}
         <Icons.CaretDownOutlined
-          iconSize='m'
+          iconSize="m"
           iconColor={theme.colors.grayscale.base}
-          css={{ marginTop: theme.gridUnit * 0.5, marginLeft: theme.gridUnit * 0.5}}
+          css={{
+            marginTop: theme.gridUnit * 0.5,
+            marginLeft: theme.gridUnit * 0.5,
+          }}
         />
       </div>
     </AntdDropdown>

superset-frontend/src/dashboard/components/DashboardGrid.jsx

@@ -21,6 +21,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { addAlpha, css, styled, t } from '@superset-ui/core';
 import { EmptyState } from 'src/components/EmptyState';
+import Icons from 'src/components/Icons';
 import { componentShape } from '../util/propShapes';
 import DashboardComponent from '../containers/DashboardComponent';
 import { Droppable } from './dnd/DragDroppable';
@@ -213,7 +214,7 @@ class DashboardGrid extends PureComponent {
         size="large"
         buttonText={
           <>
-            <i className="fa fa-plus" />
+            <Icons.PlusOutlined iconSize="m" />
             {t('Create a new chart')}
           </>
         }
@@ -237,7 +238,7 @@ class DashboardGrid extends PureComponent {
         )}
         buttonText={
           <>
-            <i className="fa fa-plus" />
+            <Icons.PlusOutlined iconSize="m" />
             {t('Create a new chart')}
           </>
         }

superset-frontend/src/dashboard/components/SliceAdder.tsx

@@ -366,7 +366,12 @@ class SliceAdder extends Component<SliceAdderProps, SliceAdderState> {
               )
             }
           >
-            <Icons.PlusSmall />
+            <Icons.PlusOutlined
+              css={theme => ({
+                margin: `auto -${theme.gridUnit * 2}px auto 0 !important`,
+              })}
+              iconSize="s"
+            />
             {t('Create new chart')}
           </NewChartButton>
         </NewChartButtonContainer>

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.tsx

@@ -134,7 +134,7 @@ export const ChartsScopingListPanel = ({
           buttonSize="xsmall"
           onClick={addNewCustomScope}
         >
-          <Icons.PlusSmall /> {t('Add custom scoping')}
+          <Icons.PlusOutlined iconSize="s" /> {t('Add custom scoping')}
         </Button>
       </AddButtonContainer>
       <FilterTitle

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx

@@ -34,7 +34,7 @@ import { FilterControlProps } from './types';
 import { FilterCardPlacement } from '../../FilterCard/types';
 import { useIsFilterInScope } from '../../state';
 
-const StyledIcon = styled.div`
+const FilterStyledIcon = styled.div`
   position: absolute;
   right: 0;
 `;
@@ -262,7 +262,7 @@ const FilterControl = ({
         {filter.description?.trim() && (
           <DescriptionToolTip description={filter.description} />
         )}
-        <StyledIcon data-test="filter-icon">{icon}</StyledIcon>
+        <FilterStyledIcon data-test="filter-icon">{icon}</FilterStyledIcon>
       </FilterControlTitleBox>
     ),
     [

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx

@@ -90,8 +90,8 @@ const FilterTitleContainer = forwardRef<HTMLDivElement, Props>(
     },
     ref,
   ) => {
+    const theme = useTheme();
     const renderComponent = (id: string) => {
-      const theme = useTheme();
       const isRemoved = !!removedFilters[id];
       const isErrored = erroredFilters.includes(id);
       const isActive = currentFilterId === id;

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DependencyList.tsx

@@ -171,7 +171,7 @@ const List = ({
       ))}
       {availableFilters.length > rows.length && (
         <AddFilter role="button" onClick={onAdd}>
-          <Icons.PlusSmall />
+          <Icons.PlusOutlined iconSize="xs" />
           {t('Add filter')}
         </AddFilter>
       )}

superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx

@@ -159,13 +159,13 @@ export const DataTablesPane = ({
   const CollapseButton = useMemo(() => {
     const caretIcon = panelOpen ? (
       <Icons.CaretUpOutlined
-        iconSize='l'
+        iconSize="l"
         iconColor={theme.colors.grayscale.base}
         aria-label={t('Collapse data panel')}
       />
     ) : (
       <Icons.CaretDownOutlined
-        iconSize='l'
+        iconSize="l"
         iconColor={theme.colors.grayscale.base}
         aria-label={t('Expand data panel')}
       />

superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx

@@ -36,6 +36,7 @@ import CustomListItem from 'src/explore/components/controls/CustomListItem';
 import { ChartState, ExplorePageState } from 'src/explore/types';
 import { AnyAction } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
+import Icons from 'src/components/Icons';
 import ControlPopover, {
   getSectionContainerElement,
 } from '../ControlPopover/ControlPopover';
@@ -261,11 +262,15 @@ class AnnotationLayerControl extends PureComponent<Props, PopoverState> {
             }
           >
             <CustomListItem selectable>
-              <i
+              <Icons.PlusOutlined
+                iconSize="m"
+                css={theme => ({
+                  margin: `auto ${theme.gridUnit * 2}px auto 0`,
+                  verticalAlign: 'baseline',
+                })}
                 data-test="add-annotation-layer-button"
-                className="fa fa-plus"
-              />{' '}
-              &nbsp; {t('Add annotation layer')}
+              />
+              {t('Add annotation layer')}
             </CustomListItem>
           </ControlPopover>
         </List>

superset-frontend/src/explore/components/controls/CollectionControl/index.jsx

@@ -161,7 +161,7 @@ class CollectionControl extends Component {
         <HeaderContainer>
           <ControlHeader {...this.props} />
           <AddIconButton onClick={this.onAdd}>
-            <Icons.PlusLarge
+            <Icons.PlusOutlined
               iconSize="s"
               iconColor={theme.colors.grayscale.light5}
             />

superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx

@@ -22,8 +22,6 @@ import { Comparator } from '@superset-ui/chart-controls';
 import Icons from 'src/components/Icons';
 import ControlHeader from 'src/explore/components/ControlHeader';
 import { FormattingPopover } from './FormattingPopover';
-import { marginBottom } from '../../../../features/databases/DatabaseModal/styles';
-import { theme } from '../../../../preamble';
 import {
   ConditionalFormattingConfig,
   ConditionalFormattingControlProps,
@@ -163,7 +161,11 @@ const ConditionalFormattingControl = ({
               <OptionControlContainer withCaret>
                 <Label>{createLabel(config)}</Label>
                 <CaretContainer>
-                  <Icons.CaretRightOutlined iconSize='l' css={{marginTop: theme.gridUnit * 1}} iconColor={theme.colors.grayscale.light1} />
+                  <Icons.CaretRightOutlined
+                    iconSize="l"
+                    css={{ marginTop: theme.gridUnit }}
+                    iconColor={theme.colors.grayscale.light1}
+                  />
                 </CaretContainer>
               </OptionControlContainer>
             </FormattingPopover>
@@ -177,7 +179,10 @@ const ConditionalFormattingControl = ({
           extraColorChoices={extraColorChoices}
         >
           <AddControlLabel>
-            <Icons.PlusSmall iconColor={theme.colors.grayscale.light1} />
+            <Icons.PlusOutlined
+              iconSize="xs"
+              iconColor={theme.colors.grayscale.light1}
+            />
             {t('Add new color formatter')}
           </AddControlLabel>
         </FormattingPopover>

superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndSelectLabel.tsx

@@ -100,7 +100,13 @@ export default function DndSelectLabel({
         cancelHover={!props.onClickGhostButton}
         onClick={props.onClickGhostButton}
       >
-        <Icons.PlusSmall iconColor={theme.colors.grayscale.light1} />
+        <Icons.PlusOutlined
+          iconSize="xs"
+          iconColor={theme.colors.grayscale.light1}
+          css={theme => ({
+            margin: `auto ${theme.gridUnit * 2}px auto 0`,
+          })}
+        />
         {t(props.ghostButtonText)}
       </AddControlLabel>
     );

superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx

@@ -77,7 +77,11 @@ export default function Option({
       )}
       {withCaret && (
         <CaretContainer>
-          <Icons.CaretRightOutlined iconSize='l' css={{marginTop: theme.gridUnit * 1}} iconColor={theme.colors.grayscale.light1} />
+          <Icons.CaretRightOutlined
+            iconSize="l"
+            css={{ marginTop: theme.gridUnit * 1 }}
+            iconColor={theme.colors.grayscale.light1}
+          />
         </CaretContainer>
       )}
     </OptionControlContainer>