This is an automated email from the ASF dual-hosted git repository.
enzomartellucci pushed a commit to branch enxdev/refactor-antd5-icons
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/enxdev/refactor-antd5-icons by
this push:
new 6db57fc59a - Set default color for icons and removes it where it's
explicitly setted in the codebase. - Minor adjustments to address review
comments.
6db57fc59a is described below
commit 6db57fc59a5a2978ac60ea729e07c74495fba3c0
Author: Enzo Martellucci <[email protected]>
AuthorDate: Tue Feb 18 20:05:52 2025 +0100
- Set default color for icons and removes it where it's explicitly setted
in the codebase.
- Minor adjustments to address review comments.
---
.../src/SqlLab/components/QueryLimitSelect/index.tsx | 8 ++------
.../src/SqlLab/components/ResultSet/index.tsx | 3 +--
.../src/SqlLab/components/SqlEditor/index.tsx | 2 +-
.../src/SqlLab/components/SqlEditorTabHeader/index.tsx | 1 -
.../CopyToClipboard/CopyToClipboard.stories.tsx | 4 +---
.../src/components/Datasource/CollectionTable.tsx | 2 +-
.../src/components/Datasource/DatasourceEditor.jsx | 8 +++-----
.../src/components/Datasource/DatasourceModal.tsx | 1 -
.../src/components/DropdownSelectableIcon/index.tsx | 2 +-
superset-frontend/src/components/FaveStar/index.tsx | 2 +-
superset-frontend/src/components/Icons/Icon.tsx | 3 ++-
.../src/components/LastUpdated/LastUpdated.test.tsx | 14 ++++++++------
superset-frontend/src/components/LastUpdated/index.tsx | 10 ++++++----
superset-frontend/src/components/MessageToasts/Toast.tsx | 10 +++++-----
.../src/components/PopoverDropdown/index.tsx | 1 -
superset-frontend/src/dashboard/components/SliceAdder.tsx | 12 +++---------
.../src/dashboard/components/gridComponents/Tabs.jsx | 5 +----
.../CrossFilters/ScopingModal/ScopingTreePanel.tsx | 1 -
.../nativeFilters/FilterBar/FilterBarSettings/index.tsx | 10 +---------
.../FilterBar/FilterControls/FilterDivider.tsx | 1 -
.../components/nativeFilters/FilterBar/Header/index.tsx | 5 +----
.../components/nativeFilters/FilterBar/Vertical.tsx | 1 -
.../src/explore/components/DataTableControl/index.tsx | 9 +--------
.../explore/components/DataTablesPane/DataTablesPane.tsx | 2 --
.../src/explore/components/PropertiesModal/index.tsx | 1 -
.../controls/DateFilterControl/DateFilterLabel.tsx | 2 +-
.../controls/DateFilterControl/components/DateLabel.tsx | 8 ++------
.../useExploreAdditionalActionsMenu/DashboardsSubMenu.tsx | 1 -
.../src/features/alerts/AlertReportModal.tsx | 2 +-
.../src/features/alerts/components/NotificationMethod.tsx | 2 +-
.../features/annotationLayers/AnnotationLayerModal.tsx | 2 --
.../src/features/annotations/AnnotationModal.tsx | 2 --
superset-frontend/src/features/charts/ChartCard.tsx | 9 ++-------
.../src/features/cssTemplates/CssTemplateModal.tsx | 2 --
.../src/features/dashboards/DashboardCard.tsx | 9 +--------
.../datasets/AddDataset/DatasetPanel/DatasetPanel.tsx | 15 ++++-----------
superset-frontend/src/features/home/SavedQueries.tsx | 5 +----
.../src/features/rls/RowLevelSecurityModal.tsx | 2 --
superset-frontend/src/features/tags/TagCard.tsx | 8 ++------
superset-frontend/src/pages/QueryHistoryList/index.tsx | 6 ++----
40 files changed, 56 insertions(+), 137 deletions(-)
diff --git a/superset-frontend/src/SqlLab/components/QueryLimitSelect/index.tsx
b/superset-frontend/src/SqlLab/components/QueryLimitSelect/index.tsx
index d5c0e0ea63..696310fce9 100644
--- a/superset-frontend/src/SqlLab/components/QueryLimitSelect/index.tsx
+++ b/superset-frontend/src/SqlLab/components/QueryLimitSelect/index.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { useDispatch } from 'react-redux';
-import { useTheme, t } from '@superset-ui/core';
+import { t } from '@superset-ui/core';
import { Dropdown } from 'src/components/Dropdown';
import { Menu } from 'src/components/Menu';
import Icons from 'src/components/Icons';
@@ -64,7 +64,6 @@ const QueryLimitSelect = ({
maxRow,
defaultQueryLimit,
}: QueryLimitSelectProps) => {
- const theme = useTheme();
const dispatch = useDispatch();
const queryEditor = useQueryEditor(queryEditorId, ['id', 'queryLimit']);
@@ -82,10 +81,7 @@ const QueryLimitSelect = ({
<span className="limitDropdown">
{convertToNumWithSpaces(queryLimit)}
</span>
- <Icons.CaretDownOutlined
- iconSize="m"
- iconColor={theme.colors.grayscale.base}
- />
+ <Icons.CaretDownOutlined iconSize="m" />
</Button>
</Dropdown>
);
diff --git a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
index 8155ecad9b..aba8233ee7 100644
--- a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
@@ -688,8 +688,7 @@ const ResultSet = ({
width: 100%;
overflow: hidden;
white-space: nowrap !important;
- text-overflow: ellipsimport { CopyToClipboard } from
'.';
-is;
+ text-overflow: ellipsis;
display: block;
}
`,
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
b/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
index 9bca4d0aaf..8f4b17289b 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
@@ -874,7 +874,7 @@ const SqlEditor: FC<Props> = ({
trigger={['click']}
>
<Button buttonSize="xsmall" type="link"
showMarginRight={false}>
- <Icons.MoreHoriz iconColor={theme.colors.grayscale.base} />
+ <Icons.MoreHoriz />
</Button>
</Dropdown>
</div>
diff --git
a/superset-frontend/src/SqlLab/components/SqlEditorTabHeader/index.tsx
b/superset-frontend/src/SqlLab/components/SqlEditorTabHeader/index.tsx
index 9561293827..ad1ad28d32 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditorTabHeader/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditorTabHeader/index.tsx
@@ -46,7 +46,6 @@ const TabTitleWrapper = styled.div`
[aria-label='check-circle'],
.status-icon {
margin: 0px;
- margin-right: 0px;
}
`;
const TabTitle = styled.span`
diff --git
a/superset-frontend/src/components/CopyToClipboard/CopyToClipboard.stories.tsx
b/superset-frontend/src/components/CopyToClipboard/CopyToClipboard.stories.tsx
index 94fe4246b9..73880a7ac9 100644
---
a/superset-frontend/src/components/CopyToClipboard/CopyToClipboard.stories.tsx
+++
b/superset-frontend/src/components/CopyToClipboard/CopyToClipboard.stories.tsx
@@ -16,7 +16,6 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { useTheme } from '@superset-ui/core';
import Button from 'src/components/Button';
import Icons from 'src/components/Icons';
import ToastContainer from 'src/components/MessageToasts/ToastContainer';
@@ -28,10 +27,9 @@ export default {
};
export const InteractiveCopyToClipboard = ({ copyNode, ...rest }: any) => {
- const theme = useTheme();
let node = <Button>Copy</Button>;
if (copyNode === 'Icon') {
- node = <Icons.CopyOutlined iconColor={theme.colors.grayscale.base} />;
+ node = <Icons.CopyOutlined />;
} else if (copyNode === 'Text') {
node = <span role="button">Copy</span>;
}
diff --git a/superset-frontend/src/components/Datasource/CollectionTable.tsx
b/superset-frontend/src/components/Datasource/CollectionTable.tsx
index 259de8e2a0..0364c0d40d 100644
--- a/superset-frontend/src/components/Datasource/CollectionTable.tsx
+++ b/superset-frontend/src/components/Datasource/CollectionTable.tsx
@@ -153,7 +153,7 @@ const StyledButtonWrapper = styled.span`
margin-top: ${theme.gridUnit * 3}px;
margin-left: ${theme.gridUnit * 3}px;
button>span>:first-of-type {
- margin-right:0;
+ margin-right: 0;
}
`}
`;
diff --git a/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
b/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
index c49e9f22e6..404788aea5 100644
--- a/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
+++ b/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
@@ -976,15 +976,13 @@ class DatasourceEditor extends PureComponent {
{this.state.isEditMode ? (
<Icons.UnlockOutlined
iconSize="xl"
- iconColor={theme.colors.grayscale.base}
- css={theme => ({
- margin: `auto ${theme.gridUnit}px auto 0`,
- })}
+ css={theme => css`
+ margin: auto ${theme.gridUnit}px auto 0;
+ `}
/>
) : (
<Icons.LockOutlined
iconSize="xl"
- iconColor={theme.colors.grayscale.base}
css={theme => ({
margin: `auto ${theme.gridUnit}px auto 0`,
})}
diff --git a/superset-frontend/src/components/Datasource/DatasourceModal.tsx
b/superset-frontend/src/components/Datasource/DatasourceModal.tsx
index 9878e5dedc..ef25789aed 100644
--- a/superset-frontend/src/components/Datasource/DatasourceModal.tsx
+++ b/superset-frontend/src/components/Datasource/DatasourceModal.tsx
@@ -302,7 +302,6 @@ const DatasourceModal:
FunctionComponent<DatasourceModalProps> = ({
title={
<span>
<Icons.EditOutlined
- iconColor={theme.colors.grayscale.base}
css={{ margin: `auto ${theme.gridUnit * 2}px auto 0` }}
data-test="edit-alt"
/>
diff --git a/superset-frontend/src/components/DropdownSelectableIcon/index.tsx
b/superset-frontend/src/components/DropdownSelectableIcon/index.tsx
index 23aaae0c10..9444f4f5d6 100644
--- a/superset-frontend/src/components/DropdownSelectableIcon/index.tsx
+++ b/superset-frontend/src/components/DropdownSelectableIcon/index.tsx
@@ -76,7 +76,7 @@ const StyledMenu = styled(Menu)`
theme.gridUnit
}px ${theme.gridUnit * 3}px;
}
- .ant-dropdown-menu-item-selected {
+ .antd5-dropdown-menu-item-selected {
color: ${theme.colors.grayscale.dark1};
background-color: ${theme.colors.primary.light5};
}
diff --git a/superset-frontend/src/components/FaveStar/index.tsx
b/superset-frontend/src/components/FaveStar/index.tsx
index 51ba5343e3..e33981ccef 100644
--- a/superset-frontend/src/components/FaveStar/index.tsx
+++ b/superset-frontend/src/components/FaveStar/index.tsx
@@ -68,7 +68,7 @@ const FaveStar = ({
role="button"
>
{isStarred ? (
- <Icons.StarFilled iconColor={theme.colors.warning.base} />
+ <Icons.StarFilled iconSize="l" iconColor={theme.colors.warning.base} />
) : (
<Icons.StarOutlined
iconSize="l"
diff --git a/superset-frontend/src/components/Icons/Icon.tsx
b/superset-frontend/src/components/Icons/Icon.tsx
index 39e5627235..2cce187e17 100644
--- a/superset-frontend/src/components/Icons/Icon.tsx
+++ b/superset-frontend/src/components/Icons/Icon.tsx
@@ -35,7 +35,8 @@ const AntdIconComponent = ({
);
export const StyledIcon = styled(AntdIconComponent)<IconType>`
- ${({ iconColor }) => iconColor && `color: ${iconColor};`};
+ ${({ iconColor, theme }) =>
+ `color: ${iconColor || theme.colors.grayscale.base};`};
span {
// Fixing alignement on some of the icons
line-height: 0px;
diff --git a/superset-frontend/src/components/LastUpdated/LastUpdated.test.tsx
b/superset-frontend/src/components/LastUpdated/LastUpdated.test.tsx
index f020a47448..3e54656f12 100644
--- a/superset-frontend/src/components/LastUpdated/LastUpdated.test.tsx
+++ b/superset-frontend/src/components/LastUpdated/LastUpdated.test.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { fireEvent, render } from 'spec/helpers/testing-library';
+import { fireEvent, render, screen } from 'spec/helpers/testing-library';
import LastUpdated from '.';
@@ -27,11 +27,13 @@ test('renders the base component (no refresh)', () => {
expect(getByText(/^Last Updated .+$/)).toBeInTheDocument();
});
-test('renders a refresh action', async () => {
+test('renders a refresh action', () => {
const mockAction = jest.fn();
- const { getByLabelText } = render(
- <LastUpdated updatedAt={updatedAt} update={mockAction} />,
- );
- fireEvent.click(getByLabelText('refresh'));
+ render(<LastUpdated updatedAt={updatedAt} update={mockAction} />);
+
+ const button = screen.getByRole('button');
+ expect(button).toBeInTheDocument();
+
+ fireEvent.click(button);
expect(mockAction).toHaveBeenCalled();
});
diff --git a/superset-frontend/src/components/LastUpdated/index.tsx
b/superset-frontend/src/components/LastUpdated/index.tsx
index f60243dd1e..c7e31a18ac 100644
--- a/superset-frontend/src/components/LastUpdated/index.tsx
+++ b/superset-frontend/src/components/LastUpdated/index.tsx
@@ -50,13 +50,15 @@ const TextStyles = styled.span`
`;
const RefreshIcon = styled(Icons.SyncOutlined)`
- color: ${({ theme }) => theme.colors.primary.base};
+ ${({ theme }) => `
+ color: ${theme.colors.primary.base};
width: auto;
- height: ${({ theme }) => theme.gridUnit * 5}px;
+ height: ${theme.gridUnit * 5}px;
position: relative;
- top: ${({ theme }) => theme.gridUnit}px;
- left: ${({ theme }) => theme.gridUnit}px;
+ top: ${theme.gridUnit}px;
+ left: ${theme.gridUnit}px;
cursor: pointer;
+`};
`;
export const LastUpdated: FunctionComponent<LastUpdatedProps> = ({
diff --git a/superset-frontend/src/components/MessageToasts/Toast.tsx
b/superset-frontend/src/components/MessageToasts/Toast.tsx
index e26a1d5bc1..f3a1429ee6 100644
--- a/superset-frontend/src/components/MessageToasts/Toast.tsx
+++ b/superset-frontend/src/components/MessageToasts/Toast.tsx
@@ -40,7 +40,7 @@ const ToastContainer = styled.div`
`}
`;
-const NotificationStyledIcon = (theme: SupersetTheme) => css`
+const notificationStyledIcon = (theme: SupersetTheme) => css`
min-width: ${theme.gridUnit * 5}px;
color: ${theme.colors.grayscale.base};
margin-right: 0;
@@ -86,17 +86,17 @@ export default function Toast({ toast, onCloseToast }:
ToastPresenterProps) {
let className = 'toast--success';
let icon = (
- <Icons.CircleCheckSolid css={theme => NotificationStyledIcon(theme)} />
+ <Icons.CircleCheckSolid css={theme => notificationStyledIcon(theme)} />
);
if (toast.toastType === ToastType.Warning) {
- icon = <Icons.ExclamationCircleFilled css={NotificationStyledIcon} />;
+ icon = <Icons.ExclamationCircleFilled css={notificationStyledIcon} />;
className = 'toast--warning';
} else if (toast.toastType === ToastType.Danger) {
- icon = <Icons.ExclamationCircleFilled css={NotificationStyledIcon} />;
+ icon = <Icons.ExclamationCircleFilled css={notificationStyledIcon} />;
className = 'toast--danger';
} else if (toast.toastType === ToastType.Info) {
- icon = <Icons.InfoCircleFilled css={NotificationStyledIcon} />;
+ icon = <Icons.InfoCircleFilled css={notificationStyledIcon} />;
className = 'toast--info';
}
diff --git a/superset-frontend/src/components/PopoverDropdown/index.tsx
b/superset-frontend/src/components/PopoverDropdown/index.tsx
index 58a151e22b..b781ff6ce4 100644
--- a/superset-frontend/src/components/PopoverDropdown/index.tsx
+++ b/superset-frontend/src/components/PopoverDropdown/index.tsx
@@ -112,7 +112,6 @@ const PopoverDropdown = (props: PopoverDropdownProps) => {
{selected && renderButton(selected)}
<Icons.DownOutlined
iconSize="s"
- iconColor={theme.colors.grayscale.base}
css={{
marginTop: theme.gridUnit * 0.5,
marginLeft: theme.gridUnit * 0.5,
diff --git a/superset-frontend/src/dashboard/components/SliceAdder.tsx
b/superset-frontend/src/dashboard/components/SliceAdder.tsx
index 3cbef12b55..3d7acc2e76 100644
--- a/superset-frontend/src/dashboard/components/SliceAdder.tsx
+++ b/superset-frontend/src/dashboard/components/SliceAdder.tsx
@@ -117,11 +117,10 @@ const NewChartButtonContainer = styled.div`
const NewChartButton = styled(Button)`
${({ theme }) => css`
height: auto;
- & > .anticon + span {
- margin-left: 0;
+ & > .anticon > span {
+ margin: auto -${theme.gridUnit}px auto 0;
}
& > [role='img']:first-of-type {
- margin-right: ${theme.gridUnit}px;
padding-bottom: 1px;
line-height: 0;
}
@@ -366,12 +365,7 @@ class SliceAdder extends Component<SliceAdderProps,
SliceAdderState> {
)
}
>
- <Icons.PlusOutlined
- css={theme => ({
- margin: `auto -${theme.gridUnit * 2}px auto 0 !important`,
- })}
- iconSize="s"
- />
+ <Icons.PlusOutlined iconSize="s" />
{t('Create new chart')}
</NewChartButton>
</NewChartButtonContainer>
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
b/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
index 74009f5787..67fe61e4a9 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
@@ -118,10 +118,7 @@ const CloseIconWithDropIndicator = props => {
const theme = useTheme();
return (
<>
- <Icons.CloseOutlined
- iconSize="s"
- iconColor={theme.colors.grayscale.base}
- />
+ <Icons.CloseOutlined iconSize="s" />
{props.showDropIndicators.right && (
<DropIndicator className="drop-indicator-right" pos="right" />
)}
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingTreePanel.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingTreePanel.tsx
index abd8b43985..997340cc6e 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingTreePanel.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingTreePanel.tsx
@@ -118,7 +118,6 @@ const ChartSelect = ({
<Tooltip title={t('Tooltip')} placement="top">
<Icons.InfoCircleOutlined
iconSize="xs"
- iconColor={theme.colors.grayscale.base}
css={css`
& > span {
line-height: 0;
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/index.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/index.tsx
index 371177cfd5..71af10ced1 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/index.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/index.tsx
@@ -19,13 +19,7 @@
import { useCallback, useMemo, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
-import {
- FeatureFlag,
- isFeatureEnabled,
- styled,
- t,
- useTheme,
-} from '@superset-ui/core';
+import { FeatureFlag, isFeatureEnabled, styled, t } from '@superset-ui/core';
import { MenuProps } from 'src/components/Menu';
import { FilterBarOrientation, RootState } from 'src/dashboard/types';
import {
@@ -75,7 +69,6 @@ const isOrientation = (o: SelectedKey): o is
FilterBarOrientation =>
const FilterBarSettings = () => {
const dispatch = useDispatch();
- const theme = useTheme();
const isCrossFiltersEnabled = useSelector<RootState, boolean>(
({ dashboardInfo }) => dashboardInfo.crossFiltersEnabled,
);
@@ -277,7 +270,6 @@ const FilterBarSettings = () => {
<Icons.SettingOutlined
iconSize="xl"
name="gear"
- iconColor={theme.colors.grayscale.base}
data-test="filterbar-orientation-icon"
/>
</Button>
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx
index b902ced112..d8b86e6084 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx
@@ -75,7 +75,6 @@ const HorizontalDivider = ({ title, description }:
FilterDividerProps) => {
<Icons.BookOutlined
data-test="divider-description-icon"
iconSize="l"
- iconColor={theme.colors.grayscale.base}
css={css`
margin: 0 ${theme.gridUnit * 1.5}px;
vertical-align: unset;
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx
index 3e04b7684d..77c1280ab8 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
/* eslint-disable no-param-reassign */
-import { css, styled, t, useTheme } from '@superset-ui/core';
+import { css, styled, t } from '@superset-ui/core';
import { memo, FC } from 'react';
import Icons from 'src/components/Icons';
import Button from 'src/components/Button';
@@ -66,8 +66,6 @@ type HeaderProps = {
};
const Header: FC<HeaderProps> = ({ toggleFiltersBar }) => {
- const theme = useTheme();
-
return (
<Wrapper>
<TitleArea>
@@ -82,7 +80,6 @@ const Header: FC<HeaderProps> = ({ toggleFiltersBar }) => {
<Icons.VerticalAlignTopOutlined
iconSize="xl"
css={{ transform: 'rotate(-90deg)' }}
- iconColor={theme.colors.grayscale.base}
/>
</HeaderButton>
</TitleArea>
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx
index c2d7aec38f..4d1f955c04 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx
@@ -206,7 +206,6 @@ const VerticalFilterBar: FC<VerticalBarProps> = ({
{...getFilterBarTestId('expand-button')}
/>
<Icons.FilterOutlined
- iconColor={theme.colors.grayscale.base}
{...getFilterBarTestId('filter-icon')}
iconSize="l"
/>
diff --git
a/superset-frontend/src/explore/components/DataTableControl/index.tsx
b/superset-frontend/src/explore/components/DataTableControl/index.tsx
index bd03ddd6c9..cb8f0452c1 100644
--- a/superset-frontend/src/explore/components/DataTableControl/index.tsx
+++ b/superset-frontend/src/explore/components/DataTableControl/index.tsx
@@ -68,7 +68,6 @@ export const CopyToClipboardButton = ({
data?: Record<string, any>;
columns?: string[];
}) => {
- const theme = useTheme();
return (
<CopyToClipboard
text={
@@ -77,7 +76,6 @@ export const CopyToClipboardButton = ({
wrapped={false}
copyNode={
<Icons.CopyOutlined
- iconColor={theme.colors.grayscale.base}
iconSize="l"
aria-label={t('Copy')}
role="button"
@@ -112,12 +110,7 @@ export const FilterInput = ({
const debouncedChangeHandler = debounce(onChangeHandler, SLOW_DEBOUNCE);
return (
<Input
- prefix={
- <Icons.SearchOutlined
- iconSize="l"
- iconColor={theme.colors.grayscale.base}
- />
- }
+ prefix={<Icons.SearchOutlined iconSize="l" />}
placeholder={t('Search')}
onChange={(event: any) => {
const filterText = event.target.value;
diff --git
a/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx
b/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx
index a5dee9f17e..3f5d5a17f2 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx
@@ -160,13 +160,11 @@ export const DataTablesPane = ({
const caretIcon = panelOpen ? (
<Icons.CaretUpOutlined
iconSize="l"
- iconColor={theme.colors.grayscale.base}
aria-label={t('Collapse data panel')}
/>
) : (
<Icons.CaretDownOutlined
iconSize="l"
- iconColor={theme.colors.grayscale.base}
aria-label={t('Expand data panel')}
/>
);
diff --git a/superset-frontend/src/explore/components/PropertiesModal/index.tsx
b/superset-frontend/src/explore/components/PropertiesModal/index.tsx
index 79283ccd5f..fac53912ea 100644
--- a/superset-frontend/src/explore/components/PropertiesModal/index.tsx
+++ b/superset-frontend/src/explore/components/PropertiesModal/index.tsx
@@ -250,7 +250,6 @@ function PropertiesModal({
title={
<span>
<Icons.EditOutlined
- iconColor={theme.colors.grayscale.base}
css={{ margin: `auto ${theme.gridUnit * 2}px auto 0` }}
data-test="edit-alt"
/>
diff --git
a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
index e47c7e9df0..771ec25da1 100644
---
a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
+++
b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
@@ -351,7 +351,7 @@ export default function DateFilterLabel(props:
DateFilterControlProps) {
const title = (
<IconWrapper>
- <Icons.EditOutlined iconColor={theme.colors.grayscale.base} />
+ <Icons.EditOutlined />
<span className="text">{t('Edit time range')}</span>
</IconWrapper>
);
diff --git
a/superset-frontend/src/explore/components/controls/DateFilterControl/components/DateLabel.tsx
b/superset-frontend/src/explore/components/controls/DateFilterControl/components/DateLabel.tsx
index f017490ece..b16d3ded78 100644
---
a/superset-frontend/src/explore/components/controls/DateFilterControl/components/DateLabel.tsx
+++
b/superset-frontend/src/explore/components/controls/DateFilterControl/components/DateLabel.tsx
@@ -19,7 +19,7 @@
import { forwardRef, MouseEvent, ReactNode, RefObject } from 'react';
-import { css, styled, useTheme, t } from '@superset-ui/core';
+import { css, styled, t } from '@superset-ui/core';
import Icons from 'src/components/Icons';
export type DateLabelProps = {
@@ -86,7 +86,6 @@ const LabelContainer = styled.div<{
export const DateLabel = forwardRef(
(props: DateLabelProps, ref: RefObject<HTMLSpanElement>) => {
- const theme = useTheme();
return (
<LabelContainer {...props} tabIndex={0} role="button">
<span
@@ -96,10 +95,7 @@ export const DateLabel = forwardRef(
>
{typeof props.label === 'string' ? t(props.label) : props.label}
</span>
- <Icons.CalendarOutlined
- iconSize="s"
- iconColor={theme.colors.grayscale.base}
- />
+ <Icons.CalendarOutlined iconSize="s" />
</LabelContainer>
);
},
diff --git
a/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/DashboardsSubMenu.tsx
b/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/DashboardsSubMenu.tsx
index a2ca76a060..44db4de824 100644
---
a/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/DashboardsSubMenu.tsx
+++
b/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/DashboardsSubMenu.tsx
@@ -105,7 +105,6 @@ const DashboardsSubMenu = ({
</div>
<Icons.Full
iconSize="l"
- iconColor={theme.colors.grayscale.base}
css={css`
margin-left: ${theme.gridUnit * 2}px;
visibility: ${hoveredItem === dashboard.id
diff --git a/superset-frontend/src/features/alerts/AlertReportModal.tsx
b/superset-frontend/src/features/alerts/AlertReportModal.tsx
index 5b957af02e..517d66d009 100644
--- a/superset-frontend/src/features/alerts/AlertReportModal.tsx
+++ b/superset-frontend/src/features/alerts/AlertReportModal.tsx
@@ -1920,7 +1920,7 @@ const AlertReportModal:
FunctionComponent<AlertReportModalProps> = ({
))}
{
// Prohibit 'add notification method' button if only one present
- true && (
+ allowedNotificationMethodsCount > notificationSettings.length && (
<NotificationMethodAdd
data-test="notification-add"
status={notificationAddState}
diff --git
a/superset-frontend/src/features/alerts/components/NotificationMethod.tsx
b/superset-frontend/src/features/alerts/components/NotificationMethod.tsx
index 292bb987f1..5406e36586 100644
--- a/superset-frontend/src/features/alerts/components/NotificationMethod.tsx
+++ b/superset-frontend/src/features/alerts/components/NotificationMethod.tsx
@@ -447,7 +447,7 @@ export const NotificationMethod:
FunctionComponent<NotificationMethodProps> = ({
className="delete-button"
onClick={() => onRemove(index)}
>
- <Icons.DeleteOutlined iconColor={theme.colors.grayscale.base}
/>
+ <Icons.DeleteOutlined />
</span>
) : null}
</div>
diff --git
a/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx
b/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx
index 7e55affde8..5d119c7ed5 100644
--- a/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx
+++ b/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx
@@ -238,13 +238,11 @@ const AnnotationLayerModal:
FunctionComponent<AnnotationLayerModalProps> = ({
<h4 data-test="annotation-layer-modal-title">
{isEditMode ? (
<Icons.EditOutlined
- iconColor={theme.colors.grayscale.base}
css={{ margin: `auto ${theme.gridUnit * 2}px auto 0` }}
/>
) : (
<Icons.PlusOutlined
iconSize="l"
- iconColor={theme.colors.grayscale.base}
css={{ margin: `auto ${theme.gridUnit * 2}px auto 0` }}
/>
)}
diff --git a/superset-frontend/src/features/annotations/AnnotationModal.tsx
b/superset-frontend/src/features/annotations/AnnotationModal.tsx
index 197975e5a1..b95444cacf 100644
--- a/superset-frontend/src/features/annotations/AnnotationModal.tsx
+++ b/superset-frontend/src/features/annotations/AnnotationModal.tsx
@@ -280,13 +280,11 @@ const AnnotationModal:
FunctionComponent<AnnotationModalProps> = ({
<h4 data-test="annotation-modal-title">
{isEditMode ? (
<Icons.EditOutlined
- iconColor={theme.colors.grayscale.base}
css={{ margin: `auto ${theme.gridUnit * 2}px auto 0` }}
/>
) : (
<Icons.PlusOutlined
iconSize="l"
- iconColor={theme.colors.grayscale.base}
css={{ margin: `auto ${theme.gridUnit * 2}px auto 0` }}
/>
)}
diff --git a/superset-frontend/src/features/charts/ChartCard.tsx
b/superset-frontend/src/features/charts/ChartCard.tsx
index 9a3bdfa992..cbc94f5374 100644
--- a/superset-frontend/src/features/charts/ChartCard.tsx
+++ b/superset-frontend/src/features/charts/ChartCard.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { isFeatureEnabled, FeatureFlag, t, useTheme } from '@superset-ui/core';
+import { isFeatureEnabled, FeatureFlag, t } from '@superset-ui/core';
import { Link, useHistory } from 'react-router-dom';
import ConfirmStatusChange from 'src/components/ConfirmStatusChange';
import Icons from 'src/components/Icons';
@@ -68,8 +68,6 @@ export default function ChartCard({
const canEdit = hasPerm('can_write');
const canDelete = hasPerm('can_write');
const canExport = hasPerm('can_export');
- const theme = useTheme();
-
const menu = (
<Menu>
{canEdit && (
@@ -187,10 +185,7 @@ export default function ChartCard({
)}
<Dropdown dropdownRender={() => menu} trigger={['click', 'hover']}>
<Button buttonSize="xsmall" type="link">
- <Icons.MoreOutlined
- iconSize="xl"
- iconColor={theme.colors.grayscale.base}
- />
+ <Icons.MoreOutlined iconSize="xl" />
</Button>
</Dropdown>
</ListViewCard.Actions>
diff --git a/superset-frontend/src/features/cssTemplates/CssTemplateModal.tsx
b/superset-frontend/src/features/cssTemplates/CssTemplateModal.tsx
index e339f15677..a185cfb173 100644
--- a/superset-frontend/src/features/cssTemplates/CssTemplateModal.tsx
+++ b/superset-frontend/src/features/cssTemplates/CssTemplateModal.tsx
@@ -231,13 +231,11 @@ const CssTemplateModal:
FunctionComponent<CssTemplateModalProps> = ({
<h4 data-test="css-template-modal-title">
{isEditMode ? (
<Icons.EditOutlined
- iconColor={theme.colors.grayscale.base}
css={{ margin: `auto ${theme.gridUnit * 2}px auto 0` }}
/>
) : (
<Icons.PlusOutlined
iconSize="l"
- iconColor={theme.colors.grayscale.base}
css={{ margin: `auto ${theme.gridUnit * 2}px auto 0` }}
/>
)}
diff --git a/superset-frontend/src/features/dashboards/DashboardCard.tsx
b/superset-frontend/src/features/dashboards/DashboardCard.tsx
index 8740860e30..7b349ef81e 100644
--- a/superset-frontend/src/features/dashboards/DashboardCard.tsx
+++ b/superset-frontend/src/features/dashboards/DashboardCard.tsx
@@ -22,7 +22,6 @@ import {
isFeatureEnabled,
FeatureFlag,
t,
- useTheme,
SupersetClient,
} from '@superset-ui/core';
import { CardStyles } from 'src/views/CRUD/utils';
@@ -67,9 +66,6 @@ function DashboardCard({
const canEdit = hasPerm('can_write');
const canDelete = hasPerm('can_write');
const canExport = hasPerm('can_export');
-
- const theme = useTheme();
-
const [thumbnailUrl, setThumbnailUrl] = useState<string | null>(null);
const [fetchingThumbnail, setFetchingThumbnail] = useState<boolean>(false);
@@ -195,10 +191,7 @@ function DashboardCard({
)}
<Dropdown dropdownRender={() => menu} trigger={['hover', 'click']}>
<Button buttonSize="xsmall" type="link">
- <Icons.MoreOutlined
- iconSize="xl"
- iconColor={theme.colors.grayscale.base}
- />
+ <Icons.MoreOutlined iconSize="xl" />
</Button>
</Dropdown>
</ListViewCard.Actions>
diff --git
a/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx
b/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx
index a2b9d20681..103467b629 100644
---
a/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx
+++
b/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { t, styled, useTheme } from '@superset-ui/core';
+import { t, styled } from '@superset-ui/core';
import Icons from 'src/components/Icons';
import Alert from 'src/components/Alert';
import Table, { ColumnsType, TableSize } from 'src/components/Table';
@@ -68,11 +68,10 @@ const StyledHeader = styled.div<StyledHeaderProps>`
text-overflow: ellipsis;
.anticon:first-of-type {
- margin-right: ${theme.gridUnit * (MARGIN_MULTIPLIER + 1)}px;
+ margin-right: ${theme.gridUnit * 2}px;
+ vertical-align: text-top;
}
- .anticon:nth-of-type(2) {
- margin-left: ${theme.gridUnit * (MARGIN_MULTIPLIER + 1)}px;
`}
`;
@@ -257,7 +256,6 @@ const DatasetPanel = ({
hasError,
datasets,
}: IDatasetPanelProps) => {
- const theme = useTheme();
const hasColumns = Boolean(columnList?.length > 0);
const datasetNames = datasets?.map(dataset => dataset.table_name);
const tableWithDataset = datasets?.find(
@@ -333,12 +331,7 @@ const DatasetPanel = ({
}
title={tableName || ''}
>
- {tableName && (
- <Icons.InsertRowAboveOutlined
- css={{ margin: '0px!important', verticalAlign: 'baseline' }}
- iconColor={theme.colors.grayscale.base}
- />
- )}
+ <Icons.InsertRowAboveOutlined />
{tableName}
</StyledHeader>
</>
diff --git a/superset-frontend/src/features/home/SavedQueries.tsx
b/superset-frontend/src/features/home/SavedQueries.tsx
index b74311bd14..0f26ade5ef 100644
--- a/superset-frontend/src/features/home/SavedQueries.tsx
+++ b/superset-frontend/src/features/home/SavedQueries.tsx
@@ -335,10 +335,7 @@ const SavedQueries = ({
trigger={['click', 'hover']}
>
<Button buttonSize="xsmall" type="link">
- <Icons.MoreOutlined
- iconSize="xl"
- iconColor={theme.colors.grayscale.base}
- />
+ <Icons.MoreOutlined iconSize="xl" />
</Button>
</Dropdown>
</ListViewCard.Actions>
diff --git a/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx
b/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx
index b67924533e..f8f234e589 100644
--- a/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx
+++ b/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx
@@ -336,13 +336,11 @@ function RowLevelSecurityModal(props:
RowLevelSecurityModalProps) {
<h4 data-test="rls-modal-title">
{isEditMode ? (
<Icons.EditOutlined
- iconColor={theme.colors.grayscale.base}
css={{ margin: `auto ${theme.gridUnit * 2}px auto 0` }}
/>
) : (
<Icons.PlusOutlined
iconSize="xl"
- iconColor={theme.colors.grayscale.base}
css={{ margin: `auto ${theme.gridUnit * 2}px auto 0` }}
/>
)}
diff --git a/superset-frontend/src/features/tags/TagCard.tsx
b/superset-frontend/src/features/tags/TagCard.tsx
index d8da41587e..0bf1008f46 100644
--- a/superset-frontend/src/features/tags/TagCard.tsx
+++ b/superset-frontend/src/features/tags/TagCard.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { Link } from 'react-router-dom';
-import { isFeatureEnabled, FeatureFlag, t, useTheme } from '@superset-ui/core';
+import { isFeatureEnabled, FeatureFlag, t } from '@superset-ui/core';
import { CardStyles } from 'src/views/CRUD/utils';
import { Dropdown } from 'src/components/Dropdown';
import { Menu } from 'src/components/Menu';
@@ -59,7 +59,6 @@ function TagCard({
refreshData();
};
- const theme = useTheme();
const menu = (
<Menu>
{canDelete && (
@@ -111,10 +110,7 @@ function TagCard({
>
<Dropdown dropdownRender={() => menu} trigger={['click', 'hover']}>
<Button buttonSize="xsmall" type="link">
- <Icons.MoreOutlined
- iconSize="xl"
- iconColor={theme.colors.grayscale.base}
- />
+ <Icons.MoreOutlined iconSize="xl" />
</Button>
</Dropdown>
</ListViewCard.Actions>
diff --git a/superset-frontend/src/pages/QueryHistoryList/index.tsx
b/superset-frontend/src/pages/QueryHistoryList/index.tsx
index b4435058ea..58a573e5c4 100644
--- a/superset-frontend/src/pages/QueryHistoryList/index.tsx
+++ b/superset-frontend/src/pages/QueryHistoryList/index.tsx
@@ -195,9 +195,7 @@ function QueryList({ addDangerToast }: QueryListProps) {
status === QueryState.Scheduled ||
status === QueryState.Pending
) {
- statusConfig.name = (
- <Icons.Queued iconColor={theme.colors.grayscale.base} />
- );
+ statusConfig.name = <Icons.Queued />;
statusConfig.label = t('Scheduled');
}
return (
@@ -357,7 +355,7 @@ function QueryList({ addDangerToast }: QueryListProps) {
}: any) => (
<Tooltip title={t('Open query in SQL Lab')} placement="bottom">
<Link to={`/sqllab?queryId=${id}`}>
- <Icons.Full iconColor={theme.colors.grayscale.base} />
+ <Icons.Full />
</Link>
</Tooltip>
),
