This is an automated email from the ASF dual-hosted git repository. maximebeauchemin pushed a commit to branch template_less in repository https://gitbox.apache.org/repos/asf/superset.git
commit e0d86df5a5a04108e858157e47bf40ca8452f73f Merge: 2f80ebb3e8 4f166a03f5 Author: Maxime Beauchemin <[email protected]> AuthorDate: Wed Mar 19 12:58:37 2025 -0700 merging .asf.yaml | 12 +- docs/docusaurus.config.ts | 13 +- docs/static/.htaccess | 2 +- helm/superset/Chart.lock | 4 +- helm/superset/Chart.yaml | 2 +- helm/superset/README.md | 2 +- helm/superset/values.yaml | 2 +- requirements/base.in | 4 + requirements/base.txt | 62 +- requirements/development.txt | 79 +- requirements/translations.txt | 2 +- .../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 | 35 +- .../cypress/e2e/dashboard/drilltodetail.test.ts | 2 +- .../cypress/e2e/dashboard_list/list.test.ts | 13 +- .../cypress-base/cypress/support/directories.ts | 28 +- .../cypress-base/cypress/utils/index.ts | 8 +- .../plugin-chart/templates/src/MyChart.erb | 4 +- .../components/ColumnTypeLabel/ColumnTypeLabel.tsx | 22 +- .../src/components/ControlSubSectionHeader.tsx | 10 +- superset-frontend/spec/helpers/shim.tsx | 11 +- .../SqlLab/components/QueryLimitSelect/index.tsx | 5 +- .../src/SqlLab/components/QueryTable/index.tsx | 19 +- .../src/SqlLab/components/ResultSet/index.tsx | 27 +- .../components/RunQueryActionButton/index.tsx | 13 +- .../SaveDatasetActionButton.test.tsx | 6 +- .../components/SaveDatasetActionButton/index.tsx | 30 +- .../SqlLab/components/SaveQuery/SaveQuery.test.tsx | 10 +- .../src/SqlLab/components/SaveQuery/index.tsx | 2 +- .../SqlLab/components/ShareSqlLabQuery/index.tsx | 16 +- .../src/SqlLab/components/ShowSQL/index.tsx | 8 +- .../src/SqlLab/components/SouthPane/index.tsx | 11 +- .../src/SqlLab/components/SqlEditor/index.tsx | 8 +- .../SqlLab/components/SqlEditorTabHeader/index.tsx | 106 +- .../TabStatusIcon/TabStatusIcon.test.tsx | 36 - .../src/SqlLab/components/TabStatusIcon/index.tsx | 78 - .../SqlLab/components/TabbedSqlEditors/index.tsx | 29 +- .../src/SqlLab/components/TableElement/index.tsx | 34 +- .../src/SqlLab/components/TablePreview/index.tsx | 10 +- .../src/assets/images/icons/alert.svg | Bin 1928 -> 0 bytes .../src/assets/images/icons/alert_solid.svg | Bin 1572 -> 0 bytes .../src/assets/images/icons/alert_solid_small.svg | Bin 2867 -> 0 bytes .../src/assets/images/icons/area-chart-tile.svg | Bin 1614 -> 0 bytes .../src/assets/images/icons/bar-chart-tile.svg | Bin 2141 -> 0 bytes superset-frontend/src/assets/images/icons/bolt.svg | Bin 1565 -> 0 bytes .../src/assets/images/icons/bolt_small.svg | Bin 1555 -> 0 bytes .../src/assets/images/icons/bolt_small_run.svg | Bin 1442 -> 0 bytes .../src/assets/images/icons/calendar.svg | Bin 2119 -> 0 bytes .../src/assets/images/icons/cancel-x.svg | Bin 2078 -> 0 bytes .../src/assets/images/icons/cancel.svg | Bin 2261 -> 0 bytes .../src/assets/images/icons/cancel_solid.svg | Bin 2056 -> 0 bytes .../src/assets/images/icons/card_view.svg | Bin 1822 -> 0 bytes .../src/assets/images/icons/cards.svg | Bin 1756 -> 0 bytes .../src/assets/images/icons/cards_locked.svg | Bin 2163 -> 0 bytes .../src/assets/images/icons/caret_down.svg | Bin 1369 -> 0 bytes .../src/assets/images/icons/caret_left.svg | Bin 1364 -> 0 bytes .../src/assets/images/icons/caret_right.svg | Bin 1393 -> 0 bytes .../src/assets/images/icons/caret_up.svg | Bin 1371 -> 0 bytes .../src/assets/images/icons/check.svg | Bin 1404 -> 0 bytes .../src/assets/images/icons/circle.svg | Bin 1145 -> 0 bytes .../src/assets/images/icons/circle_check.svg | Bin 1698 -> 0 bytes .../src/assets/images/icons/circle_check_solid.svg | Bin 1629 -> 0 bytes .../icons/{database.svg => circle_solid.svg} | Bin 1212 -> 1127 bytes .../src/assets/images/icons/clock.svg | Bin 1639 -> 0 bytes .../src/assets/images/icons/close.svg | Bin 1630 -> 0 bytes superset-frontend/src/assets/images/icons/code.svg | Bin 1933 -> 0 bytes superset-frontend/src/assets/images/icons/cog.svg | Bin 3125 -> 0 bytes .../src/assets/images/icons/collapse.svg | Bin 1611 -> 0 bytes .../src/assets/images/icons/color_palette.svg | Bin 1559 -> 0 bytes .../src/assets/images/icons/components.svg | Bin 1898 -> 0 bytes superset-frontend/src/assets/images/icons/copy.svg | Bin 1652 -> 0 bytes .../src/assets/images/icons/cross-filter-badge.svg | Bin 1979 -> 0 bytes .../assets/images/icons/current-rendered-tile.svg | Bin 2188 -> 0 bytes .../src/assets/images/icons/cursor_target.svg | Bin 1889 -> 0 bytes .../src/assets/images/icons/dataset_physical.svg | Bin 1317 -> 0 bytes .../src/assets/images/icons/dataset_virtual.svg | Bin 1372 -> 0 bytes .../images/icons/dataset_virtual_greyscale.svg | Bin 1271 -> 0 bytes .../src/assets/images/icons/default_db_image.svg | Bin 3428 -> 0 bytes .../src/assets/images/icons/download.svg | Bin 1742 -> 0 bytes superset-frontend/src/assets/images/icons/edit.svg | Bin 1575 -> 0 bytes .../src/assets/images/icons/edit_alt.svg | Bin 1637 -> 0 bytes .../src/assets/images/icons/email.svg | Bin 1266 -> 0 bytes .../src/assets/images/icons/error_solid.svg | Bin 1721 -> 0 bytes .../src/assets/images/icons/error_solid_small.svg | Bin 1702 -> 0 bytes .../src/assets/images/icons/exclamation.svg | Bin 1218 -> 0 bytes .../src/assets/images/icons/expand.svg | Bin 1611 -> 0 bytes superset-frontend/src/assets/images/icons/eye.svg | Bin 1707 -> 0 bytes .../src/assets/images/icons/eye_slash.svg | Bin 2528 -> 0 bytes .../src/assets/images/icons/favorite-selected.svg | Bin 1630 -> 0 bytes .../assets/images/icons/favorite-unselected.svg | Bin 1865 -> 0 bytes .../images/icons/favorite_small_selected.svg | Bin 1608 -> 0 bytes .../src/assets/images/icons/field_abc.svg | Bin 2425 -> 0 bytes .../src/assets/images/icons/field_boolean.svg | Bin 1466 -> 0 bytes .../src/assets/images/icons/field_date.svg | Bin 1521 -> 0 bytes .../src/assets/images/icons/field_derived.svg | Bin 2950 -> 0 bytes .../src/assets/images/icons/field_num.svg | Bin 1045 -> 0 bytes .../src/assets/images/icons/field_struct.svg | Bin 1924 -> 0 bytes superset-frontend/src/assets/images/icons/file.svg | Bin 1365 -> 0 bytes .../src/assets/images/icons/filter.svg | Bin 1520 -> 0 bytes .../src/assets/images/icons/filter_small.svg | Bin 1360 -> 0 bytes .../src/assets/images/icons/folder.svg | Bin 1439 -> 0 bytes .../src/assets/images/icons/function_x.svg | Bin 2945 -> 0 bytes superset-frontend/src/assets/images/icons/gear.svg | Bin 3052 -> 0 bytes superset-frontend/src/assets/images/icons/grid.svg | Bin 1132 -> 0 bytes .../src/assets/images/icons/image.svg | Bin 1477 -> 0 bytes .../src/assets/images/icons/import.svg | Bin 1920 -> 0 bytes .../src/assets/images/icons/info-solid.svg | Bin 1731 -> 0 bytes superset-frontend/src/assets/images/icons/info.svg | Bin 1759 -> 0 bytes .../src/assets/images/icons/info_solid_small.svg | Bin 1353 -> 0 bytes superset-frontend/src/assets/images/icons/join.svg | Bin 1961 -> 0 bytes .../src/assets/images/icons/keyboard.svg | Bin 2577 -> 0 bytes .../src/assets/images/icons/lightbulb.svg | Bin 1783 -> 0 bytes .../src/assets/images/icons/line-chart-tile.svg | Bin 1768 -> 0 bytes superset-frontend/src/assets/images/icons/link.svg | Bin 2094 -> 0 bytes superset-frontend/src/assets/images/icons/list.svg | Bin 2908 -> 0 bytes .../src/assets/images/icons/list_view.svg | Bin 2936 -> 0 bytes .../src/assets/images/icons/location.svg | Bin 1485 -> 0 bytes .../src/assets/images/icons/lock_locked.svg | Bin 1549 -> 0 bytes .../src/assets/images/icons/lock_unlocked.svg | Bin 1834 -> 0 bytes superset-frontend/src/assets/images/icons/map.svg | Bin 1516 -> 0 bytes .../src/assets/images/icons/message.svg | Bin 1918 -> 0 bytes .../src/assets/images/icons/minus.svg | Bin 1380 -> 0 bytes .../src/assets/images/icons/minus_solid.svg | Bin 1285 -> 0 bytes .../src/assets/images/icons/more_horiz.svg | Bin 1316 -> 0 bytes .../src/assets/images/icons/more_vert.svg | Bin 1316 -> 0 bytes superset-frontend/src/assets/images/icons/move.svg | Bin 1093 -> 0 bytes .../src/assets/images/icons/nav_charts.svg | Bin 1405 -> 0 bytes .../src/assets/images/icons/nav_dashboard.svg | Bin 2094 -> 0 bytes .../src/assets/images/icons/nav_data.svg | Bin 1687 -> 0 bytes .../src/assets/images/icons/nav_explore.svg | Bin 2169 -> 0 bytes .../src/assets/images/icons/nav_home.svg | Bin 1827 -> 0 bytes .../src/assets/images/icons/nav_lab.svg | Bin 2064 -> 0 bytes superset-frontend/src/assets/images/icons/note.svg | Bin 1717 -> 0 bytes .../src/assets/images/icons/paperclip.svg | Bin 1935 -> 0 bytes .../src/assets/images/icons/pie-chart-tile.svg | Bin 2636 -> 0 bytes .../src/assets/images/icons/placeholder.svg | Bin 930 -> 0 bytes superset-frontend/src/assets/images/icons/plus.svg | Bin 1505 -> 0 bytes .../src/assets/images/icons/plus_large.svg | Bin 1185 -> 0 bytes .../src/assets/images/icons/plus_small.svg | Bin 1185 -> 0 bytes .../src/assets/images/icons/plus_solid.svg | Bin 1410 -> 0 bytes .../src/assets/images/icons/refresh.svg | Bin 1902 -> 0 bytes superset-frontend/src/assets/images/icons/save.svg | Bin 1412 -> 0 bytes .../src/assets/images/icons/search.svg | Bin 2292 -> 0 bytes .../src/assets/images/icons/server.svg | Bin 2026 -> 0 bytes .../src/assets/images/icons/share.svg | Bin 1853 -> 0 bytes superset-frontend/src/assets/images/icons/sql.svg | Bin 2697 -> 0 bytes .../images/icons/{offline.svg => square.svg} | Bin 919 -> 915 bytes .../src/assets/images/icons/table-chart-tile.svg | Bin 1752 -> 0 bytes .../src/assets/images/icons/table.svg | Bin 1211 -> 0 bytes superset-frontend/src/assets/images/icons/tag.svg | Bin 1662 -> 0 bytes superset-frontend/src/assets/images/icons/tags.svg | Bin 1021 -> 0 bytes .../src/assets/images/icons/trash.svg | Bin 1703 -> 0 bytes .../src/assets/images/icons/triangle_change.svg | Bin 1126 -> 0 bytes .../src/assets/images/icons/triangle_up.svg | Bin 1121 -> 0 bytes .../src/assets/images/icons/up-level.svg | Bin 1603 -> 0 bytes superset-frontend/src/assets/images/icons/user.svg | Bin 1973 -> 0 bytes .../src/assets/images/icons/warning.svg | Bin 1816 -> 0 bytes .../src/assets/images/icons/warning_solid.svg | Bin 1817 -> 0 bytes .../src/assets/images/icons/x-large.svg | Bin 1601 -> 0 bytes .../src/assets/images/icons/x-small.svg | Bin 1690 -> 0 bytes .../src/components/AlteredSliceTag/index.tsx | 2 +- .../Chart/DrillBy/DrillByMenuItems.test.tsx | 14 +- .../components/Chart/DrillBy/DrillByMenuItems.tsx | 7 +- .../DrillDetail/DrillDetailMenuItems.test.tsx | 39 +- .../CopyToClipboard/CopyToClipboard.stories.tsx | 4 +- .../DatabaseSelector/DatabaseSelector.test.tsx | 2 +- .../src/components/Datasource/CollectionTable.tsx | 14 +- .../src/components/Datasource/DatasourceEditor.jsx | 23 +- .../Datasource/DatasourceEditor.test.jsx | 4 +- .../src/components/Datasource/DatasourceModal.tsx | 11 + .../src/components/Dropdown/index.tsx | 2 +- .../src/components/DropdownButton/index.tsx | 38 +- .../DropdownContainer/DropdownContainer.test.tsx | 5 +- .../ErrorMessage/BasicErrorAlert.test.tsx | 6 +- .../src/components/ErrorMessage/ErrorAlert.tsx | 9 +- .../src/components/ErrorMessage/IssueCode.tsx | 8 +- .../src/components/FaveStar/FaveStar.test.tsx | 12 +- .../src/components/FaveStar/index.tsx | 17 +- .../components/IconTooltip/IconTooltip.stories.tsx | 11 +- .../src/components/Icons/AntdEnhanced.tsx | 89 +- .../src/components/Icons/BaseIcon.tsx | 97 + superset-frontend/src/components/Icons/Icon.tsx | 70 +- .../src/components/Icons/Icons.stories.tsx | 4 +- superset-frontend/src/components/Icons/index.tsx | 134 +- .../src/components/Icons/{IconType.ts => types.ts} | 19 +- .../src/components/InfoTooltip/index.tsx | 22 +- .../components/Label/reusable/DatasetTypeLabel.tsx | 8 +- .../components/Label/reusable/PublishedLabel.tsx | 10 +- .../components/LastUpdated/LastUpdated.test.tsx | 14 +- .../src/components/LastUpdated/index.tsx | 23 +- .../src/components/ListView/ActionsBar.tsx | 2 +- .../src/components/ListView/Filters/Search.tsx | 33 +- .../src/components/ListView/ListView.tsx | 4 +- .../ListViewCard/ListViewCard.stories.tsx | 6 +- superset-frontend/src/components/Menu/index.tsx | 101 +- .../src/components/MessageToasts/Toast.tsx | 41 +- .../src/components/MetadataBar/ContentConfig.tsx | 2 +- superset-frontend/src/components/Modal/Modal.tsx | 3 +- .../src/components/PageHeaderWithActions/index.tsx | 4 +- .../src/components/Popover/Popover.test.tsx | 2 +- .../src/components/PopoverDropdown/index.tsx | 9 +- .../src/components/PopoverSection/index.tsx | 36 +- .../src/components/Radio/Radio.stories.tsx | 32 +- .../src/components/RefreshLabel/index.tsx | 2 +- .../src/components/Select/AsyncSelect.tsx | 3 +- .../header-renderers/HeaderWithRadioGroup.tsx | 2 +- .../src/components/TableSelector/index.tsx | 4 +- superset-frontend/src/components/Tabs/Tabs.tsx | 4 +- superset-frontend/src/components/Tags/Tag.tsx | 7 +- superset-frontend/src/components/Timer/index.tsx | 28 +- .../src/components/Tooltip/Tooltip.test.tsx | 2 +- .../components/WarningIconWithTooltip/index.tsx | 2 +- .../src/dashboard/components/DashboardGrid.jsx | 21 +- .../dashboard/components/DeleteComponentButton.tsx | 4 +- .../DetailsPanel/DetailsPanel.test.tsx | 24 +- .../FilterIndicator/FilterIndicator.test.tsx | 8 +- .../dashboard/components/FiltersBadge/index.tsx | 2 +- .../dashboard/components/Header/Header.test.tsx | 22 +- .../src/dashboard/components/Header/index.jsx | 9 + .../PropertiesModal/PropertiesModal.test.tsx | 5 +- .../dashboard/components/PropertiesModal/index.tsx | 5 + .../src/dashboard/components/SliceAdder.test.tsx | 8 +- .../src/dashboard/components/SliceAdder.tsx | 52 +- .../src/dashboard/components/SliceHeader/index.tsx | 4 - .../components/URLShortLinkButton/index.tsx | 22 +- .../dashboard/components/gridComponents/Column.jsx | 2 +- .../components/gridComponents/Divider.test.jsx | 2 +- .../components/gridComponents/Header.test.jsx | 4 +- .../dashboard/components/gridComponents/Row.jsx | 2 +- .../dashboard/components/gridComponents/Tab.jsx | 8 +- .../dashboard/components/gridComponents/Tabs.jsx | 47 +- .../ScopingModal/ChartsScopingListPanel.test.tsx | 2 +- .../ScopingModal/ChartsScopingListPanel.tsx | 14 +- .../ScopingModal/ScopingModal.test.tsx | 2 +- .../CrossFilters/ScopingModal/ScopingTreePanel.tsx | 1 - .../nativeFilters/FilterBar/FilterBar.test.tsx | 12 +- .../FilterBarSettings/FilterBarSettings.test.tsx | 47 +- .../FilterBar/FilterBarSettings/index.tsx | 36 +- .../FilterBar/FilterControls/FilterControl.tsx | 4 +- .../FilterBar/FilterControls/FilterControls.tsx | 2 +- .../FilterControls/FilterDivider.stories.tsx | 2 +- .../FilterBar/FilterControls/FilterDivider.tsx | 1 - .../FiltersOutOfScopeCollapsible/index.tsx | 3 +- .../nativeFilters/FilterBar/Header/Header.test.tsx | 8 +- .../nativeFilters/FilterBar/Header/index.tsx | 43 +- .../nativeFilters/FilterBar/Vertical.tsx | 26 +- .../nativeFilters/FilterCard/DependenciesRow.tsx | 2 +- .../nativeFilters/FilterCard/FilterCard.test.tsx | 2 +- .../nativeFilters/FilterCard/NameRow.tsx | 5 +- .../FiltersConfigModal/DraggableFilter.tsx | 1 - .../FiltersConfigModal/FilterTitleContainer.tsx | 15 +- .../FiltersConfigModal/FilterTitlePane.tsx | 14 +- .../FiltersConfigForm/DependencyList.tsx | 4 +- .../FiltersConfigForm/FilterScope/ScopingTree.tsx | 2 +- .../FiltersConfigForm/FiltersConfigForm.tsx | 17 +- .../FiltersConfigModal/FiltersConfigModal.test.tsx | 12 +- .../src/explore/components/ControlHeader.tsx | 9 +- .../explore/components/DataTableControl/index.tsx | 46 +- .../components/DataTablesPane/DataTablesPane.tsx | 9 +- .../DatasourcePanel/DatasourcePanel.test.tsx | 2 +- .../ExploreChartHeader/ExploreChartHeader.test.tsx | 4 +- .../components/ExploreChartHeader/index.jsx | 8 +- .../components/ExploreViewContainer/index.jsx | 18 +- .../components/ExportToCSVDropdown/index.tsx | 4 +- .../PropertiesModal/PropertiesModal.test.tsx | 6 +- .../explore/components/PropertiesModal/index.tsx | 16 +- .../explore/components/RunQueryButton/index.tsx | 15 +- .../controls/AnnotationLayerControl/index.tsx | 27 +- .../CollectionControl/CollectionControl.test.tsx | 4 +- .../controls/CollectionControl/index.jsx | 2 +- .../ColorSchemeControl/ColorSchemeControl.test.tsx | 6 +- .../controls/ColorSchemeControl/index.tsx | 15 +- .../ConditionalFormattingControl.tsx | 22 +- .../DatasourceControl/DatasourceControl.test.jsx | 6 +- .../controls/DatasourceControl/index.jsx | 16 +- .../controls/DateFilterControl/DateFilterLabel.tsx | 4 +- .../DateFilterControl/components/DateLabel.tsx | 32 +- .../DndColumnSelectPopoverTitle.jsx | 14 +- .../DndColumnSelectControl/DndSelectLabel.tsx | 8 +- .../DndColumnSelectControl/Option.test.tsx | 10 +- .../controls/DndColumnSelectControl/Option.tsx | 21 +- .../DndColumnSelectControl/OptionWrapper.test.tsx | 4 +- .../FilterControl/AdhocFilterControl/index.jsx | 13 +- .../AdhocFilterEditPopoverSqlTabContent/index.tsx | 8 +- .../AdhocFilterOption/AdhocFilterOption.test.tsx | 8 +- .../controls/FixedOrMetricControl/index.jsx | 3 +- .../controls/LayerConfigsControl/FlatLayerTree.tsx | 5 +- .../controls/LayerConfigsControl/LayerTreeItem.tsx | 7 +- .../AdhocMetricEditPopoverTitle.test.tsx | 3 +- .../MetricControl/AdhocMetricEditPopoverTitle.tsx | 14 +- .../controls/MetricControl/MetricsControl.jsx | 9 +- .../components/controls/OptionControls/index.tsx | 23 +- .../components/controls/VizTypeControl/VizTile.tsx | 9 +- .../VizTypeControl/VizTypeControl.test.tsx | 8 +- .../controls/VizTypeControl/VizTypeGallery.tsx | 15 +- .../controls/VizTypeControl/constants.tsx | 10 +- .../DashboardsSubMenu.tsx | 3 +- .../src/features/alerts/AlertReportModal.tsx | 11 +- .../features/alerts/components/AlertStatusIcon.tsx | 15 +- .../alerts/components/NotificationMethod.test.tsx | 4 +- .../alerts/components/NotificationMethod.tsx | 7 +- .../alerts/components/RecipientIcon.test.tsx | 7 +- .../features/alerts/components/RecipientIcon.tsx | 14 +- .../alerts/components/ValidatedPanelHeader.tsx | 14 +- .../annotationLayers/AnnotationLayerModal.tsx | 19 +- .../src/features/annotations/AnnotationModal.tsx | 18 +- .../src/features/charts/ChartCard.tsx | 74 +- .../src/features/cssTemplates/CssTemplateModal.tsx | 68 +- .../src/features/dashboards/DashboardCard.tsx | 14 +- .../DatabaseConnectionForm/EncryptedField.tsx | 4 +- .../DatabaseModal/SSHTunnelSwitch.test.tsx | 4 +- .../databases/DatabaseModal/index.test.tsx | 10 +- .../src/features/databases/DatabaseModal/index.tsx | 35 +- .../src/features/databases/DatabaseModal/styles.ts | 2 + .../UploadDataModel/UploadDataModal.test.tsx | 4 +- .../features/databases/UploadDataModel/index.tsx | 9 +- .../AddDataset/DatasetPanel/DatasetPanel.tsx | 19 +- .../features/datasets/AddDataset/Header/index.tsx | 2 +- .../AddDataset/LeftPanel/LeftPanel.test.tsx | 2 +- .../src/features/home/ActivityTable.tsx | 6 +- superset-frontend/src/features/home/ChartTable.tsx | 12 +- .../src/features/home/DashboardTable.test.tsx | 4 +- .../src/features/home/DashboardTable.tsx | 11 +- .../src/features/home/LanguagePicker.tsx | 13 +- superset-frontend/src/features/home/Menu.tsx | 26 +- superset-frontend/src/features/home/RightMenu.tsx | 31 +- .../src/features/home/SavedQueries.tsx | 34 +- superset-frontend/src/features/home/SubMenu.tsx | 12 +- .../src/features/queries/SyntaxHighlighterCopy.tsx | 2 +- .../ReportModal/HeaderReportDropdown/index.tsx | 4 +- .../src/features/reports/ReportModal/index.tsx | 2 +- .../src/features/rls/RowLevelSecurityModal.tsx | 100 +- superset-frontend/src/features/tags/TagCard.tsx | 9 +- .../src/middleware/loggerMiddleware.js | 6 +- .../src/pages/AlertReportList/index.tsx | 35 +- .../src/pages/AnnotationLayerList/index.tsx | 27 +- .../src/pages/AnnotationList/index.tsx | 31 +- .../src/pages/ChartCreation/ChartCreation.test.tsx | 17 +- .../src/pages/ChartCreation/index.tsx | 16 +- .../src/pages/ChartList/ChartList.test.jsx | 28 +- superset-frontend/src/pages/ChartList/index.tsx | 26 +- .../src/pages/CssTemplateList/index.tsx | 20 +- .../src/pages/DashboardList/DashboardList.test.jsx | 12 +- .../src/pages/DashboardList/index.tsx | 27 +- superset-frontend/src/pages/DatabaseList/index.tsx | 39 +- superset-frontend/src/pages/DatasetList/index.tsx | 62 +- .../src/pages/QueryHistoryList/index.tsx | 22 +- .../src/pages/RowLevelSecurityList/index.tsx | 36 +- .../pages/SavedQueryList/SavedQueryList.test.jsx | 2 +- .../src/pages/SavedQueryList/index.tsx | 35 +- superset-frontend/src/pages/Tags/index.tsx | 41 +- superset-frontend/src/views/CRUD/utils.tsx | 7 - superset/commands/explore/get.py | 2 +- superset/commands/importers/v1/__init__.py | 5 + superset/common/query_context_processor.py | 27 + superset/common/query_object.py | 7 +- superset/connectors/sqla/models.py | 5 +- superset/databases/api.py | 21 +- superset/databases/schemas.py | 1 + superset/jinja_context.py | 17 +- superset/translations/fr/LC_MESSAGES/messages.po | 4815 +++++++++----------- superset/utils/core.py | 14 +- tests/integration_tests/databases/api_tests.py | 87 + tests/integration_tests/explore/api_tests.py | 6 +- tests/integration_tests/query_context_tests.py | 2 + tests/integration_tests/utils_tests.py | 5 - .../unit_tests/common/test_query_object_factory.py | 27 +- tests/unit_tests/jinja_context_test.py | 13 + tests/unit_tests/utils/test_core.py | 193 + 372 files changed, 4960 insertions(+), 4222 deletions(-) diff --cc superset-frontend/packages/generator-superset/generators/plugin-chart/templates/src/MyChart.erb index 136158ea5c,c5b8583de1..7f9e6383e0 --- a/superset-frontend/packages/generator-superset/generators/plugin-chart/templates/src/MyChart.erb +++ b/superset-frontend/packages/generator-superset/generators/plugin-chart/templates/src/MyChart.erb @@@ -25,14 -25,29 +25,14 @@@ import { <%= packageLabel %>Props, <%= // Theming variables are provided for your use via a ThemeProvider // imported from @superset-ui/core. For variables available, please visit -// https://github.com/apache-superset/superset-ui/blob/master/packages/superset-ui-core/src/style/index.ts +// https://github.com/apache-superset/superset-ui/blob/master/packages/superset-ui-core/src/theme/index.ts const Styles = styled.div<<%= packageLabel %>StylesProps>` - background-color: ${({ theme }) => theme.colors.secondary.light2}; - padding: ${({ theme }) => theme.gridUnit * 4}px; - border-radius: ${({ theme }) => theme.gridUnit * 2}px; + background-color: ${({ theme }) => theme.colors.primary.light2}; - padding: ${({ theme }) => theme.gridUnit * 4}px; - border-radius: ${({ theme }) => theme.gridUnit * 2}px; ++ padding: ${({ theme }) => theme.sizeUnit * 4}px; ++ border-radius: ${({ theme }) => theme.sizeUnit * 2}px; height: ${({ height }) => height}px; width: ${({ width }) => width}px; - - h3 { - /* You can use your props to control CSS! */ - margin-top: 0; - margin-bottom: ${({ theme }) => theme.gridUnit * 3}px; - font-size: ${({ theme, headerFontSize }) => - theme.typography.sizes[headerFontSize]}px; - font-weight: ${({ theme, boldText }) => - theme.typography.weights[boldText ? 'bold' : 'normal']}; - } - - pre { - height: ${({ theme, headerFontSize, height }) => - height - theme.gridUnit * 12 - theme.typography.sizes[headerFontSize]}px; - } `; /** diff --cc superset-frontend/packages/superset-ui-chart-controls/src/components/ControlSubSectionHeader.tsx index ab6e600bdc,676028b453..06e8233725 --- a/superset-frontend/packages/superset-ui-chart-controls/src/components/ControlSubSectionHeader.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/ControlSubSectionHeader.tsx @@@ -16,11 -16,13 +16,13 @@@ * specific language governing permissions and limitations * under the License. */ - import { styled } from '@superset-ui/core'; + import { styled, css } from '@superset-ui/core'; export const ControlSubSectionHeader = styled.div` - font-weight: ${({ theme }) => theme.fontWeightStrong}; - font-size: ${({ theme }) => theme.fontSizeSM}; - margin-bottom: ${({ theme }) => theme.sizeUnit}px; + ${({ theme }) => css` - font-weight: ${theme.typography.weights.bold}; - font-size: ${theme.typography.sizes.s}; - margin-bottom: ${theme.gridUnit}px; ++ font-weight: ${theme.fontWeightStrong}; ++ font-size: ${theme.fontSizeSM}; ++ margin-bottom: ${theme.sizeUnit}px; + `} `; export default ControlSubSectionHeader; diff --cc superset-frontend/src/SqlLab/components/QueryTable/index.tsx index 6d8cbce42e,c120d51446..66ccddc2ab --- a/superset-frontend/src/SqlLab/components/QueryTable/index.tsx +++ b/superset-frontend/src/SqlLab/components/QueryTable/index.tsx @@@ -178,7 -187,12 +178,12 @@@ const QueryTable = ( }, timed_out: { config: { - icon: <Icons.Clock iconColor={theme.colorError} iconSize="m" />, + icon: ( + <Icons.ClockCircleOutlined - iconColor={theme.colors.error.base} ++ iconColor={theme.colorError} + iconSize="m" + /> + ), label: t('Offline'), }, }, diff --cc superset-frontend/src/SqlLab/components/ResultSet/index.tsx index 733263c31a,4d6d4ee6c1..53df0a4ba7 --- a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx +++ b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx @@@ -147,9 -147,18 +147,18 @@@ const ResultSetControls = styled.div const ResultSetButtons = styled.div` display: grid; grid-auto-flow: column; - padding-right: ${({ theme }) => 2 * theme.gridUnit}px; + padding-right: ${({ theme }) => 2 * theme.sizeUnit}px; `; + const copyButtonStyles = css` + &:hover { + text-decoration: unset; + } + span > :first-of-type { + margin: 0px; + } + `; + const ROWS_CHIP_WIDTH = 100; const GAP = 8; @@@ -342,8 -351,8 +351,9 @@@ const ResultSet = ( )} {csv && canExportData && ( <Button + css={copyButtonStyles} buttonSize="small" + buttonStyle="secondary" href={getExportCsvUrl(query.id)} data-test="export-csv-button" onClick={() => { @@@ -374,13 -385,15 +386,16 @@@ wrapped={false} copyNode={ <Button + css={copyButtonStyles} buttonSize="small" + buttonStyle="secondary" data-test="copy-to-clipboard-button" > - {/* TODO: Remove fa-icon */} - {/* eslint-disable-next-line icons/no-fa-icons-usage */} - <i className="fa fa-clipboard" /> {t('Copy to Clipboard')} + <Icons.CopyOutlined + iconSize="s" + iconColor={theme.colors.primary.dark2} + />{' '} + {t('Copy to Clipboard')} </Button> } hideTooltip diff --cc superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx index d3116b9f90,815a405663..9f13824432 --- a/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx +++ b/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx @@@ -150,20 -150,21 +150,19 @@@ const RunQueryActionButton = ( ? { overlay: overlayCreateAsMenu, icon: ( - <Icons.CaretDown + <Icons.DownOutlined iconColor={ - isDisabled - ? theme.colors.grayscale.base - : theme.colors.grayscale.light5 + isDisabled ? theme.colorTextDisabled : theme.colorIcon } - name="caret-down" /> ), trigger: 'click', } : { - buttonStyle: shouldShowStopBtn ? 'warning' : 'primary', + buttonStyle: shouldShowStopBtn ? 'danger' : 'primary', })} > - {buildText(shouldShowStopBtn, selectedText)} + {buildText(shouldShowStopBtn, selectedText, theme)} </ButtonComponent> </StyledButton> ); diff --cc superset-frontend/src/SqlLab/components/SaveDatasetActionButton/index.tsx index 9a18da4237,4b0eab7be4..c9ebb58468 --- a/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/index.tsx +++ b/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/index.tsx @@@ -46,10 -37,15 +37,12 @@@ const SaveDatasetActionButton = ( {t('Save')} </Button> ) : ( - <StyledDropdownButton + <DropdownButton onClick={() => setShowSave(true)} dropdownRender={() => overlayMenu} - icon={<Icons.CaretDown name="caret-down" />} + icon={ - <Icons.DownOutlined - iconSize="xs" - iconColor={theme.colors.primary.dark2} - /> ++ <Icons.DownOutlined iconSize="xs" iconColor={theme.colorPrimaryText} /> + } trigger={['click']} > {t('Save')} diff --cc superset-frontend/src/SqlLab/components/ShareSqlLabQuery/index.tsx index 02ef452e2c,0216078e0d..d415efa0fe --- a/superset-frontend/src/SqlLab/components/ShareSqlLabQuery/index.tsx +++ b/superset-frontend/src/SqlLab/components/ShareSqlLabQuery/index.tsx @@@ -16,7 -16,13 +16,12 @@@ * specific language governing permissions and limitations * under the License. */ - import { t, getClientErrorObject, SupersetClient } from '@superset-ui/core'; + import { + t, - useTheme, + getClientErrorObject, + SupersetClient, + css, + } from '@superset-ui/core'; import Button from 'src/components/Button'; import Icons from 'src/components/Icons'; import withToasts from 'src/components/MessageToasts/withToasts'; @@@ -69,10 -76,18 +74,15 @@@ const ShareSqlLabQuery = ( const tooltip = t('Copy query link to your clipboard'); return ( <Button + buttonSize="small" tooltip={tooltip} - buttonStyle="secondary" - icon={<Icons.Link iconSize="m" />} + css={css` + span > :first-of-type { + margin-right: 0; + } + `} > - <Icons.LinkOutlined - iconColor={theme.colors.primary.base} - iconSize="m" - /> ++ <Icons.LinkOutlined iconSize="m" /> {t('Copy link')} </Button> ); diff --cc superset-frontend/src/SqlLab/components/SouthPane/index.tsx index 3d6b2127a9,7ddf8f2b07..d31852a444 --- a/superset-frontend/src/SqlLab/components/SouthPane/index.tsx +++ b/superset-frontend/src/SqlLab/components/SouthPane/index.tsx @@@ -180,11 -181,11 +181,11 @@@ const SouthPane = ( <Tabs.TabPane tab={ <> - <Icons.Table - iconSize="s" + <Icons.InsertRowAboveOutlined + iconSize="l" css={css` - margin-bottom: 2px; - margin-right: 4px; - margin-bottom: ${theme.gridUnit * 0.5}px; - margin-right: ${theme.gridUnit}px; ++ margin-bottom: ${theme.sizeUnit * 0.5}px; ++ margin-right: ${theme.sizeUnit}px; `} /> {`${schema}.${decodeURIComponent(name)}`} diff --cc superset-frontend/src/SqlLab/components/SqlEditorTabHeader/index.tsx index 85d4b0a4de,77a9338ab4..ebcd389978 --- a/superset-frontend/src/SqlLab/components/SqlEditorTabHeader/index.tsx +++ b/superset-frontend/src/SqlLab/components/SqlEditorTabHeader/index.tsx @@@ -36,18 -43,23 +43,23 @@@ import Icons, { IconType } from 'src/co const TabTitleWrapper = styled.div` display: flex; align-items: center; + + [aria-label='check-circle'], + .status-icon { + margin: 0px; + } `; const TabTitle = styled.span` - margin-right: ${({ theme }) => theme.gridUnit * 2}px; + margin-right: ${({ theme }) => theme.sizeUnit * 2}px; text-transform: none; `; const IconContainer = styled.div` - display: inline-block; - width: ${({ theme }) => theme.sizeUnit * 8}px; - text-align: center; + ${({ theme }) => css` + display: inline-block; - margin: 0 ${theme.gridUnit * 2}px 0 0px; ++ margin: 0 ${theme.sizeUnit * 2}px 0 0px; + `} `; - interface Props { queryEditor: QueryEditor; } @@@ -85,7 -112,21 +112,21 @@@ const SqlEditorTabHeader: FC<Props> = ( actions.queryEditorSetTitle(qe, newTitle, qe.id); } } + const getStatusColor = (state: QueryState, theme: SupersetTheme): string => { + const statusColors: Record<QueryState, string> = { + [QueryState.Running]: theme.colors.info.base, + [QueryState.Success]: theme.colors.success.base, + [QueryState.Failed]: theme.colors.error.base, + [QueryState.Started]: theme.colors.primary.base, + [QueryState.Stopped]: theme.colors.warning.base, + [QueryState.Pending]: theme.colors.grayscale.light1, + [QueryState.Scheduled]: theme.colors.grayscale.light2, - [QueryState.Fetching]: theme.colors.secondary.base, ++ [QueryState.Fetching]: theme.colorWarning, + [QueryState.TimedOut]: theme.colors.error.dark1, + }; + return statusColors[state] || theme.colors.grayscale.light2; + }; return ( <TabTitleWrapper> <MenuDotsDropdown diff --cc superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx index 8f132dd52f,4752d9b6c1..6cc2c1ada0 --- a/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx +++ b/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx @@@ -291,7 -291,12 +291,12 @@@ export const DrillByMenuItems = ( {showSearch && ( <Input ref={ref} - prefix={<Icons.Search iconSize="l" iconColor={theme.colorText} />} + prefix={ + <Icons.SearchOutlined + iconSize="l" - iconColor={theme.colors.grayscale.light1} ++ iconColor={theme.colorIcon} + /> + } onChange={e => { e.stopPropagation(); handleInput(e.target.value); diff --cc superset-frontend/src/components/Datasource/CollectionTable.tsx index 70ee95d7ad,22e9df44f3..6b90ab933d --- a/superset-frontend/src/components/Datasource/CollectionTable.tsx +++ b/superset-frontend/src/components/Datasource/CollectionTable.tsx @@@ -150,8 -150,11 +150,11 @@@ const CrudButtonWrapper = styled.div const StyledButtonWrapper = styled.span` ${({ theme }) => ` - margin-top: ${theme.gridUnit * 3}px; - margin-left: ${theme.gridUnit * 3}px; + margin-top: ${theme.sizeUnit * 3}px; + margin-left: ${theme.sizeUnit * 3}px; + button>span>:first-of-type { + margin-right: 0; + } `} `; diff --cc superset-frontend/src/components/Datasource/DatasourceEditor.jsx index f0f4e105ac,9462056390..388c487b30 --- a/superset-frontend/src/components/Datasource/DatasourceEditor.jsx +++ b/superset-frontend/src/components/Datasource/DatasourceEditor.jsx @@@ -135,8 -135,11 +135,11 @@@ const StyledColumnsTabWrapper = styled. const StyledButtonWrapper = styled.span` ${({ theme }) => ` - margin-top: ${theme.gridUnit * 3}px; - margin-left: ${theme.gridUnit * 3}px; + margin-top: ${theme.sizeUnit * 3}px; + margin-left: ${theme.sizeUnit * 3}px; + button>span>:first-of-type { + margin-right: 0; + } `} `; @@@ -971,9 -974,19 +974,19 @@@ class DatasourceEditor extends PureComp <EditLockContainer> <span role="button" tabIndex={0} onClick={this.onChangeEditMode}> {this.state.isEditMode ? ( - <Icons.LockUnlocked iconColor={theme.colors.grayscale.base} /> + <Icons.UnlockOutlined + iconSize="xl" + css={theme => css` - margin: auto ${theme.gridUnit}px auto 0; ++ margin: auto ${theme.sizeUnit}px auto 0; + `} + /> ) : ( - <Icons.LockLocked iconColor={theme.colors.grayscale.base} /> + <Icons.LockOutlined + iconSize="xl" + css={theme => ({ - margin: `auto ${theme.gridUnit}px auto 0`, ++ margin: `auto ${theme.sizeUnit}px auto 0`, + })} + /> )} </span> {!this.state.isEditMode && ( diff --cc superset-frontend/src/components/Datasource/DatasourceModal.tsx index f6c018baa3,e25f4d349a..a93c611b25 --- a/superset-frontend/src/components/Datasource/DatasourceModal.tsx +++ b/superset-frontend/src/components/Datasource/DatasourceModal.tsx @@@ -298,6 -302,13 +302,13 @@@ const DatasourceModal: FunctionComponen onHide={onHide} title={ <span> + <Icons.EditOutlined + iconSize="l" + css={css` - margin: auto ${theme.gridUnit * 2}px auto 0; ++ margin: auto ${theme.sizeUnit * 2}px auto 0; + `} + data-test="edit-alt" + /> {t('Edit Dataset ')} <strong>{currentDatasource.table_name}</strong> </span> diff --cc superset-frontend/src/components/DropdownButton/index.tsx index 84ffd5fe28,7f9f184dbd..69a1a21094 --- a/superset-frontend/src/components/DropdownButton/index.tsx +++ b/superset-frontend/src/components/DropdownButton/index.tsx @@@ -34,8 -35,43 +35,43 @@@ export const DropdownButton = ( children, ...rest }: DropdownButtonProps) => { + const theme = useTheme(); + const { type: buttonType } = rest; + // divider implementation for default (non-primary) buttons + const defaultBtnCss = css` + ${(!buttonType || buttonType === 'default') && + `.antd5-dropdown-trigger { + position: relative; + &:before { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 1px; + height: 100%; + background-color: ${theme.colors.grayscale.light2}; + } + .anticon { + vertical-align: middle; + } + }`} + `; const button = ( - <Dropdown.Button dropdownRender={dropdownRender} {...rest}> + <Dropdown.Button + dropdownRender={dropdownRender} + {...rest} + css={[ + defaultBtnCss, + css` + .antd5-btn { + height: 30px; + box-shadow: none; - font-size: ${theme.typography.sizes.s}px; - font-weight: ${theme.typography.weights.bold}; ++ font-size: ${theme.fontSizeSM}px; ++ font-weight: ${theme.fontWeightStrong}; + } + `, + ]} + > {children} </Dropdown.Button> ); diff --cc superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx index cd3d9d7562,8e0d3ea513..85e90598a1 --- a/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx +++ b/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx @@@ -65,9 -64,13 +64,13 @@@ const ErrorAlert: React.FC<ErrorAlertPr const theme = useTheme(); const renderTrigger = () => { const icon = - type === 'warning' ? <WarningOutlined /> : <ExclamationCircleOutlined />; + type === 'warning' ? ( + <Icons.WarningOutlined /> + ) : ( + <Icons.ExclamationCircleOutlined /> + ); const color = - type === 'warning' ? theme.colors.warning.base : theme.colors.error.base; + type === 'warning' ? theme.colorWarningText : theme.colorErrorText; return ( <div className={className} style={{ cursor: 'pointer' }}> <span style={{ color }}>{icon} </span> diff --cc superset-frontend/src/components/IconTooltip/IconTooltip.stories.tsx index 875d6375e8,2e5f3a280a..e673bc8c78 --- a/superset-frontend/src/components/IconTooltip/IconTooltip.stories.tsx +++ b/superset-frontend/src/components/IconTooltip/IconTooltip.stories.tsx @@@ -38,10 -39,16 +39,16 @@@ const PLACEMENTS = 'topRight', ]; + const theme = useTheme(); + export const InteractiveIconTooltip = (args: Props) => ( - <div css={{ margin: '40px 70px' }}> + <div + css={css` - margin: ${theme.gridUnit * 10}px ${theme.gridUnit * 17.5}px; ++ margin: ${theme.sizeUnit * 10}px ${theme.sizeUnit * 17.5}px; + `} + > <IconTooltip {...args}> - <Icons.Info /> + <Icons.InfoCircleOutlined /> </IconTooltip> </div> ); diff --cc superset-frontend/src/components/Icons/BaseIcon.tsx index 0000000000,68167d3cd0..75f4c87527 mode 000000,100644..100644 --- a/superset-frontend/src/components/Icons/BaseIcon.tsx +++ b/superset-frontend/src/components/Icons/BaseIcon.tsx @@@ -1,0 -1,97 +1,97 @@@ + /** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + -import { css, useTheme } from '@superset-ui/core'; ++import { css, useTheme, themeObject } 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` ++ ? `${themeObject.getFontSize(iconSize) || theme.fontSize}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; + vertical-align: middle; + `, + iconCss, + ]} + > + <Component + viewBox={viewBox || '0 0 24 24'} + width={ + iconSize - ? `${theme.typography.sizes[iconSize] || theme.typography.sizes.m}px` ++ ? `${themeObject.getFontSize(iconSize) || theme.fontSize}px` + : '24px' + } + height={ + iconSize - ? `${theme.typography.sizes[iconSize] || theme.typography.sizes.m}px` ++ ? `${themeObject.getFontSize(iconSize) || theme.fontSize}px` + : '24px' + } + {...(rest as CustomIconType)} + /> + </span> + ) : ( + <Component + css={iconCss} + role={whatRole} + aria-label={ariaLabel} + data-test={ariaLabel} + {...(rest as AntdIconType)} + /> + ); + }; diff --cc superset-frontend/src/components/InfoTooltip/index.tsx index 8437251de3,3ade7f0efa..cb0e2ffda7 --- a/superset-frontend/src/components/InfoTooltip/index.tsx +++ b/superset-frontend/src/components/InfoTooltip/index.tsx @@@ -61,7 -61,15 +61,15 @@@ const defaultOverlayStyle = fontSize: '12px', lineHeight: '16px', }; - + const InfoIconContainer = styled.div` + ${({ theme }) => css` + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; - margin-left: ${theme.gridUnit}px; ++ margin-left: ${theme.sizeUnit}px; + `} + `; const defaultColor = 'rgba(0,0,0,0.9)'; export default function InfoTooltip({ diff --cc superset-frontend/src/components/Label/reusable/PublishedLabel.tsx index 9a1d0c20bf,ddff92e010..ec24180df0 --- a/superset-frontend/src/components/Label/reusable/PublishedLabel.tsx +++ b/superset-frontend/src/components/Label/reusable/PublishedLabel.tsx @@@ -30,13 -30,17 +30,17 @@@ const PublishedLabel: React.FC<Publishe isPublished, onClick, }) => { + const theme = useTheme(); const label = isPublished ? t('Published') : t('Draft'); const icon = isPublished ? ( - <Icons.CircleCheck iconSize="s" /> + <Icons.CheckCircleOutlined + iconSize="s" + iconColor={theme.colors.primary.dark2} + /> ) : ( - <Icons.Minus iconSize="s" /> + <Icons.MinusCircleOutlined iconSize="s" /> ); - const labelType = isPublished ? 'primary' : 'secondary'; + const labelType = isPublished ? 'success' : 'primary'; return ( <Label type={labelType} icon={icon} onClick={onClick}> diff --cc superset-frontend/src/components/LastUpdated/index.tsx index ed0110e14c,f108d33680..63886f575b --- a/superset-frontend/src/components/LastUpdated/index.tsx +++ b/superset-frontend/src/components/LastUpdated/index.tsx @@@ -49,14 -49,15 +49,15 @@@ const TextStyles = styled.span color: ${({ theme }) => theme.colors.grayscale.base}; `; - const Refresh = styled(Icons.Refresh)` - color: ${({ theme }) => theme.colorPrimary}; + const RefreshIcon = styled(Icons.SyncOutlined)` + ${({ theme }) => ` width: auto; - height: ${({ theme }) => theme.sizeUnit * 5}px; - height: ${theme.gridUnit * 5}px; ++ height: ${theme.sizeUnit * 5}px; position: relative; - top: ${({ theme }) => theme.sizeUnit}px; - left: ${({ theme }) => theme.sizeUnit}px; - top: ${theme.gridUnit}px; - left: ${theme.gridUnit}px; ++ top: ${theme.sizeUnit}px; ++ left: ${theme.sizeUnit}px; cursor: pointer; + `}; `; export const LastUpdated: FunctionComponent<LastUpdatedProps> = ({ diff --cc superset-frontend/src/components/ListView/Filters/Search.tsx index 85f099f16d,da0243310a..37b7471dbc --- a/superset-frontend/src/components/ListView/Filters/Search.tsx +++ b/superset-frontend/src/components/ListView/Filters/Search.tsx @@@ -43,8 -43,8 +43,8 @@@ const Container = styled.div width: ${SELECT_WIDTH}px; `; - const SearchIcon = styled(Icons.Search)` - color: ${({ theme }) => theme.colors.grayscale.light1}; + const StyledInput = styled(AntdInput)` - border-radius: ${({ theme }) => theme.gridUnit}px; ++ border-radius: ${({ theme }) => theme.sizeUnit}px; `; function SearchFilter( diff --cc superset-frontend/src/components/Menu/index.tsx index 481a5e87ec,aea3909f66..881f47b168 --- a/superset-frontend/src/components/Menu/index.tsx +++ b/superset-frontend/src/components/Menu/index.tsx @@@ -52,7 -51,7 +51,7 @@@ const StyledMenuItem = styled(AntdMenu. justify-content: space-between; } a { - transition: background-color ${({ theme }) => theme.motionDurationMid}; - transition: background-color ${({ theme }) => theme.transitionTiming}s; ++ transition: background-color ${({ theme }) => theme.motionDurationMid}s; &:after { content: ''; position: absolute; @@@ -62,11 -61,8 +61,8 @@@ height: 3px; opacity: 0; transform: translateX(-50%); - transition: all ${({ theme }) => theme.motionDurationMid}; - transition: all ${({ theme }) => theme.transitionTiming}s; - background-color: ${({ theme }) => theme.colors.primary.base}; ++ transition: all ${({ theme }) => theme.motionDurationMid}s; + background-color: ${({ theme }) => theme.colorPrimary}; - &:after { - border-bottom: 2px solid transparent; - } } &:focus { @media (max-width: 767px) { @@@ -85,40 -81,32 +81,32 @@@ const StyledMenu = styled(AntdMenu) `; const StyledNav = styled(AntdMenu)` - background-color: ${({ theme }) => theme.colorBgElevated}; - display: flex; - align-items: center; - height: 100%; - gap: 0; - border-bottom: 0; - &.antd5-menu-horizontal > .antd5-menu-item { - line-height: 1.4; - height: 100%; + ${({ theme }) => css` display: flex; align-items: center; - margin: 0; - border-bottom: 2px solid transparent; - padding: ${({ theme }) => theme.sizeUnit * 2}px - ${({ theme }) => theme.sizeUnit * 4}px; - &:hover { - background-color: ${({ theme }) => theme.colors.primary.light5}; + height: 100%; + gap: 0; + &.antd5-menu-horizontal > .antd5-menu-item { + height: 100%; + display: flex; + align-items: center; + margin: 0; border-bottom: 2px solid transparent; - & a:after { - opacity: 1; - width: 100%; - } - &:after { - padding: ${theme.gridUnit * 2}px ${theme.gridUnit * 4}px; ++ padding: ${theme.sizeUnit * 2}px ${theme.sizeUnit * 4}px; + &:hover { + background-color: ${theme.colors.primary.light5}; border-bottom: 2px solid transparent; + & a:after { + opacity: 1; + width: 100%; + } } } - } - &.antd5-menu-horizontal > .antd5-menu-item-selected { - box-sizing: border-box; - border-bottom: 2px solid ${({ theme }) => theme.colorPrimary}; - &:after { - border-bottom: 2px solid transparent; + &.antd5-menu-horizontal > .antd5-menu-item-selected { + box-sizing: border-box; - border-bottom: 2px solid ${theme.colors.primary.base}; ++ border-bottom: 2px solid ${theme.colorPrimary}; } - } + `} `; const StyledSubMenu = styled(AntdMenu.SubMenu)` diff --cc superset-frontend/src/components/MessageToasts/Toast.tsx index 33aceac3c9,96d9063429..c59c1aac20 --- a/superset-frontend/src/components/MessageToasts/Toast.tsx +++ b/superset-frontend/src/components/MessageToasts/Toast.tsx @@@ -24,18 -24,26 +24,26 @@@ import Icons from 'src/components/Icons import { ToastType, ToastMeta } from './types'; const ToastContainer = styled.div` - display: flex; - justify-content: center; - align-items: center; + ${({ theme }) => css` + display: flex; + justify-content: center; + align-items: center; - span { - padding: 0 11px; - } + span { - padding: 0 ${theme.gridUnit * 2}px; ++ padding: 0 ${theme.sizeUnit * 2}px; + } + + .toast__close, + .toast__close span { + padding: 0; + } + `} `; - const StyledIcon = (theme: SupersetTheme) => css` + const notificationStyledIcon = (theme: SupersetTheme) => css` - min-width: ${theme.gridUnit * 5}px; - color: ${theme.colors.grayscale.base}; + min-width: ${theme.sizeUnit * 5}px; - color: ${theme.colors.grayscale.base}; ++ color: ${theme.colorIcon}; + margin-right: 0; `; interface ToastPresenterProps { diff --cc superset-frontend/src/components/PageHeaderWithActions/index.tsx index a6ffebfe83,8880ab0071..0610150ac8 --- a/superset-frontend/src/components/PageHeaderWithActions/index.tsx +++ b/superset-frontend/src/components/PageHeaderWithActions/index.tsx @@@ -90,10 -91,10 +90,10 @@@ const headerStyles = (theme: SupersetTh const buttonsStyles = (theme: SupersetTheme) => css` display: flex; align-items: center; - padding-left: ${theme.gridUnit * 2}px; + padding-left: ${theme.sizeUnit * 2}px; - & .fave-unfave-icon { + & .anticon-star { - padding: 0 ${theme.gridUnit}px; + padding: 0 ${theme.sizeUnit}px; &:first-of-type { padding-left: 0; diff --cc superset-frontend/src/components/PopoverDropdown/index.tsx index ef68d100c8,b781ff6ce4..5532e21063 --- a/superset-frontend/src/components/PopoverDropdown/index.tsx +++ b/superset-frontend/src/components/PopoverDropdown/index.tsx @@@ -110,9 -110,12 +110,12 @@@ const PopoverDropdown = (props: Popover > <div role="button" css={{ display: 'flex', alignItems: 'center' }}> {selected && renderButton(selected)} - <Icons.CaretDown - iconColor={theme.colors.grayscale.base} - css={{ marginTop: theme.sizeUnit * 0.5 }} + <Icons.DownOutlined + iconSize="s" + css={{ - marginTop: theme.gridUnit * 0.5, - marginLeft: theme.gridUnit * 0.5, ++ marginTop: theme.sizeUnit * 0.5, ++ marginLeft: theme.sizeUnit * 0.5, + }} /> </div> </Dropdown> diff --cc superset-frontend/src/components/PopoverSection/index.tsx index 94d4996986,9a687357d8..97537e42f0 --- a/superset-frontend/src/components/PopoverSection/index.tsx +++ b/superset-frontend/src/components/PopoverSection/index.tsx @@@ -56,27 -56,33 +56,33 @@@ export default function PopoverSection( > <strong data-test="popover-title">{title}</strong> {info && ( - <Tooltip title={info} css={{ marginLeft: theme.sizeUnit }}> - <Icons.InfoSolidSmall + <Tooltip + title={info} + css={css` - margin-left: ${theme.gridUnit}px; - margin-right: ${theme.gridUnit}px; ++ margin-left: ${theme.sizeUnit}px; ++ margin-right: ${theme.sizeUnit}px; + `} + > + <Icons.InfoCircleFilled role="img" - width={14} - height={14} + iconSize="s" iconColor={theme.colors.grayscale.light1} /> </Tooltip> )} - <Icons.Check + <Icons.CheckOutlined + iconSize="s" role="img" iconColor={ - isSelected ? theme.colors.primary.base : theme.colors.grayscale.base + isSelected ? theme.colorPrimary : theme.colors.grayscale.base } /> </div> <div - css={{ - marginLeft: theme.sizeUnit, - marginTop: theme.sizeUnit, - }} + css={css` - margin-left: ${theme.gridUnit}px; - margin-top: ${theme.gridUnit}px; ++ margin-left: ${theme.sizeUnit}px; ++ margin-top: ${theme.sizeUnit}px; + `} > {children} </div> diff --cc superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx index f7968f7681,fe43fd8954..7e9b49cd9a --- a/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx +++ b/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx @@@ -78,8 -78,8 +78,8 @@@ function HeaderWithRadioGroup(props: He iconSize="m" iconColor={theme.colors.grayscale.light1} css={css` - margin-top: 3px; // we need exactly 3px to align the icon - margin-top: ${theme.gridUnit * 0.75}px; - margin-right: ${theme.gridUnit}px; ++ margin-top: ${theme.sizeUnit * 0.75}px; + margin-right: ${theme.sizeUnit}px; `} onClick={() => setPopoverVisible(true)} /> diff --cc superset-frontend/src/components/Timer/index.tsx index 2bccbea4ef,00d7c1a751..4654d8b525 --- a/superset-frontend/src/components/Timer/index.tsx +++ b/superset-frontend/src/components/Timer/index.tsx @@@ -44,6 -45,21 +45,20 @@@ export default function Timer( const [clockStr, setClockStr] = useState('00:00:00.00'); const timer = useRef<ReturnType<typeof setInterval>>(); + const getIconColor = (status: Type) => { + const { colors } = theme; + + const colorMap: Record<Type, string> = { + success: colors.success.dark2, + warning: colors.warning.dark2, - danger: colors.error.dark2, + info: colors.info.dark2, + default: colors.grayscale.dark1, + primary: colors.primary.dark2, - secondary: colors.secondary.dark2, ++ error: theme.colorError, + }; + + return colorMap[status] || colors.grayscale.dark1; + }; useEffect(() => { const stopTimer = () => { if (timer.current) { diff --cc superset-frontend/src/components/WarningIconWithTooltip/index.tsx index c89b7a57a7,94638d4923..123f7086fb --- a/superset-frontend/src/components/WarningIconWithTooltip/index.tsx +++ b/superset-frontend/src/components/WarningIconWithTooltip/index.tsx @@@ -37,10 -37,10 +37,10 @@@ function WarningIconWithTooltip( id="warning-tooltip" title={<SafeMarkdown source={warningMarkdown} />} > - <Icons.AlertSolid + <Icons.WarningOutlined - iconColor={theme.colors.warning.base} + iconColor={theme.colorWarning} iconSize={size} - css={{ marginRight: marginRight ?? theme.gridUnit * 2 }} + css={{ marginRight: marginRight ?? theme.sizeUnit * 2 }} /> </Tooltip> ); diff --cc superset-frontend/src/dashboard/components/Header/index.jsx index ae518d56e3,4c1cb49ab8..35aa0809c4 --- a/superset-frontend/src/dashboard/components/Header/index.jsx +++ b/superset-frontend/src/dashboard/components/Header/index.jsx @@@ -140,8 -141,11 +141,11 @@@ const undoRedoDisabled = theme => css `; const saveBtnStyle = theme => css` - min-width: ${theme.gridUnit * 17}px; - height: ${theme.gridUnit * 8}px; + min-width: ${theme.sizeUnit * 17}px; + height: ${theme.sizeUnit * 8}px; + span > :first-of-type { + margin-right: 0; + } `; const discardBtnStyle = theme => css` diff --cc superset-frontend/src/dashboard/components/SliceAdder.tsx index cd03eb0367,5c965d9cc5..cad502f14f --- a/superset-frontend/src/dashboard/components/SliceAdder.tsx +++ b/superset-frontend/src/dashboard/components/SliceAdder.tsx @@@ -117,11 -119,10 +119,10 @@@ const NewChartButtonContainer = styled. const NewChartButton = styled(Button)` ${({ theme }) => css` height: auto; - & > .anticon + span { - margin-left: 0; + & > .anticon > span { - margin: auto -${theme.gridUnit}px auto 0; ++ margin: auto -${theme.sizeUnit}px auto 0; } & > [role='img']:first-of-type { - margin-right: ${theme.sizeUnit}px; padding-bottom: 1px; line-height: 0; } diff --cc superset-frontend/src/dashboard/components/gridComponents/Tab.jsx index 335417f0c6,335417f0c6..c3c57da961 --- a/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx +++ b/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx @@@ -79,12 -79,12 +79,12 @@@ const defaultProps = }; const TabTitleContainer = styled.div` -- ${({ isHighlighted, theme: { gridUnit, colors } }) => ` -- padding: ${gridUnit}px ${gridUnit * 2}px; -- margin: ${-gridUnit}px ${gridUnit * -2}px; ++ ${({ isHighlighted, theme: { sizeUnit, colors } }) => ` ++ padding: ${sizeUnit}px ${sizeUnit * 2}px; ++ margin: ${-sizeUnit}px ${sizeUnit * -2}px; transition: box-shadow 0.2s ease-in-out; ${ -- isHighlighted && `box-shadow: 0 0 ${gridUnit}px ${colors.primary.light1};` ++ isHighlighted && `box-shadow: 0 0 ${sizeUnit}px ${colors.primary.light1};` } `} `; diff --cc superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx index b65c530b9b,a5ec5e5017..e4d87f7b0f --- a/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx +++ b/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx @@@ -77,38 -77,35 +77,35 @@@ const defaultProps = }; const StyledTabsContainer = styled.div` - width: 100%; + ${({ theme }) => css` + width: 100%; + background-color: ${theme.colors.grayscale.light5}; + + .dashboard-component-tabs-content { - min-height: ${theme.gridUnit * 12}px; - margin-top: ${theme.gridUnit / 4}px; ++ min-height: ${theme.sizeUnit * 12}px; ++ margin-top: ${theme.sizeUnit / 4}px; + position: relative; + } - .dashboard-component-tabs-content { - min-height: ${({ theme }) => theme.sizeUnit * 12}px; - margin-top: ${({ theme }) => theme.sizeUnit / 4}px; - position: relative; - } + .ant-tabs { + overflow: visible; - .ant-tabs { - overflow: visible; + .ant-tabs-nav-wrap { - min-height: ${theme.gridUnit * 12.5}px; ++ min-height: ${theme.sizeUnit * 12.5}px; + } - .ant-tabs-nav-wrap { - min-height: ${({ theme }) => theme.sizeUnit * 12.5}px; - background-color: ${({ theme }) => theme.colorBgContainer}; + .ant-tabs-content-holder { + overflow: visible; + } } - .ant-tabs-content-holder { - overflow: visible; + div .ant-tabs-tab-btn { + text-transform: none; } - } - - div .ant-tabs-tab-btn { - text-transform: none; - } + `} `; - - const StyledCancelXIcon = styled(Icons.CancelX)` - color: ${({ theme }) => theme.colors.grayscale.base}; - `; - const DropIndicator = styled.div` - border: 2px solid ${({ theme }) => theme.colors.primary.base}; + border: 2px solid ${({ theme }) => theme.colorPrimary}; width: 5px; height: 100%; position: absolute; diff --cc superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.tsx index 187ef93202,6ccd23a32f..41d9b0cb53 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ChartsScopingListPanel.tsx @@@ -34,13 -34,10 +34,10 @@@ import { NEW_CHART_SCOPING_ID } from '. const AddButtonContainer = styled.div` ${({ theme }) => css` - margin-top: ${theme.gridUnit * 2}px; + margin-top: ${theme.sizeUnit * 2}px; - & button > [role='img']:first-of-type { - margin-right: ${theme.sizeUnit}px; line-height: 0; } - span[role='img'] { padding-bottom: 1px; } @@@ -78,7 -78,7 +78,7 @@@ const ScopingTitle = ( onRemove(id); }} css={css` - margin-left: auto; - margin: auto auto auto ${theme.gridUnit}px; ++ margin: auto auto auto ${theme.sizeUnit}px; `} /> </FilterTitle> diff --cc superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/index.tsx index 347bf450ac,277a2bcfcb..d2cc278322 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/index.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/index.tsx @@@ -211,7 -211,15 +211,15 @@@ const FilterBarSettings = () => <Space> {t('Vertical (Left)')} {selectedFilterBarOrientation === - FilterBarOrientation.Vertical && <Icons.Check />} + FilterBarOrientation.Vertical && ( + <Icons.CheckOutlined + iconColor={theme.colors.primary.base} + css={css` - vertical-align: -${theme.gridUnit * 0.03125}em; ++ vertical-align: -${theme.sizeUnit * 0.03125}em; + `} + iconSize="m" + /> + )} </Space> ), }, diff --cc superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx index 32968bf5d2,d8b86e6084..136adb4002 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx @@@ -75,9 -75,8 +75,8 @@@ const HorizontalDivider = ({ title, des <Icons.BookOutlined data-test="divider-description-icon" iconSize="l" - iconColor={theme.colors.grayscale.base} css={css` - margin: 0 ${theme.gridUnit * 1.5}px; + margin: 0 ${theme.sizeUnit * 1.5}px; vertical-align: unset; line-height: unset; `} diff --cc superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx index 929094a34a,4d1f955c04..06e8d06c12 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx @@@ -98,19 -97,8 +98,8 @@@ const CollapsedBar = styled.div<{ offse `} `; - const StyledCollapseIcon = styled(Icons.Collapse)` - ${({ theme }) => ` - color: ${theme.colorPrimary}; - margin-bottom: ${theme.sizeUnit * 3}px; - `} - `; - - const StyledFilterIcon = styled(Icons.Filter)` - color: ${({ theme }) => theme.colors.grayscale.base}; - `; - const FilterBarEmptyStateContainer = styled.div` - margin-top: ${({ theme }) => theme.gridUnit * 8}px; + margin-top: ${({ theme }) => theme.sizeUnit * 8}px; `; const FilterControlsWrapper = styled.div` @@@ -206,11 -195,17 +196,17 @@@ const VerticalFilterBar: FC<VerticalBar role="button" offset={offset} > - <StyledCollapseIcon - {...getFilterBarTestId('expand-button')} + <Icons.VerticalAlignTopOutlined iconSize="l" + css={{ + transform: 'rotate(90deg)', - marginBottom: `${theme.gridUnit * 3}px`, ++ marginBottom: `${theme.sizeUnit * 3}px`, + }} + className="collapse-icon" + iconColor={theme.colors.primary.base} + {...getFilterBarTestId('expand-button')} /> - <StyledFilterIcon + <Icons.FilterOutlined {...getFilterBarTestId('filter-icon')} iconSize="l" /> diff --cc superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx index 72e507d9b7,1463f918f3..78da53009e --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx @@@ -54,9 -54,10 +54,10 @@@ export const NameRow = ( `} > <InternalRow> - <Icons.FilterSmall + <Icons.FilterOutlined + iconSize="s" css={(theme: SupersetTheme) => css` - margin-right: ${theme.gridUnit}px; + margin-right: ${theme.sizeUnit}px; `} /> <TooltipWithTruncation title={elementsTruncated ? filter.name : null}> diff --cc superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx index 5e019f258d,f16ceba6bc..22fdb7f309 --- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx @@@ -47,10 -47,9 +47,9 @@@ const DragIcon = styled(Icons.Drag, shouldForwardProp: propName => propName !== 'isDragging', })<IconType & { isDragging: boolean }>` ${({ isDragging, theme }) => ` - font-size: ${theme.typography.sizes.m}px; + font-size: ${theme.fontSize}px; - margin-top: 15px; cursor: ${isDragging ? 'grabbing' : 'grab'}; - padding-left: ${theme.gridUnit}px; + padding-left: ${theme.sizeUnit}px; `} `; diff --cc superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx index 82277441db,8accde195f..59898500c7 --- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx @@@ -51,12 -51,8 +51,8 @@@ export const FilterTitle = styled.div `} `; - const StyledTrashIcon = styled(Icons.Trash)` - color: ${({ theme }) => theme.colorIcon}; - `; - - const StyledWarning = styled(Icons.Warning)` - color: ${({ theme }) => theme.colorError}; + const StyledWarning = styled(Icons.ExclamationCircleOutlined)` - color: ${({ theme }) => theme.colors.error.base}; ++ color: ${({ theme }) => theme.colorErrorText}; &.anticon { margin-left: auto; } diff --cc superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DependencyList.tsx index 007e58d285,c258396252..5b1c39b096 --- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DependencyList.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DependencyList.tsx @@@ -53,13 -53,13 +53,13 @@@ const AddFilter = styled.div `} `; - const DeleteFilter = styled(Icons.Trash)` + const DeleteFilter = styled(Icons.DeleteOutlined)` ${({ theme }) => ` cursor: pointer; - margin-left: ${theme.gridUnit * 2}px; + margin-left: ${theme.sizeUnit * 2}px; color: ${theme.colors.grayscale.base}; &:hover { - color: ${theme.colors.grayscale.dark1}; + color: ${theme.colorText}; } `} `; diff --cc superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx index b8e8611202,8a0851f95e..37c7fb5c32 --- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx @@@ -209,14 -211,9 +211,9 @@@ const DefaultValueContainer = styled.di align-items: center; `; - const RefreshIcon = styled(Icons.Refresh)` - margin-left: ${({ theme }) => theme.sizeUnit * 2}px; - color: ${({ theme }) => theme.colorPrimary}; - `; - const StyledCollapse = styled(Collapse)` border-left: 0; - border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; + border-top: 1px solid ${({ theme }) => theme.colorSplit}; border-radius: 0; .ant-collapse-header { @@@ -1323,7 -1321,14 +1321,14 @@@ const FiltersConfigForm = )} {hasDataset && datasetId && ( <Tooltip title={t('Refresh the default values')}> - <RefreshIcon onClick={() => refreshHandler(true)} /> + <Icons.SyncOutlined + iconSize="xl" + iconColor={theme.colors.primary.base} + css={css` - margin-left: ${theme.gridUnit * 2}px; ++ margin-left: ${theme.sizeUnit * 2}px; + `} + onClick={() => refreshHandler(true)} + /> </Tooltip> )} </DefaultValueContainer> diff --cc superset-frontend/src/explore/components/ControlHeader.tsx index 84c0c8eaa4,cf94c24355..77af870202 --- a/superset-frontend/src/explore/components/ControlHeader.tsx +++ b/superset-frontend/src/explore/components/ControlHeader.tsx @@@ -151,8 -151,11 +151,11 @@@ const ControlHeader: FC<ControlHeaderPr {warning && ( <span> <Tooltip id="error-tooltip" placement="top" title={warning}> - <Icons.AlertSolid - iconColor={theme.colorWarningText} + <Icons.WarningOutlined - iconColor={colors.warning.base} ++ iconColor={theme.colorWarning} + css={css` + vertical-align: baseline; + `} iconSize="s" /> </Tooltip>{' '} @@@ -161,8 -164,8 +164,8 @@@ {danger && ( <span> <Tooltip id="error-tooltip" placement="top" title={danger}> - <Icons.ErrorSolid + <Icons.ExclamationCircleOutlined - iconColor={colors.error.base} + iconColor={theme.colorErrorText} iconSize="s" /> </Tooltip>{' '} diff --cc superset-frontend/src/explore/components/PropertiesModal/index.tsx index fccf71e813,dba9031e81..3b62e432b8 --- a/superset-frontend/src/explore/components/PropertiesModal/index.tsx +++ b/superset-frontend/src/explore/components/PropertiesModal/index.tsx @@@ -245,7 -249,17 +249,17 @@@ function PropertiesModal( <Modal show={show} onHide={onHide} - title={t('Edit Chart Properties')} + title={ + <span> + <Icons.EditOutlined + css={css` - margin: auto ${theme.gridUnit * 2}px auto 0; ++ margin: auto ${theme.sizeUnit * 2}px auto 0; + `} + data-test="edit-alt" + /> + {t('Edit Chart Properties')} + </span> + } footer={ <> <Button diff --cc superset-frontend/src/explore/components/RunQueryButton/index.tsx index 47dc88ec99,80e14fc3b0..b63987ea5d --- a/superset-frontend/src/explore/components/RunQueryButton/index.tsx +++ b/superset-frontend/src/explore/components/RunQueryButton/index.tsx @@@ -39,12 -39,12 +39,12 @@@ export const RunQueryButton = ( isNewChart, canStopQuery, chartIsStale, - }: RunQueryButtonProps) => - loading ? ( + }: RunQueryButtonProps) => { + const theme = useTheme(); + return loading ? ( - <Button onClick={onStop} buttonStyle="warning" disabled={!canStopQuery}> + <Button onClick={onStop} buttonStyle="danger" disabled={!canStopQuery}> - {/* TODO: Remove fa-icon */} - {/* eslint-disable-next-line icons/no-fa-icons-usage */} - <i className="fa fa-stop" /> {t('Stop')} + <Icons.Square iconSize="xs" iconColor={theme.colors.primary.light5} /> + {t('Stop')} </Button> ) : ( <Button diff --cc superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx index 9eadfe8295,6a5be7ce1f..da146a2643 --- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx +++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx @@@ -186,15 -188,12 +188,7 @@@ class AnnotationLayerControl extends Pu renderInfo(anno: Annotation) { const { annotationError, annotationQuery, theme } = this.props; if (annotationQuery[anno.name]) { -- return ( - // TODO: Remove fa-icon - // eslint-disable-next-line icons/no-fa-icons-usage - <i - className="fa fa-refresh" - style={{ color: theme.colorPrimary }} - aria-hidden - <Icons.SyncOutlined - iconColor={theme.colors.primary.base} - iconSize="m" -- /> -- ); ++ return <Icons.SyncOutlined iconColor={theme.colorPrimary} iconSize="m" />; } if (annotationError[anno.name]) { return ( @@@ -263,13 -263,15 +258,15 @@@ } > <CustomListItem selectable> - {/* TODO: Remove fa-icon */} - {/* eslint-disable-next-line icons/no-fa-icons-usage */} - <i + <Icons.PlusOutlined + iconSize="m" + css={css` - margin: auto ${theme.gridUnit}px auto 0; ++ margin: auto ${theme.sizeUnit}px auto 0; + vertical-align: tex-top; + `} data-test="add-annotation-layer-button" - className="fa fa-plus" - />{' '} - {t('Add annotation layer')} + /> + {t('Add annotation layer')} </CustomListItem> </ControlPopover> </List> diff --cc superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx index 4d8ad0a68f,aabfade6b2..41aac85089 --- a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx +++ b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx @@@ -161,7 -164,13 +164,13 @@@ const ConditionalFormattingControl = ( <OptionControlContainer withCaret> <Label>{createLabel(config)}</Label> <CaretContainer> - <Icons.CaretRight iconColor={theme.colors.grayscale.light1} /> + <Icons.RightOutlined + iconSize="m" + css={css` - margin-top: ${theme.gridUnit}px; ++ margin-top: ${theme.sizeUnit}px; + `} + iconColor={theme.colors.grayscale.light1} + /> </CaretContainer> </OptionControlContainer> </FormattingPopover> @@@ -175,7 -184,14 +184,14 @@@ extraColorChoices={extraColorChoices} > <AddControlLabel> - <Icons.PlusSmall iconColor={theme.colors.grayscale.light1} /> + <Icons.PlusOutlined + iconSize="m" + iconColor={theme.colors.grayscale.light1} + css={theme => ({ - margin: `auto ${theme.gridUnit}px auto 0`, ++ margin: `auto ${theme.sizeUnit}px auto 0`, + verticalAlign: 'baseline', + })} + /> {t('Add new color formatter')} </AddControlLabel> </FormattingPopover> diff --cc superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx index 93dddade3e,8f866af430..09232e720d --- a/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx +++ b/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx @@@ -115,8 -117,8 +116,8 @@@ const Styles = styled.div span[aria-label='dataset-physical'] { color: ${({ theme }) => theme.colors.grayscale.base}; } - span[aria-label='more-vert'] { + span[aria-label='more'] { - color: ${({ theme }) => theme.colors.primary.base}; + color: ${({ theme }) => theme.colorPrimary}; } `; @@@ -399,7 -401,12 +400,12 @@@ class DatasourceControl extends PureCom {renderDatasourceTitle(titleText, tooltip)} {healthCheckMessage && ( <Tooltip title={healthCheckMessage}> - <Icons.AlertSolid iconColor={theme.colorWarning} /> + <Icons.WarningOutlined + css={css` - margin-left: ${theme.gridUnit * 2}px; ++ margin-left: ${theme.sizeUnit * 2}px; + `} - iconColor={theme.colors.warning.base} ++ iconColor={theme.colorWarning} + /> </Tooltip> )} {extra?.warning_markdown && ( diff --cc superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx index be2e0d9584,5f200ea589..187ae89927 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx @@@ -319,7 -319,9 +319,7 @@@ export default function DateFilterLabel )} {!validTimeRange && ( <IconWrapper className="warning"> - <Icons.ErrorSolidSmall iconColor={theme.colorError} /> - <Icons.ExclamationCircleOutlined - iconColor={theme.colors.error.base} - /> ++ <Icons.ExclamationCircleOutlined iconColor={theme.colorError} /> <span className="text error">{evalResponse}</span> </IconWrapper> )} diff --cc superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndSelectLabel.tsx index 7b977aa09e,e2dd15674f..0cdbbfa7a6 --- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndSelectLabel.tsx +++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndSelectLabel.tsx @@@ -100,7 -100,13 +100,13 @@@ export default function DndSelectLabel( cancelHover={!props.onClickGhostButton} onClick={props.onClickGhostButton} > - <Icons.PlusSmall iconColor={theme.colorIcon} /> + <Icons.PlusOutlined + iconSize="m" + iconColor={theme.colors.grayscale.light1} + css={theme => ({ - margin: `auto ${theme.gridUnit}px auto 0`, ++ margin: `auto ${theme.sizeUnit}px auto 0`, + })} + /> {t(props.ghostButtonText)} </AddControlLabel> ); diff --cc superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx index 454e8626b4,2234bef94d..5b34cb8ef7 --- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx +++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx @@@ -77,7 -86,13 +86,13 @@@ export default function Option( )} {withCaret && ( <CaretContainer> - <Icons.CaretRight iconColor={theme.colors.grayscale.light1} /> + <Icons.RightOutlined + iconSize="m" + css={css` - margin-top: ${theme.gridUnit}px; ++ margin-top: ${theme.sizeUnit}px; + `} + iconColor={theme.colors.grayscale.light1} + /> </CaretContainer> )} </OptionControlContainer> diff --cc superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.jsx index 58d294d58b,85186773f6..0d200603b2 --- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.jsx +++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.jsx @@@ -376,7 -377,13 +377,13 @@@ class AdhocFilterControl extends Compon ) : this.addNewFilterPopoverTrigger( <AddControlLabel> - <Icons.PlusSmall iconColor={theme.colors.grayscale.light1} /> + <Icons.PlusOutlined + css={css` - margin: auto ${theme.gridUnit}px auto 0; ++ margin: auto ${theme.sizeUnit}px auto 0; + `} + iconSize="m" + iconColor={theme.colors.grayscale.light1} + /> {t('Add filter')} </AddControlLabel>, )} diff --cc superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx index 1580045f86,0e87eeab09..72efb3c521 --- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx +++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx @@@ -115,7 -115,11 +115,11 @@@ export default function AdhocFilterEdit <strong>HAVING</strong> {t('Filters by metrics')} </span> </div> - <div css={{ marginTop: theme.sizeUnit * 4 }}> + <div + css={css` - margin-top: ${theme.gridUnit * 4}px; ++ margin-top: ${theme.sizeUnit * 4}px; + `} + > <SQLEditor ref={aceEditorRef} keywords={keywords} diff --cc superset-frontend/src/explore/components/controls/OptionControls/index.tsx index b60fb6b731,38cc934379..526ae0b56e --- a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx +++ b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx @@@ -85,8 -82,8 +85,8 @@@ export const CaretContainer = styled.di `; export const CloseContainer = styled.div` - height: 100%; + height: auto; - width: ${({ theme }) => theme.gridUnit * 6}px; + width: ${({ theme }) => theme.sizeUnit * 6}px; border-right: solid 1px ${({ theme }) => theme.colors.grayscale.dark2}0C; cursor: pointer; `; @@@ -400,7 -410,13 +409,13 @@@ export const OptionControlLabel = ( )} {withCaret && ( <CaretContainer> - <Icons.CaretRight iconColor={theme.colors.grayscale.light1} /> + <Icons.RightOutlined + iconSize="m" + css={css` - margin-top: ${theme.gridUnit}px; ++ margin-top: ${theme.sizeUnit}px; + `} + iconColor={theme.colors.grayscale.light1} + /> </CaretContainer> )} </OptionControlContainer> diff --cc superset-frontend/src/explore/components/controls/VizTypeControl/VizTile.tsx index 8c6a78b7cb,fca2e657ca..f3b1a0fc26 --- a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTile.tsx +++ b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTile.tsx @@@ -123,7 -122,13 +122,13 @@@ export const VizTile = ( `} `} > - {vizMeta.icon}{' '} + <span + css={css` - padding: 0px ${theme.gridUnit}px; ++ padding: 0px ${theme.sizeUnit}px; + `} + > + {vizMeta.icon} + </span> <span css={css` overflow: hidden; diff --cc superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx index e6c7a67c53,85236ca3a4..25cdebf0a9 --- a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx +++ b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx @@@ -793,7 -793,14 +793,14 @@@ export default function VizTypeGallery( </SectionTitle> <TagsWrapper> {selectedVizMetadata?.tags.map(tag => ( - <Label key={tag}>{tag}</Label> + <Label + key={tag} - css={({ gridUnit }) => css` - margin-bottom: ${gridUnit * 2}px; ++ css={({ sizeUnit }) => css` ++ margin-bottom: ${sizeUnit * 2}px; + `} + > + {tag} + </Label> ))} </TagsWrapper> <Description> diff --cc superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/DashboardsSubMenu.tsx index 2715ebae20,44db4de824..cf2fe1f46d --- a/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/DashboardsSubMenu.tsx +++ b/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/DashboardsSubMenu.tsx @@@ -57,10 -57,10 +57,10 @@@ const DashboardsSubMenu = ( <Input allowClear placeholder={t('Search')} - prefix={<Icons.Search iconSize="l" />} + prefix={<Icons.StarOutlined iconSize="l" />} css={css` width: ${WIDTH}px; - margin: ${theme.gridUnit * 2}px ${theme.gridUnit * 3}px; + margin: ${theme.sizeUnit * 2}px ${theme.sizeUnit * 3}px; `} value={dashboardSearch} onChange={e => setDashboardSearch(e.currentTarget.value)} @@@ -105,9 -105,8 +105,8 @@@ </div> <Icons.Full iconSize="l" - iconColor={theme.colors.grayscale.base} css={css` - margin-left: ${theme.gridUnit * 2}px; + margin-left: ${theme.sizeUnit * 2}px; visibility: ${hoveredItem === dashboard.id ? 'visible' : 'hidden'}; diff --cc superset-frontend/src/features/alerts/AlertReportModal.tsx index a8f34084ec,0f619e8fa5..dc224a1f96 --- a/superset-frontend/src/features/alerts/AlertReportModal.tsx +++ b/superset-frontend/src/features/alerts/AlertReportModal.tsx @@@ -407,9 -408,13 +408,13 @@@ const NotificationMethodAdd: FunctionCo return ( <StyledNotificationAddButton className={status} onClick={checkStatus}> - {/* TODO: Remove fa-icon */} - {/* eslint-disable-next-line icons/no-fa-icons-usage */} - <i className="fa fa-plus" />{' '} + <Icons.PlusOutlined + iconSize="m" + css={theme => ({ - margin: `auto ${theme.gridUnit * 2}px auto 0`, ++ margin: `auto ${theme.sizeUnit * 2}px auto 0`, + verticalAlign: 'middle', + })} + /> {status === 'active' ? t('Add another notification method') : t('Add delivery method')} diff --cc superset-frontend/src/features/alerts/components/NotificationMethod.tsx index 71490fbf5a,46613607da..ac18ceb47b --- a/superset-frontend/src/features/alerts/components/NotificationMethod.tsx +++ b/superset-frontend/src/features/alerts/components/NotificationMethod.tsx @@@ -83,18 -83,17 +83,17 @@@ const StyledNotificationMethod = styled } .ghost-button { - color: ${theme.colors.primary.dark1}; + color: ${theme.colorPrimaryText}; display: inline-flex; align-items: center; - font-size: ${theme.typography.sizes.s}px; + font-size: ${theme.fontSizeSM}px; cursor: pointer; - margin-top: ${theme.sizeUnit}px; .icon { - width: ${theme.gridUnit * 3}px; - height: ${theme.gridUnit * 3}px; - font-size: ${theme.typography.sizes.s}px; - margin-right: ${theme.gridUnit}px; + width: ${theme.sizeUnit * 3}px; + height: ${theme.sizeUnit * 3}px; + font-size: ${theme.fontSizeSM}px; + margin-right: ${theme.sizeUnit}px; } } diff --cc superset-frontend/src/features/alerts/components/RecipientIcon.tsx index 0a01068a30,13dc2b92c7..bc28bbabcb --- a/superset-frontend/src/features/alerts/components/RecipientIcon.tsx +++ b/superset-frontend/src/features/alerts/components/RecipientIcon.tsx @@@ -22,9 -22,9 +22,9 @@@ import { Tooltip } from 'src/components import Icons from 'src/components/Icons'; import { NotificationMethodOption } from '../types'; - const StyledIcon = (theme: SupersetTheme) => css` + const notificationStyledIcon = (theme: SupersetTheme) => css` color: ${theme.colors.grayscale.light1}; - margin-right: ${theme.gridUnit * 2}px; + margin-right: ${theme.sizeUnit * 2}px; `; export default function RecipientIcon({ type }: { type: string }) { diff --cc superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx index 40caf36c72,2af51d0510..816a0960d1 --- a/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx +++ b/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx @@@ -237,9 -237,20 +237,20 @@@ const AnnotationLayerModal: FunctionCom title={ <h4 data-test="annotation-layer-modal-title"> {isEditMode ? ( - <Icons.EditAlt css={StyledIcon} /> + <Icons.EditOutlined + iconSize="l" + css={css` - margin: auto ${theme.gridUnit * 2}px auto 0; ++ margin: auto ${theme.sizeUnit * 2}px auto 0; + `} + /> ) : ( - <Icons.PlusLarge css={StyledIcon} /> + <Icons.PlusOutlined + iconSize="m" + css={css` - margin: auto ${theme.gridUnit * 2}px auto 0; ++ margin: auto ${theme.sizeUnit * 2}px auto 0; + vertical-align: text-top; + `} + /> )} {isEditMode ? t('Edit annotation layer properties') diff --cc superset-frontend/src/features/annotations/AnnotationModal.tsx index a4e5acae37,1889177909..9b970e2d85 --- a/superset-frontend/src/features/annotations/AnnotationModal.tsx +++ b/superset-frontend/src/features/annotations/AnnotationModal.tsx @@@ -279,9 -279,19 +279,19 @@@ const AnnotationModal: FunctionComponen title={ <h4 data-test="annotation-modal-title"> {isEditMode ? ( - <Icons.EditAlt css={StyledIcon} /> + <Icons.EditOutlined + iconSize="l" + css={css` - margin: auto ${theme.gridUnit * 2}px auto 0; ++ margin: auto ${theme.sizeUnit * 2}px auto 0; + `} + /> ) : ( - <Icons.PlusLarge css={StyledIcon} /> + <Icons.PlusOutlined + iconSize="l" + css={css` - margin: auto ${theme.gridUnit * 2}px auto 0; ++ margin: auto ${theme.sizeUnit * 2}px auto 0; + `} + /> )} {isEditMode ? t('Edit annotation') : t('Add annotation')} </h4> diff --cc superset-frontend/src/features/cssTemplates/CssTemplateModal.tsx index daca09d743,e325b08fd3..a8da4bf18d --- a/superset-frontend/src/features/cssTemplates/CssTemplateModal.tsx +++ b/superset-frontend/src/features/cssTemplates/CssTemplateModal.tsx @@@ -43,36 -42,40 +42,40 @@@ type CssTemplateStringKeys = keyof Pick OnlyKeyWithType<TemplateObject, String> >; - const StyledCssTemplateTitle = styled.div` - margin: ${({ theme }) => theme.sizeUnit * 2}px auto - ${({ theme }) => theme.sizeUnit * 4}px auto; - `; + const StyledCssTemplateTitle = styled.div( + ({ theme }) => css` - margin: ${theme.gridUnit * 2}px auto ${theme.gridUnit * 4}px auto; ++ margin: ${theme.sizeUnit * 2}px auto ${theme.sizeUnit * 4}px auto; + `, + ); const StyledCssEditor = styled(CssEditor)` - border-radius: ${({ theme }) => theme.borderRadius}px; - border: 1px solid ${({ theme }) => theme.colorPrimaryBorder}; + ${({ theme }) => css` + border-radius: ${theme.borderRadius}px; - border: 1px solid ${theme.colors.secondary.light2}; ++ border: 1px solid ${theme.colorPrimaryBg}; + `} `; - const TemplateContainer = styled.div` - margin-bottom: ${({ theme }) => theme.sizeUnit * 10}px; + const TemplateContainer = styled.div( + ({ theme }) => css` - margin-bottom: ${theme.gridUnit * 10}px; ++ margin-bottom: ${theme.sizeUnit * 10}px; - .control-label { - margin-bottom: ${({ theme }) => theme.sizeUnit * 2}px; - } + .control-label { - margin-bottom: ${theme.gridUnit * 2}px; ++ margin-bottom: ${theme.sizeUnit * 2}px; + } - .required { - margin-left: ${({ theme }) => theme.sizeUnit / 2}px; - color: ${({ theme }) => theme.colorError}; - } + .required { - margin-left: ${theme.gridUnit / 2}px; ++ margin-left: ${theme.sizeUnit / 2}px; + color: ${theme.colors.error.base}; + } - input[type='text'] { - padding: ${({ theme }) => theme.sizeUnit * 1.5}px - ${({ theme }) => theme.sizeUnit * 2}px; - border: 1px solid ${({ theme }) => theme.colorBorder}; - border-radius: ${({ theme }) => theme.sizeUnit}px; - width: 50%; - } - `; + input[type='text'] { - padding: ${theme.gridUnit * 1.5}px ${theme.gridUnit * 2}px; ++ padding: ${theme.sizeUnit * 1.5}px ${theme.sizeUnit * 2}px; + border: 1px solid ${theme.colors.grayscale.light2}; - border-radius: ${theme.gridUnit}px; ++ border-radius: ${theme.sizeUnit}px; + width: 50%; + } + `, + ); const CssTemplateModal: FunctionComponent<CssTemplateModalProps> = ({ addDangerToast, @@@ -230,9 -234,19 +234,19 @@@ title={ <h4 data-test="css-template-modal-title"> {isEditMode ? ( - <Icons.EditAlt css={StyledIcon} /> + <Icons.EditOutlined + iconSize="l" + css={css` - margin: auto ${theme.gridUnit * 2}px auto 0; ++ margin: auto ${theme.sizeUnit * 2}px auto 0; + `} + /> ) : ( - <Icons.PlusLarge css={StyledIcon} /> + <Icons.PlusOutlined + iconSize="l" + css={css` - margin: auto ${theme.gridUnit * 2}px auto 0; ++ margin: auto ${theme.sizeUnit * 2}px auto 0; + `} + /> )} {isEditMode ? t('Edit CSS template properties') diff --cc superset-frontend/src/features/databases/DatabaseModal/index.tsx index 1cfd75b7dd,055c97ebd9..81e8dbdd7c --- a/superset-frontend/src/features/databases/DatabaseModal/index.tsx +++ b/superset-frontend/src/features/databases/DatabaseModal/index.tsx @@@ -1830,7 -1835,24 +1834,24 @@@ const DatabaseModal: FunctionComponent< centered show={show} title={ - <h4>{isEditMode ? t('Edit database') : t('Connect a database')}</h4> + <h4> + {isEditMode ? ( + <Icons.EditOutlined + iconSize="l" + css={css` - margin: auto ${theme.gridUnit * 2}px auto 0; ++ margin: auto ${theme.sizeUnit * 2}px auto 0; + `} + /> + ) : ( + <Icons.InsertRowAboveOutlined + iconSize="l" + css={css` - margin: auto ${theme.gridUnit * 2}px auto 0; ++ margin: auto ${theme.sizeUnit * 2}px auto 0; + `} + /> + )} + {isEditMode ? t('Edit database') : t('Connect a database')} + </h4> } footer={modalFooter} maskClosable={false} @@@ -1991,7 -2013,17 +2012,17 @@@ width="500px" centered show={show} - title={<h4>{t('Connect a database')}</h4>} + title={ + <h4> + <Icons.InsertRowAboveOutlined + iconSize="l" + css={css` - margin: auto ${theme.gridUnit * 2}px auto 0; ++ margin: auto ${theme.sizeUnit * 2}px auto 0; + `} + /> + {t('Connect a database')} + </h4> + } footer={renderModalFooter()} maskClosable={false} > diff --cc superset-frontend/src/features/databases/DatabaseModal/styles.ts index ea7a38b944,7c2718f8d8..de6b7e84f7 --- a/superset-frontend/src/features/databases/DatabaseModal/styles.ts +++ b/superset-frontend/src/features/databases/DatabaseModal/styles.ts @@@ -128,14 -127,16 +128,16 @@@ export const antDModalNoPaddingStyles `; export const infoTooltip = (theme: SupersetTheme) => css` - margin-bottom: ${theme.gridUnit * 5}px; + margin-bottom: ${theme.sizeUnit * 5}px; svg { - margin-bottom: ${theme.gridUnit * 0.25}px; + margin-bottom: ${theme.sizeUnit * 0.25}px; } + display: flex; `; export const toggleStyle = (theme: SupersetTheme) => css` - padding-left: ${theme.gridUnit * 2}px; - padding-right: ${theme.gridUnit * 2}px; + padding-left: ${theme.sizeUnit * 2}px; ++ padding-right: ${theme.sizeUnit * 2}px; `; export const formScrollableStyles = (theme: SupersetTheme) => css` diff --cc superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx index 9a9b277f7c,103467b629..45d7d8dea7 --- a/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx +++ b/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx @@@ -55,24 -55,23 +55,23 @@@ const MARGIN_MULTIPLIER = 3 const StyledHeader = styled.div<StyledHeaderProps>` ${({ theme, position }) => ` position: ${position}; - margin: ${theme.gridUnit * (MARGIN_MULTIPLIER + 1)}px - ${theme.gridUnit * MARGIN_MULTIPLIER}px - ${theme.gridUnit * MARGIN_MULTIPLIER}px - ${theme.gridUnit * (MARGIN_MULTIPLIER + 3)}px; - font-size: ${theme.gridUnit * 6}px; - font-weight: ${theme.typography.weights.medium}; - padding-bottom: ${theme.gridUnit * MARGIN_MULTIPLIER}px; + margin: ${theme.sizeUnit * (MARGIN_MULTIPLIER + 1)}px + ${theme.sizeUnit * MARGIN_MULTIPLIER}px + ${theme.sizeUnit * MARGIN_MULTIPLIER}px + ${theme.sizeUnit * (MARGIN_MULTIPLIER + 3)}px; + font-size: ${theme.sizeUnit * 6}px; - font-weight: ${theme.fontWeightMedium}; ++ font-weight: ${theme.fontWeightStrong}; + padding-bottom: ${theme.sizeUnit * MARGIN_MULTIPLIER}px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; .anticon:first-of-type { - margin-right: ${theme.sizeUnit * (MARGIN_MULTIPLIER + 1)}px; - margin-right: ${theme.gridUnit * 2}px; ++ margin-right: ${theme.sizeUnit * 2}px; + vertical-align: text-top; } - .anticon:nth-of-type(2) { - margin-left: ${theme.sizeUnit * (MARGIN_MULTIPLIER + 1)}px; `} `; @@@ -152,18 -151,18 +151,17 @@@ const TableScrollContainer = styled.div const StyledAlert = styled(Alert)` ${({ theme }) => ` - border: 1px solid ${theme.colorInfo}; + border: 1px solid ${theme.colors.info.base}; - padding: ${theme.gridUnit * 4}px; - margin: ${theme.gridUnit * 6}px ${theme.gridUnit * 6}px - ${theme.gridUnit * 8}px; + padding: ${theme.sizeUnit * 4}px; + margin: ${theme.sizeUnit * 6}px ${theme.sizeUnit * 6}px + ${theme.sizeUnit * 8}px; .view-dataset-button { position: absolute; - top: ${theme.gridUnit * 4}px; - right: ${theme.gridUnit * 4}px; - font-weight: ${theme.typography.weights.normal}; + top: ${theme.sizeUnit * 4}px; + right: ${theme.sizeUnit * 4}px; - font-weight: ${theme.fontWeightNormal}; &:hover { - color: ${theme.colorPrimaryHover}; - color: ${theme.colors.secondary.dark3}; ++ color: ${theme.colorPrimary}; text-decoration: underline; } } diff --cc superset-frontend/src/features/home/LanguagePicker.tsx index 77387e13fe,da181d3821..f0aa635e7e --- a/superset-frontend/src/features/home/LanguagePicker.tsx +++ b/superset-frontend/src/features/home/LanguagePicker.tsx @@@ -57,8 -56,16 +56,16 @@@ const StyledFlag = styled.i export default function LanguagePicker(props: LanguagePickerProps) { const { locale, languages, ...rest } = props; + const theme = useTheme(); return ( <SubMenu + css={css` + [data-icon='caret-down'] { + color: ${theme.colors.grayscale.base}; - font-size: ${theme.typography.sizes.xxs}px; - margin-left: ${theme.gridUnit}px; ++ font-size: ${theme.fontSizeXS}px; ++ margin-left: ${theme.sizeUnit}px; + } + `} aria-label="Languages" title={ <div className="f16"> diff --cc superset-frontend/src/features/home/Menu.tsx index 2470882ba2,4d24fcb432..9ca44863d2 --- a/superset-frontend/src/features/home/Menu.tsx +++ b/superset-frontend/src/features/home/Menu.tsx @@@ -120,13 -120,23 +120,23 @@@ const StyledHeader = styled.header const { SubMenu } = MainNav; const StyledSubMenu = styled(SubMenu)` - &.antd5-menu-submenu-active { + ${({ theme }) => css` + [data-icon="caret-down"] { + color: ${theme.colors.grayscale.base}; - font-size: ${theme.typography.sizes.xs}px; - margin-left: ${theme.gridUnit}px; ++ font-size: ${theme.fontSizeXS}px; ++ margin-left: ${theme.sizeUnit}px; + } + &.antd5-menu-submenu { - padding: ${theme.gridUnit * 2}px ${theme.gridUnit * 4}px; ++ padding: ${theme.sizeUnit * 2}px ${theme.sizeUnit * 4}px; + display: flex; + align-items: center; + height: 100%; &.antd5-menu-submenu-active { .antd5-menu-title-content { - color: ${({ theme }) => theme.colorPrimary}; - color: ${theme.colors.primary.base}; ++ color: ${theme.colorPrimary}; } } + `} `; - const { useBreakpoint } = Grid; export function Menu({ diff --cc superset-frontend/src/features/home/RightMenu.tsx index 6dfbb96b42,d798d037e7..822f4c8087 --- a/superset-frontend/src/features/home/RightMenu.tsx +++ b/superset-frontend/src/features/home/RightMenu.tsx @@@ -65,15 -61,12 +65,12 @@@ import const extensionsRegistry = getExtensionsRegistry(); const versionInfoStyles = (theme: SupersetTheme) => css` - padding: ${theme.gridUnit * 1.5}px ${theme.gridUnit * 4}px - ${theme.gridUnit * 4}px ${theme.gridUnit * 7}px; + padding: ${theme.sizeUnit * 1.5}px ${theme.sizeUnit * 4}px + ${theme.sizeUnit * 4}px ${theme.sizeUnit * 7}px; color: ${theme.colors.grayscale.base}; - font-size: ${theme.typography.sizes.xs}px; + font-size: ${theme.fontSizeXS}px; white-space: nowrap; `; - const StyledI = styled.div` - color: ${({ theme }) => theme.colorPrimaryText}; - `; const styledDisabled = (theme: SupersetTheme) => css` color: ${theme.colors.grayscale.light1}; @@@ -114,11 -107,18 +111,18 @@@ const styledChildMenu = (theme: Superse const { SubMenu } = Menu; const StyledSubMenu = styled(SubMenu)` - &.antd5-menu-submenu-active { - .antd5-menu-title-content { - color: ${({ theme }) => theme.colorPrimary}; + ${({ theme }) => css` + [data-icon='caret-down'] { - color: ${theme.colors.grayscale.base}; - font-size: ${theme.typography.sizes.xxs}px; - margin-left: ${theme.gridUnit}px; ++ color: ${theme.colorIcon}; ++ font-size: ${theme.fontSizeXS}px; ++ margin-left: ${theme.sizeUnit}px; } - } + &.antd5-menu-submenu-active { + .antd5-menu-title-content { + color: ${theme.colors.primary.base}; + } + } + `} `; const RightMenu = ({ diff --cc superset-frontend/src/features/home/SavedQueries.tsx index 43e91b1da6,7258e6d401..ee1f7363ab --- a/superset-frontend/src/features/home/SavedQueries.tsx +++ b/superset-frontend/src/features/home/SavedQueries.tsx @@@ -207,6 -207,13 +207,13 @@@ const SavedQueries = ( } }} > + <Icons.UploadOutlined + iconSize="l" + css={css` - margin-right: ${theme.gridUnit}px; ++ margin-right: ${theme.sizeUnit}px; + vertical-align: baseline; + `} + /> {t('Share')} </Menu.Item> {canDelete && ( @@@ -258,10 -264,23 +265,23 @@@ buttons={[ { name: ( - <Link to="/sqllab?new=true"> - {/* TODO: Remove fa-icon */} - {/* eslint-disable-next-line icons/no-fa-icons-usage */} - <i className="fa fa-plus" /> + <Link + to="/sqllab?new=true" + css={css` + &:hover { + color: currentColor; + text-decoration: none; + } + `} + > + <Icons.PlusOutlined + css={css` - margin: auto ${theme.gridUnit * 2}px auto 0; ++ margin: auto ${theme.sizeUnit * 2}px auto 0; + vertical-align: text-top; + `} + iconSize="m" + iconColor={theme.colors.primary.dark1} + /> {t('SQL Query')} </Link> ), @@@ -326,10 -345,8 +346,8 @@@ dropdownRender={() => renderMenu(q)} trigger={['click', 'hover']} > - <Button buttonSize="xsmall" type="link"> - <Icons.MoreOutlined iconSize="xl" /> + <Button buttonSize="xsmall" buttonStyle="link"> - <Icons.MoreVert - iconColor={theme.colors.grayscale.base} - /> ++ <Icons.MoreVert iconColor={theme.colorText} /> </Button> </Dropdown> </ListViewCard.Actions> diff --cc superset-frontend/src/features/home/SubMenu.tsx index a9dcd61147,7f917a14a8..223f0d0045 --- a/superset-frontend/src/features/home/SubMenu.tsx +++ b/superset-frontend/src/features/home/SubMenu.tsx @@@ -230,9 -233,16 +231,16 @@@ const SubMenuComponent: FunctionCompone <Menu mode="horizontal" triggerSubMenuAction="click" disabledOverflow> {props.dropDownLinks?.map((link, i) => ( <SubMenu + css={css` + [data-icon='caret-down'] { - color: ${theme.colors.grayscale.base}; - font-size: ${theme.typography.sizes.xxs}px; - margin-left: ${theme.gridUnit}px; ++ color: ${theme.colorIcon}; ++ font-size: ${theme.fontSizeXS}px; ++ margin-left: ${theme.sizeUnit}px; + } + `} key={i} title={link.label} - icon={<Icons.TriangleDown />} + icon={<Icons.CaretDownOutlined />} popupOffset={[10, 20]} className="dropdown-menu-links" > diff --cc superset-frontend/src/features/rls/RowLevelSecurityModal.tsx index 34069a1881,6f155afe84..8bf7d9b793 --- a/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx +++ b/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx @@@ -54,55 -48,53 +48,53 @@@ const StyledModal = styled(Modal) } `; - const StyledIcon = (theme: SupersetTheme) => css` - margin: auto ${theme.sizeUnit * 2}px auto 0; - color: ${theme.colors.grayscale.base}; - `; - const StyledSectionContainer = styled.div` - display: flex; - flex-direction: column; - padding: ${({ theme }) => - `${theme.sizeUnit * 3}px ${theme.sizeUnit * 4}px ${theme.sizeUnit * 2}px`}; - - label, - .control-label { - display: inline-block; - font-size: ${({ theme }) => theme.fontSizeSM}px; - color: ${({ theme }) => theme.colors.grayscale.base}; - vertical-align: middle; - } + ${({ theme }) => css` + display: flex; + flex-direction: column; - padding: ${theme.gridUnit * 3}px ${theme.gridUnit * 4}px - ${theme.gridUnit * 2}px; ++ padding: ${theme.sizeUnit * 3}px ${theme.sizeUnit * 4}px ++ ${theme.sizeUnit * 2}px; + + label, + .control-label { + display: flex; - font-size: ${theme.typography.sizes.s}px; - color: ${theme.colors.grayscale.base}; ++ font-size: ${theme.fontSizeSM}px; ++ color: ${theme.colorTextLabel}; + align-items: center; + } - .info-solid-small { - vertical-align: middle; - padding-bottom: ${({ theme }) => theme.sizeUnit / 2}px; - } + .info-solid-small { + vertical-align: middle; - padding-bottom: ${theme.gridUnit / 2}px; ++ padding-bottom: ${theme.sizeUnit / 2}px; + } + `} `; - const StyledInputContainer = styled.div` - display: flex; - flex-direction: column; - margin: ${({ theme }) => theme.sizeUnit}px; - margin-bottom: ${({ theme }) => theme.sizeUnit * 4}px; - - .input-container { + ${({ theme }) => css` display: flex; - align-items: center; + flex-direction: column; - margin: ${theme.gridUnit}px; - margin-bottom: ${theme.gridUnit * 4}px; ++ margin: ${theme.sizeUnit}px; ++ margin-bottom: ${theme.sizeUnit * 4}px; - > div { - width: 100%; + .input-container { + display: flex; + align-items: center; + + > div { + width: 100%; + } } - } - input, - textarea { - flex: 1 1 auto; - } + input, + textarea { + flex: 1 1 auto; + } - .required { - margin-left: ${({ theme }) => theme.sizeUnit / 2}px; - color: ${({ theme }) => theme.colorError}; - } + .required { - margin-left: ${theme.gridUnit / 2}px; - color: ${theme.colors.error.base}; ++ margin-left: ${theme.sizeUnit / 2}px; ++ color: ${theme.colorErrorText}; + } + `} `; const StyledTextArea = styled(TextArea)` @@@ -342,9 -335,18 +335,18 @@@ function RowLevelSecurityModal(props: R title={ <h4 data-test="rls-modal-title"> {isEditMode ? ( - <Icons.EditAlt css={StyledIcon} /> + <Icons.EditOutlined + css={css` - margin: auto ${theme.gridUnit * 2}px auto 0; ++ margin: auto ${theme.sizeUnit * 2}px auto 0; + `} + /> ) : ( - <Icons.PlusLarge css={StyledIcon} /> + <Icons.PlusOutlined + iconSize="l" + css={css` - margin: auto ${theme.gridUnit * 2}px auto 0; ++ margin: auto ${theme.sizeUnit * 2}px auto 0; + `} + /> )} {isEditMode ? t('Edit Rule') : t('Add Rule')} </h4> diff --cc superset-frontend/src/pages/AlertReportList/index.tsx index a7e3b1e310,c33743fb0c..34d1e50df6 --- a/superset-frontend/src/pages/AlertReportList/index.tsx +++ b/superset-frontend/src/pages/AlertReportList/index.tsx @@@ -417,9 -421,15 +421,15 @@@ function AlertList( subMenuButtons.push({ name: ( <> - {/* TODO: Remove fa-icon */} - {/* eslint-disable-next-line icons/no-fa-icons-usage */} - <i className="fa fa-plus" /> {title} + <Icons.PlusOutlined + iconColor={theme.colors.primary.light5} + iconSize="m" + css={css` - margin: auto ${theme.gridUnit * 2}px auto 0; ++ margin: auto ${theme.sizeUnit * 2}px auto 0; + vertical-align: text-top; + `} + /> + {title} </> ), buttonStyle: 'primary', @@@ -443,9 -453,16 +453,16 @@@ buttonAction: () => handleAlertEdit(null), buttonText: canCreate ? ( <> - {/* TODO: Remove fa-icon */} - {/* eslint-disable-next-line icons/no-fa-icons-usage */} - <i className="fa fa-plus" /> {title}{' '} + <Icons.PlusOutlined + iconColor={theme.colors.primary.light5} + iconSize="m" + css={css` - margin: auto ${theme.gridUnit * 2}px auto 0; ++ margin: auto ${theme.sizeUnit * 2}px auto 0; + vertical-align: text-top; + `} + data-test="add-annotation-layer-button" + /> + {title}{' '} </> ) : null, }; diff --cc superset-frontend/src/pages/AnnotationList/index.tsx index 36ef10591c,171204e9cd..e3f419860a --- a/superset-frontend/src/pages/AnnotationList/index.tsx +++ b/superset-frontend/src/pages/AnnotationList/index.tsx @@@ -226,9 -229,15 +229,15 @@@ function AnnotationList( subMenuButtons.push({ name: ( <> - {/* TODO: Remove fa-icon */} - {/* eslint-disable-next-line icons/no-fa-icons-usage */} - <i className="fa fa-plus" /> {t('Annotation')} + <Icons.PlusOutlined + iconColor={theme.colors.primary.light5} + iconSize="m" + css={css` - margin: auto ${theme.gridUnit * 2}px auto 0; ++ margin: auto ${theme.sizeUnit * 2}px auto 0; + vertical-align: text-top; + `} + /> + {t('Annotation')} </> ), buttonStyle: 'primary', @@@ -261,9 -270,15 +270,15 @@@ }, buttonText: ( <> - {/* TODO: Remove fa-icon */} - {/* eslint-disable-next-line icons/no-fa-icons-usage */} - <i className="fa fa-plus" /> {t('Annotation')} + <Icons.PlusOutlined + iconColor={theme.colors.primary.light5} + iconSize="m" + css={css` - margin: auto ${theme.gridUnit * 2}px auto 0; ++ margin: auto ${theme.sizeUnit * 2}px auto 0; + vertical-align: text-top; + `} + /> + {t('Annotation')} </> ), }; diff --cc superset-frontend/src/pages/CssTemplateList/index.tsx index fd75f3ef23,e1853ad89e..506eb38094 --- a/superset-frontend/src/pages/CssTemplateList/index.tsx +++ b/superset-frontend/src/pages/CssTemplateList/index.tsx @@@ -196,9 -198,15 +198,15 @@@ function CssTemplatesList( subMenuButtons.push({ name: ( <> - {/* TODO: Remove fa-icon */} - {/* eslint-disable-next-line icons/no-fa-icons-usage */} - <i className="fa fa-plus" /> {t('CSS template')} + <Icons.PlusOutlined + iconColor={theme.colors.primary.light5} + iconSize="m" + css={css` - margin: 'auto ${theme.gridUnit * 2}px auto 0'; ++ margin: 'auto ${theme.sizeUnit * 2}px auto 0'; + vertical-align: text-top; + `} + /> + {t('CSS template')} </> ), buttonStyle: 'primary', diff --cc superset-frontend/src/pages/DashboardList/index.tsx index 6d5753e016,3543cde0f0..d79002aa42 --- a/superset-frontend/src/pages/DashboardList/index.tsx +++ b/superset-frontend/src/pages/DashboardList/index.tsx @@@ -680,9 -685,15 +685,15 @@@ function DashboardList(props: Dashboard subMenuButtons.push({ name: ( <> - {/* TODO: Remove fa-icon */} - {/* eslint-disable-next-line icons/no-fa-icons-usage */} - <i className="fa fa-plus" /> {t('Dashboard')} + <Icons.PlusOutlined + iconColor={theme.colors.primary.light5} + iconSize="m" + css={css` - margin: auto ${theme.gridUnit * 2}px auto 0; ++ margin: auto ${theme.sizeUnit * 2}px auto 0; + vertical-align: text-top; + `} + /> + {t('Dashboard')} </> ), buttonStyle: 'primary', diff --cc superset-frontend/src/pages/DatabaseList/index.tsx index 790dff279d,3d15141d71..afa58da1da --- a/superset-frontend/src/pages/DatabaseList/index.tsx +++ b/superset-frontend/src/pages/DatabaseList/index.tsx @@@ -79,16 -81,8 +81,8 @@@ interface DatabaseListProps }; } - const IconCheck = styled(Icons.Check)` - color: ${({ theme }) => theme.colorText}; - `; - - const IconCancelX = styled(Icons.CancelX)` - color: ${({ theme }) => theme.colors.grayscale.light1}; - `; - const Actions = styled.div` -- color: ${({ theme }) => theme.colors.grayscale.base}; ++ color: ${({ theme }) => theme.colorText}; .action-button { display: inline-block; @@@ -97,7 -91,18 +91,12 @@@ `; function BooleanDisplay({ value }: { value: Boolean }) { - return value ? <IconCheck /> : <IconCancelX />; + const theme = useTheme(); + return value ? ( - <Icons.CheckOutlined - iconSize="s" - iconColor={theme.colors.grayscale.dark1} - /> ++ <Icons.CheckOutlined iconSize="s" iconColor={theme.colorText} /> + ) : ( - <Icons.CloseOutlined - iconSize="s" - iconColor={theme.colors.grayscale.light1} - /> ++ <Icons.CloseOutlined iconSize="s" iconColor={theme.colorText} /> + ); } function DatabaseList({ diff --cc superset-frontend/src/pages/DatasetList/index.tsx index 15031080bd,5ae4bdb5ee..eb8af9f133 --- a/superset-frontend/src/pages/DatasetList/index.tsx +++ b/superset-frontend/src/pages/DatasetList/index.tsx @@@ -82,26 -84,27 +84,27 @@@ const FlexRowContainer = styled.div `; const Actions = styled.div` - color: ${({ theme }) => theme.colors.grayscale.base}; - - .disabled { - svg, - i { - &:hover { - path { - fill: ${({ theme }) => theme.colorText}; + ${({ theme }) => css` + color: ${theme.colors.grayscale.base}; + + .disabled { + svg, + i { + &:hover { + path { - fill: ${theme.colors.grayscale.light1}; ++ fill: ${theme.colorText}; + } } } + color: ${theme.colors.grayscale.light1}; + .antd5-menu-item:hover { + cursor: default; + } + &::after { + color: ${theme.colors.grayscale.light1}; + } } - color: ${({ theme }) => theme.colorText}; - .ant-menu-item:hover { - color: ${({ theme }) => theme.colorText}; - cursor: default; - } - &::after { - color: ${({ theme }) => theme.colorText}; - } - } + `} `; type Dataset = { diff --cc superset-frontend/src/pages/QueryHistoryList/index.tsx index 68db97bc66,20d610e27d..1dfa49991e --- a/superset-frontend/src/pages/QueryHistoryList/index.tsx +++ b/superset-frontend/src/pages/QueryHistoryList/index.tsx @@@ -158,17 -159,26 +159,26 @@@ function QueryList({ addDangerToast }: label: '', }; if (status === QueryState.Success) { - statusConfig.name = <Icons.Check iconColor={theme.colorSuccess} />; + statusConfig.name = ( + <Icons.CheckOutlined + iconSize="m" - iconColor={theme.colors.success.base} ++ iconColor={theme.colorSuccess} + css={css` + vertical-align: -webkit-baseline-middle; + `} + /> + ); statusConfig.label = t('Success'); } else if ( status === QueryState.Failed || status === QueryState.Stopped ) { statusConfig.name = ( - <Icons.XSmall + <Icons.CloseOutlined + iconSize="xs" iconColor={ status === QueryState.Failed - ? theme.colors.error.base + ? theme.colorError : theme.colors.grayscale.base } /> diff --cc superset-frontend/src/pages/RowLevelSecurityList/index.tsx index f3b211f95d,8a2383772c..c50802ba25 --- a/superset-frontend/src/pages/RowLevelSecurityList/index.tsx +++ b/superset-frontend/src/pages/RowLevelSecurityList/index.tsx @@@ -246,9 -250,16 +250,16 @@@ function RowLevelSecurityList(props: RL buttonAction: () => handleRuleEdit(null), buttonText: canEdit ? ( <> - {/* TODO: Remove fa-icon */} - {/* eslint-disable-next-line icons/no-fa-icons-usage */} - <i className="fa fa-plus" data-test="add-rule-empty" /> {'Rule'}{' '} + <Icons.PlusOutlined + iconColor={theme.colors.primary.light5} + iconSize="m" + css={css` - margin: auto ${theme.gridUnit * 2}px auto 0; ++ margin: auto ${theme.sizeUnit * 2}px auto 0; + vertical-align: text-top; + `} + data-test="add-rule-empty" + /> + {t('Rule')} </> ) : null, }; @@@ -314,9 -325,16 +325,16 @@@ subMenuButtons.push({ name: ( <> - {/* TODO: Remove fa-icon */} - {/* eslint-disable-next-line icons/no-fa-icons-usage */} - <i className="fa fa-plus" data-test="add-rule" /> {t('Rule')} + <Icons.PlusOutlined + iconColor={theme.colors.primary.light5} + iconSize="m" + css={css` - margin: auto ${theme.gridUnit * 2}px auto 0; ++ margin: auto ${theme.sizeUnit * 2}px auto 0; + vertical-align: text-top; + `} + data-test="add-rule" + /> + {t('Rule')} </> ), buttonStyle: 'primary', diff --cc superset-frontend/src/pages/SavedQueryList/index.tsx index 0932db5cee,bfae504721..bfdc10af0e --- a/superset-frontend/src/pages/SavedQueryList/index.tsx +++ b/superset-frontend/src/pages/SavedQueryList/index.tsx @@@ -195,10 -198,24 +198,24 @@@ function SavedQueryList( subMenuButtons.push({ name: ( - <Link to="/sqllab?new=true"> - {/* TODO: Remove fa-icon */} - {/* eslint-disable-next-line icons/no-fa-icons-usage */} - <i className="fa fa-plus" /> {t('Query')} + <Link + to="/sqllab?new=true" + css={css` + display: flex; + &:hover { + color: currentColor; + text-decoration: none; + } + `} + > + <Icons.PlusOutlined + iconColor={theme.colors.primary.light5} + iconSize="m" + css={css` - margin: auto ${theme.gridUnit * 2}px auto 0; ++ margin: auto ${theme.sizeUnit * 2}px auto 0; + `} + /> + {t('Query')} </Link> ), buttonStyle: 'primary', diff --cc superset-frontend/src/pages/Tags/index.tsx index 138b1e8a44,95e782bd74..b938e1df15 --- a/superset-frontend/src/pages/Tags/index.tsx +++ b/superset-frontend/src/pages/Tags/index.tsx @@@ -135,10 -142,16 +142,16 @@@ function TagList(props: TagListProps) buttonAction: () => setShowTagModal(true), buttonText: ( <> - {/* TODO: Remove fa-icon */} - {/* eslint-disable-next-line icons/no-fa-icons-usage */} - <i className="fa fa-plus" data-test="add-rule-empty" />{' '} - {'Create a new Tag'}{' '} + <Icons.PlusOutlined + iconSize="m" + iconColor={theme.colors.primary.light5} + css={css` - margin: auto ${theme.gridUnit * 2}px auto 0; ++ margin: auto ${theme.sizeUnit * 2}px auto 0; + vertical-align: text-top; + `} + data-test="add-rule-empty" + /> + Create a new Tag </> ), };
