You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ma...@apache.org on 2025/05/06 00:22:58 UTC
(superset) branch various_ux created (now 38c04708cc)
This is an automated email from the ASF dual-hosted git repository.
maximebeauchemin pushed a change to branch various_ux
in repository https://gitbox.apache.org/repos/asf/superset.git
at 38c04708cc align on colorBorder
This branch includes the following new commits:
new ef616048fa fix: various theme/ui CSS issues
new adfd656f89 add space between checkbox and text
new aa392d46d3 make control panel errors show as alert + CloseCircleOutlined
new e4563b0e10 align borderRadiussesses
new 38c04708cc align on colorBorder
The 5 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
(superset) 02/05: add space between checkbox and text
Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
maximebeauchemin pushed a commit to branch various_ux
in repository https://gitbox.apache.org/repos/asf/superset.git
commit adfd656f8976fce65cfa03e50dd621904592ca73
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Mon May 5 16:45:45 2025 -0700
add space between checkbox and text
---
superset-frontend/src/explore/components/ControlHeader.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/superset-frontend/src/explore/components/ControlHeader.tsx b/superset-frontend/src/explore/components/ControlHeader.tsx
index 57c36e23b3..3a11504ee5 100644
--- a/superset-frontend/src/explore/components/ControlHeader.tsx
+++ b/superset-frontend/src/explore/components/ControlHeader.tsx
@@ -138,7 +138,7 @@ const ControlHeader: FC<ControlHeaderProps> = ({
position: relative;
`}
>
- {leftNode && <span>{leftNode}</span>}
+ {leftNode && <span>{leftNode} </span>}
<span
role="button"
tabIndex={0}
(superset) 01/05: fix: various theme/ui CSS issues
Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
maximebeauchemin pushed a commit to branch various_ux
in repository https://gitbox.apache.org/repos/asf/superset.git
commit ef616048fa52faed2ac8c7d38c5966e5d10468b1
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Mon May 5 16:35:36 2025 -0700
fix: various theme/ui CSS issues
---
superset-frontend/package-lock.json | 2 +-
.../src/explore/components/controls/OptionControls/index.tsx | 7 +++++--
2 files changed, 6 insertions(+), 3 deletions(-)
diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json
index ccb4d0f117..08682f0b90 100644
--- a/superset-frontend/package-lock.json
+++ b/superset-frontend/package-lock.json
@@ -53944,7 +53944,7 @@
"@storybook/react-webpack5": "8.2.9",
"babel-loader": "^9.1.3",
"fork-ts-checker-webpack-plugin": "^9.0.2",
- "ts-loader": "^9.5.1",
+ "ts-loader": "^9.5.2",
"typescript": "^5.7.2"
},
"peerDependencies": {
diff --git a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
index 037ce6ece2..67acc4957c 100644
--- a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
+++ b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
@@ -133,7 +133,7 @@ export const DndLabelsContainer = styled.div<{
padding: ${theme.sizeUnit}px;
border: ${
!isLoading && isDragging
- ? `dashed 1px ${canDrop ? theme.colorBorder : theme.colorErrorBgHover}`
+ ? `dashed 1px ${canDrop ? theme.colorSplit : theme.colorErrorBgHover}`
: `solid 1px ${
isLoading && isDragging
? theme.colorWarningBgHover
@@ -198,7 +198,7 @@ export const AddControlLabel = styled.div<{
padding-left: ${({ theme }) => theme.sizeUnit}px;
font-size: ${({ theme }) => theme.fontSizeSM}px;
color: ${({ theme }) => theme.colors.grayscale.light1};
- border: dashed 1px ${({ theme }) => theme.colors.grayscale.light2};
+ border: dashed 1px ${({ theme }) => theme.colorSplit};
border-radius: ${({ theme }) => theme.sizeUnit}px;
cursor: ${({ cancelHover }) => (cancelHover ? 'inherit' : 'pointer')};
@@ -211,6 +211,9 @@ export const AddControlLabel = styled.div<{
background-color: ${({ cancelHover, theme }) =>
cancelHover ? 'inherit' : theme.colors.grayscale.light3};
}
+ svg {
+ margin-right: ${({ theme }) => theme.sizeUnit}px;
+ }
`;
export const AddIconButton = styled.button`
(superset) 04/05: align borderRadiussesses
Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
maximebeauchemin pushed a commit to branch various_ux
in repository https://gitbox.apache.org/repos/asf/superset.git
commit e4563b0e100236a0525876a69cc85919a46bce8b
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Mon May 5 17:13:16 2025 -0700
align borderRadiussesses
---
.../generators/plugin-chart/templates/src/MyChart.erb | 2 +-
.../legacy-plugin-chart-partition/src/ReactPartition.jsx | 2 +-
.../src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx | 2 +-
.../plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx | 2 +-
.../plugins/plugin-chart-handlebars/src/Handlebars.tsx | 2 +-
superset-frontend/src/components/CronPicker/index.tsx | 4 ++--
superset-frontend/src/components/ListView/Filters/Search.tsx | 2 +-
superset-frontend/src/components/ListView/ListView.tsx | 2 +-
.../src/dashboard/components/AddSliceCard/AddSliceCard.tsx | 6 +++---
.../dashboard/components/DashboardBuilder/DashboardBuilder.tsx | 2 +-
superset-frontend/src/dashboard/components/DashboardGrid.jsx | 4 ++--
superset-frontend/src/dashboard/styles.ts | 2 +-
.../components/controls/AnnotationLayerControl/index.tsx | 2 +-
.../explore/components/controls/CollectionControl/index.jsx | 2 +-
.../controls/ColumnConfigControl/ColumnConfigControl.tsx | 2 +-
.../ConditionalFormattingControl.tsx | 2 +-
.../src/explore/components/controls/CustomListItem/index.tsx | 8 ++++----
.../src/explore/components/controls/OptionControls/index.tsx | 8 ++++----
.../components/controls/VizTypeControl/VizTypeGallery.tsx | 6 +++---
superset-frontend/src/features/alerts/AlertReportModal.tsx | 2 +-
.../src/features/allEntities/AllEntitiesTable.tsx | 2 +-
.../src/features/annotationLayers/AnnotationLayerModal.tsx | 2 +-
.../src/features/cssTemplates/CssTemplateModal.tsx | 4 ++--
.../src/features/databases/DatabaseModal/styles.ts | 10 +++++-----
superset-frontend/src/pages/ChartCreation/index.tsx | 4 ++--
25 files changed, 43 insertions(+), 43 deletions(-)
diff --git 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
index 7f9e6383e0..5fd08d655b 100644
--- 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
@@ -30,7 +30,7 @@ import { <%= packageLabel %>Props, <%= packageLabel %>StylesProps } from './type
const Styles = styled.div<<%= packageLabel %>StylesProps>`
background-color: ${({ theme }) => theme.colors.primary.light2};
padding: ${({ theme }) => theme.sizeUnit * 4}px;
- border-radius: ${({ theme }) => theme.sizeUnit * 2}px;
+ border-radius: ${({ theme }) => theme.borderRadius}px;
height: ${({ height }) => height}px;
width: ${({ width }) => width}px;
`;
diff --git a/superset-frontend/plugins/legacy-plugin-chart-partition/src/ReactPartition.jsx b/superset-frontend/plugins/legacy-plugin-chart-partition/src/ReactPartition.jsx
index 521ad32e7c..538c67fa9e 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-partition/src/ReactPartition.jsx
+++ b/superset-frontend/plugins/legacy-plugin-chart-partition/src/ReactPartition.jsx
@@ -68,7 +68,7 @@ export default styled(Partition)`
padding: ${theme.sizeUnit}px;
pointer-events: none;
background-color: ${theme.colors.grayscale.dark2};
- border-radius: ${theme.sizeUnit}px;
+ border-radius: ${theme.borderRadius}px;
}
.partition-tooltip td {
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx
index 511ae2308f..3746e1d01e 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx
@@ -60,7 +60,7 @@ const SymbolWrapper = styled.span<PopKPIComparisonSymbolStyleProps>`
background-color: ${backgroundColor};
color: ${textColor};
padding: ${theme.sizeUnit}px ${theme.sizeUnit * 2}px;
- border-radius: ${theme.sizeUnit * 2}px;
+ border-radius: ${theme.borderRadius}px;
margin-right: ${theme.sizeUnit}px;
`}
`;
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx
index 53a2b44add..b6209a227e 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx
@@ -396,7 +396,7 @@ export default styled(BigNumberVis)`
margin: -0.5em 0 0.4em;
line-height: 1;
padding: ${theme.sizeUnit}px;
- border-radius: ${theme.sizeUnit}px;
+ border-radius: ${theme.borderRadius}px;
}
}
diff --git a/superset-frontend/plugins/plugin-chart-handlebars/src/Handlebars.tsx b/superset-frontend/plugins/plugin-chart-handlebars/src/Handlebars.tsx
index 77314c6bde..2e7e27ae1e 100644
--- a/superset-frontend/plugins/plugin-chart-handlebars/src/Handlebars.tsx
+++ b/superset-frontend/plugins/plugin-chart-handlebars/src/Handlebars.tsx
@@ -23,7 +23,7 @@ import { HandlebarsProps, HandlebarsStylesProps } from './types';
const Styles = styled.div<HandlebarsStylesProps>`
padding: ${({ theme }) => theme.sizeUnit * 4}px;
- border-radius: ${({ theme }) => theme.sizeUnit * 2}px;
+ border-radius: ${({ theme }) => theme.borderRadius}px;
height: ${({ height }) => height}px;
width: ${({ width }) => width}px;
overflow: auto;
diff --git a/superset-frontend/src/components/CronPicker/index.tsx b/superset-frontend/src/components/CronPicker/index.tsx
index abbddaf9b3..9d1ad22751 100644
--- a/superset-frontend/src/components/CronPicker/index.tsx
+++ b/superset-frontend/src/components/CronPicker/index.tsx
@@ -186,7 +186,7 @@ export const CronPicker = styled((props: CronProps) => (
.react-js-cron-custom-select .antd5-select-selection-placeholder {
flex: auto;
- border-radius: ${theme.sizeUnit}px;
+ border-radius: ${theme.borderRadius}px;
}
.react-js-cron-custom-select .antd5-select-selection-overflow-item {
@@ -195,7 +195,7 @@ export const CronPicker = styled((props: CronProps) => (
.react-js-cron-select > div:first-of-type,
.react-js-cron-custom-select {
- border-radius: ${theme.sizeUnit}px;
+ border-radius: ${theme.borderRadius}px;
}
`}
`;
diff --git a/superset-frontend/src/components/ListView/Filters/Search.tsx b/superset-frontend/src/components/ListView/Filters/Search.tsx
index c515f47266..312988a586 100644
--- a/superset-frontend/src/components/ListView/Filters/Search.tsx
+++ b/superset-frontend/src/components/ListView/Filters/Search.tsx
@@ -44,7 +44,7 @@ const Container = styled.div`
`;
const StyledInput = styled(Input)`
- border-radius: ${({ theme }) => theme.sizeUnit}px;
+ border-radius: ${({ theme }) => theme.borderRadius}px;
`;
function SearchFilter(
diff --git a/superset-frontend/src/components/ListView/ListView.tsx b/superset-frontend/src/components/ListView/ListView.tsx
index 9a267e4a54..68cae5545f 100644
--- a/superset-frontend/src/components/ListView/ListView.tsx
+++ b/superset-frontend/src/components/ListView/ListView.tsx
@@ -146,7 +146,7 @@ const ViewModeContainer = styled.div`
.toggle-button {
display: inline-block;
- border-radius: ${({ theme }) => theme.sizeUnit / 2}px;
+ border-radius: ${({ theme }) => theme.borderRadius}px;
padding: ${({ theme }) => theme.sizeUnit}px;
padding-bottom: ${({ theme }) => theme.sizeUnit * 0.5}px;
diff --git a/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.tsx b/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.tsx
index 8f315cb8d6..b93e9f4b72 100644
--- a/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.tsx
+++ b/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.tsx
@@ -126,7 +126,7 @@ const SliceAddedBadgePlaceholder: FC<{
css={(theme: Theme) => css`
/* Display styles */
border: 1px solid ${theme.colorBorder};
- border-radius: ${theme.sizeUnit}px;
+ border-radius: ${theme.borderRadius}px;
color: ${theme.colorPrimaryText};
font-size: ${theme.fontSizeXS}px;
letter-spacing: 0.02em;
@@ -152,7 +152,7 @@ const SliceAddedBadge: FC<{ placeholder?: HTMLDivElement }> = ({
css={(theme: Theme) => css`
/* Display styles */
border: 1px solid ${theme.colorBorder};
- border-radius: ${theme.sizeUnit}px;
+ border-radius: ${theme.borderRadius}px;
color: ${theme.colorPrimaryText};
font-size: ${theme.fontSizeXS}px;
letter-spacing: 0.02em;
@@ -206,7 +206,7 @@ const AddSliceCard: FC<{
data-test="chart-card"
css={(theme: Theme) => css`
border: 1px solid ${theme.colorBorder};
- border-radius: ${theme.sizeUnit}px;
+ border-radius: ${theme.borderRadius}px;
padding: ${theme.sizeUnit * 4}px;
margin: 0 ${theme.sizeUnit * 3}px ${theme.sizeUnit * 3}px
${theme.sizeUnit * 3}px;
diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
index 05e5be1677..7ee7f37813 100644
--- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
+++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
@@ -117,7 +117,7 @@ const StyledHeader = styled.div`
left: ${theme.sizeUnit}px;
top: ${theme.sizeUnit}px;
border: 1px dashed transparent;
- border-radius: ${theme.sizeUnit}px;
+ border-radius: ${theme.borderRadius}px;
opacity: 0.5;
}
`}
diff --git a/superset-frontend/src/dashboard/components/DashboardGrid.jsx b/superset-frontend/src/dashboard/components/DashboardGrid.jsx
index 6b62f097ab..9b3b5c5054 100644
--- a/superset-frontend/src/dashboard/components/DashboardGrid.jsx
+++ b/superset-frontend/src/dashboard/components/DashboardGrid.jsx
@@ -70,7 +70,7 @@ const GridContent = styled.div`
display: flex;
align-items: center;
justify-content: center;
- border-radius: ${theme.sizeUnit}px;
+ border-radius: ${theme.borderRadius}px;
overflow: hidden;
&:before {
@@ -79,7 +79,7 @@ const GridContent = styled.div`
width: calc(100% - ${theme.sizeUnit * 2}px);
height: calc(100% - ${theme.sizeUnit * 2}px);
border: 1px dashed transparent;
- border-radius: ${theme.sizeUnit}px;
+ border-radius: ${theme.borderRadius}px;
opacity: 0.5;
}
}
diff --git a/superset-frontend/src/dashboard/styles.ts b/superset-frontend/src/dashboard/styles.ts
index 3e1cb73ef5..b63cd015ee 100644
--- a/superset-frontend/src/dashboard/styles.ts
+++ b/superset-frontend/src/dashboard/styles.ts
@@ -95,7 +95,7 @@ export const focusStyle = (theme: SupersetTheme) => css`
.header-controls span {
&:focus-visible {
box-shadow: 0 0 0 2px ${theme.colorPrimaryText};
- border-radius: ${theme.sizeUnit / 2}px;
+ border-radius: ${theme.borderRadius}px;
outline: none;
text-decoration: none;
}
diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx
index 48f639539e..0c9cf9c700 100644
--- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx
+++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx
@@ -238,7 +238,7 @@ class AnnotationLayerControl extends PureComponent<Props, PopoverState> {
return (
<div>
- <List bordered css={theme => ({ borderRadius: theme.sizeUnit })}>
+ <List bordered css={theme => ({ borderRadius: theme.borderRadius })}>
{annotations}
<ControlPopover
trigger="click"
diff --git a/superset-frontend/src/explore/components/controls/CollectionControl/index.jsx b/superset-frontend/src/explore/components/controls/CollectionControl/index.jsx
index d472ff6297..db1a3ade7f 100644
--- a/superset-frontend/src/explore/components/controls/CollectionControl/index.jsx
+++ b/superset-frontend/src/explore/components/controls/CollectionControl/index.jsx
@@ -111,7 +111,7 @@ class CollectionControl extends Component {
onSortEnd={this.onSortEnd.bind(this)}
bordered
css={theme => ({
- borderRadius: theme.sizeUnit,
+ borderRadius: theme.borderRadius,
})}
>
{this.props.value.map((o, i) => {
diff --git a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx
index e51807b4fa..a232f0e190 100644
--- a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx
+++ b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx
@@ -130,7 +130,7 @@ export default function ColumnConfigControl<T extends ColumnConfig>({
<div
css={{
border: `1px solid ${theme.colors.grayscale.light2}`,
- borderRadius: theme.sizeUnit,
+ borderRadius: theme.borderRadius,
}}
>
{columnsWithChildInfo.map(col => (
diff --git a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
index 9d20db321b..2562df27aa 100644
--- a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
+++ b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
@@ -37,7 +37,7 @@ const FormattersContainer = styled.div`
${({ theme }) => css`
padding: ${theme.sizeUnit}px;
border: solid 1px ${theme.colors.grayscale.light2};
- border-radius: ${theme.sizeUnit}px;
+ border-radius: ${theme.borderRadius}px;
`}
`;
diff --git a/superset-frontend/src/explore/components/controls/CustomListItem/index.tsx b/superset-frontend/src/explore/components/controls/CustomListItem/index.tsx
index 06a170c9a0..5ffda26c25 100644
--- a/superset-frontend/src/explore/components/controls/CustomListItem/index.tsx
+++ b/superset-frontend/src/explore/components/controls/CustomListItem/index.tsx
@@ -29,12 +29,12 @@ export default function CustomListItem(props: CustomListItemProps) {
const css: Record<string, Record<string, Record<string, number> | string>> = {
'&.antd5-list-item': {
':first-of-type': {
- borderTopLeftRadius: theme.sizeUnit,
- borderTopRightRadius: theme.sizeUnit,
+ borderTopLeftRadius: theme.borderRadius,
+ borderTopRightRadius: theme.borderRadius,
},
':last-of-type': {
- borderBottomLeftRadius: theme.sizeUnit,
- borderBottomRightRadius: theme.sizeUnit,
+ borderBottomLeftRadius: theme.borderRadius,
+ borderBottomRightRadius: theme.borderRadius,
},
},
};
diff --git a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
index 67acc4957c..7104a72228 100644
--- a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
+++ b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
@@ -104,7 +104,7 @@ export const HeaderContainer = styled.div`
export const LabelsContainer = styled.div`
padding: ${({ theme }) => theme.sizeUnit}px;
border: solid 1px ${({ theme }) => theme.colorSplit};
- border-radius: ${({ theme }) => theme.sizeUnit}px;
+ border-radius: ${({ theme }) => theme.borderRadius}px;
`;
const borderPulse = keyframes`
@@ -140,12 +140,12 @@ export const DndLabelsContainer = styled.div<{
: theme.colorBorder
}`
};
- border-radius: ${theme.sizeUnit}px;
+ border-radius: ${theme.borderRadius}px;
&:before,
&:after {
content: ' ';
position: absolute;
- border-radius: ${theme.sizeUnit}px;
+ border-radius: ${theme.borderRadius}px;
}
&:before {
display: ${isDragging || isLoading ? 'block' : 'none'};
@@ -199,7 +199,7 @@ export const AddControlLabel = styled.div<{
font-size: ${({ theme }) => theme.fontSizeSM}px;
color: ${({ theme }) => theme.colors.grayscale.light1};
border: dashed 1px ${({ theme }) => theme.colorSplit};
- border-radius: ${({ theme }) => theme.sizeUnit}px;
+ border-radius: ${({ theme }) => theme.borderRadius}px;
cursor: ${({ cancelHover }) => (cancelHover ? 'inherit' : 'pointer')};
:hover {
diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
index a58e2804d5..cf2bb358df 100644
--- a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
+++ b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
@@ -262,7 +262,7 @@ const Examples = styled.div`
img {
height: 100%;
- border-radius: ${({ theme }) => theme.sizeUnit}px;
+ border-radius: ${({ theme }) => theme.borderRadius}px;
border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
}
`;
@@ -276,7 +276,7 @@ const thumbnailContainerCss = (theme: SupersetTheme) => css`
min-width: ${theme.sizeUnit * THUMBNAIL_GRID_UNITS}px;
min-height: ${theme.sizeUnit * THUMBNAIL_GRID_UNITS}px;
border: 1px solid ${theme.colors.grayscale.light2};
- border-radius: ${theme.sizeUnit}px;
+ border-radius: ${theme.borderRadius}px;
transition: border-color ${theme.motionDurationMid};
}
@@ -298,7 +298,7 @@ const HighlightLabel = styled.div`
${({ theme }) => `
border: 1px solid ${theme.colorPrimaryText};
box-sizing: border-box;
- border-radius: ${theme.sizeUnit}px;
+ border-radius: ${theme.borderRadius}px;
background: ${theme.colors.grayscale.light5};
line-height: ${theme.sizeUnit * 2.5}px;
color: ${theme.colorPrimaryText};
diff --git a/superset-frontend/src/features/alerts/AlertReportModal.tsx b/superset-frontend/src/features/alerts/AlertReportModal.tsx
index e9192bb3fc..0469d1ff4f 100644
--- a/superset-frontend/src/features/alerts/AlertReportModal.tsx
+++ b/superset-frontend/src/features/alerts/AlertReportModal.tsx
@@ -315,7 +315,7 @@ export const StyledInputContainer = styled.div`
padding: ${theme.sizeUnit}px ${theme.sizeUnit * 2}px;
border-style: none;
border: 1px solid ${theme.colorBorder};
- border-radius: ${theme.sizeUnit}px;
+ border-radius: ${theme.borderRadius}px;
&[name='description'] {
flex: 1 1 auto;
diff --git a/superset-frontend/src/features/allEntities/AllEntitiesTable.tsx b/superset-frontend/src/features/allEntities/AllEntitiesTable.tsx
index 5e2622aa56..46713354b1 100644
--- a/superset-frontend/src/features/allEntities/AllEntitiesTable.tsx
+++ b/superset-frontend/src/features/allEntities/AllEntitiesTable.tsx
@@ -31,7 +31,7 @@ const PAGE_SIZE = 10;
const AllEntitiesTableContainer = styled.div`
text-align: left;
- border-radius: ${({ theme }) => theme.sizeUnit * 1}px 0;
+ border-radius: ${({ theme }) => theme.borderRadius}px 0;
.table {
table-layout: fixed;
}
diff --git a/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx b/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx
index cf98f44e29..231dd7c2de 100644
--- a/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx
+++ b/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx
@@ -64,7 +64,7 @@ const LayerContainer = styled.div`
padding: ${({ theme }) => theme.sizeUnit * 1.5}px
${({ theme }) => theme.sizeUnit * 2}px;
border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
- border-radius: ${({ theme }) => theme.sizeUnit}px;
+ border-radius: ${({ theme }) => theme.borderRadius}px;
width: 50%;
}
diff --git a/superset-frontend/src/features/cssTemplates/CssTemplateModal.tsx b/superset-frontend/src/features/cssTemplates/CssTemplateModal.tsx
index da37b58a55..b4965051e8 100644
--- a/superset-frontend/src/features/cssTemplates/CssTemplateModal.tsx
+++ b/superset-frontend/src/features/cssTemplates/CssTemplateModal.tsx
@@ -69,8 +69,8 @@ const TemplateContainer = styled.div(
input[type='text'] {
padding: ${theme.sizeUnit * 1.5}px ${theme.sizeUnit * 2}px;
- border: 1px solid ${theme.colors.grayscale.light2};
- border-radius: ${theme.sizeUnit}px;
+ border: 1px solid ${theme.colorBorder};
+ border-radius: ${theme.borderRadius}px;
width: 50%;
}
`,
diff --git a/superset-frontend/src/features/databases/DatabaseModal/styles.ts b/superset-frontend/src/features/databases/DatabaseModal/styles.ts
index 3d6f4d265d..d597bff8c5 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/styles.ts
+++ b/superset-frontend/src/features/databases/DatabaseModal/styles.ts
@@ -280,7 +280,7 @@ export const StyledInputContainer = styled.div`
padding: ${theme.sizeUnit * 1.5}px ${theme.sizeUnit * 2}px;
border-style: none;
border: 1px solid ${theme.colors.grayscale.light2};
- border-radius: ${theme.sizeUnit}px;
+ border-radius: ${theme.borderRadius}px;
&[name='name'] {
flex: 0 1 auto;
@@ -307,8 +307,8 @@ export const StyledInputContainer = styled.div`
export const StyledJsonEditor = styled(JsonEditor)`
flex: 1 1 auto;
- border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
- border-radius: ${({ theme }) => theme.sizeUnit}px;
+ border: 1px solid ${({ theme }) => theme.colorBorder};
+ border-radius: ${({ theme }) => theme.borderRadius}px;
`;
export const StyledExpandableForm = styled.div`
@@ -414,8 +414,8 @@ export const CredentialInfoForm = styled.div`
.input-form {
height: 100px;
width: 100%;
- border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
- border-radius: ${({ theme }) => theme.sizeUnit}px;
+ border: 1px solid ${({ theme }) => theme.colorBorder};
+ border-radius: ${({ theme }) => theme.borderRadius}px;
resize: vertical;
padding: ${({ theme }) => theme.sizeUnit * 1.5}px
${({ theme }) => theme.sizeUnit * 2}px;
diff --git a/superset-frontend/src/pages/ChartCreation/index.tsx b/superset-frontend/src/pages/ChartCreation/index.tsx
index 98c6c1dd02..a3693d091e 100644
--- a/superset-frontend/src/pages/ChartCreation/index.tsx
+++ b/superset-frontend/src/pages/ChartCreation/index.tsx
@@ -75,7 +75,7 @@ const StyledContainer = styled.div`
width: 100%;
max-width: ${MAX_ADVISABLE_VIZ_GALLERY_WIDTH}px;
max-height: calc(100vh - ${ESTIMATED_NAV_HEIGHT}px);
- border-radius: ${theme.sizeUnit}px;
+ border-radius: ${theme.borderRadius}px;
background-color: ${theme.colorBgContainer};
margin-left: auto;
margin-right: auto;
@@ -106,7 +106,7 @@ const StyledContainer = styled.div`
& .viz-gallery {
border: 1px solid ${theme.colorBorder};
- border-radius: ${theme.sizeUnit}px;
+ border-radius: ${theme.borderRadius}px;
margin: ${theme.sizeUnit}px 0px;
max-height: calc(100vh - ${ELEMENTS_EXCEPT_VIZ_GALLERY}px);
flex: 1;
(superset) 05/05: align on colorBorder
Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
maximebeauchemin pushed a commit to branch various_ux
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 38c04708ccc147cb836189c82a6b0a0e43f66ef7
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Mon May 5 17:22:18 2025 -0700
align on colorBorder
---
.../superset-ui-chart-controls/src/components/SQLPopover.tsx | 2 +-
.../src/SqlLab/components/TemplateParamsEditor/index.tsx | 2 +-
superset-frontend/src/dashboard/components/CssEditor/index.tsx | 2 +-
.../dashboard/components/DashboardBuilder/DashboardBuilder.tsx | 2 +-
.../components/OverwriteConfirm/OverwriteConfirmModal.tsx | 2 +-
.../src/dashboard/components/filterscope/FilterScopeSelector.jsx | 2 +-
.../src/dashboard/components/gridComponents/Column.jsx | 2 +-
.../src/dashboard/components/menu/BackgroundStyleDropdown.tsx | 2 +-
.../nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx | 2 +-
.../src/explore/components/ExploreContentPopover.tsx | 2 +-
.../controls/ColumnConfigControl/ColumnConfigControl.tsx | 2 +-
.../ConditionalFormattingControl/ConditionalFormattingControl.tsx | 8 ++------
.../src/explore/components/controls/TextAreaControl.jsx | 2 +-
.../explore/components/controls/VizTypeControl/VizTypeGallery.tsx | 8 ++++----
.../src/features/annotationLayers/AnnotationLayerModal.tsx | 2 +-
superset-frontend/src/features/databases/DatabaseModal/styles.ts | 2 +-
superset-frontend/src/pages/Home/index.tsx | 2 +-
17 files changed, 21 insertions(+), 25 deletions(-)
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/SQLPopover.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/SQLPopover.tsx
index b0cd193949..af760bcf42 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/components/SQLPopover.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/SQLPopover.tsx
@@ -65,7 +65,7 @@ export const SQLPopover = (props: PopoverProps & { sqlExpression: string }) => {
readOnly
wrapEnabled
style={{
- border: `1px solid ${theme.colors.grayscale.light2}`,
+ border: `1px solid ${theme.colorBorder}`,
background: theme.colorPrimaryBg,
maxWidth: theme.sizeUnit * 100,
}}
diff --git a/superset-frontend/src/SqlLab/components/TemplateParamsEditor/index.tsx b/superset-frontend/src/SqlLab/components/TemplateParamsEditor/index.tsx
index d23290ea4e..2f8019f4d1 100644
--- a/superset-frontend/src/SqlLab/components/TemplateParamsEditor/index.tsx
+++ b/superset-frontend/src/SqlLab/components/TemplateParamsEditor/index.tsx
@@ -27,7 +27,7 @@ import useQueryEditor from 'src/SqlLab/hooks/useQueryEditor';
const StyledConfigEditor = styled(ConfigEditor)`
&.ace_editor {
- border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+ border: 1px solid ${({ theme }) => theme.colorBorder};
}
`;
diff --git a/superset-frontend/src/dashboard/components/CssEditor/index.tsx b/superset-frontend/src/dashboard/components/CssEditor/index.tsx
index 1744f03496..506578916a 100644
--- a/superset-frontend/src/dashboard/components/CssEditor/index.tsx
+++ b/superset-frontend/src/dashboard/components/CssEditor/index.tsx
@@ -50,7 +50,7 @@ const StyledWrapper = styled.div`
}
}
.css-editor {
- border: 1px solid ${theme.colors.grayscale.light1};
+ border: 1px solid ${theme.colorBorder};
}
`}
`;
diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
index 7ee7f37813..9ec4b6d2b6 100644
--- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
+++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
@@ -216,7 +216,7 @@ const DashboardContentWrapper = styled.div`
.grid-row:after,
.dashboard-component-tabs > .hover-menu + div:after {
- border: 1px dashed ${theme.colors.grayscale.light2};
+ border: 1px dashed ${theme.colorBorder};
}
/* provide hit area in case row contents is edge to edge */
diff --git a/superset-frontend/src/dashboard/components/OverwriteConfirm/OverwriteConfirmModal.tsx b/superset-frontend/src/dashboard/components/OverwriteConfirm/OverwriteConfirmModal.tsx
index ac91e3b73b..636a040645 100644
--- a/superset-frontend/src/dashboard/components/OverwriteConfirm/OverwriteConfirmModal.tsx
+++ b/superset-frontend/src/dashboard/components/OverwriteConfirm/OverwriteConfirmModal.tsx
@@ -42,7 +42,7 @@ const StyledTitle = styled.h2`
const StyledEditor = styled.div`
${({ theme }) => `
table {
- border: 1px ${theme.colors.grayscale.light2} solid;
+ border: 1px ${theme.colorBorder} solid;
}
pre {
font-size: 11px;
diff --git a/superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.jsx b/superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.jsx
index 160e39d582..fff0ef7f20 100644
--- a/superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.jsx
+++ b/superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.jsx
@@ -292,7 +292,7 @@ const ScopeSelector = styled.div`
right: ${theme.sizeUnit * 4}px;
top: ${theme.sizeUnit * 4}px;
border-radius: ${theme.borderRadius}px;
- border: 1px solid ${theme.colors.grayscale.light2};
+ border: 1px solid ${theme.colorBorder};
padding: ${theme.sizeUnit}px ${theme.sizeUnit * 2}px;
font-size: ${theme.fontSize}px;
outline: none;
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Column.jsx b/superset-frontend/src/dashboard/components/gridComponents/Column.jsx
index 2593a5906c..2e0154cc1c 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Column.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Column.jsx
@@ -83,7 +83,7 @@ const ColumnStyles = styled.div`
left: 0;
z-index: 1;
pointer-events: none;
- border: 1px dashed ${theme.colors.grayscale.light2};
+ border: 1px dashed ${theme.colorBorder};
}
.dashboard--editing .resizable-container--resizing:hover > &:after,
.dashboard--editing .hover-menu:hover + &:after {
diff --git a/superset-frontend/src/dashboard/components/menu/BackgroundStyleDropdown.tsx b/superset-frontend/src/dashboard/components/menu/BackgroundStyleDropdown.tsx
index d2b331ad0d..30f126061d 100644
--- a/superset-frontend/src/dashboard/components/menu/BackgroundStyleDropdown.tsx
+++ b/superset-frontend/src/dashboard/components/menu/BackgroundStyleDropdown.tsx
@@ -48,7 +48,7 @@ const BackgroundStyleOption = styled.div`
background: transparent;
&:before {
background: ${theme.colors.grayscale.light5};
- border: 1px solid ${theme.colors.grayscale.light2};
+ border: 1px solid ${theme.colorBorder};
}
}
/* Create the transparent rect icon */
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx
index bfe8a2d667..8e7baa09d0 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx
@@ -47,7 +47,7 @@ const StyledCrossFilterColumn = styled('span')`
const StyledTag = styled(Tag)`
${({ theme }) => `
- border: 1px solid ${theme.colors.grayscale.light3};
+ border: 1px solid ${theme.colorBorder};
border-radius: 2px;
.anticon-close {
vertical-align: middle;
diff --git a/superset-frontend/src/explore/components/ExploreContentPopover.tsx b/superset-frontend/src/explore/components/ExploreContentPopover.tsx
index 110782d651..22407c1d6c 100644
--- a/superset-frontend/src/explore/components/ExploreContentPopover.tsx
+++ b/superset-frontend/src/explore/components/ExploreContentPopover.tsx
@@ -27,6 +27,6 @@ export const ExplorePopoverContent = styled.div`
cursor: nwse-resize;
}
.filter-sql-editor {
- border: ${({ theme }) => theme.colors.grayscale.light2} solid thin;
+ border: ${({ theme }) => theme.colorBorder} solid thin;
}
`;
diff --git a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx
index a232f0e190..60e5c2da99 100644
--- a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx
+++ b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx
@@ -129,7 +129,7 @@ export default function ColumnConfigControl<T extends ColumnConfig>({
<ControlHeader {...props} />
<div
css={{
- border: `1px solid ${theme.colors.grayscale.light2}`,
+ border: `1px solid ${theme.colorBorder}`,
borderRadius: theme.borderRadius,
}}
>
diff --git a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
index 2562df27aa..5f52c9c1f5 100644
--- a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
+++ b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
@@ -36,7 +36,7 @@ import {
const FormattersContainer = styled.div`
${({ theme }) => css`
padding: ${theme.sizeUnit}px;
- border: solid 1px ${theme.colors.grayscale.light2};
+ border: solid 1px ${theme.colorBorder};
border-radius: ${theme.borderRadius}px;
`}
`;
@@ -146,10 +146,7 @@ const ConditionalFormattingControl = ({
{conditionalFormattingConfigs.map((config, index) => (
<FormatterContainer key={index}>
<CloseButton onClick={() => onDelete(index)}>
- <Icons.CloseOutlined
- iconSize="m"
- iconColor={theme.colors.grayscale.light1}
- />
+ <Icons.CloseOutlined iconSize="m" />
</CloseButton>
<FormattingPopover
title={t('Edit formatter')}
@@ -169,7 +166,6 @@ const ConditionalFormattingControl = ({
css={css`
margin-top: ${theme.sizeUnit}px;
`}
- iconColor={theme.colors.grayscale.light1}
/>
</CaretContainer>
</OptionControlContainer>
diff --git a/superset-frontend/src/explore/components/controls/TextAreaControl.jsx b/superset-frontend/src/explore/components/controls/TextAreaControl.jsx
index ecb614f8bd..913d8e4243 100644
--- a/superset-frontend/src/explore/components/controls/TextAreaControl.jsx
+++ b/superset-frontend/src/explore/components/controls/TextAreaControl.jsx
@@ -83,7 +83,7 @@ class TextAreaControl extends Component {
const minLines = inModal ? 40 : this.props.minLines || 12;
if (this.props.language) {
const style = {
- border: `1px solid ${this.props.theme.colors.grayscale.light1}`,
+ border: `1px solid ${this.props.theme.colorBorder}`,
minHeight: `${minLines}em`,
width: 'auto',
...this.props.textAreaStyles,
diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
index cf2bb358df..40a868ab77 100644
--- a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
+++ b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
@@ -222,7 +222,7 @@ const IconsPane = styled.div`
const DetailsPane = (theme: SupersetTheme) => css`
grid-area: details;
- border-top: 1px solid ${theme.colors.grayscale.light2};
+ border-top: 1px solid ${theme.colorBorder};
`;
const DetailsPopulated = (theme: SupersetTheme) => css`
@@ -263,7 +263,7 @@ const Examples = styled.div`
img {
height: 100%;
border-radius: ${({ theme }) => theme.borderRadius}px;
- border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+ border: 1px solid ${({ theme }) => theme.colorBorder};
}
`;
@@ -275,7 +275,7 @@ const thumbnailContainerCss = (theme: SupersetTheme) => css`
img {
min-width: ${theme.sizeUnit * THUMBNAIL_GRID_UNITS}px;
min-height: ${theme.sizeUnit * THUMBNAIL_GRID_UNITS}px;
- border: 1px solid ${theme.colors.grayscale.light2};
+ border: 1px solid ${theme.colorBorder};
border-radius: ${theme.borderRadius}px;
transition: border-color ${theme.motionDurationMid};
}
@@ -285,7 +285,7 @@ const thumbnailContainerCss = (theme: SupersetTheme) => css`
}
&:hover:not(.selected) img {
- border: 1px solid ${theme.colors.grayscale.light1};
+ border: 1px solid ${theme.colorBorder};
}
.viztype-label {
diff --git a/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx b/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx
index 231dd7c2de..ba8d3fba1a 100644
--- a/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx
+++ b/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx
@@ -63,7 +63,7 @@ const LayerContainer = styled.div`
input[type='text'] {
padding: ${({ theme }) => theme.sizeUnit * 1.5}px
${({ theme }) => theme.sizeUnit * 2}px;
- border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+ border: 1px solid ${({ theme }) => theme.colorBorder};
border-radius: ${({ theme }) => theme.borderRadius}px;
width: 50%;
}
diff --git a/superset-frontend/src/features/databases/DatabaseModal/styles.ts b/superset-frontend/src/features/databases/DatabaseModal/styles.ts
index d597bff8c5..8b27ba81e1 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/styles.ts
+++ b/superset-frontend/src/features/databases/DatabaseModal/styles.ts
@@ -279,7 +279,7 @@ export const StyledInputContainer = styled.div`
input[type='number'] {
padding: ${theme.sizeUnit * 1.5}px ${theme.sizeUnit * 2}px;
border-style: none;
- border: 1px solid ${theme.colors.grayscale.light2};
+ border: 1px solid ${theme.colorBorder};
border-radius: ${theme.borderRadius}px;
&[name='name'] {
diff --git a/superset-frontend/src/pages/Home/index.tsx b/superset-frontend/src/pages/Home/index.tsx
index 86b81bbc88..7eff41df7a 100644
--- a/superset-frontend/src/pages/Home/index.tsx
+++ b/superset-frontend/src/pages/Home/index.tsx
@@ -104,7 +104,7 @@ const WelcomeContainer = styled.div`
}
.antd5-card.ant-card-bordered {
- border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+ border: 1px solid ${({ theme }) => theme.colorBorder};
}
.loading-cards {
(superset) 03/05: make control panel errors show as alert + CloseCircleOutlined
Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
maximebeauchemin pushed a commit to branch various_ux
in repository https://gitbox.apache.org/repos/asf/superset.git
commit aa392d46d3b7b9e0aad34566086a7fba7c6e5ca4
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Mon May 5 16:56:43 2025 -0700
make control panel errors show as alert + CloseCircleOutlined
---
.../src/explore/components/ControlHeader.tsx | 9 ++-------
.../src/explore/components/ControlPanelsContainer.tsx | 15 ++++-----------
2 files changed, 6 insertions(+), 18 deletions(-)
diff --git a/superset-frontend/src/explore/components/ControlHeader.tsx b/superset-frontend/src/explore/components/ControlHeader.tsx
index 3a11504ee5..8d44910f2c 100644
--- a/superset-frontend/src/explore/components/ControlHeader.tsx
+++ b/superset-frontend/src/explore/components/ControlHeader.tsx
@@ -163,7 +163,7 @@ const ControlHeader: FC<ControlHeaderProps> = ({
{danger && (
<span>
<Tooltip id="error-tooltip" placement="top" title={danger}>
- <Icons.ExclamationCircleOutlined
+ <Icons.CloseCircleOutlined
iconColor={theme.colorErrorText}
iconSize="s"
/>
@@ -177,12 +177,7 @@ const ControlHeader: FC<ControlHeaderProps> = ({
placement="top"
title={validationErrors?.join(' ')}
>
- <Icons.ExclamationCircleOutlined
- css={css`
- ${iconStyles};
- color: ${labelColor};
- `}
- />
+ <Icons.CloseCircleOutlined iconColor={theme.colorErrorText} />
</Tooltip>{' '}
</span>
)}
diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
index 182049fbbc..de75108851 100644
--- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
+++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
@@ -581,12 +581,7 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
id={`${kebabCase('validation-errors')}-tooltip`}
title={t('This section contains validation errors')}
>
- <Icons.InfoCircleOutlined
- css={css`
- ${iconStyles};
- color: ${errorColor};
- `}
- />
+ <Icons.CloseCircleOutlined iconColor={theme.colorErrorText} />
</Tooltip>
)}
</span>
@@ -715,11 +710,9 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
placement="right"
title={props.errorMessage}
>
- <Icons.ExclamationCircleOutlined
- css={css`
- ${iconStyles};
- color: ${errorColor};
- `}
+ <Icons.CloseCircleOutlined
+ iconColor={theme.colorErrorText}
+ iconSize="s"
/>
</Tooltip>
</span>