You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by pk...@apache.org on 2021/07/07 21:14:42 UTC
[superset] branch master updated: refactor: icon to icons for
nativeFilter components (#15528)
This is an automated email from the ASF dual-hosted git repository.
pkdotson pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 58cda8f refactor: icon to icons for nativeFilter components (#15528)
58cda8f is described below
commit 58cda8f8d6d147f95428afeae180d55514807c71
Author: Phillip Kelley-Dotson <pk...@yahoo.com>
AuthorDate: Wed Jul 7 14:13:44 2021 -0700
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 <60...@users.noreply.github.com>
* add uniform style for icons
* fix lint
Co-authored-by: Geido <60...@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 82afdcf..332fe87 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 3d68796..a5f1dd0 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