This is an automated email from the ASF dual-hosted git repository. maximebeauchemin pushed a commit to branch buttons_fixes in repository https://gitbox.apache.org/repos/asf/superset.git
commit a89d85236e90cd76758126b5ba21424166c7409e Author: Maxime Beauchemin <[email protected]> AuthorDate: Tue Apr 29 15:25:22 2025 -0700 fix: button colors and icons --- .../components/ExploreResultsButton/index.tsx | 8 ++---- .../src/SqlLab/components/ResultSet/index.tsx | 12 ++------- superset-frontend/src/components/Button/index.tsx | 6 ++++- superset-frontend/src/components/Button/types.ts | 2 ++ .../src/components/Icons/BaseIcon.tsx | 14 +++++----- superset-frontend/src/components/Modal/Modal.tsx | 8 +++++- superset-frontend/src/components/index.ts | 1 + .../src/dashboard/components/DashboardGrid.jsx | 10 ++----- .../src/dashboard/components/SliceAdder.tsx | 7 +++-- .../AnnotationLayerControl/AnnotationLayer.jsx | 12 +++++++-- .../controls/AnnotationLayerControl/index.tsx | 6 ----- .../controls/CollectionControl/index.jsx | 6 +---- .../ConditionalFormattingControl.tsx | 1 - .../DndColumnSelectControl/DndSelectLabel.tsx | 11 ++------ .../FilterControl/AdhocFilterControl/index.jsx | 15 ++--------- .../FilterControl/AdhocFilterEditPopover/index.jsx | 7 ++++- .../MetricControl/AdhocMetricEditPopover/index.jsx | 1 + .../controls/MetricControl/MetricsControl.jsx | 13 +++------ .../src/features/alerts/AlertReportModal.tsx | 8 +----- superset-frontend/src/features/home/ChartTable.tsx | 2 +- .../src/features/home/DashboardTable.tsx | 2 +- superset-frontend/src/features/home/RightMenu.tsx | 2 +- .../src/features/home/SavedQueries.tsx | 6 +---- superset-frontend/src/features/home/SubMenu.tsx | 3 +++ .../src/pages/AlertReportList/index.tsx | 17 +----------- .../src/pages/AnnotationLayerList/index.tsx | 16 +++-------- .../src/pages/AnnotationList/index.tsx | 20 ++------------ superset-frontend/src/pages/ChartList/index.tsx | 16 ++--------- .../src/pages/CssTemplateList/index.tsx | 18 +++---------- .../src/pages/DashboardList/index.tsx | 12 +-------- superset-frontend/src/pages/DatabaseList/index.tsx | 18 +++---------- superset-frontend/src/pages/DatasetList/index.tsx | 8 +----- superset-frontend/src/pages/RolesList/index.tsx | 21 +++------------ .../src/pages/RowLevelSecurityList/index.tsx | 31 ++++------------------ .../src/pages/SavedQueryList/index.tsx | 10 +------ superset-frontend/src/pages/Tags/index.tsx | 28 +++---------------- superset-frontend/src/pages/UsersList/index.tsx | 21 +++------------ 37 files changed, 94 insertions(+), 305 deletions(-) diff --git a/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx b/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx index 2af51a1175..30b576998e 100644 --- a/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx +++ b/superset-frontend/src/SqlLab/components/ExploreResultsButton/index.tsx @@ -18,7 +18,7 @@ */ import { t } from '@superset-ui/core'; import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls'; -import { Button, type OnClickHandler } from 'src/components'; +import { Button, type OnClickHandler, Icons } from 'src/components'; export interface ExploreResultsButtonProps { database?: { @@ -36,16 +36,12 @@ const ExploreResultsButton = ({ <Button buttonSize="small" buttonStyle="secondary" + icon={<Icons.LineChartOutlined />} onClick={onClick} disabled={!allowsSubquery} tooltip={t('Explore the result set in the data exploration view')} data-test="explore-results-button" > - <InfoTooltipWithTrigger - icon="line-chart" - placement="top" - label={t('explore')} - />{' '} {t('Create Chart')} </Button> ); diff --git a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx index 3605eb0967..e59a76b3f6 100644 --- a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx +++ b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx @@ -375,11 +375,7 @@ const ResultSet = ({ } }} > - <Icons.DownloadOutlined - iconSize="m" - iconColor={theme.colors.primary.dark2} - />{' '} - {t('Download to CSV')} + <Icons.DownloadOutlined iconSize="m" /> {t('Download to CSV')} </Button> )} @@ -394,11 +390,7 @@ const ResultSet = ({ buttonStyle="secondary" data-test="copy-to-clipboard-button" > - <Icons.CopyOutlined - iconSize="s" - iconColor={theme.colors.primary.dark2} - />{' '} - {t('Copy to Clipboard')} + <Icons.CopyOutlined iconSize="s" /> {t('Copy to Clipboard')} </Button> } hideTooltip diff --git a/superset-frontend/src/components/Button/index.tsx b/superset-frontend/src/components/Button/index.tsx index 4d0a0f96ab..a5a883d9a7 100644 --- a/superset-frontend/src/components/Button/index.tsx +++ b/superset-frontend/src/components/Button/index.tsx @@ -43,6 +43,7 @@ export function Button(props: ButtonProps) { children, href, showMarginRight = true, + icon, ...restProps } = props; @@ -68,6 +69,8 @@ export function Button(props: ButtonProps) { if (!buttonStyle || buttonStyle === 'primary') { variant = 'solid'; + antdType = 'primary'; + color = 'primary'; } else if (buttonStyle === 'secondary') { variant = 'filled'; color = 'primary'; @@ -77,11 +80,11 @@ export function Button(props: ButtonProps) { } else if (buttonStyle === 'dashed') { color = 'primary'; variant = 'dashed'; + antdType = 'dashed'; } else if (buttonStyle === 'danger') { color = 'danger'; } else if (buttonStyle === 'link') { variant = 'link'; - antdType = 'default'; } const element = children as ReactElement; @@ -132,6 +135,7 @@ export function Button(props: ButtonProps) { marginRight: firstChildMargin, }, }} + icon={icon} {...restProps} > {children} diff --git a/superset-frontend/src/components/Button/types.ts b/superset-frontend/src/components/Button/types.ts index 232ba31fe9..7c67267c97 100644 --- a/superset-frontend/src/components/Button/types.ts +++ b/superset-frontend/src/components/Button/types.ts @@ -24,6 +24,7 @@ import type { ButtonVariantType, ButtonColorType, } from 'antd-v5/es/button'; +import { IconType } from 'src/components/Icons/types'; import type { TooltipPlacement } from '../Tooltip/types'; export type { AntdButtonProps, ButtonType, ButtonVariantType, ButtonColorType }; @@ -48,4 +49,5 @@ export type ButtonProps = Omit<AntdButtonProps, 'css'> & { buttonStyle?: ButtonStyle; cta?: boolean; showMarginRight?: boolean; + icon?: IconType; }; diff --git a/superset-frontend/src/components/Icons/BaseIcon.tsx b/superset-frontend/src/components/Icons/BaseIcon.tsx index b16034a47e..ea5732a1a6 100644 --- a/superset-frontend/src/components/Icons/BaseIcon.tsx +++ b/superset-frontend/src/components/Icons/BaseIcon.tsx @@ -46,14 +46,12 @@ export const BaseIconComponent: React.FC< ...rest }) => { const theme = useTheme(); - const iconCss = css` - color: ${iconColor || theme.colorIcon}; - font-size: ${iconSize - ? `${themeObject.getFontSize(iconSize) || theme.fontSize}px` - : '24px'}; - `; const whatRole = rest?.onClick ? 'button' : 'img'; const ariaLabel = genAriaLabel(rest.fileName || ''); + const style = { + color: iconColor, + fontSize: iconSize ? themeObject.getFontSize(iconSize) : theme.fontSize, + }; return customIcons ? ( <span @@ -67,11 +65,11 @@ export const BaseIconComponent: React.FC< line-height: 0; vertical-align: middle; `, - iconCss, ]} > <Component viewBox={viewBox || '0 0 24 24'} + style={style} width={ iconSize ? `${themeObject.getFontSize(iconSize) || theme.fontSize}px` @@ -87,8 +85,8 @@ export const BaseIconComponent: React.FC< </span> ) : ( <Component - css={iconCss} role={whatRole} + style={style} aria-label={ariaLabel} data-test={ariaLabel} {...(rest as AntdIconType)} diff --git a/superset-frontend/src/components/Modal/Modal.tsx b/superset-frontend/src/components/Modal/Modal.tsx index 48f7c0e804..b247a8b1f2 100644 --- a/superset-frontend/src/components/Modal/Modal.tsx +++ b/superset-frontend/src/components/Modal/Modal.tsx @@ -230,7 +230,13 @@ const CustomModal = ({ } const modalFooter = isNil(FooterComponent) ? [ - <Button key="back" onClick={onHide} cta data-test="modal-cancel-button"> + <Button + key="back" + onClick={onHide} + cta + data-test="modal-cancel-button" + buttonStyle="secondary" + > {t('Cancel')} </Button>, <Button diff --git a/superset-frontend/src/components/index.ts b/superset-frontend/src/components/index.ts index 9333390514..7f46798353 100644 --- a/superset-frontend/src/components/index.ts +++ b/superset-frontend/src/components/index.ts @@ -24,6 +24,7 @@ */ export { AntdThemeProvider } from './AntdThemeProvider'; export { Alert, type AlertProps } from './Alert'; +export { Icons } from './Icons'; export { AsyncEsmComponent, type PlaceholderProps as AsyncEsmPlaceholderProps, diff --git a/superset-frontend/src/dashboard/components/DashboardGrid.jsx b/superset-frontend/src/dashboard/components/DashboardGrid.jsx index 0fcaa75145..6b62f097ab 100644 --- a/superset-frontend/src/dashboard/components/DashboardGrid.jsx +++ b/superset-frontend/src/dashboard/components/DashboardGrid.jsx @@ -210,10 +210,7 @@ class DashboardGrid extends PureComponent { size="large" buttonText={ <> - <Icons.PlusOutlined - iconSize="m" - iconColor={theme.colors.primary.light5} - /> + <Icons.PlusOutlined iconSize="m" color={theme.colorPrimary} /> {t('Create a new chart')} </> } @@ -235,10 +232,7 @@ class DashboardGrid extends PureComponent { )} buttonText={ <> - <Icons.PlusOutlined - iconSize="m" - iconColor={theme.colors.primary.light5} - /> + <Icons.PlusOutlined iconSize="m" color={theme.colorPrimary} /> {t('Create a new chart')} </> } diff --git a/superset-frontend/src/dashboard/components/SliceAdder.tsx b/superset-frontend/src/dashboard/components/SliceAdder.tsx index c36bc9464d..64fb91dad7 100644 --- a/superset-frontend/src/dashboard/components/SliceAdder.tsx +++ b/superset-frontend/src/dashboard/components/SliceAdder.tsx @@ -360,16 +360,15 @@ class SliceAdder extends Component<SliceAdderProps, SliceAdderState> { <NewChartButton buttonStyle="link" buttonSize="xsmall" + icon={ + <Icons.PlusOutlined iconSize="m" iconColor={theme.colorPrimary} /> + } onClick={() => navigateTo(`/chart/add?dashboard_id=${this.props.dashboardId}`, { newWindow: true, }) } > - <Icons.PlusOutlined - iconSize="m" - iconColor={theme.colors.primary.dark1} - /> {t('Create new chart')} </NewChartButton> </NewChartButtonContainer> diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx index 93044cbcaf..46832c1cd2 100644 --- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx +++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx @@ -965,11 +965,19 @@ class AnnotationLayer extends PureComponent { </div> <div style={{ display: 'flex', justifyContent: 'space-between' }}> {isNew ? ( - <Button buttonSize="small" onClick={() => this.props.close()}> + <Button + buttonSize="small" + buttonStyle="secondary" + onClick={() => this.props.close()} + > {t('Cancel')} </Button> ) : ( - <Button buttonSize="small" onClick={this.deleteAnnotation}> + <Button + buttonSize="small" + buttonStyle="secondary" + onClick={this.deleteAnnotation} + > {t('Remove')} </Button> )} diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx index 93f9120d68..7f079d5717 100644 --- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx +++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx @@ -26,7 +26,6 @@ import { SupersetTheme, t, withTheme, - css, } from '@superset-ui/core'; import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls'; import { AsyncEsmComponent, List } from 'src/components'; @@ -206,7 +205,6 @@ class AnnotationLayerControl extends PureComponent<Props, PopoverState> { render() { const { addedAnnotationIndex } = this.state; - const { theme } = this.props; const addedAnnotation = addedAnnotationIndex !== null ? this.props.value[addedAnnotationIndex] @@ -259,10 +257,6 @@ class AnnotationLayerControl extends PureComponent<Props, PopoverState> { <CustomListItem selectable> <Icons.PlusOutlined iconSize="m" - css={css` - margin: auto ${theme.sizeUnit}px auto 0; - vertical-align: tex-top; - `} data-test="add-annotation-layer-button" /> {t('Add annotation layer')} diff --git a/superset-frontend/src/explore/components/controls/CollectionControl/index.jsx b/superset-frontend/src/explore/components/controls/CollectionControl/index.jsx index c3ab0a6e70..d472ff6297 100644 --- a/superset-frontend/src/explore/components/controls/CollectionControl/index.jsx +++ b/superset-frontend/src/explore/components/controls/CollectionControl/index.jsx @@ -157,16 +157,12 @@ class CollectionControl extends Component { } render() { - const { theme } = this.props; return ( <div data-test="CollectionControl" className="CollectionControl"> <HeaderContainer> <ControlHeader {...this.props} /> <AddIconButton onClick={this.onAdd}> - <Icons.PlusOutlined - iconSize="s" - iconColor={theme.colors.grayscale.light5} - /> + <Icons.PlusOutlined iconSize="s" /> </AddIconButton> </HeaderContainer> {this.renderList()} diff --git a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx index 650a113312..9d20db321b 100644 --- a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx +++ b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx @@ -186,7 +186,6 @@ const ConditionalFormattingControl = ({ <AddControlLabel> <Icons.PlusOutlined iconSize="m" - iconColor={theme.colors.grayscale.light1} css={theme => ({ margin: `auto ${theme.sizeUnit}px auto 0`, verticalAlign: 'baseline', diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndSelectLabel.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndSelectLabel.tsx index 80c8b4362b..89708ca38f 100644 --- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndSelectLabel.tsx +++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndSelectLabel.tsx @@ -18,7 +18,7 @@ */ import { ReactNode, useCallback, useContext, useEffect, useMemo } from 'react'; import { useDrop } from 'react-dnd'; -import { t, useTheme } from '@superset-ui/core'; +import { t } from '@superset-ui/core'; import ControlHeader from 'src/explore/components/ControlHeader'; import { AddControlLabel, @@ -54,7 +54,6 @@ export default function DndSelectLabel({ isLoading, ...props }: DndSelectLabelProps) { - const theme = useTheme(); const canDropProp = props.canDrop; const canDropValueProp = props.canDropValue; @@ -100,13 +99,7 @@ export default function DndSelectLabel({ cancelHover={!props.onClickGhostButton} onClick={props.onClickGhostButton} > - <Icons.PlusOutlined - iconSize="m" - iconColor={theme.colors.grayscale.light1} - css={theme => ({ - margin: `auto ${theme.sizeUnit}px auto 0`, - })} - /> + <Icons.PlusOutlined iconSize="m" /> {t(props.ghostButtonText)} </AddControlLabel> ); diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.jsx index f666e0a6a4..ed788e16e2 100644 --- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.jsx +++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.jsx @@ -19,7 +19,6 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; import { - css, t, logging, SupersetClient, @@ -356,17 +355,13 @@ class AdhocFilterControl extends Component { } render() { - const { theme } = this.props; return ( <div className="metrics-select" data-test="adhoc-filter-control"> <HeaderContainer> <ControlHeader {...this.props} /> {this.addNewFilterPopoverTrigger( <AddIconButton data-test="add-filter-button"> - <Icons.PlusOutlined - iconSize="m" - iconColor={theme.colors.grayscale.light5} - /> + <Icons.PlusOutlined iconSize="m" /> </AddIconButton>, )} </HeaderContainer> @@ -377,13 +372,7 @@ class AdhocFilterControl extends Component { ) : this.addNewFilterPopoverTrigger( <AddControlLabel> - <Icons.PlusOutlined - css={css` - margin: auto ${theme.sizeUnit}px auto 0; - `} - iconSize="m" - iconColor={theme.colors.grayscale.light1} - /> + <Icons.PlusOutlined iconSize="m" /> {t('Add filter')} </AddControlLabel>, )} diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx index c5998b9dde..b49384b208 100644 --- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx +++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx @@ -243,7 +243,12 @@ export default class AdhocFilterEditPopover extends Component { ]} /> <FilterActionsContainer> - <Button buttonSize="small" onClick={this.props.onClose} cta> + <Button + buttonStyle="secondary" + buttonSize="small" + onClick={this.props.onClose} + cta + > {t('Close')} </Button> <Button diff --git a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx index 5c6d66aafc..dc52703eab 100644 --- a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx +++ b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx @@ -504,6 +504,7 @@ export default class AdhocMetricEditPopover extends PureComponent { <div> <Button buttonSize="small" + buttonStyle="secondary" onClick={this.onResetStateAndClose} data-test="AdhocMetricEdit#cancel" cta diff --git a/superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx b/superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx index b94f790e32..df515a792a 100644 --- a/superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx +++ b/superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx @@ -18,7 +18,7 @@ */ import { useCallback, useEffect, useMemo, useState } from 'react'; import PropTypes from 'prop-types'; -import { ensureIsArray, t, useTheme, usePrevious } from '@superset-ui/core'; +import { ensureIsArray, t, usePrevious } from '@superset-ui/core'; import { isEqual } from 'lodash'; import ControlHeader from 'src/explore/components/ControlHeader'; import { Icons } from 'src/components/Icons'; @@ -124,7 +124,6 @@ const MetricsControl = ({ ...props }) => { const [value, setValue] = useState(coerceAdhocMetrics(propsValue)); - const theme = useTheme(); const prevColumns = usePrevious(columns); const prevSavedMetrics = usePrevious(savedMetrics); @@ -317,10 +316,7 @@ const MetricsControl = ({ disabled={isAddNewMetricDisabled()} data-test="add-metric-button" > - <Icons.PlusOutlined - iconSize="m" - iconColor={theme.colors.grayscale.light5} - /> + <Icons.PlusOutlined iconSize="m" /> </AddIconButton>, )} </HeaderContainer> @@ -329,10 +325,7 @@ const MetricsControl = ({ ? value.map((value, index) => valueRenderer(value, index)) : addNewMetricPopoverTrigger( <AddControlLabel> - <Icons.PlusOutlined - iconSize="m" - iconColor={theme.colors.grayscale.light1} - /> + <Icons.PlusOutlined iconSize="m" /> {t('Add metric')} </AddControlLabel>, )} diff --git a/superset-frontend/src/features/alerts/AlertReportModal.tsx b/superset-frontend/src/features/alerts/AlertReportModal.tsx index 9a60099315..e9192bb3fc 100644 --- a/superset-frontend/src/features/alerts/AlertReportModal.tsx +++ b/superset-frontend/src/features/alerts/AlertReportModal.tsx @@ -407,13 +407,7 @@ const NotificationMethodAdd: FunctionComponent<NotificationMethodAddProps> = ({ return ( <StyledNotificationAddButton className={status} onClick={checkStatus}> - <Icons.PlusOutlined - iconSize="m" - css={theme => ({ - margin: `auto ${theme.sizeUnit * 2}px auto 0`, - verticalAlign: 'middle', - })} - /> + <Icons.PlusOutlined iconSize="m" /> {status === 'active' ? t('Add another notification method') : t('Add delivery method')} diff --git a/superset-frontend/src/features/home/ChartTable.tsx b/superset-frontend/src/features/home/ChartTable.tsx index f63f817f23..4f23ece3f7 100644 --- a/superset-frontend/src/features/home/ChartTable.tsx +++ b/superset-frontend/src/features/home/ChartTable.tsx @@ -190,9 +190,9 @@ function ChartTable({ name: ( <> <Icons.PlusOutlined - iconColor={theme.colors.primary.dark1} iconSize="m" data-test="add-annotation-layer-button" + iconColor={theme.colorPrimary} /> {t('Chart')} </> diff --git a/superset-frontend/src/features/home/DashboardTable.tsx b/superset-frontend/src/features/home/DashboardTable.tsx index 951aa26ff0..1d2b9101c4 100644 --- a/superset-frontend/src/features/home/DashboardTable.tsx +++ b/superset-frontend/src/features/home/DashboardTable.tsx @@ -190,8 +190,8 @@ function DashboardTable({ name: ( <> <Icons.PlusOutlined - iconColor={theme.colors.primary.dark1} iconSize="m" + iconColor={theme.colorPrimary} /> {t('Dashboard')} </> diff --git a/superset-frontend/src/features/home/RightMenu.tsx b/superset-frontend/src/features/home/RightMenu.tsx index a9bf0a512f..eafc53c6c6 100644 --- a/superset-frontend/src/features/home/RightMenu.tsx +++ b/superset-frontend/src/features/home/RightMenu.tsx @@ -434,7 +434,7 @@ const RightMenu = ({ data-test="new-dropdown" title={ <Icons.PlusOutlined - iconColor={theme.colors.primary.dark1} + iconColor={theme.colorPrimary} data-test="new-dropdown-icon" /> } diff --git a/superset-frontend/src/features/home/SavedQueries.tsx b/superset-frontend/src/features/home/SavedQueries.tsx index 319cd1a068..62f1a57e9e 100644 --- a/superset-frontend/src/features/home/SavedQueries.tsx +++ b/superset-frontend/src/features/home/SavedQueries.tsx @@ -275,12 +275,8 @@ export const SavedQueries = ({ `} > <Icons.PlusOutlined - css={css` - margin: auto ${theme.sizeUnit * 2}px auto 0; - vertical-align: text-top; - `} + iconColor={theme.colorPrimary} iconSize="m" - iconColor={theme.colors.primary.dark1} /> {t('SQL Query')} </Link> diff --git a/superset-frontend/src/features/home/SubMenu.tsx b/superset-frontend/src/features/home/SubMenu.tsx index 672c646df7..f881014c09 100644 --- a/superset-frontend/src/features/home/SubMenu.tsx +++ b/superset-frontend/src/features/home/SubMenu.tsx @@ -25,6 +25,7 @@ import { debounce } from 'lodash'; import { Menu, MenuMode, MainNav } from 'src/components/Menu'; import { Button, Tooltip, Row, type OnClickHandler } from 'src/components'; import { Icons } from 'src/components/Icons'; +import { IconType } from 'src/components/Icons/types'; import { MenuObjectProps } from 'src/types/bootstrapTypes'; import { Typography } from 'src/components/Typography'; @@ -135,6 +136,7 @@ export interface ButtonProps { 'data-test'?: string; buttonStyle: 'primary' | 'secondary' | 'dashed' | 'link' | 'tertiary'; loading?: boolean; + icon?: IconType; } export interface SubMenuProps { @@ -282,6 +284,7 @@ const SubMenuComponent: FunctionComponent<SubMenuProps> = props => { <Button key={i} buttonStyle={btn.buttonStyle} + icon={btn.icon} onClick={btn.onClick} data-test={btn['data-test']} loading={btn.loading ?? false} diff --git a/superset-frontend/src/pages/AlertReportList/index.tsx b/superset-frontend/src/pages/AlertReportList/index.tsx index 005ec1b13a..fe1e3140fd 100644 --- a/superset-frontend/src/pages/AlertReportList/index.tsx +++ b/superset-frontend/src/pages/AlertReportList/index.tsx @@ -21,8 +21,6 @@ import { useState, useMemo, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; import { t, - css, - useTheme, SupersetClient, makeApi, styled, @@ -114,7 +112,6 @@ function AlertList({ user, addSuccessToast, }: AlertListProps) { - const theme = useTheme(); const title = isReportEnabled ? t('Report') : t('Alert'); const titlePlural = isReportEnabled ? t('reports') : t('alerts'); const pathName = isReportEnabled ? 'Reports' : 'Alerts'; @@ -432,14 +429,7 @@ function AlertList({ subMenuButtons.push({ name: ( <> - <Icons.PlusOutlined - iconColor={theme.colors.primary.light5} - iconSize="m" - css={css` - margin: auto ${theme.sizeUnit * 2}px auto 0; - vertical-align: text-top; - `} - /> + <Icons.PlusOutlined iconSize="m" /> {title} </> ), @@ -465,12 +455,7 @@ function AlertList({ buttonText: canCreate ? ( <> <Icons.PlusOutlined - iconColor={theme.colors.primary.light5} iconSize="m" - css={css` - margin: auto ${theme.sizeUnit * 2}px auto 0; - vertical-align: text-top; - `} data-test="add-annotation-layer-button" /> {title}{' '} diff --git a/superset-frontend/src/pages/AnnotationLayerList/index.tsx b/superset-frontend/src/pages/AnnotationLayerList/index.tsx index 5257f06eea..0f24977ebf 100644 --- a/superset-frontend/src/pages/AnnotationLayerList/index.tsx +++ b/superset-frontend/src/pages/AnnotationLayerList/index.tsx @@ -19,7 +19,7 @@ import { useMemo, useState } from 'react'; import rison from 'rison'; -import { t, SupersetClient, useTheme, css } from '@superset-ui/core'; +import { t, SupersetClient } from '@superset-ui/core'; import { Link, useHistory } from 'react-router-dom'; import { useListViewResource } from 'src/views/CRUD/hooks'; import { createFetchRelated, createErrorHandler } from 'src/views/CRUD/utils'; @@ -61,7 +61,6 @@ function AnnotationLayersList({ addSuccessToast, user, }: AnnotationLayersListProps) { - const theme = useTheme(); const { state: { loading, @@ -231,13 +230,7 @@ function AnnotationLayersList({ subMenuButtons.push({ name: ( <> - <Icons.PlusOutlined - iconColor={theme.colors.primary.light5} - iconSize="m" - css={css` - vertical-align: text-top; - `} - /> + <Icons.PlusOutlined iconSize="m" /> {t('Annotation layer')} </> ), @@ -295,10 +288,7 @@ function AnnotationLayersList({ buttonAction: () => handleAnnotationLayerEdit(null), buttonText: ( <> - <Icons.PlusOutlined - iconSize="m" - iconColor={theme.colors.primary.light5} - /> + <Icons.PlusOutlined iconSize="m" /> {t('Annotation layer')} </> ), diff --git a/superset-frontend/src/pages/AnnotationList/index.tsx b/superset-frontend/src/pages/AnnotationList/index.tsx index 9b083f0e7d..647eb224b0 100644 --- a/superset-frontend/src/pages/AnnotationList/index.tsx +++ b/superset-frontend/src/pages/AnnotationList/index.tsx @@ -22,7 +22,6 @@ import { useParams, Link, useHistory } from 'react-router-dom'; import { css, t, - useTheme, styled, SupersetClient, getClientErrorObject, @@ -74,7 +73,6 @@ function AnnotationList({ addDangerToast, addSuccessToast, }: AnnotationListProps) { - const theme = useTheme(); const { annotationLayerId }: any = useParams(); const { state: { @@ -240,14 +238,7 @@ function AnnotationList({ subMenuButtons.push({ name: ( <> - <Icons.PlusOutlined - iconColor={theme.colors.primary.light5} - iconSize="m" - css={css` - margin: auto ${theme.sizeUnit * 2}px auto 0; - vertical-align: text-top; - `} - /> + <Icons.PlusOutlined iconSize="m" /> {t('Annotation')} </> ), @@ -281,14 +272,7 @@ function AnnotationList({ }, buttonText: ( <> - <Icons.PlusOutlined - iconColor={theme.colors.primary.light5} - iconSize="m" - css={css` - margin: auto ${theme.sizeUnit * 2}px auto 0; - vertical-align: text-top; - `} - /> + <Icons.PlusOutlined iconSize="m" /> {t('Annotation')} </> ), diff --git a/superset-frontend/src/pages/ChartList/index.tsx b/superset-frontend/src/pages/ChartList/index.tsx index 7909759850..fc30e03467 100644 --- a/superset-frontend/src/pages/ChartList/index.tsx +++ b/superset-frontend/src/pages/ChartList/index.tsx @@ -24,8 +24,6 @@ import { styled, SupersetClient, t, - useTheme, - css, } from '@superset-ui/core'; import { useState, useMemo, useCallback } from 'react'; import rison from 'rison'; @@ -160,7 +158,6 @@ const StyledActions = styled.div` `; function ChartList(props: ChartListProps) { - const theme = useTheme(); const { addDangerToast, addSuccessToast, @@ -771,13 +768,7 @@ function ChartList(props: ChartListProps) { subMenuButtons.push({ name: ( <> - <Icons.PlusOutlined - iconColor={theme.colors.primary.light5} - iconSize="m" - css={css` - vertical-align: text-top; - `} - /> + <Icons.PlusOutlined iconSize="m" /> <span>{t('Chart')}</span> </> ), @@ -794,10 +785,7 @@ function ChartList(props: ChartListProps) { title={t('Import charts')} placement="bottomRight" > - <Icons.DownloadOutlined - data-test="import-button" - iconColor={theme.colors.primary.dark1} - /> + <Icons.DownloadOutlined data-test="import-button" /> </Tooltip> ), buttonStyle: 'link', diff --git a/superset-frontend/src/pages/CssTemplateList/index.tsx b/superset-frontend/src/pages/CssTemplateList/index.tsx index e0ae41bb64..28893e5e8d 100644 --- a/superset-frontend/src/pages/CssTemplateList/index.tsx +++ b/superset-frontend/src/pages/CssTemplateList/index.tsx @@ -18,7 +18,7 @@ */ import { useMemo, useState } from 'react'; -import { t, SupersetClient, useTheme, css } from '@superset-ui/core'; +import { t, SupersetClient } from '@superset-ui/core'; import rison from 'rison'; import { useListViewResource } from 'src/views/CRUD/hooks'; @@ -59,7 +59,6 @@ function CssTemplatesList({ addSuccessToast, user, }: CssTemplatesListProps) { - const theme = useTheme(); const { state: { loading, @@ -204,20 +203,9 @@ function CssTemplatesList({ if (canCreate) { subMenuButtons.push({ - name: ( - <> - <Icons.PlusOutlined - iconColor={theme.colors.primary.light5} - iconSize="m" - css={css` - margin: 'auto ${theme.sizeUnit * 2}px auto 0'; - vertical-align: text-top; - `} - /> - {t('CSS template')} - </> - ), + name: <>{t('CSS template')}</>, buttonStyle: 'primary', + icon: <Icons.PlusOutlined iconSize="m" />, onClick: () => { setCurrentCssTemplate(null); setCssTemplateModalOpen(true); diff --git a/superset-frontend/src/pages/DashboardList/index.tsx b/superset-frontend/src/pages/DashboardList/index.tsx index 4c79be19f2..b5f662c912 100644 --- a/superset-frontend/src/pages/DashboardList/index.tsx +++ b/superset-frontend/src/pages/DashboardList/index.tsx @@ -22,8 +22,6 @@ import { styled, SupersetClient, t, - css, - useTheme, } from '@superset-ui/core'; import { useSelector } from 'react-redux'; import { useState, useMemo, useCallback } from 'react'; @@ -142,7 +140,6 @@ const DASHBOARD_COLUMNS_TO_FETCH = [ function DashboardList(props: DashboardListProps) { const { addDangerToast, addSuccessToast, user } = props; - const theme = useTheme(); const { roles } = useSelector<any, UserWithPermissionsAndRoles>( state => state.user, ); @@ -693,14 +690,7 @@ function DashboardList(props: DashboardListProps) { subMenuButtons.push({ name: ( <> - <Icons.PlusOutlined - iconColor={theme.colors.primary.light5} - iconSize="m" - css={css` - margin: auto ${theme.sizeUnit * 2}px auto 0; - vertical-align: text-top; - `} - /> + <Icons.PlusOutlined iconSize="m" /> {t('Dashboard')} </> ), diff --git a/superset-frontend/src/pages/DatabaseList/index.tsx b/superset-frontend/src/pages/DatabaseList/index.tsx index e08522021a..115dd86ed1 100644 --- a/superset-frontend/src/pages/DatabaseList/index.tsx +++ b/superset-frontend/src/pages/DatabaseList/index.tsx @@ -21,8 +21,6 @@ import { styled, SupersetClient, t, - useTheme, - css, } from '@superset-ui/core'; import { useState, useMemo, useEffect } from 'react'; import rison from 'rison'; @@ -88,8 +86,6 @@ interface DatabaseListProps { } const Actions = styled.div` - color: ${({ theme }) => theme.colorText}; - .action-button { display: inline-block; height: 100%; @@ -97,11 +93,10 @@ const Actions = styled.div` `; function BooleanDisplay({ value }: { value: Boolean }) { - const theme = useTheme(); return value ? ( - <Icons.CheckOutlined iconSize="s" iconColor={theme.colorText} /> + <Icons.CheckOutlined iconSize="s" /> ) : ( - <Icons.CloseOutlined iconSize="s" iconColor={theme.colorText} /> + <Icons.CloseOutlined iconSize="s" /> ); } @@ -111,7 +106,6 @@ function DatabaseList({ addSuccessToast, user, }: DatabaseListProps) { - const theme = useTheme(); const { state: { loading, @@ -323,13 +317,7 @@ function DatabaseList({ 'data-test': 'btn-create-database', name: ( <> - <Icons.PlusOutlined - css={css` - vertical-align: text-top; - `} - iconColor={theme.colors.primary.light5} - iconSize="m" - /> + <Icons.PlusOutlined iconSize="m" /> {t('Database')} </> ), diff --git a/superset-frontend/src/pages/DatasetList/index.tsx b/superset-frontend/src/pages/DatasetList/index.tsx index 0aa328575d..dcba67f958 100644 --- a/superset-frontend/src/pages/DatasetList/index.tsx +++ b/superset-frontend/src/pages/DatasetList/index.tsx @@ -640,13 +640,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({ buttonArr.push({ name: ( <> - <Icons.PlusOutlined - iconColor={theme.colors.primary.light5} - iconSize="m" - css={css` - vertical-align: text-top; - `} - /> + <Icons.PlusOutlined iconSize="m" /> {t('Dataset')} </> ), diff --git a/superset-frontend/src/pages/RolesList/index.tsx b/superset-frontend/src/pages/RolesList/index.tsx index d77d2237f8..f995f84780 100644 --- a/superset-frontend/src/pages/RolesList/index.tsx +++ b/superset-frontend/src/pages/RolesList/index.tsx @@ -18,7 +18,7 @@ */ import { useCallback, useEffect, useMemo, useState } from 'react'; -import { css, t, SupersetClient, useTheme } from '@superset-ui/core'; +import { t, SupersetClient } from '@superset-ui/core'; import { useListViewResource } from 'src/views/CRUD/hooks'; import RoleListAddModal from 'src/features/roles/RoleListAddModal'; import RoleListEditModal from 'src/features/roles/RoleListEditModal'; @@ -71,7 +71,6 @@ enum ModalType { } function RolesList({ addDangerToast, addSuccessToast, user }: RolesListProps) { - const theme = useTheme(); const { state: { loading, @@ -330,14 +329,7 @@ function RolesList({ addDangerToast, addSuccessToast, user }: RolesListProps) { { name: ( <> - <Icons.PlusOutlined - iconColor={theme.colors.primary.light5} - iconSize="m" - css={css` - margin: auto ${theme.sizeUnit * 2}px auto 0; - vertical-align: text-top; - `} - /> + <Icons.PlusOutlined iconSize="m" /> {t('Role')} </> ), @@ -404,14 +396,7 @@ function RolesList({ addDangerToast, addSuccessToast, user }: RolesListProps) { }, buttonText: ( <> - <Icons.PlusOutlined - iconColor={theme.colors.primary.light5} - iconSize="m" - css={css` - margin: auto ${theme.sizeUnit * 2}px auto 0; - vertical-align: text-top; - `} - /> + <Icons.PlusOutlined iconSize="m" /> {t('Role')} </> ), diff --git a/superset-frontend/src/pages/RowLevelSecurityList/index.tsx b/superset-frontend/src/pages/RowLevelSecurityList/index.tsx index 5981d44445..c4d24440e8 100644 --- a/superset-frontend/src/pages/RowLevelSecurityList/index.tsx +++ b/superset-frontend/src/pages/RowLevelSecurityList/index.tsx @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import { t, styled, SupersetClient, useTheme, css } from '@superset-ui/core'; +import { t, SupersetClient } from '@superset-ui/core'; import { useMemo, useState } from 'react'; import { ConfirmStatusChange, @@ -38,10 +38,6 @@ import { RLSObject } from 'src/features/rls/types'; import { createErrorHandler, createFetchRelated } from 'src/views/CRUD/utils'; import { QueryObjectColumns } from 'src/views/CRUD/types'; -const Actions = styled.div` - color: ${({ theme }) => theme.colors.grayscale.base}; -`; - interface RLSProps { addDangerToast: (msg: string) => void; addSuccessToast: (msg: string) => void; @@ -56,7 +52,6 @@ function RowLevelSecurityList(props: RLSProps) { const { addDangerToast, addSuccessToast, user } = props; const [ruleModalOpen, setRuleModalOpen] = useState<boolean>(false); const [currentRule, setCurrentRule] = useState(null); - const theme = useTheme(); const { state: { @@ -176,7 +171,7 @@ function RowLevelSecurityList(props: RLSProps) { ); const handleEdit = () => handleRuleEdit(original); return ( - <Actions className="actions"> + <div className="actions"> {canWrite && ( <ConfirmStatusChange title={t('Please confirm')} @@ -225,7 +220,7 @@ function RowLevelSecurityList(props: RLSProps) { </span> </Tooltip> )} - </Actions> + </div> ); }, Header: t('Actions'), @@ -257,15 +252,7 @@ function RowLevelSecurityList(props: RLSProps) { buttonAction: () => handleRuleEdit(null), buttonText: canEdit ? ( <> - <Icons.PlusOutlined - iconColor={theme.colors.primary.light5} - iconSize="m" - css={css` - margin: auto ${theme.sizeUnit * 2}px auto 0; - vertical-align: text-top; - `} - data-test="add-rule-empty" - /> + <Icons.PlusOutlined iconSize="m" data-test="add-rule-empty" /> {t('Rule')} </> ) : null, @@ -332,15 +319,7 @@ function RowLevelSecurityList(props: RLSProps) { subMenuButtons.push({ name: ( <> - <Icons.PlusOutlined - iconColor={theme.colors.primary.light5} - iconSize="m" - css={css` - margin: auto ${theme.sizeUnit * 2}px auto 0; - vertical-align: text-top; - `} - data-test="add-rule" - /> + <Icons.PlusOutlined iconSize="m" data-test="add-rule" /> {t('Rule')} </> ), diff --git a/superset-frontend/src/pages/SavedQueryList/index.tsx b/superset-frontend/src/pages/SavedQueryList/index.tsx index 1044236ab6..5419f37a90 100644 --- a/superset-frontend/src/pages/SavedQueryList/index.tsx +++ b/superset-frontend/src/pages/SavedQueryList/index.tsx @@ -24,7 +24,6 @@ import { SupersetClient, t, css, - useTheme, } from '@superset-ui/core'; import { useCallback, useMemo, useState, MouseEvent } from 'react'; import { Link, useHistory } from 'react-router-dom'; @@ -106,7 +105,6 @@ function SavedQueryList({ addSuccessToast, user, }: SavedQueryListProps) { - const theme = useTheme(); const { state: { loading, @@ -210,13 +208,7 @@ function SavedQueryList({ } `} > - <Icons.PlusOutlined - iconColor={theme.colors.primary.light5} - iconSize="m" - css={css` - margin: auto ${theme.sizeUnit * 2}px auto 0; - `} - /> + <Icons.PlusOutlined iconSize="m" /> {t('Query')} </Link> ), diff --git a/superset-frontend/src/pages/Tags/index.tsx b/superset-frontend/src/pages/Tags/index.tsx index aa7d7bd7d6..0d2bb43797 100644 --- a/superset-frontend/src/pages/Tags/index.tsx +++ b/superset-frontend/src/pages/Tags/index.tsx @@ -17,13 +17,7 @@ * under the License. */ import { useMemo, useState } from 'react'; -import { - isFeatureEnabled, - FeatureFlag, - t, - useTheme, - css, -} from '@superset-ui/core'; +import { isFeatureEnabled, FeatureFlag, t } from '@superset-ui/core'; import { Actions, createErrorHandler, @@ -66,7 +60,6 @@ interface TagListProps { function TagList(props: TagListProps) { const { addDangerToast, addSuccessToast, user } = props; const { userId } = user; - const theme = useTheme(); const initialFilters = useMemo( () => [ @@ -143,15 +136,7 @@ function TagList(props: TagListProps) { buttonAction: () => setShowTagModal(true), buttonText: ( <> - <Icons.PlusOutlined - iconSize="m" - iconColor={theme.colors.primary.light5} - css={css` - margin: auto ${theme.sizeUnit * 2}px auto 0; - vertical-align: text-top; - `} - data-test="add-rule-empty" - /> + <Icons.PlusOutlined iconSize="m" data-test="add-rule-empty" /> Create a new Tag </> ), @@ -344,14 +329,7 @@ function TagList(props: TagListProps) { subMenuButtons.push({ name: ( <> - <Icons.PlusOutlined - css={css` - vertical-align: text-top; - `} - iconSize="m" - iconColor={theme.colors.primary.light5} - />{' '} - {t('Tag')} + <Icons.PlusOutlined iconSize="m" /> {t('Tag')} </> ), buttonStyle: 'primary', diff --git a/superset-frontend/src/pages/UsersList/index.tsx b/superset-frontend/src/pages/UsersList/index.tsx index 2bfe2574f2..1d8b575aeb 100644 --- a/superset-frontend/src/pages/UsersList/index.tsx +++ b/superset-frontend/src/pages/UsersList/index.tsx @@ -18,7 +18,7 @@ */ import { useCallback, useEffect, useMemo, useState } from 'react'; -import { css, t, SupersetClient, useTheme } from '@superset-ui/core'; +import { t, SupersetClient } from '@superset-ui/core'; import { useListViewResource } from 'src/views/CRUD/hooks'; import SubMenu, { SubMenuProps } from 'src/features/home/SubMenu'; import { ActionsBar, ActionProps } from 'src/components/ListView/ActionsBar'; @@ -89,7 +89,6 @@ const isActiveOptions = [ ]; function UsersList({ user }: UsersListProps) { - const theme = useTheme(); const { addDangerToast, addSuccessToast } = useToasts(); const { state: { @@ -377,14 +376,7 @@ function UsersList({ user }: UsersListProps) { { name: ( <> - <Icons.PlusOutlined - iconColor={theme.colors.primary.light5} - iconSize="m" - css={css` - margin: auto ${theme.sizeUnit * 2}px auto 0; - vertical-align: text-top; - `} - /> + <Icons.PlusOutlined iconSize="m" /> {t('User')} </> ), @@ -512,14 +504,7 @@ function UsersList({ user }: UsersListProps) { }, buttonText: ( <> - <Icons.PlusOutlined - iconColor={theme.colors.primary.light5} - iconSize="m" - css={css` - margin: auto ${theme.sizeUnit * 2}px auto 0; - vertical-align: text-top; - `} - /> + <Icons.PlusOutlined iconSize="m" /> {t('User')} </> ),
