You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by en...@apache.org on 2025/06/17 09:16:39 UTC
(superset) 03/06: refactor(Filters): unify font and color styles across all filters and consolidate code to avoid duplication
This is an automated email from the ASF dual-hosted git repository.
enzomartellucci pushed a commit to branch enxdev/fix/theming/visual-regressions-p5
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 43e3f18d23f3ea51e92e31b38a2a9f27afba6466
Author: Enzo Martellucci <en...@gmail.com>
AuthorDate: Mon Jun 16 23:40:14 2025 +0200
refactor(Filters): unify font and color styles across all filters and consolidate code to avoid duplication
---
.../src/components/ListView/Filters/Base.ts | 37 ++++++++++------------
.../src/components/ListView/Filters/DateRange.tsx | 24 +++++++-------
.../components/ListView/Filters/NumericalRange.tsx | 22 ++++++-------
.../src/components/ListView/Filters/Search.tsx | 23 ++++++++------
.../src/components/ListView/Filters/Select.tsx | 12 +++++--
.../src/components/ListView/Filters/index.tsx | 4 +--
.../ListView/Filters/{Base.ts => types.ts} | 17 ----------
superset-frontend/src/components/ListView/utils.ts | 1 +
8 files changed, 67 insertions(+), 73 deletions(-)
diff --git a/superset-frontend/src/components/ListView/Filters/Base.ts b/superset-frontend/src/components/ListView/Filters/Base.ts
index 087c5e5521..3c8c32521a 100644
--- a/superset-frontend/src/components/ListView/Filters/Base.ts
+++ b/superset-frontend/src/components/ListView/Filters/Base.ts
@@ -16,29 +16,26 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { ReactNode } from 'react';
-import { styled } from '@superset-ui/core';
-import { SELECT_WIDTH } from '../utils';
+import { styled, css } from '@superset-ui/core';
+import { Flex } from '@superset-ui/core/components';
-export interface BaseFilter {
- Header: ReactNode;
- initialValue: any;
+interface FilterContainerProps {
+ width?: number;
}
-export const FilterContainer = styled.div`
- font-size: ${({ theme }) => theme.fontSizeSM}px;
- width: ${SELECT_WIDTH}px;
- color: ${({ theme }) => theme.colorTextLabel};
+export const FilterContainer = styled(Flex)<FilterContainerProps>`
+ ${({ theme, width }) => css`
+ width: ${width ? `${width}px` : 'auto'};
- label {
- display: block;
- margin-bottom: ${({ theme }) => theme.sizeUnit}px;
- }
- .anticon-info-circle {
- margin-bottom: ${({ theme }) => theme.sizeUnit}px;
+ label {
+ display: block;
+ font-size: ${theme.fontSizeSM}px;
+ color: ${theme.colorTextLabel};
+ margin-bottom: ${theme.sizeUnit}px;
+ }
+ .anticon-info-circle {
+ margin: 0px 0px ${theme.sizeUnit}px ${theme.sizeUnit}px;
+ }
}
+ `}
`;
-
-export type FilterHandler = {
- clearFilter: () => void;
-};
diff --git a/superset-frontend/src/components/ListView/Filters/DateRange.tsx b/superset-frontend/src/components/ListView/Filters/DateRange.tsx
index 619880a577..9a6117bb4f 100644
--- a/superset-frontend/src/components/ListView/Filters/DateRange.tsx
+++ b/superset-frontend/src/components/ListView/Filters/DateRange.tsx
@@ -24,7 +24,7 @@ import {
RefObject,
} from 'react';
-import { styled, t } from '@superset-ui/core';
+import { t } from '@superset-ui/core';
import { Dayjs } from 'dayjs';
import { useLocale } from 'src/hooks/useLocale';
import { extendedDayjs } from '@superset-ui/core/utils/dates';
@@ -34,7 +34,9 @@ import {
FormLabel,
RangePicker,
} from '@superset-ui/core/components';
-import { BaseFilter, FilterHandler } from './Base';
+import type { BaseFilter, FilterHandler } from './types';
+import { FilterContainer } from './Base';
+import { RANGE_WIDTH } from '../utils';
interface DateRangeFilterProps extends BaseFilter {
onSubmit: (val: number[] | string[]) => void;
@@ -44,14 +46,6 @@ interface DateRangeFilterProps extends BaseFilter {
type ValueState = [number, number] | [string, string] | null;
-const RangeFilterContainer = styled.div`
- display: inline-flex;
- flex-direction: column;
- justify-content: center;
- align-items: flex-start;
- width: 360px;
-`;
-
function DateRangeFilter(
{
Header,
@@ -81,7 +75,13 @@ function DateRangeFilter(
}
return (
<AntdThemeProvider locale={locale}>
- <RangeFilterContainer>
+ <FilterContainer
+ data-test="date-range-filter-container"
+ vertical
+ justify="center"
+ align="start"
+ width={RANGE_WIDTH}
+ >
<FormLabel>{Header}</FormLabel>
<RangePicker
placeholder={[t('Start date'), t('End date')]}
@@ -104,7 +104,7 @@ function DateRangeFilter(
onSubmit(changeValue);
}}
/>
- </RangeFilterContainer>
+ </FilterContainer>
</AntdThemeProvider>
);
}
diff --git a/superset-frontend/src/components/ListView/Filters/NumericalRange.tsx b/superset-frontend/src/components/ListView/Filters/NumericalRange.tsx
index 53c94b79c9..b6739e9b3c 100644
--- a/superset-frontend/src/components/ListView/Filters/NumericalRange.tsx
+++ b/superset-frontend/src/components/ListView/Filters/NumericalRange.tsx
@@ -20,15 +20,9 @@ import { useState, forwardRef, useImperativeHandle, RefObject } from 'react';
import { styled, t } from '@superset-ui/core';
import { InputNumber } from '@superset-ui/core/components/Input';
import { FormLabel } from '@superset-ui/core/components/Form';
-import { BaseFilter, FilterHandler } from './Base';
-
-const RangeFilterContainer = styled.div`
- display: inline-flex;
- flex-direction: column;
- justify-content: center;
- align-items: flex-start;
- width: 360px;
-`;
+import type { BaseFilter, FilterHandler } from './types';
+import { FilterContainer } from './Base';
+import { RANGE_WIDTH } from '../utils';
const InputContainer = styled.div`
display: flex;
@@ -103,7 +97,13 @@ function NumericalRangeFilter(
}));
return (
- <RangeFilterContainer>
+ <FilterContainer
+ data-test="numerical-range-filter-container"
+ width={RANGE_WIDTH}
+ vertical
+ justify="center"
+ align="start"
+ >
<FormLabel>{Header}</FormLabel>
<InputContainer>
<InputNumber
@@ -127,7 +127,7 @@ function NumericalRangeFilter(
</ErrorMessage>
)}
</InputContainer>
- </RangeFilterContainer>
+ </FilterContainer>
);
}
diff --git a/superset-frontend/src/components/ListView/Filters/Search.tsx b/superset-frontend/src/components/ListView/Filters/Search.tsx
index 0ca61d72c8..4673dbc59d 100644
--- a/superset-frontend/src/components/ListView/Filters/Search.tsx
+++ b/superset-frontend/src/components/ListView/Filters/Search.tsx
@@ -24,14 +24,17 @@ import {
ChangeEvent,
} from 'react';
-import { t, styled, useTheme, css } from '@superset-ui/core';
+import { t, styled, useTheme } from '@superset-ui/core';
import {
Input,
InfoTooltip,
FormLabel,
Icons,
+ Flex,
} from '@superset-ui/core/components';
-import { BaseFilter, FilterHandler, FilterContainer } from './Base';
+import type { BaseFilter, FilterHandler } from './types';
+import { FilterContainer } from './Base';
+import { SELECT_WIDTH } from '../utils';
interface SearchHeaderProps extends BaseFilter {
Header: string;
@@ -76,15 +79,17 @@ function SearchFilter(
}));
return (
- <FilterContainer>
- <div
- css={css`
- display: flex;
- `}
- >
+ <FilterContainer
+ data-test="search-filter-container"
+ width={SELECT_WIDTH}
+ vertical
+ justify="center"
+ align="start"
+ >
+ <Flex>
<FormLabel>{Header}</FormLabel>
{toolTipDescription && <InfoTooltip tooltip={toolTipDescription} />}
- </div>
+ </Flex>
<StyledInput
allowClear
data-test="filters-search"
diff --git a/superset-frontend/src/components/ListView/Filters/Select.tsx b/superset-frontend/src/components/ListView/Filters/Select.tsx
index d0bb50f6de..c7d4451159 100644
--- a/superset-frontend/src/components/ListView/Filters/Select.tsx
+++ b/superset-frontend/src/components/ListView/Filters/Select.tsx
@@ -27,7 +27,9 @@ import {
import { t } from '@superset-ui/core';
import { Select, AsyncSelect, FormLabel } from '@superset-ui/core/components';
import { ListViewFilter as Filter, SelectOption } from '../types';
-import { FilterContainer, BaseFilter, FilterHandler } from './Base';
+import type { BaseFilter, FilterHandler } from './types';
+import { FilterContainer } from './Base';
+import { SELECT_WIDTH } from '../utils';
interface SelectFilterProps extends BaseFilter {
fetchSelects?: Filter['fetchSelects'];
@@ -90,7 +92,13 @@ function SelectFilter(
);
const placeholder = t('Choose...');
return (
- <FilterContainer>
+ <FilterContainer
+ data-test="select-filter-container"
+ width={SELECT_WIDTH}
+ vertical
+ justify="center"
+ align="start"
+ >
<FormLabel>{Header}</FormLabel>
{fetchSelects ? (
<AsyncSelect
diff --git a/superset-frontend/src/components/ListView/Filters/index.tsx b/superset-frontend/src/components/ListView/Filters/index.tsx
index 92349408a7..391f2cba2e 100644
--- a/superset-frontend/src/components/ListView/Filters/index.tsx
+++ b/superset-frontend/src/components/ListView/Filters/index.tsx
@@ -26,17 +26,17 @@ import {
import { withTheme } from '@superset-ui/core';
-import {
+import type {
ListViewFilterValue as FilterValue,
ListViewFilters as Filters,
InternalFilter,
SelectOption,
} from '../types';
+import type { FilterHandler } from './types';
import SearchFilter from './Search';
import SelectFilter from './Select';
import DateRangeFilter from './DateRange';
import NumericalRangeFilter from './NumericalRange';
-import { FilterHandler } from './Base';
interface UIFiltersProps {
filters: Filters;
diff --git a/superset-frontend/src/components/ListView/Filters/Base.ts b/superset-frontend/src/components/ListView/Filters/types.ts
similarity index 69%
copy from superset-frontend/src/components/ListView/Filters/Base.ts
copy to superset-frontend/src/components/ListView/Filters/types.ts
index 087c5e5521..5d01d85909 100644
--- a/superset-frontend/src/components/ListView/Filters/Base.ts
+++ b/superset-frontend/src/components/ListView/Filters/types.ts
@@ -17,28 +17,11 @@
* under the License.
*/
import { ReactNode } from 'react';
-import { styled } from '@superset-ui/core';
-import { SELECT_WIDTH } from '../utils';
export interface BaseFilter {
Header: ReactNode;
initialValue: any;
}
-
-export const FilterContainer = styled.div`
- font-size: ${({ theme }) => theme.fontSizeSM}px;
- width: ${SELECT_WIDTH}px;
- color: ${({ theme }) => theme.colorTextLabel};
-
- label {
- display: block;
- margin-bottom: ${({ theme }) => theme.sizeUnit}px;
- }
- .anticon-info-circle {
- margin-bottom: ${({ theme }) => theme.sizeUnit}px;
- }
-`;
-
export type FilterHandler = {
clearFilter: () => void;
};
diff --git a/superset-frontend/src/components/ListView/utils.ts b/superset-frontend/src/components/ListView/utils.ts
index e609b6ed25..443d57c7d5 100644
--- a/superset-frontend/src/components/ListView/utils.ts
+++ b/superset-frontend/src/components/ListView/utils.ts
@@ -64,6 +64,7 @@ const RisonParam: QueryParamConfig<string, any> = {
};
export const SELECT_WIDTH = 175;
+export const RANGE_WIDTH = 300;
export const WIDER_DROPDOWN_WIDTH = '300px';
export class ListViewError extends Error {