You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ms...@apache.org on 2025/05/13 19:29:30 UTC
(superset) branch template_less updated: fix(theming): Fix various visual regressions from theming (#33302)
This is an automated email from the ASF dual-hosted git repository.
msyavuz pushed a commit to branch template_less
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/template_less by this push:
new b03c425393 fix(theming): Fix various visual regressions from theming (#33302)
b03c425393 is described below
commit b03c425393d7dbe9f9d414b7aca6d2c635c9fae0
Author: Mehmet Salih Yavuz <sa...@proton.me>
AuthorDate: Tue May 13 22:29:24 2025 +0300
fix(theming): Fix various visual regressions from theming (#33302)
---
.github/workflows/superset-e2e.yml | 2 +-
.../e2e/dashboard/horizontalFilterBar.test.ts | 4 +--
.../cypress/e2e/dashboard/nativeFilters.test.ts | 2 ++
.../e2e/explore/visualizations/table.test.ts | 12 +++----
.../superset-ui-core/src/ui-overrides/types.ts | 2 +-
.../src/DataTable/components/GlobalFilter.tsx | 1 +
.../src/assets/stylesheets/antd/index.less | 20 +++++------
.../assets/stylesheets/less/cosmo/bootswatch.less | 5 ---
.../stylesheets/less/cosmo/bootswatch.less.hbs | 5 ---
.../src/assets/stylesheets/less/variables.less | 42 +++++++++++-----------
.../src/assets/stylesheets/superset.less | 24 +++++++++++++
superset-frontend/src/components/Form/FormItem.tsx | 4 ++-
.../PropertiesModal/PropertiesModal.test.tsx | 2 +-
.../FiltersConfigModal/FilterTitlePane.tsx | 2 ++
.../src/explore/components/EmbedCodeContent.jsx | 2 +-
.../explore/components/PropertiesModal/index.tsx | 5 ++-
.../components/controls/CheckboxControl.jsx | 2 +-
.../ConditionalFormattingControl.tsx | 10 ++----
.../src/features/databases/DatabaseModal/index.tsx | 5 ++-
.../src/features/databases/DatabaseModal/styles.ts | 19 ----------
superset-frontend/src/features/home/RightMenu.tsx | 28 +++++----------
superset-frontend/src/types/bootstrapTypes.ts | 2 +-
22 files changed, 94 insertions(+), 106 deletions(-)
diff --git a/.github/workflows/superset-e2e.yml b/.github/workflows/superset-e2e.yml
index 6997abf408..53e9a4fd7f 100644
--- a/.github/workflows/superset-e2e.yml
+++ b/.github/workflows/superset-e2e.yml
@@ -142,4 +142,4 @@ jobs:
if: failure()
with:
path: ${{ github.workspace }}/superset-frontend/cypress-base/cypress/screenshots
- name: cypress-artifact-${{ github.run_id }}-${{ github.job }}-${{ matrix.browser }}-${{ matrix.parallel_id }}
+ name: cypress-artifact-${{ github.run_id }}-${{ github.job }}-${{ matrix.browser }}-${{ matrix.parallel_id }}--${{ format('{0}', matrix.app_root) | replace('/', '_') }}
diff --git a/superset-frontend/cypress-base/cypress/e2e/dashboard/horizontalFilterBar.test.ts b/superset-frontend/cypress-base/cypress/e2e/dashboard/horizontalFilterBar.test.ts
index 7cabc1a809..400584f0ad 100644
--- a/superset-frontend/cypress-base/cypress/e2e/dashboard/horizontalFilterBar.test.ts
+++ b/superset-frontend/cypress-base/cypress/e2e/dashboard/horizontalFilterBar.test.ts
@@ -138,7 +138,7 @@ describe('Horizontal FilterBar', () => {
cy.getBySel('dropdown-container-btn').should('not.exist');
});
- it('should show "more filters" and scroll', () => {
+ it.only('should show "more filters" and scroll', () => {
prepareDashboardFilters([
{ name: 'test_1', column: 'country_name', datasetId: 2 },
{ name: 'test_2', column: 'country_code', datasetId: 2 },
@@ -157,7 +157,7 @@ describe('Horizontal FilterBar', () => {
cy.get('.filter-item-wrapper').should('have.length', 3);
openMoreFilters();
cy.getBySel('form-item-value').should('have.length', 12);
- cy.getBySel('filter-control-name').contains('test_9').should('be.visible');
+ cy.getBySel('filter-control-name').contains('test_3').should('be.visible');
cy.getBySel('filter-control-name')
.contains('test_12')
.should('not.be.visible');
diff --git a/superset-frontend/cypress-base/cypress/e2e/dashboard/nativeFilters.test.ts b/superset-frontend/cypress-base/cypress/e2e/dashboard/nativeFilters.test.ts
index 9a2bf1ff5e..3705db0bf8 100644
--- a/superset-frontend/cypress-base/cypress/e2e/dashboard/nativeFilters.test.ts
+++ b/superset-frontend/cypress-base/cypress/e2e/dashboard/nativeFilters.test.ts
@@ -293,6 +293,8 @@ describe('Native filters', () => {
it('Verify setting options and tooltips for value filter', () => {
enterNativeFilterEditModal(false);
+ cy.contains('Filter value is required').scrollIntoView();
+
cy.contains('Filter value is required').should('be.visible').click({
force: true,
});
diff --git a/superset-frontend/cypress-base/cypress/e2e/explore/visualizations/table.test.ts b/superset-frontend/cypress-base/cypress/e2e/explore/visualizations/table.test.ts
index fd19477797..2ccdcde4fa 100644
--- a/superset-frontend/cypress-base/cypress/e2e/explore/visualizations/table.test.ts
+++ b/superset-frontend/cypress-base/cypress/e2e/explore/visualizations/table.test.ts
@@ -274,7 +274,7 @@ describe('Visualization > Table', () => {
// Type 200000 and press enter to select the option
cy.get('div[aria-label="Row limit"]')
- .find('.ant-select-selection-search-input:visible')
+ .find('.antd5-select-selection-search-input:visible')
.type('200000{enter}');
// Verify that there is no error tooltip when server pagination is enabled
@@ -308,7 +308,7 @@ describe('Visualization > Table', () => {
// Type 1000000
cy.get('div[aria-label="Row limit"]')
- .find('.ant-select-selection-search-input:visible')
+ .find('.antd5-select-selection-search-input:visible')
.type('1000000');
// Wait for 1 second
@@ -316,7 +316,7 @@ describe('Visualization > Table', () => {
// Press enter
cy.get('div[aria-label="Row limit"]')
- .find('.ant-select-selection-search-input:visible')
+ .find('.antd5-select-selection-search-input:visible')
.type('{enter}');
// Wait for error tooltip to appear and verify its content
@@ -450,11 +450,11 @@ describe('Visualization > Table', () => {
cy.get('.search-select').click();
- cy.get('.ant-select-dropdown').should('be.visible');
+ cy.get('.antd5-select-dropdown').should('be.visible');
- cy.get('.ant-select-item-option').contains('state').should('be.visible');
+ cy.get('.antd5-select-item-option').contains('state').should('be.visible');
- cy.get('.ant-select-item-option').contains('state').click();
+ cy.get('.antd5-select-item-option').contains('state').click();
cy.get('span.dt-global-filter input.form-control.input-sm').clear();
diff --git a/superset-frontend/packages/superset-ui-core/src/ui-overrides/types.ts b/superset-frontend/packages/superset-ui-core/src/ui-overrides/types.ts
index 6583bee732..3b3a8df7b0 100644
--- a/superset-frontend/packages/superset-ui-core/src/ui-overrides/types.ts
+++ b/superset-frontend/packages/superset-ui-core/src/ui-overrides/types.ts
@@ -51,7 +51,7 @@ export type LoadDrillByOptions = (
interface MenuObjectChildProps {
label: string;
name?: string;
- icon?: string;
+ icon?: React.ReactNode;
index?: number;
url?: string;
isFrontendRoute?: boolean;
diff --git a/superset-frontend/plugins/plugin-chart-table/src/DataTable/components/GlobalFilter.tsx b/superset-frontend/plugins/plugin-chart-table/src/DataTable/components/GlobalFilter.tsx
index 921b5536fc..70ddc54599 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/DataTable/components/GlobalFilter.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/DataTable/components/GlobalFilter.tsx
@@ -67,6 +67,7 @@ function DefaultSearchInput({
value={value}
onChange={onChange}
onBlur={onBlur}
+ className="form-control input-sm"
/>
</Space>
);
diff --git a/superset-frontend/src/assets/stylesheets/antd/index.less b/superset-frontend/src/assets/stylesheets/antd/index.less
index ae9f0c1e6e..fd26138202 100644
--- a/superset-frontend/src/assets/stylesheets/antd/index.less
+++ b/superset-frontend/src/assets/stylesheets/antd/index.less
@@ -35,7 +35,7 @@
Theme variables here: https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
*/
/* Core Colors */
-@primary-color: #007aa0;
+@primary-color: #2893b3;
@info-color: #66bcfe;
@processing-color: #525252;
@success-color: #5ac189;
@@ -44,17 +44,17 @@
@normal-color: #d1d1d1;
// Menu-related
-@menu-highlight-color: #007aa0;
+@menu-highlight-color: #2893b3;
@menu-item-active-bg: ;
-@menu-item-color: #004960;
+@menu-item-color: #18586b;
@menu-popup-bg: #ffffff;
@menu-bg: #ffffff;
@tabs-card-head-background: #ffffff;
@component-background: #ffffff;
-@select-item-selected-bg: #cadfe0;
-@select-item-active-bg: #cadfe0;
-@select-item-hover-bg: #cadfe0;
+@select-item-selected-bg: #e4f1f2;
+@select-item-active-bg: #e4f1f2;
+@select-item-hover-bg: #e4f1f2;
@item-hover-bg: #ffffff;
@menu-item-hover-bg: #ffffff;
@@ -87,7 +87,7 @@
@border-radius-lg: 8;
/* Buttons */
-@btn-primary-bg: #007aa0;
+@btn-primary-bg: #2893b3;
@btn-default-bg: #ffffff;
@btn-default-border: #d9d9d9;
@btn-danger-bg: #e04355;
@@ -96,7 +96,7 @@
/* Inputs */
//@input-bg: ;
@input-border-color: #d9d9d9;
-@input-hover-border-color: #3ca5ba;
+@input-hover-border-color: #6ebccc;
/* Menus */
@menu-bg: #ffffff;
@@ -105,7 +105,7 @@
@menu-inline-submenu-bg: #ffffff;
@menu-highlight-color: rgba(0,0,0,0.88);
@menu-highlight-danger-color: #e04355;
-@menu-item-active-bg: #007aa0;
+@menu-item-active-bg: #2893b3;
@menu-item-active-danger-bg: #fff0f0;
@menu-item-group-title-color: rgba(0,0,0,0.88);
@@ -122,7 +122,7 @@
/* Tables */
@table-header-bg: #ffffff;
@table-row-hover-bg: #ffffff;
-@table-selected-row-bg: #cadfe0;
+@table-selected-row-bg: #e4f1f2;
/* Motion */
@motion-duration-fast: 0.1s;
diff --git a/superset-frontend/src/assets/stylesheets/less/cosmo/bootswatch.less b/superset-frontend/src/assets/stylesheets/less/cosmo/bootswatch.less
index c9ece15bb6..091586ca25 100644
--- a/superset-frontend/src/assets/stylesheets/less/cosmo/bootswatch.less
+++ b/superset-frontend/src/assets/stylesheets/less/cosmo/bootswatch.less
@@ -502,8 +502,3 @@ hr {
a {
cursor: pointer;
}
-
-.control-label {
- color: @gray;
- font-size: @font-size-s;
-}
diff --git a/superset-frontend/src/assets/stylesheets/less/cosmo/bootswatch.less.hbs b/superset-frontend/src/assets/stylesheets/less/cosmo/bootswatch.less.hbs
index c9ece15bb6..091586ca25 100644
--- a/superset-frontend/src/assets/stylesheets/less/cosmo/bootswatch.less.hbs
+++ b/superset-frontend/src/assets/stylesheets/less/cosmo/bootswatch.less.hbs
@@ -502,8 +502,3 @@ hr {
a {
cursor: pointer;
}
-
-.control-label {
- color: @gray;
- font-size: @font-size-s;
-}
diff --git a/superset-frontend/src/assets/stylesheets/less/variables.less b/superset-frontend/src/assets/stylesheets/less/variables.less
index 4423211c56..6906946574 100644
--- a/superset-frontend/src/assets/stylesheets/less/variables.less
+++ b/superset-frontend/src/assets/stylesheets/less/variables.less
@@ -21,33 +21,33 @@
/* COLORS */
/************************************************************************/
-@primary-color: #007aa0;
+@primary-color: #2893b3;
@indicator-color: @primary-color;
-@brand-primary-dark1: #007aa0;
-@brand-primary-dark2: #006280;
-@brand-primary-light1: #3395b3;
-@brand-primary-light2: #73b6cb;
-@brand-primary-light3: #b3d7e3;
-@brand-primary-light4: #e6f2f6;
-@brand-primary-light5: #f2f8fa;
-
-@brand-secondary: #007aa0;
-@brand-secondary-dark1: #007aa0;
-@brand-secondary-dark2: #006280;
-@brand-secondary-dark3: #004960;
-@brand-secondary-light1: #3395b3;
-@brand-secondary-light2: #73b6cb;
-@brand-secondary-light3: #b3d7e3;
-@brand-secondary-light4: #e6f2f6;
-@brand-secondary-light5: #f2f8fa;
+@brand-primary-dark1: #2893b3;
+@brand-primary-dark2: #20768f;
+@brand-primary-light1: #53a9c2;
+@brand-primary-light2: #89c4d5;
+@brand-primary-light3: #bfdfe8;
+@brand-primary-light4: #eaf4f7;
+@brand-primary-light5: #f4fafb;
+
+@brand-secondary: #2893b3;
+@brand-secondary-dark1: #2893b3;
+@brand-secondary-dark2: #20768f;
+@brand-secondary-dark3: #18586b;
+@brand-secondary-light1: #53a9c2;
+@brand-secondary-light2: #89c4d5;
+@brand-secondary-light3: #bfdfe8;
+@brand-secondary-light4: #eaf4f7;
+@brand-secondary-light5: #f4fafb;
// TODO line up with theme
@almost-black: #141414;
@gray-dark: #3d3d3d;
@gray-light: #f0f0f0;
@gray-light5: #f7f7f7;
-@gray: #007aa0;
+@gray: #2893b3;
@gray-bg: #f0f0f0;
@gray-heading: rgba(0,0,0,0.88);
@menu-hover: rgba(0,0,0,0.88);
@@ -59,8 +59,8 @@
/**************************** text-specific *****************************/
@text-color: #000;
@heading-color: #000;
-@link: #007aa0;
-@link-hover: #006280;
+@link: #2893b3;
+@link-hover: #20768f;
/***************************** status colors ****************************/
@info: #66bcfe;
diff --git a/superset-frontend/src/assets/stylesheets/superset.less b/superset-frontend/src/assets/stylesheets/superset.less
index 1c244ccaed..6678ccbb9d 100644
--- a/superset-frontend/src/assets/stylesheets/superset.less
+++ b/superset-frontend/src/assets/stylesheets/superset.less
@@ -183,6 +183,30 @@ table.table-no-hover tr:hover {
background-color: initial;
}
+.editable-title input {
+ outline: none;
+ background: transparent;
+ border: none;
+ box-shadow: none;
+ padding: 0;
+ cursor: initial;
+}
+
+.editable-title textarea {
+ outline: none;
+ background: transparent;
+ box-shadow: none;
+ cursor: initial;
+ border: 1px solid @gray;
+ border-radius: @border-radius-normal;
+}
+
+.editable-title input[type='text'] {
+ border: 1px solid @gray;
+ border-radius: @border-radius-normal;
+ padding: 2px;
+}
+
.editable-title.datasource-sql-expression {
font-feature-settings: @font-feature-settings;
font-family: @font-family-monospace;
diff --git a/superset-frontend/src/components/Form/FormItem.tsx b/superset-frontend/src/components/Form/FormItem.tsx
index e77296213b..36b863ed05 100644
--- a/superset-frontend/src/components/Form/FormItem.tsx
+++ b/superset-frontend/src/components/Form/FormItem.tsx
@@ -21,7 +21,9 @@ import { styled } from '@superset-ui/core';
export const FormItem = styled(Form.Item)`
${({ theme }) => `
- margin-bottom: 0;
+ &.antd5-form-item > .antd5-row > .antd5-form-item-label {
+ padding-bottom: ${theme.paddingXXS}px;
+ }
.antd5-form-item-label {
& > label {
&.antd5-form-item-required:not(.antd5-form-item-required-mark-optional) {
diff --git a/superset-frontend/src/dashboard/components/PropertiesModal/PropertiesModal.test.tsx b/superset-frontend/src/dashboard/components/PropertiesModal/PropertiesModal.test.tsx
index bed0db0607..909c7d5883 100644
--- a/superset-frontend/src/dashboard/components/PropertiesModal/PropertiesModal.test.tsx
+++ b/superset-frontend/src/dashboard/components/PropertiesModal/PropertiesModal.test.tsx
@@ -372,9 +372,9 @@ describe('PropertiesModal', () => {
const props = createProps();
const propsWithDashboardInfo = { ...props, dashboardInfo };
- const open = () => waitFor(() => userEvent.click(getSelect()));
const getSelect = () =>
screen.getByRole('combobox', { name: SupersetCore.t('Roles') });
+ const open = () => waitFor(() => userEvent.click(getSelect()));
const getElementsByClassName = (className: string) =>
document.querySelectorAll(className)! as NodeListOf<HTMLElement>;
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx
index 04a8b2b16f..3b1c83fb75 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx
@@ -98,6 +98,8 @@ const FilterTitlePane: FC<Props> = ({
justifyContent: 'space-around',
alignItems: 'flex-start',
paddingTop: theme.sizeUnit * 3,
+ position: 'sticky',
+ bottom: theme.sizeUnit,
}}
>
<Button
diff --git a/superset-frontend/src/explore/components/EmbedCodeContent.jsx b/superset-frontend/src/explore/components/EmbedCodeContent.jsx
index 65077b889d..43adcaee7e 100644
--- a/superset-frontend/src/explore/components/EmbedCodeContent.jsx
+++ b/superset-frontend/src/explore/components/EmbedCodeContent.jsx
@@ -103,7 +103,7 @@ const EmbedCodeContent = ({ formData, addDangerToast }) => {
padding: ${theme.sizeUnit * 2}px;
font-size: ${theme.fontSizeSM}px;
border-radius: 4px;
- background-color: ${theme.colorPrimaryBg};
+ background-color: ${theme.colorBgSpotlight};
`}
/>
</div>
diff --git a/superset-frontend/src/explore/components/PropertiesModal/index.tsx b/superset-frontend/src/explore/components/PropertiesModal/index.tsx
index c18f239d33..960e30cce4 100644
--- a/superset-frontend/src/explore/components/PropertiesModal/index.tsx
+++ b/superset-frontend/src/explore/components/PropertiesModal/index.tsx
@@ -26,6 +26,7 @@ import {
Form,
Row,
Col,
+ FormItem,
type SelectValue,
} from 'src/components';
import rison from 'rison';
@@ -58,9 +59,7 @@ export type PropertiesModalProps = {
addSuccessToast: (msg: string) => void;
};
-const FormItem = Form.Item;
-
-const StyledFormItem = styled(Form.Item)`
+const StyledFormItem = styled(FormItem)`
margin-bottom: 0;
`;
diff --git a/superset-frontend/src/explore/components/controls/CheckboxControl.jsx b/superset-frontend/src/explore/components/controls/CheckboxControl.jsx
index 586a16baa4..868c491790 100644
--- a/superset-frontend/src/explore/components/controls/CheckboxControl.jsx
+++ b/superset-frontend/src/explore/components/controls/CheckboxControl.jsx
@@ -38,7 +38,7 @@ const CheckBoxControlWrapper = styled.div`
.ControlHeader label {
color: ${theme.colorText};
}
- span[role='checkbox'] {
+ span:has(label) {
padding-right: ${theme.sizeUnit * 2}px;
}
`}
diff --git a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
index 5f52c9c1f5..75f11dbcb6 100644
--- a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
+++ b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import { useEffect, useState } from 'react';
-import { styled, css, t, useTheme } from '@superset-ui/core';
+import { styled, css, t } from '@superset-ui/core';
import { Comparator } from '@superset-ui/chart-controls';
import { Icons } from 'src/components/Icons';
import ControlHeader from 'src/explore/components/ControlHeader';
@@ -74,7 +74,6 @@ const ConditionalFormattingControl = ({
extraColorChoices,
...props
}: ConditionalFormattingControlProps) => {
- const theme = useTheme();
const [conditionalFormattingConfigs, setConditionalFormattingConfigs] =
useState<ConditionalFormattingConfig[]>(value ?? []);
@@ -161,12 +160,7 @@ const ConditionalFormattingControl = ({
<OptionControlContainer withCaret>
<Label>{createLabel(config)}</Label>
<CaretContainer>
- <Icons.RightOutlined
- iconSize="m"
- css={css`
- margin-top: ${theme.sizeUnit}px;
- `}
- />
+ <Icons.RightOutlined iconSize="m" />
</CaretContainer>
</OptionControlContainer>
</FormattingPopover>
diff --git a/superset-frontend/src/features/databases/DatabaseModal/index.tsx b/superset-frontend/src/features/databases/DatabaseModal/index.tsx
index 742dc723ab..93e63c4b33 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/index.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/index.tsx
@@ -53,6 +53,7 @@ import {
Upload,
type UploadChangeParam,
type UploadFile,
+ FormLabel,
} from 'src/components';
import withToasts from 'src/components/MessageToasts/withToasts';
import { ErrorAlert } from 'src/components/ImportModal/ErrorAlert';
@@ -1072,7 +1073,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
<h4 className="available-label">
{t('Or choose from a list of other databases we support:')}
</h4>
- <div className="control-label">{t('Supported databases')}</div>
+ <FormLabel className="control-label">
+ {t('Supported databases')}
+ </FormLabel>
<Select
className="available-select"
onChange={setDatabaseModel}
diff --git a/superset-frontend/src/features/databases/DatabaseModal/styles.ts b/superset-frontend/src/features/databases/DatabaseModal/styles.ts
index 0620600831..24eda24d75 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/styles.ts
+++ b/superset-frontend/src/features/databases/DatabaseModal/styles.ts
@@ -199,10 +199,6 @@ export const formStyles = (theme: SupersetTheme) => css`
}
}
}
- .control-label {
- color: ${theme.colorText};
- font-size: ${theme.fontSizeSM}px;
- }
.helper {
color: ${theme.colors.grayscale.light1};
font-size: ${theme.fontSizeSM}px;
@@ -232,12 +228,6 @@ export const StyledInputContainer = styled.div`
margin-bottom: ${theme.sizeUnit * 2}px;
}
- .control-label {
- color: ${theme.colorText};
- font-size: ${theme.fontSizeSM}px;
- margin-bottom: ${theme.sizeUnit * 2}px;
- }
-
&.extra-container {
padding-top: ${theme.sizeUnit * 2}px;
}
@@ -294,9 +284,6 @@ export const StyledInputContainer = styled.div`
margin-left: ${theme.sizeUnit * 8}px;
margin-bottom: 0;
padding: 0;
- .control-label {
- margin-bottom: 0;
- }
&.open {
height: ${CTAS_CVAS_SCHEMA_FORM_HEIGHT}px;
padding-right: ${theme.sizeUnit * 5}px;
@@ -479,12 +466,6 @@ export const SelectDatabaseStyles = styled.div`
.label-available-select {
font-size: ${({ theme }) => theme.fontSizeSM}px;
}
-
- .control-label {
- color: ${({ theme }) => theme.colorTextLabel};
- font-size: ${({ theme }) => theme.fontSizeSM}px;
- margin-bottom: ${({ theme }) => theme.sizeUnit * 2}px;
- }
`;
export const StyledFooterButton = styled(Button)`
diff --git a/superset-frontend/src/features/home/RightMenu.tsx b/superset-frontend/src/features/home/RightMenu.tsx
index eafc53c6c6..fe65069d64 100644
--- a/superset-frontend/src/features/home/RightMenu.tsx
+++ b/superset-frontend/src/features/home/RightMenu.tsx
@@ -187,7 +187,7 @@ const RightMenu = ({
const dropdownItems: MenuObjectProps[] = [
{
label: t('Data'),
- icon: 'fa-database',
+ icon: <Icons.DatabaseOutlined data-test={`menu-item-${t('Data')}`} />,
childs: [
{
label: t('Connect database'),
@@ -228,7 +228,7 @@ const RightMenu = ({
{
label: t('SQL query'),
url: '/sqllab?new=true',
- icon: 'fa-fw fa-search',
+ icon: <Icons.SearchOutlined data-test={`menu-item-${t('SQL query')}`} />,
perm: 'can_sqllab',
view: 'Superset',
},
@@ -237,14 +237,16 @@ const RightMenu = ({
url: Number.isInteger(dashboardId)
? `/chart/add?dashboard_id=${dashboardId}`
: '/chart/add',
- icon: 'fa-fw fa-bar-chart',
+ icon: <Icons.BarChartOutlined data-test={`menu-item-${t('Chart')}`} />,
perm: 'can_write',
view: 'Chart',
},
{
label: t('Dashboard'),
url: '/dashboard/new',
- icon: 'fa-fw fa-dashboard',
+ icon: (
+ <Icons.DashboardOutlined data-test={`menu-item-${t('Dashboard')}`} />
+ ),
perm: 'can_write',
view: 'Dashboard',
},
@@ -292,10 +294,6 @@ const RightMenu = ({
}
}, [canDatabase, canDataset]);
- const menuIcon = (menu: MenuObjectProps) => (
- <i data-test={`menu-item-${menu.label}`} className={`fa ${menu.icon}`} />
- );
-
const handleMenuSelection = (itemChose: any) => {
if (itemChose.key === GlobalMenuDataOptions.DbConnection) {
setShowDatabaseModal(true);
@@ -451,7 +449,7 @@ const RightMenu = ({
key={`sub2_${menu.label}`}
className="data-menu"
title={menu.label}
- icon={menuIcon(menu)}
+ icon={menu.icon}
>
{menu?.childs?.map?.((item, idx) =>
typeof item !== 'string' && item.name && item.perm ? (
@@ -477,19 +475,11 @@ const RightMenu = ({
<Menu.Item key={menu.label}>
{isFrontendRoute(menu.url) ? (
<Link to={menu.url || ''}>
- <i
- data-test={`menu-item-${menu.label}`}
- className={`fa ${menu.icon}`}
- />{' '}
- {menu.label}
+ {menu.icon} {menu.label}
</Link>
) : (
<Typography.Link href={ensureAppRoot(menu.url || '')}>
- <i
- data-test={`menu-item-${menu.label}`}
- className={`fa ${menu.icon}`}
- />{' '}
- {menu.label}
+ {menu.icon} {menu.label}
</Typography.Link>
)}
</Menu.Item>
diff --git a/superset-frontend/src/types/bootstrapTypes.ts b/superset-frontend/src/types/bootstrapTypes.ts
index 34d832bfe6..ba62a0fd01 100644
--- a/superset-frontend/src/types/bootstrapTypes.ts
+++ b/superset-frontend/src/types/bootstrapTypes.ts
@@ -116,7 +116,7 @@ export interface NavBarProps {
export interface MenuObjectChildProps {
label: string;
name?: string;
- icon?: string;
+ icon?: React.ReactNode;
index?: number;
url?: string;
onClick?: () => void;