This is an automated email from the ASF dual-hosted git repository.
diegopucci 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 4b7ebd6b28 chore(Icon): Refactor and enhance
4b7ebd6b28 is described below
commit 4b7ebd6b28adf34ea252825dbe5ab7368612aaaa
Author: Diego Pucci <[email protected]>
AuthorDate: Thu Mar 6 13:41:35 2025 +0100
chore(Icon): Refactor and enhance
---
.../cypress/applitools/chartlist.test.ts | 4 +-
.../cypress/applitools/dashboardlist.test.ts | 4 +-
.../cypress/e2e/chart_list/list.test.ts | 6 +-
.../cypress/e2e/dashboard/_skip.controls.test.ts | 4 +-
.../cypress/e2e/dashboard/actions.test.js | 6 +-
.../cypress/e2e/dashboard_list/list.test.ts | 16 ++--
.../cypress-base/cypress/support/directories.ts | 24 +++---
.../cypress-base/cypress/utils/index.ts | 4 +-
.../SaveDatasetActionButton.test.tsx | 6 +-
.../SqlLab/components/SaveQuery/SaveQuery.test.tsx | 6 +-
.../src/SqlLab/components/SaveQuery/index.tsx | 2 +-
.../DatabaseSelector/DatabaseSelector.test.tsx | 2 +-
.../Datasource/DatasourceEditor.test.jsx | 4 +-
.../src/components/Datasource/DatasourceModal.tsx | 5 +-
.../DropdownContainer/DropdownContainer.test.tsx | 2 +-
.../src/components/FaveStar/FaveStar.test.tsx | 6 +-
.../src/components/Icons/AntdEnhanced.tsx | 24 +++---
.../src/components/Icons/BaseIcon.tsx | 76 +++++++++++++++++++
superset-frontend/src/components/Icons/Icon.tsx | 86 ++--------------------
.../src/components/Icons/Icons.stories.tsx | 2 +-
superset-frontend/src/components/Icons/index.tsx | 2 +-
.../src/components/Icons/{IconType.ts => types.ts} | 18 ++++-
.../DetailsPanel/DetailsPanel.test.tsx | 14 ++--
.../FilterIndicator/FilterIndicator.test.tsx | 6 +-
.../dashboard/components/Header/Header.test.tsx | 16 ++--
.../components/gridComponents/Divider.test.jsx | 2 +-
.../components/gridComponents/Header.test.jsx | 4 +-
.../components/menu/BackgroundStyleDropdown.tsx | 6 +-
.../ScopingModal/ChartsScopingListPanel.test.tsx | 2 +-
.../ScopingModal/ChartsScopingListPanel.tsx | 4 +-
.../ScopingModal/ScopingModal.test.tsx | 2 +-
.../nativeFilters/FilterBar/FilterBar.test.tsx | 12 ++-
.../FilterBarSettings/FilterBarSettings.test.tsx | 46 +++++-------
.../FilterBar/FilterBarSettings/index.tsx | 4 +-
.../nativeFilters/FilterBar/Header/Header.test.tsx | 4 +-
.../nativeFilters/FilterBar/Header/index.tsx | 4 +-
.../nativeFilters/FilterCard/FilterCard.test.tsx | 2 +-
.../FiltersConfigForm/FiltersConfigForm.tsx | 5 +-
.../FiltersConfigModal/FiltersConfigModal.test.tsx | 6 +-
.../src/explore/components/ControlHeader.tsx | 4 +-
.../DatasourcePanel/DatasourcePanel.test.tsx | 2 +-
.../CollectionControl/CollectionControl.test.tsx | 4 +-
.../ColorSchemeControl/ColorSchemeControl.test.tsx | 6 +-
.../controls/ColorSchemeControl/index.tsx | 4 +-
.../ConditionalFormattingControl.tsx | 4 +-
.../DatasourceControl/DatasourceControl.test.jsx | 6 +-
.../controls/DatasourceControl/index.jsx | 2 +-
.../DndColumnSelectControl/Option.test.tsx | 10 +--
.../controls/DndColumnSelectControl/Option.tsx | 10 ++-
.../AdhocFilterEditPopoverSqlTabContent/index.tsx | 8 +-
.../AdhocFilterOption/AdhocFilterOption.test.tsx | 4 +-
.../components/controls/OptionControls/index.tsx | 4 +-
.../VizTypeControl/VizTypeControl.test.tsx | 2 +-
.../databases/DatabaseModal/index.test.tsx | 2 +-
.../AddDataset/LeftPanel/LeftPanel.test.tsx | 4 +-
.../src/features/home/DashboardTable.test.tsx | 4 +-
.../src/pages/ChartList/ChartList.test.jsx | 20 ++---
.../src/pages/DashboardList/DashboardList.test.jsx | 8 +-
58 files changed, 282 insertions(+), 274 deletions(-)
diff --git
a/superset-frontend/cypress-base/cypress/applitools/chartlist.test.ts
b/superset-frontend/cypress-base/cypress/applitools/chartlist.test.ts
index fca0eef034..ca42f98f69 100644
--- a/superset-frontend/cypress-base/cypress/applitools/chartlist.test.ts
+++ b/superset-frontend/cypress-base/cypress/applitools/chartlist.test.ts
@@ -28,7 +28,7 @@ describe('charts list view', () => {
});
it('should load the Charts list', () => {
- cy.get('[aria-label="UnorderedListOutlined"]').click();
+ cy.get('[aria-label="unordered-list"]').click();
cy.eyesOpen({
testName: 'Charts UnorderedListOutlined',
});
@@ -36,7 +36,7 @@ describe('charts list view', () => {
});
it('should load the Charts card list', () => {
- cy.get('[aria-label="card-AppstoreOutlined"]').click();
+ cy.get('[aria-label="appstore"]').click();
cy.eyesOpen({
testName: 'Charts AppstoreOutlined',
});
diff --git
a/superset-frontend/cypress-base/cypress/applitools/dashboardlist.test.ts
b/superset-frontend/cypress-base/cypress/applitools/dashboardlist.test.ts
index 49bee10141..66afd49aea 100644
--- a/superset-frontend/cypress-base/cypress/applitools/dashboardlist.test.ts
+++ b/superset-frontend/cypress-base/cypress/applitools/dashboardlist.test.ts
@@ -28,7 +28,7 @@ describe('dashboard list view', () => {
});
it('should load the Dashboards list', () => {
- cy.get('[aria-label="UnorderedListOutlined"]').click();
+ cy.get('[aria-label="unordered-list"]').click();
cy.eyesOpen({
testName: 'Dashboards UnorderedListOutlined',
});
@@ -36,7 +36,7 @@ describe('dashboard list view', () => {
});
it('should load the Dashboards card list', () => {
- cy.get('[aria-label="AppstoreOutlined"]').click();
+ cy.get('[aria-label="appstore"]').click();
cy.eyesOpen({
testName: 'Dashboards AppstoreOutlined',
});
diff --git a/superset-frontend/cypress-base/cypress/e2e/chart_list/list.test.ts
b/superset-frontend/cypress-base/cypress/e2e/chart_list/list.test.ts
index cec78c8330..9f689c014b 100644
--- a/superset-frontend/cypress-base/cypress/e2e/chart_list/list.test.ts
+++ b/superset-frontend/cypress-base/cypress/e2e/chart_list/list.test.ts
@@ -35,12 +35,12 @@ function orderAlphabetical() {
}
function openProperties() {
- cy.get('[aria-label="MoreOutlined"]').eq(1).click();
+ cy.get('[aria-label="more"]').eq(1).click();
cy.getBySel('chart-list-edit-option').click();
}
function openMenu() {
- cy.get('[aria-label="MoreOutlined"]').eq(1).click();
+ cy.get('[aria-label="more"]').eq(1).click();
}
function confirmDelete() {
@@ -263,7 +263,7 @@ describe('Charts list', () => {
// deletes in list-view
setGridMode('list');
cy.getBySel('table-row').eq(1).contains('2 - Sample chart');
- cy.getBySel('DeleteOutlined').eq(1).click();
+ cy.getBySel('delete').eq(1).click();
confirmDelete();
cy.wait('@delete');
cy.getBySel('table-row').eq(1).should('not.contain', '2 - Sample chart');
diff --git
a/superset-frontend/cypress-base/cypress/e2e/dashboard/_skip.controls.test.ts
b/superset-frontend/cypress-base/cypress/e2e/dashboard/_skip.controls.test.ts
index 73e699bb14..e527fcda75 100644
---
a/superset-frontend/cypress-base/cypress/e2e/dashboard/_skip.controls.test.ts
+++
b/superset-frontend/cypress-base/cypress/e2e/dashboard/_skip.controls.test.ts
@@ -62,7 +62,7 @@ describe.skip('Dashboard top-level controls', () => {
// should allow force refresh
WORLD_HEALTH_CHARTS.forEach(waitForChartLoad);
getChartAliasesBySpec(WORLD_HEALTH_CHARTS).then(aliases => {
- cy.get('[aria-label="EllipsisOutlined"]').click();
+ cy.get('[aria-label="ellipsis"]').click();
cy.get('[data-test="refresh-dashboard-menu-item"]').should(
'not.have.class',
'antd5-dropdown-menu-item-disabled',
@@ -91,7 +91,7 @@ describe.skip('Dashboard top-level controls', () => {
});
});
});
- cy.get('[aria-label="EllipsisOutlined"]').click();
+ cy.get('[aria-label="ellipsis"]').click();
cy.get('[data-test="refresh-dashboard-menu-item"]').and(
'not.have.class',
'antd5-dropdown-menu-item-disabled',
diff --git
a/superset-frontend/cypress-base/cypress/e2e/dashboard/actions.test.js
b/superset-frontend/cypress-base/cypress/e2e/dashboard/actions.test.js
index 08298ac3f1..64dfed1858 100644
--- a/superset-frontend/cypress-base/cypress/e2e/dashboard/actions.test.js
+++ b/superset-frontend/cypress-base/cypress/e2e/dashboard/actions.test.js
@@ -30,7 +30,7 @@ describe('Dashboard actions', () => {
// Find and click StarOutlined (adds to favorites)
cy.getBySel('dashboard-header-container')
- .find("[aria-label='StarOutlined']")
+ .find("[aria-label='star']")
.as('starIconOutlined')
.should('exist')
.click();
@@ -39,7 +39,7 @@ describe('Dashboard actions', () => {
// After clicking, StarFilled should appear
cy.getBySel('dashboard-header-container')
- .find("[aria-label='StarFilled']")
+ .find("[aria-label='star']")
.as('starIconFilled')
.should('exist');
@@ -55,7 +55,7 @@ describe('Dashboard actions', () => {
// After clicking, StarOutlined should reappear
cy.getBySel('dashboard-header-container')
- .find("[aria-label='StarOutlined']")
+ .find("[aria-label='star']")
.as('starIconOutlinedAfter')
.should('exist');
diff --git
a/superset-frontend/cypress-base/cypress/e2e/dashboard_list/list.test.ts
b/superset-frontend/cypress-base/cypress/e2e/dashboard_list/list.test.ts
index 5a5b989206..17a7ea074f 100644
--- a/superset-frontend/cypress-base/cypress/e2e/dashboard_list/list.test.ts
+++ b/superset-frontend/cypress-base/cypress/e2e/dashboard_list/list.test.ts
@@ -32,12 +32,12 @@ function orderAlphabetical() {
}
function openProperties() {
- cy.get('[aria-label="MoreOutlined"]').first().click();
+ cy.get('[aria-label="more"]').first().click();
cy.getBySel('dashboard-card-option-edit-button').click();
}
function openMenu() {
- cy.get('[aria-label="MoreOutlined"]').first().click();
+ cy.get('[aria-label="more"]').first().click();
}
function confirmDelete(bulk = false) {
@@ -156,19 +156,13 @@ describe('Dashboards list', () => {
orderAlphabetical();
cy.getBySel('styled-card').first().contains('1 - Sample dashboard');
- cy.getBySel('styled-card')
- .first()
- .find("[aria-label='StarOutlined']")
- .click();
+ cy.getBySel('styled-card').first().find("[aria-label='star']").click();
cy.wait('@select');
- cy.getBySel('styled-card')
- .first()
- .find("[aria-label='StarFilled']")
- .click();
+ cy.getBySel('styled-card').first().find("[aria-label='star']").click();
cy.wait('@unselect');
cy.getBySel('styled-card')
.first()
- .find("[aria-label='StarFilled']")
+ .find("[aria-label='star']")
.should('not.exist');
});
diff --git a/superset-frontend/cypress-base/cypress/support/directories.ts
b/superset-frontend/cypress-base/cypress/support/directories.ts
index 62799d512e..43f7d6fe15 100644
--- a/superset-frontend/cypress-base/cypress/support/directories.ts
+++ b/superset-frontend/cypress-base/cypress/support/directories.ts
@@ -252,7 +252,7 @@ export const datasetsList = {
aceTextInput: '.ace_text-input',
sourceSQLInput: '.ace_content',
sourceVirtualSQLRadio: ':nth-child(2) > .ant-radio > .ant-radio-inner',
- sourcePadlock: '[aria-label=LockOutlined]',
+ sourcePadlock: '[aria-label=lock]',
legacy: {
panel: '.panel-body',
sqlInput: '#sql',
@@ -275,8 +275,8 @@ export const chartListView = {
bulkSelect: dataTestLocator('bulk-select'),
},
header: {
- cardView: '[aria-label="AppstoreOutlined"]',
- listView: '[aria-label="UnorderedListOutlined"]',
+ cardView: '[aria-label="appstore"]',
+ listView: '[aria-label="unordered-list"]',
sort: '[class="ant-select-selection-search-input"][aria-label="Sort"]',
sortRecentlyModifiedMenuOption: '[label="Recently modified"]',
sortAlphabeticalMenuOption: '[label="Alphabetical"]',
@@ -328,7 +328,7 @@ export const nativeFilters = {
filterItemsContainer: dataTestLocator('filter-title-container'),
tabsContainer: '[class="ant-tabs-nav-list"]',
tab: '.ant-tabs-tab',
- removeTab: '[aria-label="DeleteOutlined"]',
+ removeTab: '[aria-label="delete"]',
},
addFilter: dataTestLocator('add-filter-button'),
defaultValueCheck: '.ant-checkbox-checked',
@@ -373,7 +373,7 @@ export const nativeFilters = {
listItemNotActive: '[class="ant-tabs-tab ant-tabs-tab-with-remove"]',
listItemActive:
'[class="ant-tabs-tab ant-tabs-tab-with-remove ant-tabs-tab-active"]',
- removeIcon: '[aria-label="DeleteOutlined"]',
+ removeIcon: '[aria-label="delete"]',
},
filterItem: dataTestLocator('form-item-value'),
filterItemDropdown: '.ant-select-selection-search',
@@ -400,8 +400,8 @@ export const dashboardListView = {
card: dataTestLocator('styled-card'),
cardCover: '[class="antd5-card-cover"]',
cardImage: '[class="gradient-container"]',
- selectedStarIcon: "[aria-label='StarFilled']",
- unselectedStarIcon: "[aria-label='StarOutlined']",
+ selectedStarIcon: "[aria-label='star']",
+ unselectedStarIcon: "[aria-label='star']",
starIcon: dataTestLocator('fave-unfave-icon'),
},
deleteModal: {
@@ -410,8 +410,8 @@ export const dashboardListView = {
},
table: {
starIcon: dataTestLocator('fave-unfave-icon'),
- selectedStarIcon: "[aria-label='StarFilled']",
- unselectedStarIcon: "[aria-label='StarOutlined']",
+ selectedStarIcon: "[aria-label='star']",
+ unselectedStarIcon: "[aria-label='star']",
bulkSelect: {
checkboxOff: '[aria-label="checkbox-off"]',
checkboxOn: '[aria-label="checkbox-on"]',
@@ -436,8 +436,8 @@ export const dashboardListView = {
importButton: dataTestLocator('modal-confirm-button'),
},
header: {
- cardView: '[aria-label="AppstoreOutlined"]',
- listView: '[aria-label="UnorderedListOutlined"]',
+ cardView: '[aria-label="appstore"]',
+ listView: '[aria-label="unordered-list"]',
sort: dataTestLocator('sort-header'),
sortDropdown: '.Select__menu',
statusFilterInput: `${dataTestLocator(
@@ -501,7 +501,7 @@ export const exploreView = {
optionField: dataTestLocator('option-label'),
fieldInput: '.Select__control input',
removeFieldValue: dataTestLocator('remove-control-button'),
- addFieldValue: '[aria-label="PlusOutlined"]',
+ addFieldValue: '[aria-label="plus"]',
vizType: dataTestLocator('visualization-type'),
runButton: dataTestLocator('run-query-button'),
saveQuery: dataTestLocator('query-save-button'),
diff --git a/superset-frontend/cypress-base/cypress/utils/index.ts
b/superset-frontend/cypress-base/cypress/utils/index.ts
index bc94cc67ee..2c8255ee6e 100644
--- a/superset-frontend/cypress-base/cypress/utils/index.ts
+++ b/superset-frontend/cypress-base/cypress/utils/index.ts
@@ -26,8 +26,8 @@ export interface ChartSpec {
}
const viewTypeIcons = {
- card: 'AppstoreOutlined',
- list: 'UnorderedListOutlined',
+ card: 'appstore',
+ list: 'unordered-list',
};
export function setGridMode(type: 'card' | 'list') {
diff --git
a/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/SaveDatasetActionButton.test.tsx
b/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/SaveDatasetActionButton.test.tsx
index 9948a58737..f5283dfd1e 100644
---
a/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/SaveDatasetActionButton.test.tsx
+++
b/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/SaveDatasetActionButton.test.tsx
@@ -36,7 +36,7 @@ describe('SaveDatasetActionButton', () => {
);
const saveBtn = screen.getByRole('button', { name: /save/i });
- const caretBtn = screen.getByRole('button', { name: /DownOutlined/i });
+ const caretBtn = screen.getByRole('button', { name: /down/i });
expect(
await screen.findByRole('button', { name: /save/i }),
@@ -53,9 +53,9 @@ describe('SaveDatasetActionButton', () => {
/>,
);
- const caretBtn = screen.getByRole('button', { name: /DownOutlined/i });
+ const caretBtn = screen.getByRole('button', { name: /down/i });
expect(
- await screen.findByRole('button', { name: /DownOutlined/i }),
+ await screen.findByRole('button', { name: /down/i }),
).toBeInTheDocument();
userEvent.click(caretBtn);
diff --git
a/superset-frontend/src/SqlLab/components/SaveQuery/SaveQuery.test.tsx
b/superset-frontend/src/SqlLab/components/SaveQuery/SaveQuery.test.tsx
index 092a8fcbd6..6c5e834659 100644
--- a/superset-frontend/src/SqlLab/components/SaveQuery/SaveQuery.test.tsx
+++ b/superset-frontend/src/SqlLab/components/SaveQuery/SaveQuery.test.tsx
@@ -179,7 +179,7 @@ describe('SavedQuery', () => {
await waitFor(() => {
const saveBtn = screen.getByRole('button', { name: /save/i });
- const caretBtn = screen.getByRole('button', { name: /DownOutlined/i });
+ const caretBtn = screen.getByRole('button', { name: /down/i });
expect(saveBtn).toBeVisible();
expect(caretBtn).toBeVisible();
@@ -193,7 +193,7 @@ describe('SavedQuery', () => {
});
const caretBtn = await screen.findByRole('button', {
- name: /DownOutlined/i,
+ name: /down/i,
});
userEvent.click(caretBtn);
@@ -212,7 +212,7 @@ describe('SavedQuery', () => {
});
const caretBtn = await screen.findByRole('button', {
- name: /DownOutlined/i,
+ name: /down/i,
});
userEvent.click(caretBtn);
diff --git a/superset-frontend/src/SqlLab/components/SaveQuery/index.tsx
b/superset-frontend/src/SqlLab/components/SaveQuery/index.tsx
index 5d55c69197..91ad7ed453 100644
--- a/superset-frontend/src/SqlLab/components/SaveQuery/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SaveQuery/index.tsx
@@ -57,7 +57,7 @@ export type QueryPayload = {
} & Pick<QueryEditor, 'dbId' | 'catalog' | 'schema' | 'sql'>;
const Styles = styled.span`
- span[role='img']:not([aria-label='DownOutlined']) {
+ span[role='img']:not([aria-label='down']) {
display: flex;
margin: 0;
color: ${({ theme }) => theme.colors.grayscale.base};
diff --git
a/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx
b/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx
index 0e92588c7f..62e0092b00 100644
---
a/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx
+++
b/superset-frontend/src/components/DatabaseSelector/DatabaseSelector.test.tsx
@@ -225,7 +225,7 @@ test('Refresh should work', async () => {
});
// click schema reload
- userEvent.click(screen.getByRole('button', { name: 'SyncOutlined' }));
+ userEvent.click(screen.getByRole('button', { name: 'sync' }));
await waitFor(() => {
expect(fetchMock.calls(databaseApiRoute).length).toBe(1);
diff --git
a/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx
b/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx
index d557f5cfc3..c748fd86cd 100644
--- a/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx
+++ b/superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx
@@ -169,7 +169,7 @@ describe('DatasourceEditor', () => {
});
it('Source Tab: edit mode', () => {
- const getLockBtn = screen.getByRole('img', { name: /LockOutlined/i });
+ const getLockBtn = screen.getByRole('img', { name: /lock/i });
userEvent.click(getLockBtn);
const physicalRadioBtn = screen.getByRole('radio', {
name: /physical \(table or view\)/i,
@@ -182,7 +182,7 @@ describe('DatasourceEditor', () => {
});
it('Source Tab: readOnly mode', () => {
- const getLockBtn = screen.getByRole('img', { name: /LockOutlined/i });
+ const getLockBtn = screen.getByRole('img', { name: /lock/i });
expect(getLockBtn).toBeInTheDocument();
const physicalRadioBtn = screen.getByRole('radio', {
name: /physical \(table or view\)/i,
diff --git a/superset-frontend/src/components/Datasource/DatasourceModal.tsx
b/superset-frontend/src/components/Datasource/DatasourceModal.tsx
index ef25789aed..2fa87f4b36 100644
--- a/superset-frontend/src/components/Datasource/DatasourceModal.tsx
+++ b/superset-frontend/src/components/Datasource/DatasourceModal.tsx
@@ -28,6 +28,7 @@ import {
t,
SupersetError,
useTheme,
+ css,
} from '@superset-ui/core';
import Icons from 'src/components/Icons';
@@ -302,7 +303,9 @@ const DatasourceModal:
FunctionComponent<DatasourceModalProps> = ({
title={
<span>
<Icons.EditOutlined
- css={{ margin: `auto ${theme.gridUnit * 2}px auto 0` }}
+ css={css`
+ margin: auto ${theme.gridUnit * 2}px auto 0;
+ `}
data-test="edit-alt"
/>
{t('Edit Dataset ')}
diff --git
a/superset-frontend/src/components/DropdownContainer/DropdownContainer.test.tsx
b/superset-frontend/src/components/DropdownContainer/DropdownContainer.test.tsx
index 83dbd8dcde..d5475c01d5 100644
---
a/superset-frontend/src/components/DropdownContainer/DropdownContainer.test.tsx
+++
b/superset-frontend/src/components/DropdownContainer/DropdownContainer.test.tsx
@@ -67,7 +67,7 @@ test('renders a dropdown trigger with custom icon', async ()
=> {
/>,
);
expect(
- await screen.findByRole('img', { name: 'LinkOutlined' }),
+ await screen.findByRole('img', { name: 'link' }),
).toBeInTheDocument();
});
});
diff --git a/superset-frontend/src/components/FaveStar/FaveStar.test.tsx
b/superset-frontend/src/components/FaveStar/FaveStar.test.tsx
index bb5e1a8f27..cf52070157 100644
--- a/superset-frontend/src/components/FaveStar/FaveStar.test.tsx
+++ b/superset-frontend/src/components/FaveStar/FaveStar.test.tsx
@@ -32,7 +32,7 @@ test('render right content', async () => {
const { rerender, findByRole } = render(<FaveStar {...props} isStarred />);
expect(screen.getByRole('button')).toBeInTheDocument();
- expect(screen.getByRole('img', { name: 'StarFilled' })).toBeInTheDocument();
+ expect(screen.getByRole('img', { name: 'star' })).toBeInTheDocument();
expect(props.saveFaveStar).toHaveBeenCalledTimes(0);
userEvent.click(screen.getByRole('button'));
@@ -40,7 +40,7 @@ test('render right content', async () => {
expect(props.saveFaveStar).toHaveBeenCalledWith(props.itemId, true);
rerender(<FaveStar {...props} />);
- expect(await findByRole('img', { name: 'StarOutlined'
})).toBeInTheDocument();
+ expect(await findByRole('img', { name: 'star' })).toBeInTheDocument();
expect(props.saveFaveStar).toHaveBeenCalledTimes(1);
userEvent.click(screen.getByRole('button'));
@@ -79,7 +79,7 @@ test('Call fetchFaveStar on first render and on itemId
change', async () => {
};
const { rerender, findByRole } = render(<FaveStar {...props} />);
- expect(await findByRole('img', { name: 'StarOutlined'
})).toBeInTheDocument();
+ expect(await findByRole('img', { name: 'star' })).toBeInTheDocument();
expect(props.fetchFaveStar).toHaveBeenCalledTimes(1);
expect(props.fetchFaveStar).toHaveBeenCalledWith(props.itemId);
diff --git a/superset-frontend/src/components/Icons/AntdEnhanced.tsx
b/superset-frontend/src/components/Icons/AntdEnhanced.tsx
index 829660f424..e45c27abf2 100644
--- a/superset-frontend/src/components/Icons/AntdEnhanced.tsx
+++ b/superset-frontend/src/components/Icons/AntdEnhanced.tsx
@@ -106,8 +106,8 @@ import {
UnorderedListOutlined,
WarningOutlined,
} from '@ant-design/icons';
-import { StyledIcon } from './Icon';
-import IconType from './IconType';
+import { IconType } from './types';
+import { BaseIconComponent } from './BaseIcon';
const AntdIcons = {
AlignCenterOutlined,
@@ -201,19 +201,13 @@ const AntdIcons = {
const AntdEnhancedIcons = Object.keys(AntdIcons)
.filter(k => !k.includes('TwoTone'))
.map(k => ({
- [k]: (props: IconType) => {
- const whatRole = props?.onClick ? 'button' : 'img';
- const ariaLabel = props['aria-label'] || k;
- return (
- <StyledIcon
- // @ts-ignore to remove
- component={AntdIcons[k as keyof typeof AntdIcons]}
- role={whatRole}
- aria-label={ariaLabel}
- {...props}
- />
- );
- },
+ [k]: (props: IconType) => (
+ <BaseIconComponent
+ component={AntdIcons[k as keyof typeof AntdIcons]}
+ fileName={k}
+ {...props}
+ />
+ ),
}))
.reduce((l, r) => ({ ...l, ...r }));
diff --git a/superset-frontend/src/components/Icons/BaseIcon.tsx
b/superset-frontend/src/components/Icons/BaseIcon.tsx
new file mode 100644
index 0000000000..eeb4d680c1
--- /dev/null
+++ b/superset-frontend/src/components/Icons/BaseIcon.tsx
@@ -0,0 +1,76 @@
+import { css } from '@emotion/react';
+import { useTheme } from '@superset-ui/core';
+import { AntdIconType, BaseIconProps, CustomIconType, IconType } from
'./types';
+
+const genAriaLabel = (fileName: string) => {
+ const name = fileName.replace(/_/g, '-'); // Replace underscores with dashes
+ const words = name.split(/(?=[A-Z])/); // Split at uppercase letters
+
+ if (words.length === 2) {
+ return words[0].toLowerCase();
+ }
+
+ if (words.length >= 3) {
+ return `${words[0].toLowerCase()}-${words[1].toLowerCase()}`;
+ }
+
+ return name.toLowerCase();
+};
+
+export const BaseIconComponent: React.FC<
+ BaseIconProps & Omit<IconType, 'component'>
+> = ({
+ component: Component,
+ iconColor,
+ iconSize,
+ viewBox,
+ customIcons,
+ ...rest
+}) => {
+ const theme = useTheme();
+ const iconCss = css`
+ color: ${iconColor || theme.colors.grayscale.base};
+ font-size: ${iconSize
+ ? `${theme.typography.sizes[iconSize] || theme.typography.sizes.m}px`
+ : '24px'};
+ `;
+ const whatRole = rest?.onClick ? 'button' : 'img';
+ const ariaLabel = genAriaLabel(rest.fileName || '');
+
+ return customIcons ? (
+ <span
+ role={whatRole}
+ aria-label={ariaLabel}
+ data-test={ariaLabel}
+ css={css`
+ display: inline-flex;
+ align-items: center;
+ line-height: 0;
+ ...${iconCss}
+ `}
+ >
+ <Component
+ viewBox={viewBox || '0 0 24 24'}
+ width={
+ iconSize
+ ? `${theme.typography.sizes[iconSize] ||
theme.typography.sizes.m}px`
+ : '24px'
+ }
+ height={
+ iconSize
+ ? `${theme.typography.sizes[iconSize] ||
theme.typography.sizes.m}px`
+ : '24px'
+ }
+ {...(rest as CustomIconType)}
+ />
+ </span>
+ ) : (
+ <Component
+ css={iconCss}
+ role={whatRole}
+ aria-label={ariaLabel}
+ data-test={ariaLabel}
+ {...(rest as AntdIconType)}
+ />
+ );
+};
diff --git a/superset-frontend/src/components/Icons/Icon.tsx
b/superset-frontend/src/components/Icons/Icon.tsx
index 29d52f08d0..9b53d21476 100644
--- a/superset-frontend/src/components/Icons/Icon.tsx
+++ b/superset-frontend/src/components/Icons/Icon.tsx
@@ -17,87 +17,15 @@
* under the License.
*/
-import {
- FC,
- SVGProps,
- useEffect,
- useRef,
- useState,
- ComponentType,
-} from 'react';
-import { styled, css, useTheme } from '@superset-ui/core';
+import { FC, SVGProps, useEffect, useRef, useState } from 'react';
import TransparentIcon from 'src/assets/images/icons/transparent.svg';
-import IconType from './IconType';
+import { IconType } from './types';
+import { BaseIconComponent } from './BaseIcon';
-interface BaseIconProps extends SVGProps<SVGSVGElement> {
- component?: ComponentType<SVGProps<SVGSVGElement>>;
- iconColor?: IconType['iconColor'];
- iconSize?: IconType['iconSize'];
-}
-
-const BaseIconComponent: React.FC<BaseIconProps> = ({
- component: Component,
- iconColor,
- iconSize,
- viewBox,
- // @ts-ignore
- customIcons,
- ...rest
-}) => {
- const theme = useTheme();
- if (!Component) return null;
- return customIcons ? (
- <span
- role={rest?.onClick ? 'button' : 'img'}
- css={theme => css`
- font-size: ${iconSize
- ? `${theme.typography.sizes[iconSize] || theme.typography.sizes.m}px`
- : '24px'};
- color: ${iconColor || theme.colors.grayscale.base};
- display: inline-flex;
- align-items: center;
- line-height: 0;
- `}
- >
- <Component
- {...rest}
- viewBox={viewBox || '0 0 24 24'}
- width={
- iconSize
- ? `${theme.typography.sizes[iconSize] ||
theme.typography.sizes.m}px`
- : '24px'
- }
- height={
- iconSize
- ? `${theme.typography.sizes[iconSize] ||
theme.typography.sizes.m}px`
- : '24px'
- }
- />
- </span>
- ) : (
- <Component {...(rest as SVGProps<SVGSVGElement>)} />
- );
-};
-
-export const StyledIcon = styled(BaseIconComponent)<BaseIconProps & IconType>`
- ${({ iconColor, theme }) =>
- `color: ${iconColor || theme.colors.grayscale.base};`}
- font-size: ${({ iconSize, theme }) =>
- iconSize
- ? `${theme.typography.sizes[iconSize] || theme.typography.sizes.m}px`
- : '24px'};
-`;
-
-export interface IconProps extends IconType {
- fileName: string;
- customIcons?: boolean;
-}
-
-export const Icon = (props: IconProps) => {
+export const Icon = (props: IconType) => {
const { fileName, ...iconProps } = props;
const [, setLoaded] = useState(false);
const ImportedSVG = useRef<FC<SVGProps<SVGSVGElement>>>();
- const name = fileName.replace('_', '-');
useEffect(() => {
let cancelled = false;
@@ -115,13 +43,9 @@ export const Icon = (props: IconProps) => {
};
}, [fileName, ImportedSVG]);
- const whatRole = props?.onClick ? 'button' : 'img';
return (
- // @ts-ignore to be removed
- <StyledIcon
+ <BaseIconComponent
component={ImportedSVG.current || TransparentIcon}
- aria-label={name}
- role={whatRole}
{...iconProps}
/>
);
diff --git a/superset-frontend/src/components/Icons/Icons.stories.tsx
b/superset-frontend/src/components/Icons/Icons.stories.tsx
index b15a835b3e..017be29521 100644
--- a/superset-frontend/src/components/Icons/Icons.stories.tsx
+++ b/superset-frontend/src/components/Icons/Icons.stories.tsx
@@ -20,7 +20,7 @@ import { useState } from 'react';
import { styled, supersetTheme } from '@superset-ui/core';
import { Input } from 'antd-v5';
import Icons from '.';
-import IconType from './IconType';
+import IconType from './types';
import Icon from './Icon';
export default {
diff --git a/superset-frontend/src/components/Icons/index.tsx
b/superset-frontend/src/components/Icons/index.tsx
index 5b2dc99689..0be6f750a1 100644
--- a/superset-frontend/src/components/Icons/index.tsx
+++ b/superset-frontend/src/components/Icons/index.tsx
@@ -21,7 +21,7 @@ import { FC } from 'react';
import { startCase } from 'lodash';
import AntdEnhancedIcons from './AntdEnhanced';
import Icon from './Icon';
-import IconType from './IconType';
+import IconType from './types';
const IconFileNames = [
// to keep custom
diff --git a/superset-frontend/src/components/Icons/IconType.ts
b/superset-frontend/src/components/Icons/types.ts
similarity index 66%
rename from superset-frontend/src/components/Icons/IconType.ts
rename to superset-frontend/src/components/Icons/types.ts
index 41a4089e12..4d6a425572 100644
--- a/superset-frontend/src/components/Icons/IconType.ts
+++ b/superset-frontend/src/components/Icons/types.ts
@@ -16,12 +16,24 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { IconComponentProps } from '@ant-design/icons/lib/components/Icon';
+import Icon, {
+ IconComponentProps,
+} from '@ant-design/icons/lib/components/Icon';
+import { ComponentType, SVGProps } from 'react';
-type AntdIconType = IconComponentProps;
-type IconType = AntdIconType & {
+export type AntdIconProps = IconComponentProps;
+export type IconType = AntdIconProps & {
iconColor?: string;
iconSize?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+ fileName?: string;
+ customIcons?: boolean;
};
+export type CustomIconType = ComponentType<SVGProps<SVGSVGElement>>;
+export type AntdIconType = typeof Icon;
+
+export interface BaseIconProps {
+ component: CustomIconType | AntdIconType;
+}
+
export default IconType;
diff --git
a/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/DetailsPanel.test.tsx
b/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/DetailsPanel.test.tsx
index 3390703380..d1090b0ed9 100644
---
a/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/DetailsPanel.test.tsx
+++
b/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/DetailsPanel.test.tsx
@@ -124,12 +124,12 @@ test('Should render "appliedCrossFilterIndicators"',
async () => {
await screen.findByText('Applied cross-filters (1)'),
).toBeInTheDocument();
expect(
- screen.getByRole('button', { name: 'SearchOutlined Clinical Stage' }),
+ screen.getByRole('button', { name: 'search Clinical Stage' }),
).toBeInTheDocument();
expect(props.onHighlightFilterSource).toHaveBeenCalledTimes(0);
userEvent.click(
- screen.getByRole('button', { name: 'SearchOutlined Clinical Stage' }),
+ screen.getByRole('button', { name: 'search Clinical Stage' }),
);
expect(props.onHighlightFilterSource).toHaveBeenCalledTimes(1);
expect(props.onHighlightFilterSource).toHaveBeenCalledWith([
@@ -158,13 +158,11 @@ test('Should render "appliedIndicators"', async () => {
userEvent.hover(screen.getByTestId('details-panel-content'));
expect(await screen.findByText('Applied filters (1)')).toBeInTheDocument();
expect(
- screen.getByRole('button', { name: 'SearchOutlined Country' }),
+ screen.getByRole('button', { name: 'search Country' }),
).toBeInTheDocument();
expect(props.onHighlightFilterSource).toHaveBeenCalledTimes(0);
- userEvent.click(
- screen.getByRole('button', { name: 'SearchOutlined Country' }),
- );
+ userEvent.click(screen.getByRole('button', { name: 'search Country' }));
expect(props.onHighlightFilterSource).toHaveBeenCalledTimes(1);
expect(props.onHighlightFilterSource).toHaveBeenCalledWith([
'ROOT_ID',
@@ -246,10 +244,10 @@ test('Arrow key navigation switches focus between
indicators', () => {
// Query the indicators
const firstIndicator = screen.getByRole('button', {
- name: 'SearchOutlined Clinical Stage',
+ name: 'search Clinical Stage',
});
const secondIndicator = screen.getByRole('button', {
- name: 'SearchOutlined Age Group',
+ name: 'search Age Group',
});
// Focus the first indicator
diff --git
a/superset-frontend/src/dashboard/components/FiltersBadge/FilterIndicator/FilterIndicator.test.tsx
b/superset-frontend/src/dashboard/components/FiltersBadge/FilterIndicator/FilterIndicator.test.tsx
index db78649832..edf9c17373 100644
---
a/superset-frontend/src/dashboard/components/FiltersBadge/FilterIndicator/FilterIndicator.test.tsx
+++
b/superset-frontend/src/dashboard/components/FiltersBadge/FilterIndicator/FilterIndicator.test.tsx
@@ -41,7 +41,7 @@ test('Should render', () => {
render(<FilterIndicator {...props} />);
expect(
- screen.getByRole('button', { name: 'SearchOutlined Vaccine Approach' }),
+ screen.getByRole('button', { name: 'search Vaccine Approach' }),
).toBeInTheDocument();
expect(screen.getByRole('img')).toBeInTheDocument();
});
@@ -52,7 +52,7 @@ test('Should call "onClick"', () => {
expect(props.onClick).toHaveBeenCalledTimes(0);
userEvent.click(
- screen.getByRole('button', { name: 'SearchOutlined Vaccine Approach' }),
+ screen.getByRole('button', { name: 'search Vaccine Approach' }),
);
expect(props.onClick).toHaveBeenCalledTimes(1);
});
@@ -64,7 +64,7 @@ test('Should render "value"', () => {
expect(
screen.getByRole('button', {
- name: 'SearchOutlined Vaccine Approach: any, string',
+ name: 'search Vaccine Approach: any, string',
}),
).toBeInTheDocument();
});
diff --git a/superset-frontend/src/dashboard/components/Header/Header.test.tsx
b/superset-frontend/src/dashboard/components/Header/Header.test.tsx
index 6b66966c00..90f0a60d29 100644
--- a/superset-frontend/src/dashboard/components/Header/Header.test.tsx
+++ b/superset-frontend/src/dashboard/components/Header/Header.test.tsx
@@ -138,7 +138,7 @@ function setup(overrideState: JsonObject = {}) {
}
async function openActionsDropdown() {
- const btn = screen.getByRole('img', { name: 'EllipsisOutlined' });
+ const btn = screen.getByRole('img', { name: 'ellipsis' });
userEvent.click(btn);
expect(await screen.findByTestId('header-actions-menu')).toBeInTheDocument();
}
@@ -337,7 +337,7 @@ test('should NOT render the "Draft" status', () => {
test('should render the unselected fave icon', () => {
setup();
expect(fetchFaveStar).toHaveBeenCalled();
- expect(screen.getByRole('img', { name: 'StarOutlined'
})).toBeInTheDocument();
+ expect(screen.getByRole('img', { name: 'star' })).toBeInTheDocument();
});
test('should render the selected fave icon', () => {
@@ -348,7 +348,7 @@ test('should render the selected fave icon', () => {
},
};
setup(favedState);
- expect(screen.getByRole('img', { name: 'StarFilled' })).toBeInTheDocument();
+ expect(screen.getByRole('img', { name: 'star' })).toBeInTheDocument();
});
test('should NOT render the fave icon on anonymous user', () => {
@@ -356,17 +356,17 @@ test('should NOT render the fave icon on anonymous user',
() => {
user: undefined,
};
setup(anonymousUserState);
- expect(() => screen.getByRole('img', { name: 'StarOutlined' })).toThrow(
+ expect(() => screen.getByRole('img', { name: 'star' })).toThrow(
'Unable to find',
);
- expect(() => screen.getByRole('img', { name: 'StarFilled' })).toThrow(
+ expect(() => screen.getByRole('img', { name: 'star' })).toThrow(
'Unable to find',
);
});
test('should fave', async () => {
setup();
- const fave = screen.getByRole('img', { name: 'StarOutlined' });
+ const fave = screen.getByRole('img', { name: 'star' });
expect(saveFaveStar).not.toHaveBeenCalled();
userEvent.click(fave);
expect(saveFaveStar).toHaveBeenCalledTimes(1);
@@ -388,9 +388,7 @@ test('should toggle the edit mode', () => {
test('should render the dropdown icon', () => {
setup();
- expect(
- screen.getByRole('img', { name: 'EllipsisOutlined' }),
- ).toBeInTheDocument();
+ expect(screen.getByRole('img', { name: 'ellipsis' })).toBeInTheDocument();
});
test('should refresh the charts', async () => {
diff --git
a/superset-frontend/src/dashboard/components/gridComponents/Divider.test.jsx
b/superset-frontend/src/dashboard/components/gridComponents/Divider.test.jsx
index f7fb351db8..85a30d115d 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Divider.test.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Divider.test.jsx
@@ -68,7 +68,7 @@ describe('Divider', () => {
expect(screen.getByTestId('hover-menu')).toBeInTheDocument();
expect(screen.getByRole('button').firstChild).toHaveAttribute(
'aria-label',
- 'DeleteOutlined',
+ 'delete',
);
});
diff --git
a/superset-frontend/src/dashboard/components/gridComponents/Header.test.jsx
b/superset-frontend/src/dashboard/components/gridComponents/Header.test.jsx
index 86d6ad9fe1..ef3bb1dc6d 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Header.test.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Header.test.jsx
@@ -105,7 +105,7 @@ describe('Header', () => {
it('should render a DeleteComponentButton when focused in editMode', () => {
setup({ editMode: true });
- const trashButton = screen.getByRole('img', { name: 'DeleteOutlined' });
+ const trashButton = screen.getByRole('img', { name: 'delete' });
expect(trashButton).toBeInTheDocument();
});
@@ -113,7 +113,7 @@ describe('Header', () => {
const deleteComponent = sinon.spy();
setup({ editMode: true, deleteComponent });
- const trashButton = screen.getByRole('img', { name: 'DeleteOutlined' });
+ const trashButton = screen.getByRole('img', { name: 'delete' });
fireEvent.click(trashButton.parentElement);
expect(deleteComponent.callCount).toBe(1);
diff --git
a/superset-frontend/src/dashboard/components/menu/BackgroundStyleDropdown.tsx
b/superset-frontend/src/dashboard/components/menu/BackgroundStyleDropdown.tsx
index ccf11bc854..eb44ee81c0 100644
---
a/superset-frontend/src/dashboard/components/menu/BackgroundStyleDropdown.tsx
+++
b/superset-frontend/src/dashboard/components/menu/BackgroundStyleDropdown.tsx
@@ -62,11 +62,7 @@ const BackgroundStyleOption = styled.div`
${theme.colors.text.label} 25%,
transparent 25%
),
- linear-gradient(
- -45deg,
- ${theme.colors.text.label} 25%,
- transparent 25%
- ),
+ linear-gradient(-45deg, ${theme.colors.text.label} 25%, transparent
25%),
linear-gradient(45deg, transparent 75%, ${theme.colors.text.label}
75%),
linear-gradient(-45deg, transparent 75%, ${theme.colors.text.label}
75%);
background-size: ${theme.gridUnit * 2}px ${theme.gridUnit * 2}px;
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.test.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.test.tsx
index 486e35e025..78da010203 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.test.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.test.tsx
@@ -172,7 +172,7 @@ it('Uses callbacks on click', () => {
const chart4Container = screen.getByText('chart 4').closest('div');
if (chart4Container) {
- userEvent.click(within(chart4Container).getByLabelText('DeleteOutlined'));
+ userEvent.click(within(chart4Container).getByLabelText('delete'));
}
expect(DEFAULT_PROPS.removeCustomScope).toHaveBeenCalledWith(4);
});
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.tsx
index 356bc0dedc..6ccd23a32f 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.tsx
@@ -77,7 +77,9 @@ const ScopingTitle = ({
event.stopPropagation();
onRemove(id);
}}
- css={{ margin: `auto auto auto ${theme.gridUnit}px` }}
+ css={css`
+ margin: auto auto auto ${theme.gridUnit}px;
+ `}
/>
</FilterTitle>
);
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingModal.test.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingModal.test.tsx
index abd5949a0b..ce2411ce04 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingModal.test.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingModal.test.tsx
@@ -257,7 +257,7 @@ it('edit scope and save', async () => {
within(screen.getByTestId('scoping-list-panel'))
.getByText('chart 4')
.closest('div')!,
- ).getByLabelText('DeleteOutlined'),
+ ).getByLabelText('delete'),
);
expect(
within(screen.getByTestId('scoping-list-panel')).queryByText('chart 4'),
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx
index d10d1a838a..5cca08fd91 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx
@@ -76,9 +76,9 @@ const getModalTestId =
testWithId<string>(FILTERS_CONFIG_MODAL_TEST_ID, true);
const FILTER_NAME = 'Time filter 1';
const addFilterFlow = async () => {
- // open filter config modal
+ // open filter config modals
userEvent.click(screen.getByTestId(getTestId('collapsable')));
- userEvent.click(screen.getByLabelText('SettingOutlined'));
+ userEvent.click(screen.getByLabelText('setting'));
userEvent.click(screen.getByText('Add or edit filters'));
// select filter
userEvent.click(screen.getByText('Value'));
@@ -201,21 +201,19 @@ describe('FilterBar', () => {
it('should render the collapse icon', () => {
renderWrapper();
expect(
- screen.getByRole('img', { name: 'VerticalAlignTopOutlined' }),
+ screen.getByRole('img', { name: 'vertical-align' }),
).toBeInTheDocument();
});
it('should render the filter icon', () => {
renderWrapper();
- expect(
- screen.getByRole('img', { name: 'FilterOutlined' }),
- ).toBeInTheDocument();
+ expect(screen.getByRole('img', { name: 'filter' })).toBeInTheDocument();
});
it('should toggle', () => {
renderWrapper();
const collapse = screen.getByRole('img', {
- name: 'VerticalAlignTopOutlined',
+ name: 'vertical-align',
});
expect(toggleFiltersBar).not.toHaveBeenCalled();
userEvent.click(collapse);
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/FilterBarSettings.test.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/FilterBarSettings.test.tsx
index 1c0edd62d8..9c566410e9 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/FilterBarSettings.test.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/FilterBarSettings.test.tsx
@@ -77,16 +77,14 @@ beforeEach(() => {
test('Dropdown trigger renders', async () => {
await setup();
- expect(screen.getByLabelText('SettingOutlined')).toBeVisible();
+ expect(screen.getByLabelText('setting')).toBeVisible();
});
test('Dropdown trigger renders with dashboard edit permissions', async () => {
await setup({
dash_edit_perm: true,
});
- expect(
- screen.getByRole('img', { name: 'SettingOutlined' }),
- ).toBeInTheDocument();
+ expect(screen.getByRole('img', { name: 'setting' })).toBeInTheDocument();
});
test('Dropdown trigger does not render without dashboard edit permissions',
async () => {
@@ -95,14 +93,14 @@ test('Dropdown trigger does not render without dashboard
edit permissions', asyn
});
expect(
- screen.queryByRole('img', { name: 'SettingOutlined' }),
+ screen.queryByRole('img', { name: 'setting' }),
).not.toBeInTheDocument();
});
test('Popover shows cross-filtering option on by default', async () => {
await setup();
const settingsButton = screen.getByRole('button', {
- name: 'SettingOutlined',
+ name: 'setting',
});
userEvent.click(settingsButton);
expect(screen.getByText('Enable cross-filtering')).toBeInTheDocument();
@@ -115,7 +113,7 @@ test('Can enable/disable cross-filtering', async () => {
});
await setup();
const settingsButton = screen.getByRole('button', {
- name: 'SettingOutlined',
+ name: 'setting',
});
userEvent.click(settingsButton);
const initialCheckbox = screen.getByRole('checkbox');
@@ -123,35 +121,35 @@ test('Can enable/disable cross-filtering', async () => {
userEvent.click(initialCheckbox);
- userEvent.click(screen.getByLabelText('SettingOutlined'));
+ userEvent.click(screen.getByLabelText('setting'));
expect(screen.getByRole('checkbox')).not.toBeChecked();
});
test('Popover opens with "Vertical" selected', async () => {
await setup();
const settingsButton = screen.getByRole('button', {
- name: 'SettingOutlined',
+ name: 'setting',
});
userEvent.click(settingsButton);
userEvent.hover(screen.getByText('Orientation of filter bar'));
expect(await screen.findByText('Vertical (Left)')).toBeInTheDocument();
expect(screen.getByText('Horizontal (Top)')).toBeInTheDocument();
expect(
- within(screen.getAllByRole('menuitem')[4]).getByLabelText('CheckOutlined'),
+ within(screen.getAllByRole('menuitem')[4]).getByLabelText('check'),
).toBeInTheDocument();
});
test('Popover opens with "Horizontal" selected', async () => {
await setup({ filterBarOrientation: FilterBarOrientation.Horizontal });
const settingsButton = screen.getByRole('button', {
- name: 'SettingOutlined',
+ name: 'setting',
});
userEvent.click(settingsButton);
userEvent.hover(screen.getByText('Orientation of filter bar'));
expect(await screen.findByText('Vertical (Left)')).toBeInTheDocument();
expect(screen.getByText('Horizontal (Top)')).toBeInTheDocument();
expect(
- within(screen.getAllByRole('menuitem')[5]).getByLabelText('CheckOutlined'),
+ within(screen.getAllByRole('menuitem')[5]).getByLabelText('check'),
).toBeInTheDocument();
});
@@ -168,14 +166,14 @@ test('On selection change, send request and update
checked value', async () => {
await setup();
const settingsButton = screen.getByRole('button', {
- name: 'SettingOutlined',
+ name: 'setting',
});
userEvent.click(settingsButton);
userEvent.hover(screen.getByText('Orientation of filter bar'));
const verticalItem = await screen.findByText('Vertical (Left)');
expect(
- within(verticalItem.closest('li')!).getByLabelText('CheckOutlined'),
+ within(verticalItem.closest('li')!).getByLabelText('check'),
).toBeInTheDocument();
userEvent.click(screen.getByText('Horizontal (Top)'));
@@ -185,7 +183,7 @@ test('On selection change, send request and update checked
value', async () => {
const horizontalItem = await screen.findByText('Horizontal (Top)');
expect(
- within(horizontalItem.closest('li')!).getByLabelText('CheckOutlined'),
+ within(horizontalItem.closest('li')!).getByLabelText('check'),
).toBeInTheDocument();
await waitFor(() =>
@@ -200,16 +198,14 @@ test('On selection change, send request and update
checked value', async () => {
);
await waitFor(() => {
- userEvent.click(screen.getByRole('button', { name: 'SettingOutlined' }));
+ userEvent.click(screen.getByRole('button', { name: 'setting' }));
userEvent.hover(screen.getByText('Orientation of filter bar'));
const updatedHorizontalItem = screen.getByText('Horizontal (Top)');
expect(
- within(updatedHorizontalItem.closest('li')!).getByLabelText(
- 'CheckOutlined',
- ),
+ within(updatedHorizontalItem.closest('li')!).getByLabelText('check'),
).toBeInTheDocument();
expect(
- within(verticalItem.closest('li')!).queryByLabelText('CheckOutlined'),
+ within(verticalItem.closest('li')!).queryByLabelText('check'),
).not.toBeInTheDocument();
});
});
@@ -233,10 +229,10 @@ test('On failed request, restore previous selection',
async () => {
// Verify initial state
expect(
- within(verticalItem.closest('li')!).getByLabelText('CheckOutlined'),
+ within(verticalItem.closest('li')!).getByLabelText('check'),
).toBeInTheDocument();
expect(
- within(horizontalItem.closest('li')!).queryByLabelText('CheckOutlined'),
+ within(horizontalItem.closest('li')!).queryByLabelText('check'),
).not.toBeInTheDocument();
// Click horizontal option
@@ -258,12 +254,10 @@ test('On failed request, restore previous selection',
async () => {
const verticalItemAfter = screen.getByText('Vertical (Left)');
const horizontalItemAfter = screen.getByText('Horizontal (Top)');
expect(
- within(verticalItemAfter.closest('li')!).getByLabelText('CheckOutlined'),
+ within(verticalItemAfter.closest('li')!).getByLabelText('check'),
).toBeInTheDocument();
expect(
- within(horizontalItemAfter.closest('li')!).queryByLabelText(
- 'CheckOutlined',
- ),
+ within(horizontalItemAfter.closest('li')!).queryByLabelText('check'),
).not.toBeInTheDocument();
});
});
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 cb18e6dfed..afb7ae0b6c 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/index.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/index.tsx
@@ -232,7 +232,9 @@ const FilterBarSettings = () => {
FilterBarOrientation.Horizontal && (
<Icons.CheckOutlined
iconSize="m"
- css={{ verticalAlign: 'middle' }}
+ css={css`
+ vertical-align: middle;
+ `}
/>
)}
</Space>
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/Header.test.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/Header.test.tsx
index 8a465d0042..14332d8c44 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/Header.test.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/Header.test.tsx
@@ -39,7 +39,7 @@ test('should render the expand button', () => {
const mockedProps = createProps();
render(<Header {...mockedProps} />, { useRedux: true });
expect(
- screen.getByRole('button', { name: 'VerticalAlignTopOutlined' }),
+ screen.getByRole('button', { name: 'vertical-align' }),
).toBeInTheDocument();
});
@@ -47,7 +47,7 @@ test('should toggle', () => {
const mockedProps = createProps();
render(<Header {...mockedProps} />, { useRedux: true });
const expandBtn = screen.getByRole('button', {
- name: 'VerticalAlignTopOutlined',
+ name: 'vertical-align',
});
expect(mockedProps.toggleFiltersBar).not.toHaveBeenCalled();
userEvent.click(expandBtn);
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 1824d3502a..8183d77205 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx
@@ -78,7 +78,9 @@ const Header: FC<HeaderProps> = ({ toggleFiltersBar }) => (
>
<Icons.VerticalAlignTopOutlined
iconSize="xl"
- css={{ transform: 'rotate(-90deg)' }}
+ css={css`
+ transform: rotate(-90deg);
+ `}
/>
</HeaderButton>
</TitleArea>
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/FilterCard.test.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/FilterCard.test.tsx
index dd66f610d4..779d9f053d 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/FilterCard.test.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/FilterCard.test.tsx
@@ -230,7 +230,7 @@ const renderContent = (filter = baseFilter, initialState =
baseInitialState) =>
test('filter card title, type, scope, dependencies', () => {
renderContent();
expect(screen.getByText('Native filter 1')).toBeVisible();
- expect(screen.getByLabelText('FilterOutlined')).toBeVisible();
+ expect(screen.getByLabelText('filter')).toBeVisible();
expect(screen.getByText('Filter type')).toBeVisible();
expect(screen.getByText('Select filter')).toBeVisible();
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
index ac8557db40..8a0851f95e 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
@@ -41,6 +41,7 @@ import {
getClientErrorObject,
SLOW_DEBOUNCE,
useTheme,
+ css,
} from '@superset-ui/core';
import { debounce, isEqual } from 'lodash';
import {
@@ -1323,7 +1324,9 @@ const FiltersConfigForm = (
<Icons.SyncOutlined
iconSize="xl"
iconColor={theme.colors.primary.base}
- css={{ marginLeft: `${theme.gridUnit * 2}px` }}
+ css={css`
+ margin-left: ${theme.gridUnit * 2}px;
+ `}
onClick={() => refreshHandler(true)}
/>
</Tooltip>
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.test.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.test.tsx
index bba627a203..9c7585c9ef 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.test.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.test.tsx
@@ -389,7 +389,7 @@ test('deletes a filter', async () => {
onSave,
});
const removeButtons = screen.getAllByRole('button', {
- name: 'DeleteOutlined',
+ name: 'delete',
});
userEvent.click(removeButtons[2]);
@@ -426,7 +426,7 @@ test('deletes a filter including dependencies', async () =>
{
onSave,
});
const removeButtons = screen.getAllByRole('button', {
- name: 'DeleteOutlined',
+ name: 'delete',
});
userEvent.click(removeButtons[1]);
userEvent.click(screen.getByRole('button', { name: SAVE_REGEX }));
@@ -518,7 +518,7 @@ test('rearranges three filters and deletes one of them',
async () => {
const draggableFilters = screen.getAllByRole('tab');
const deleteButtons = screen.getAllByRole('button', {
- name: 'DeleteOutlined',
+ name: 'delete',
});
userEvent.click(deleteButtons[1]);
diff --git a/superset-frontend/src/explore/components/ControlHeader.tsx
b/superset-frontend/src/explore/components/ControlHeader.tsx
index a72b45466d..68d444e599 100644
--- a/superset-frontend/src/explore/components/ControlHeader.tsx
+++ b/superset-frontend/src/explore/components/ControlHeader.tsx
@@ -153,7 +153,9 @@ const ControlHeader: FC<ControlHeaderProps> = ({
<Tooltip id="error-tooltip" placement="top" title={warning}>
<Icons.WarningOutlined
iconColor={colors.warning.base}
- css={{ verticalAlign: 'baseline' }}
+ css={css`
+ vertical-align: baseline;
+ `}
iconSize="s"
/>
</Tooltip>{' '}
diff --git
a/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanel.test.tsx
b/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanel.test.tsx
index 2a8de875b6..84b40969b5 100644
---
a/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanel.test.tsx
+++
b/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanel.test.tsx
@@ -228,7 +228,7 @@ test('should render a warning', async () => {
};
render(<DatasourcePanel {...newProps} />, { useRedux: true, useDnd: true });
expect(
- await screen.findByRole('img', { name: 'WarningOutlined' }),
+ await screen.findByRole('img', { name: 'warning' }),
).toBeInTheDocument();
});
diff --git
a/superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.test.tsx
b/superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.test.tsx
index a1f30a3415..9600431883 100644
---
a/superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.test.tsx
+++
b/superset-frontend/src/explore/components/controls/CollectionControl/CollectionControl.test.tsx
@@ -105,10 +105,10 @@ test('Should have add button', async () => {
render(<CollectionControl {...props} />);
expect(
- await screen.findByRole('button', { name: 'PlusOutlined' }),
+ await screen.findByRole('button', { name: 'plus' }),
).toBeInTheDocument();
expect(props.onChange).toHaveBeenCalledTimes(0);
- userEvent.click(screen.getByRole('button', { name: 'PlusOutlined' }));
+ userEvent.click(screen.getByRole('button', { name: 'plus' }));
expect(props.onChange).toHaveBeenCalledWith([
{ key: 'hrYAZ5iBH' },
undefined,
diff --git
a/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeControl.test.tsx
b/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeControl.test.tsx
index 42ad7eb7a5..a4542c8ff5 100644
---
a/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeControl.test.tsx
+++
b/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeControl.test.tsx
@@ -66,7 +66,7 @@ test('should not display an alert icon if
hasCustomLabelsColor=false', async ()
setup();
await waitFor(() => {
expect(
- screen.queryByRole('img', { name: 'WarningOutlined' }),
+ screen.queryByRole('img', { name: 'warning' }),
).not.toBeInTheDocument();
});
});
@@ -78,9 +78,7 @@ test('should display an alert icon if
hasCustomLabelsColor=true', async () => {
};
setup(hasCustomLabelsColorProps);
await waitFor(() => {
- expect(
- screen.getByRole('img', { name: 'WarningOutlined' }),
- ).toBeInTheDocument();
+ expect(screen.getByRole('img', { name: 'warning' })).toBeInTheDocument();
});
});
diff --git
a/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.tsx
b/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.tsx
index e87a7a97e9..d117a87a19 100644
---
a/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.tsx
+++
b/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.tsx
@@ -117,7 +117,9 @@ const Label = ({
<Tooltip title={alertTitle}>
<Icons.WarningOutlined
iconColor={theme.colors.warning.base}
- css={{ verticalAlign: 'baseline' }}
+ css={css`
+ vertical-align: baseline;
+ `}
iconSize="s"
/>
</Tooltip>
diff --git
a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
index 410bc36fc0..dd4f48027f 100644
---
a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
+++
b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
@@ -166,7 +166,9 @@ const ConditionalFormattingControl = ({
<CaretContainer>
<Icons.CaretRightOutlined
iconSize="l"
- css={{ marginTop: theme.gridUnit }}
+ css={css`
+ margin-top: ${theme.gridUnit}px;
+ `}
iconColor={theme.colors.grayscale.light1}
/>
</CaretContainer>
diff --git
a/superset-frontend/src/explore/components/controls/DatasourceControl/DatasourceControl.test.jsx
b/superset-frontend/src/explore/components/controls/DatasourceControl/DatasourceControl.test.jsx
index c7e0692f5c..d6204a0ed4 100644
---
a/superset-frontend/src/explore/components/controls/DatasourceControl/DatasourceControl.test.jsx
+++
b/superset-frontend/src/explore/components/controls/DatasourceControl/DatasourceControl.test.jsx
@@ -102,7 +102,7 @@ describe('DatasourceControl', () => {
expect(
container.querySelector('[data-test="datasource-menu-trigger"]'),
).toBeInTheDocument();
- userEvent.click(screen.getByLabelText('MoreOutlined'));
+ userEvent.click(screen.getByLabelText('more'));
await waitFor(() => {
expect(screen.queryAllByRole('menuitem')).toHaveLength(3);
});
@@ -121,7 +121,7 @@ describe('DatasourceControl', () => {
expect(
container.querySelector('[data-test="datasource-menu-trigger"]'),
).toBeInTheDocument();
- userEvent.click(screen.getByLabelText('MoreOutlined'));
+ userEvent.click(screen.getByLabelText('more'));
await waitFor(() => {
expect(screen.queryAllByRole('menuitem')).toHaveLength(2);
});
@@ -129,7 +129,7 @@ describe('DatasourceControl', () => {
it('should render health check message', async () => {
setup();
- const modalTrigger = screen.getByLabelText('WarningOutlined');
+ const modalTrigger = screen.getByLabelText('warning');
expect(modalTrigger).toBeInTheDocument();
// Hover the modal so healthcheck message can show up
diff --git
a/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx
b/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx
index 34c5a4ecf5..f0cbc51ee6 100644
---
a/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx
+++
b/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx
@@ -116,7 +116,7 @@ const Styles = styled.div`
span[aria-label='dataset-physical'] {
color: ${({ theme }) => theme.colors.grayscale.base};
}
- span[aria-label='MoreOutlined'] {
+ span[aria-label='more'] {
color: ${({ theme }) => theme.colors.primary.base};
}
`;
diff --git
a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.test.tsx
b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.test.tsx
index dced0706a2..fb5204127e 100644
---
a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.test.tsx
+++
b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.test.tsx
@@ -42,10 +42,10 @@ describe('Option', () => {
);
expect(container).toBeInTheDocument();
expect(
- await screen.findByRole('img', { name: 'CloseOutlined' }),
+ await screen.findByRole('img', { name: 'close' }),
).toBeInTheDocument();
expect(
- screen.queryByRole('img', { name: 'CaretRightOutlined' }),
+ screen.queryByRole('img', { name: 'caret-right' }),
).not.toBeInTheDocument();
unmount();
});
@@ -57,10 +57,10 @@ describe('Option', () => {
</Option>,
);
expect(
- await screen.findByRole('img', { name: 'CloseOutlined' }),
+ await screen.findByRole('img', { name: 'close' }),
).toBeInTheDocument();
expect(
- await screen.findByRole('img', { name: 'CaretRightOutlined' }),
+ await screen.findByRole('img', { name: 'caret-right' }),
).toBeInTheDocument();
unmount();
});
@@ -84,7 +84,7 @@ describe('Option', () => {
Option
</Option>,
);
- userEvent.click(await screen.findByRole('img', { name: 'CloseOutlined' }));
+ userEvent.click(await screen.findByRole('img', { name: 'close' }));
expect(clickClose).toHaveBeenCalled();
unmount();
});
diff --git
a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx
b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx
index fc5be5fac6..efdbabb395 100644
---
a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx
+++
b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { useCallback } from 'react';
-import { styled, t, useTheme } from '@superset-ui/core';
+import { css, styled, t, useTheme } from '@superset-ui/core';
import Icons from 'src/components/Icons';
import {
CaretContainer,
@@ -53,7 +53,9 @@ export default function Option({
<OptionControlContainer data-test="option-label" withCaret={withCaret}>
{canDelete && (
<CloseContainer
- css={{ textAlign: 'center' }}
+ css={css`
+ text-align: center;
+ `}
role="button"
data-test="remove-control-button"
onClick={onClickClose}
@@ -83,7 +85,9 @@ export default function Option({
<CaretContainer>
<Icons.CaretRightOutlined
iconSize="l"
- css={{ marginTop: theme.gridUnit * 1 }}
+ css={css`
+ margin-top: ${theme.gridUnit}px;
+ `}
iconColor={theme.colors.grayscale.light1}
/>
</CaretContainer>
diff --git
a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx
b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx
index b2a94a900e..0e87eeab09 100644
---
a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx
+++
b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx
@@ -18,7 +18,7 @@
*/
import { useEffect, useRef, useMemo } from 'react';
import { Select } from 'src/components';
-import { styled, t, useTheme } from '@superset-ui/core';
+import { css, styled, t, useTheme } from '@superset-ui/core';
import { SQLEditor } from 'src/components/AsyncAceEditor';
import sqlKeywords from 'src/SqlLab/utils/sqlKeywords';
import { getColumnKeywords } from 'src/explore/controlUtils/getColumnKeywords';
@@ -115,7 +115,11 @@ export default function
AdhocFilterEditPopoverSqlTabContent({
<strong>HAVING</strong> {t('Filters by metrics')}
</span>
</div>
- <div css={{ marginTop: theme.gridUnit * 4 }}>
+ <div
+ css={css`
+ margin-top: ${theme.gridUnit * 4}px;
+ `}
+ >
<SQLEditor
ref={aceEditorRef}
keywords={keywords}
diff --git
a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/AdhocFilterOption.test.tsx
b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/AdhocFilterOption.test.tsx
index 1a9151e4d6..0129e0fe9c 100644
---
a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/AdhocFilterOption.test.tsx
+++
b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/AdhocFilterOption.test.tsx
@@ -80,14 +80,14 @@ test('should render the remove button', async () => {
test('should render the right caret', async () => {
render(setup(mockedProps), { useDnd: true, useRedux: true });
expect(
- await screen.findByRole('img', { name: 'CaretRightOutlined' }),
+ await screen.findByRole('img', { name: 'caret-right' }),
).toBeInTheDocument();
});
test('should render the Popover on clicking the right caret', async () => {
render(setup(mockedProps), { useDnd: true, useRedux: true });
const rightCaret = await screen.findByRole('img', {
- name: 'CaretRightOutlined',
+ name: 'caret-right',
});
userEvent.click(rightCaret);
expect(screen.getByRole('tooltip')).toBeInTheDocument();
diff --git
a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
index f3d338d368..458c687055 100644
--- a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
+++ b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
@@ -373,7 +373,9 @@ export const OptionControlLabel = ({
withCaret={withCaret}
data-test="option-label"
{...props}
- css={{ textAlign: 'center' }}
+ css={css`
+ text-align: center;
+ `}
>
<CloseContainer
role="button"
diff --git
a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx
b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx
index 0de89e4b6c..5bc108f65d 100644
---
a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx
+++
b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx
@@ -120,7 +120,7 @@ describe('VizTypeControl', () => {
isModalOpenInit: false,
};
await waitForRenderWrapper(props);
- expect(screen.getByLabelText('TableOutlined')).toBeVisible();
+ expect(screen.getByLabelText('table')).toBeVisible();
expect(screen.getByLabelText('big-number-chart-tile')).toBeVisible();
expect(screen.getByLabelText('pie-chart-tile')).toBeVisible();
expect(screen.getByLabelText('bar-chart-tile')).toBeVisible();
diff --git
a/superset-frontend/src/features/databases/DatabaseModal/index.test.tsx
b/superset-frontend/src/features/databases/DatabaseModal/index.test.tsx
index 40e3534113..97056d9f33 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/index.test.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/index.test.tsx
@@ -682,7 +682,7 @@ describe('DatabaseModal', () => {
});
// const tooltipIcons =
within(advancedTabPanel).getAllByTestId('info-circle-filled');
const tooltipIcons = within(advancedTabPanel).getAllByRole('img', {
- name: /InfoCircleFilled/i,
+ name: /info-circle/i,
});
const exposeInSQLLabCheckbox = screen.getByRole('checkbox', {
diff --git
a/superset-frontend/src/features/datasets/AddDataset/LeftPanel/LeftPanel.test.tsx
b/superset-frontend/src/features/datasets/AddDataset/LeftPanel/LeftPanel.test.tsx
index c3adc585d1..a9f36e74ac 100644
---
a/superset-frontend/src/features/datasets/AddDataset/LeftPanel/LeftPanel.test.tsx
+++
b/superset-frontend/src/features/datasets/AddDataset/LeftPanel/LeftPanel.test.tsx
@@ -324,7 +324,5 @@ test('renders a warning icon when a table name has a
preexisting dataset', async
userEvent.type(tableSelect, 'Sheet2');
// Sheet2 should now show the warning icon
- expect(
- screen.getByRole('img', { name: 'WarningOutlined' }),
- ).toBeInTheDocument();
+ expect(screen.getByRole('img', { name: 'warning' })).toBeInTheDocument();
});
diff --git a/superset-frontend/src/features/home/DashboardTable.test.tsx
b/superset-frontend/src/features/home/DashboardTable.test.tsx
index 97a55ca35c..d7400254ff 100644
--- a/superset-frontend/src/features/home/DashboardTable.test.tsx
+++ b/superset-frontend/src/features/home/DashboardTable.test.tsx
@@ -267,7 +267,7 @@ describe('DashboardTable', () => {
);
const moreOptionsButton = screen.getAllByRole('img', {
- name: 'MoreOutlined',
+ name: 'more',
})[0];
await userEvent.click(moreOptionsButton);
@@ -311,7 +311,7 @@ describe('DashboardTable', () => {
{ store },
);
- const moreOptionsButton = screen.getAllByLabelText('MoreOutlined')[0];
+ const moreOptionsButton = screen.getAllByLabelText('more')[0];
await userEvent.click(moreOptionsButton);
await waitFor(() => {
diff --git a/superset-frontend/src/pages/ChartList/ChartList.test.jsx
b/superset-frontend/src/pages/ChartList/ChartList.test.jsx
index f1b6780650..cb1690814f 100644
--- a/superset-frontend/src/pages/ChartList/ChartList.test.jsx
+++ b/superset-frontend/src/pages/ChartList/ChartList.test.jsx
@@ -178,7 +178,7 @@ describe('ChartList', () => {
// Find and click list view toggle
const listViewToggle = await screen.findByRole('img', {
- name: 'UnorderedListOutlined',
+ name: 'unordered-list',
});
const listViewButton = listViewToggle.closest('[role="button"]');
fireEvent.click(listViewButton);
@@ -186,14 +186,14 @@ describe('ChartList', () => {
// Wait for list view to be active
await waitFor(() => {
const listViewToggle = screen.getByRole('img', {
- name: 'UnorderedListOutlined',
+ name: 'unordered-list',
});
expect(listViewToggle.closest('[role="button"]')).toHaveClass('active');
});
// Find and click card view toggle
const cardViewToggle = screen.getByRole('img', {
- name: 'AppstoreOutlined',
+ name: 'appstore',
});
const cardViewButton = cardViewToggle.closest('[role="button"]');
fireEvent.click(cardViewButton);
@@ -201,7 +201,7 @@ describe('ChartList', () => {
// Wait for card view to be active
await waitFor(() => {
const cardViewToggle = screen.getByRole('img', {
- name: 'AppstoreOutlined',
+ name: 'appstore',
});
expect(cardViewToggle.closest('[role="button"]')).toHaveClass('active');
});
@@ -215,7 +215,7 @@ describe('ChartList', () => {
// Switch to list view
const listViewToggle = await screen.findByRole('img', {
- name: 'UnorderedListOutlined',
+ name: 'unordered-list',
});
const listViewButton = listViewToggle.closest('[role="button"]');
fireEvent.click(listViewButton);
@@ -241,7 +241,7 @@ describe('ChartList', () => {
// Switch to list view
const listViewToggle = await screen.findByRole('img', {
- name: 'UnorderedListOutlined',
+ name: 'unordered-list',
});
const listViewButton = listViewToggle.closest('[role="button"]');
fireEvent.click(listViewButton);
@@ -253,7 +253,7 @@ describe('ChartList', () => {
// Click delete button
const deleteButtons = await screen.findAllByRole('button', {
- name: 'DeleteOutlined',
+ name: 'delete',
});
fireEvent.click(deleteButtons[0]);
@@ -269,7 +269,7 @@ describe('ChartList', () => {
// Switch to list view
const listViewToggle = await screen.findByRole('img', {
- name: 'UnorderedListOutlined',
+ name: 'unordered-list',
});
const listViewButton = listViewToggle.closest('[role="button"]');
fireEvent.click(listViewButton);
@@ -282,7 +282,7 @@ describe('ChartList', () => {
// Wait for favorite stars to appear
await waitFor(() => {
const favoriteStars = screen.getAllByRole('img', {
- name: 'StarFilled',
+ name: 'star',
});
expect(favoriteStars.length).toBeGreaterThan(0);
});
@@ -322,7 +322,7 @@ describe('ChartList - anonymous view', () => {
// Switch to list view
const listViewToggle = await screen.findByRole('img', {
- name: 'UnorderedListOutlined',
+ name: 'unordered-list',
});
const listViewButton = listViewToggle.closest('[role="button"]');
fireEvent.click(listViewButton);
diff --git a/superset-frontend/src/pages/DashboardList/DashboardList.test.jsx
b/superset-frontend/src/pages/DashboardList/DashboardList.test.jsx
index 33dec8fa1f..29409fe1c5 100644
--- a/superset-frontend/src/pages/DashboardList/DashboardList.test.jsx
+++ b/superset-frontend/src/pages/DashboardList/DashboardList.test.jsx
@@ -146,11 +146,11 @@ describe('DashboardList', () => {
await screen.findByTestId('dashboard-list-view');
// Initially in card view
- const cardViewIcon = screen.getByRole('img', { name: 'AppstoreOutlined' });
+ const cardViewIcon = screen.getByRole('img', { name: 'appstore' });
expect(cardViewIcon).toBeInTheDocument();
// Switch to table view
- const listViewIcon = screen.getByRole('img', { name: 'AppstoreOutlined' });
+ const listViewIcon = screen.getByRole('img', { name: 'appstore' });
const listViewButton = listViewIcon.closest('[role="button"]');
fireEvent.click(listViewButton);
@@ -167,7 +167,7 @@ describe('DashboardList', () => {
// Find and click the first more options button
const moreIcons = await screen.findAllByRole('img', {
- name: 'MoreOutlined',
+ name: 'more',
});
fireEvent.click(moreIcons[0]);
@@ -189,7 +189,7 @@ describe('DashboardList', () => {
// Find and click the first more options button
const moreIcons = await screen.findAllByRole('img', {
- name: 'MoreOutlined',
+ name: 'more',
});
fireEvent.click(moreIcons[0]);
