This is an automated email from the ASF dual-hosted git repository. enzomartellucci pushed a commit to branch enxdev/refactor/replace-native-html-elements-with-antd5-components in repository https://gitbox.apache.org/repos/asf/superset.git
commit 55d1f1fb104966367335d524d16ad4e12b0584ac Author: Enzo Martellucci <[email protected]> AuthorDate: Fri Apr 18 11:19:25 2025 +0200 refactor(List): add a compact mode for reduce padding between the items --- superset-frontend/src/components/List/index.ts | 28 +++++++++++++++++++--- .../src/components/Typography/index.tsx | 28 +++++++++++++++++++++- .../nativeFilters/FilterCard/DependenciesRow.tsx | 18 +++++++------- superset-frontend/src/pages/DatabaseList/index.tsx | 4 ++-- superset-frontend/src/pages/DatasetList/index.tsx | 2 +- 5 files changed, 65 insertions(+), 15 deletions(-) diff --git a/superset-frontend/src/components/List/index.ts b/superset-frontend/src/components/List/index.ts index 70bbae7280..569d3c4054 100644 --- a/superset-frontend/src/components/List/index.ts +++ b/superset-frontend/src/components/List/index.ts @@ -16,11 +16,33 @@ * specific language governing permissions and limitations * under the License. */ +import { css, styled } from '@superset-ui/core'; import { List as AntdList } from 'antd-v5'; +import type { ListProps, ListItemProps, ListItemMetaProps } from './types'; + +interface CompactListItemProps extends ListItemProps { + compact?: boolean; +} + +const CompactListItem = styled(AntdList.Item)<CompactListItemProps>` + && { + ${({ compact, theme }) => + compact && + css` + padding: ${theme.sizeUnit / 2}px ${theme.sizeUnit * 3}px + ${theme.sizeUnit / 2}px ${theme.sizeUnit}px; + `} + } +`; + +type CompactListItemWithMeta = typeof CompactListItem & { + Meta: typeof AntdList.Item.Meta; +}; + +(CompactListItem as CompactListItemWithMeta).Meta = AntdList.Item.Meta; export const List = Object.assign(AntdList, { - Item: AntdList.Item, - ItemMeta: AntdList.Item.Meta, + Item: CompactListItem, }); -export type { ListProps, ListItemProps } from './types'; +export type { ListProps, ListItemProps, ListItemMetaProps }; diff --git a/superset-frontend/src/components/Typography/index.tsx b/superset-frontend/src/components/Typography/index.tsx index 6d1d5623aa..e87071623b 100644 --- a/superset-frontend/src/components/Typography/index.tsx +++ b/superset-frontend/src/components/Typography/index.tsx @@ -16,5 +16,31 @@ * specific language governing permissions and limitations * under the License. */ -export { Typography } from 'antd-v5'; +import { styled, css } from '@superset-ui/core'; +import { Typography as AntdTypography } from 'antd-v5'; + +const StyledLink = styled(AntdTypography.Link)` + ${({ theme }) => + css` + && { + color: ${theme.colorLink}; + &:hover { + color: ${theme.colorLinkHover}; + } + `} + } +`; + +export const Typography: typeof AntdTypography & { + Text: typeof AntdTypography.Text; + Link: typeof StyledLink; + Title: typeof AntdTypography.Title; + Paragraph: typeof AntdTypography.Paragraph; +} = Object.assign(AntdTypography, { + Text: AntdTypography.Text, + Link: StyledLink, + Title: AntdTypography.Title, + Paragraph: AntdTypography.Paragraph, +}); + export type { TypographyProps } from 'antd-v5'; diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx index 7640dac5c4..13daea1f16 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx @@ -21,13 +21,13 @@ import { useDispatch } from 'react-redux'; import { css, t, useTheme, useTruncation } from '@superset-ui/core'; import { Icons } from 'src/components/Icons'; import { setDirectPathToChild } from 'src/dashboard/actions/dashboardState'; +import { List } from 'src/components/List'; import { DependencyItem, Row, RowLabel, RowTruncationCount, RowValue, - TooltipList, } from './Styles'; import { useFilterDependencies } from './useFilterDependencies'; import { DependencyValueProps, FilterCardRowProps } from './types'; @@ -60,13 +60,15 @@ export const DependenciesRow = memo(({ filter }: FilterCardRowProps) => { const tooltipText = useMemo( () => elementsTruncated > 0 && dependencies ? ( - <TooltipList> - {dependencies.map(dependency => ( - <li> - <DependencyValue dependency={dependency} /> - </li> - ))} - </TooltipList> + <List + dataSource={dependencies} + renderItem={dependency => ( + <List.Item compact> + • <DependencyValue dependency={dependency} /> + </List.Item> + )} + split={false} + /> ) : null, [elementsTruncated, dependencies], ); diff --git a/superset-frontend/src/pages/DatabaseList/index.tsx b/superset-frontend/src/pages/DatabaseList/index.tsx index e2f0dbfaa0..e08522021a 100644 --- a/superset-frontend/src/pages/DatabaseList/index.tsx +++ b/superset-frontend/src/pages/DatabaseList/index.tsx @@ -710,7 +710,7 @@ function DatabaseList({ 10, )} renderItem={(result: { id: number; title: string }) => ( - <List.Item key={result.id}> + <List.Item key={result.id} compact> <List.Item.Meta avatar={<span>•</span>} title={ @@ -753,7 +753,7 @@ function DatabaseList({ id: number; slice_name: string; }) => ( - <List.Item key={result.id}> + <List.Item key={result.id} compact> <List.Item.Meta avatar={<span>•</span>} title={ diff --git a/superset-frontend/src/pages/DatasetList/index.tsx b/superset-frontend/src/pages/DatasetList/index.tsx index fb30c75dd7..5b40759f64 100644 --- a/superset-frontend/src/pages/DatasetList/index.tsx +++ b/superset-frontend/src/pages/DatasetList/index.tsx @@ -777,7 +777,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({ id: Key | null | undefined; title: string; }) => ( - <List.Item key={result.id}> + <List.Item key={result.id} compact> <List.Item.Meta avatar={<span>•</span>} title={
