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 <[email protected]> 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 {
