From ba99980cf46fd92d8fbfcbe4869ec698041a1d7b Mon Sep 17 00:00:00 2001 From: alexandrusoare <37236580+alexandrusoare@users.noreply.github.com> Date: Mon, 25 Nov 2024 16:44:17 +0200 Subject: [PATCH] refactor(List): Upgrade List from antdesign4 to antdesign5 (#30963) --- .../src/components/List/List.stories.tsx | 80 +++++++++++++++++++ .../src/components/List/List.test.tsx | 42 ++++++++++ .../src/components/List/index.ts | 27 +++++++ superset-frontend/src/components/index.ts | 2 - .../controls/AnnotationLayerControl/index.tsx | 2 +- .../controls/CollectionControl/index.jsx | 8 +- .../controls/CustomListItem/index.tsx | 5 +- superset-frontend/src/theme/index.ts | 6 ++ 8 files changed, 164 insertions(+), 8 deletions(-) create mode 100644 superset-frontend/src/components/List/List.stories.tsx create mode 100644 superset-frontend/src/components/List/List.test.tsx create mode 100644 superset-frontend/src/components/List/index.ts diff --git a/superset-frontend/src/components/List/List.stories.tsx b/superset-frontend/src/components/List/List.stories.tsx new file mode 100644 index 0000000000000..0b10f0aaa6c6d --- /dev/null +++ b/superset-frontend/src/components/List/List.stories.tsx @@ -0,0 +1,80 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { List, ListProps } from '.'; + +export default { + title: 'List', + component: List, +}; + +const dataSource = ['Item 1', 'Item 2', 'Item 3']; + +export const InteractiveList = (args: ListProps) => ( + {item}} + /> +); + +InteractiveList.args = { + bordered: false, + split: true, + itemLayout: 'horizontal', + size: 'default', + loading: false, +}; + +InteractiveList.argTypes = { + bordered: { + control: { type: 'boolean' }, + }, + split: { + control: { type: 'boolean' }, + }, + loading: { + control: { type: 'boolean' }, + }, + itemLayout: { + control: { type: 'select' }, + options: ['horizontal', 'vertical'], + }, + size: { + control: { type: 'select' }, + options: ['default', 'small', 'large'], + }, +}; + +export const InteractiveListWithPagination = (args: ListProps) => ( + {item}} + pagination={{ pageSize: 2 }} + /> +); + +InteractiveListWithPagination.args = { + ...InteractiveList.args, +}; + +InteractiveListWithPagination.argTypes = { + ...InteractiveList.argTypes, +}; diff --git a/superset-frontend/src/components/List/List.test.tsx b/superset-frontend/src/components/List/List.test.tsx new file mode 100644 index 0000000000000..b7094da509fda --- /dev/null +++ b/superset-frontend/src/components/List/List.test.tsx @@ -0,0 +1,42 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { render, screen } from 'spec/helpers/testing-library'; +import { ListProps } from 'antd-v5/lib/list'; +import { List } from '.'; + +const mockedProps: ListProps = { + dataSource: ['Item 1', 'Item 2', 'Item 3'], + renderItem: item =>
{item}
, +}; + +test('should render', () => { + const { container } = render(); + expect(container).toBeInTheDocument(); +}); + +test('should render the correct number of items', () => { + render(); + + const listItemElements = screen.getAllByText(/Item \d/); + + expect(listItemElements.length).toBe(3); + listItemElements.forEach((item, index) => { + expect(item).toHaveTextContent(`Item ${index + 1}`); + }); +}); diff --git a/superset-frontend/src/components/List/index.ts b/superset-frontend/src/components/List/index.ts new file mode 100644 index 0000000000000..76acfc17d1a4c --- /dev/null +++ b/superset-frontend/src/components/List/index.ts @@ -0,0 +1,27 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { ListProps, ListItemProps, ListItemMetaProps } from 'antd-v5/lib/list'; +import { List as AntdList } from 'antd-v5'; + +export type { ListProps, ListItemProps, ListItemMetaProps }; + +export const List = Object.assign(AntdList, { + Item: AntdList.Item, + ItemMeta: AntdList.Item.Meta, +}); diff --git a/superset-frontend/src/components/index.ts b/superset-frontend/src/components/index.ts index 2dce3aeb53475..85e43e05f82bb 100644 --- a/superset-frontend/src/components/index.ts +++ b/superset-frontend/src/components/index.ts @@ -37,7 +37,6 @@ export { Divider, Empty, Grid, - List, Row, Skeleton, Space, @@ -72,7 +71,6 @@ export { // Exported types export type { FormInstance } from 'antd/lib/form'; -export type { ListItemProps } from 'antd/lib/list'; export type { ModalProps as AntdModalProps } from 'antd/lib/modal'; export type { DropDownProps as AntdDropdownProps } from 'antd/lib/dropdown'; export type { RadioChangeEvent } from 'antd/lib/radio'; diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx index 7b77319c6d099..dfa3cbc664410 100644 --- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx +++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import { List } from 'src/components'; +import { List } from 'src/components/List'; import { connect } from 'react-redux'; import { PureComponent } from 'react'; import { diff --git a/superset-frontend/src/explore/components/controls/CollectionControl/index.jsx b/superset-frontend/src/explore/components/controls/CollectionControl/index.jsx index af8232181e0a3..a4867b0f1447b 100644 --- a/superset-frontend/src/explore/components/controls/CollectionControl/index.jsx +++ b/superset-frontend/src/explore/components/controls/CollectionControl/index.jsx @@ -18,7 +18,7 @@ */ import { Component } from 'react'; import PropTypes from 'prop-types'; -import { List } from 'src/components'; +import { List } from 'src/components/List'; import { nanoid } from 'nanoid'; import { t, withTheme } from '@superset-ui/core'; import { @@ -118,7 +118,11 @@ class CollectionControl extends Component { return ( ({ + justifyContent: 'flex-start', + display: '-webkit-flex', + paddingInline: theme.gridUnit * 3, + })} key={this.props.keyAccessor(o)} index={i} > diff --git a/superset-frontend/src/explore/components/controls/CustomListItem/index.tsx b/superset-frontend/src/explore/components/controls/CustomListItem/index.tsx index 5ee22cc2fda90..07b99701e41d4 100644 --- a/superset-frontend/src/explore/components/controls/CustomListItem/index.tsx +++ b/superset-frontend/src/explore/components/controls/CustomListItem/index.tsx @@ -17,7 +17,7 @@ * under the License. */ import { useTheme } from '@superset-ui/core'; -import { List, ListItemProps } from 'src/components'; +import { ListItemProps, List } from 'src/components/List'; export interface CustomListItemProps extends ListItemProps { selectable: boolean; @@ -27,8 +27,7 @@ export default function CustomListItem(props: CustomListItemProps) { const { selectable, children, ...rest } = props; const theme = useTheme(); const css = { - '&.ant-list-item': { - padding: `${theme.gridUnit + 2}px ${theme.gridUnit * 3}px`, + '&.antd5-list-item': { ':first-of-type': { borderTopLeftRadius: theme.gridUnit, borderTopRightRadius: theme.gridUnit, diff --git a/superset-frontend/src/theme/index.ts b/superset-frontend/src/theme/index.ts index a759f80b16e22..0716749b932de 100644 --- a/superset-frontend/src/theme/index.ts +++ b/superset-frontend/src/theme/index.ts @@ -81,6 +81,12 @@ const baseConfig: ThemeConfig = { supersetTheme.colors.primary.light3 }`, }, + List: { + itemPadding: `${supersetTheme.gridUnit + 2}px ${supersetTheme.gridUnit * 3}px`, + paddingLG: supersetTheme.gridUnit * 3, + colorSplit: supersetTheme.colors.grayscale.light3, + colorText: supersetTheme.colors.grayscale.dark1, + }, Tag: { borderRadiusSM: 2, defaultBg: supersetTheme.colors.grayscale.light4,