From bfe211861bc66eb76d6dc28ef3053af37ba9451b Mon Sep 17 00:00:00 2001 From: Mehmet Salih Yavuz Date: Tue, 29 Oct 2024 16:02:13 +0300 Subject: [PATCH] refactor(Avatar): migrate Avatar to Ant Design 5 --- .../src/components/Avatar/Avatar.stories.tsx | 42 +++++++++++++++++++ .../src/components/Avatar/Avatar.test.tsx | 26 ++++++++++++ .../src/components/Avatar/index.tsx | 31 ++++++++++++++ .../src/components/FacePile/index.tsx | 32 +++----------- superset-frontend/src/components/index.ts | 1 - superset-frontend/src/theme/index.ts | 5 +++ 6 files changed, 109 insertions(+), 28 deletions(-) create mode 100644 superset-frontend/src/components/Avatar/Avatar.stories.tsx create mode 100644 superset-frontend/src/components/Avatar/Avatar.test.tsx create mode 100644 superset-frontend/src/components/Avatar/index.tsx diff --git a/superset-frontend/src/components/Avatar/Avatar.stories.tsx b/superset-frontend/src/components/Avatar/Avatar.stories.tsx new file mode 100644 index 0000000000000..d9b6a5bcce59c --- /dev/null +++ b/superset-frontend/src/components/Avatar/Avatar.stories.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 { Avatar, AvatarProps } from '.'; + +export default { + title: 'Avatar', + component: Avatar, +}; + +export const InteractiveAvatar = (args: AvatarProps) => ; + +InteractiveAvatar.args = { + alt: '', + gap: 4, + shape: 'circle', + size: 'default', + src: '', + draggable: false, +}; + +InteractiveAvatar.argTypes = { + shape: { + options: ['circle', 'square'], + control: { type: 'select' }, + }, +}; diff --git a/superset-frontend/src/components/Avatar/Avatar.test.tsx b/superset-frontend/src/components/Avatar/Avatar.test.tsx new file mode 100644 index 0000000000000..91cf1ef5e795b --- /dev/null +++ b/superset-frontend/src/components/Avatar/Avatar.test.tsx @@ -0,0 +1,26 @@ +/** + * 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 } from 'spec/helpers/testing-library'; +import { Avatar } from 'src/components/Avatar'; + +test('renders with default props', async () => { + const { container } = render(); + + expect(container).toBeInTheDocument(); +}); diff --git a/superset-frontend/src/components/Avatar/index.tsx b/superset-frontend/src/components/Avatar/index.tsx new file mode 100644 index 0000000000000..acd9b70bf18ee --- /dev/null +++ b/superset-frontend/src/components/Avatar/index.tsx @@ -0,0 +1,31 @@ +/** + * 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 { Avatar as AntdAvatar } from 'antd-v5'; +import { AvatarProps, GroupProps, Group } from 'antd-v5/lib/avatar'; + +export function Avatar(props: AvatarProps) { + return ; +} + +export function AvatarGroup(props: GroupProps) { + return ; +} + +export type { AvatarProps, GroupProps }; diff --git a/superset-frontend/src/components/FacePile/index.tsx b/superset-frontend/src/components/FacePile/index.tsx index b5586304d3649..b4c12c48f4756 100644 --- a/superset-frontend/src/components/FacePile/index.tsx +++ b/superset-frontend/src/components/FacePile/index.tsx @@ -19,14 +19,12 @@ import type Owner from 'src/types/Owner'; import { getCategoricalSchemeRegistry, - styled, isFeatureEnabled, FeatureFlag, - SupersetTheme, } from '@superset-ui/core'; import getOwnerName from 'src/utils/getOwnerName'; import { Tooltip } from 'src/components/Tooltip'; -import { Avatar } from 'src/components'; +import { Avatar, AvatarGroup } from 'src/components/Avatar'; import { getRandomColor } from './utils'; interface FacePileProps { @@ -36,29 +34,9 @@ interface FacePileProps { const colorList = getCategoricalSchemeRegistry().get()?.colors ?? []; -const customAvatarStyler = (theme: SupersetTheme) => { - const size = theme.gridUnit * 8; - return ` - width: ${size}px; - height: ${size}px; - line-height: ${size}px; - font-size: ${theme.typography.sizes.s}px;`; -}; - -const StyledAvatar = styled(Avatar)` - ${({ theme }) => customAvatarStyler(theme)} -`; - -// to apply styling to the maxCount avatar -const StyledGroup = styled(Avatar.Group)` - .ant-avatar { - ${({ theme }) => customAvatarStyler(theme)} - } -`; - export default function FacePile({ users, maxCount = 4 }: FacePileProps) { return ( - + {users.map(user => { const { first_name, last_name, id } = user; const name = getOwnerName(user); @@ -69,7 +47,7 @@ export default function FacePile({ users, maxCount = 4 }: FacePileProps) { : undefined; return ( - {first_name?.[0]?.toLocaleUpperCase()} {last_name?.[0]?.toLocaleUpperCase()} - + ); })} - + ); } diff --git a/superset-frontend/src/components/index.ts b/superset-frontend/src/components/index.ts index 16b6138c18775..b501a43c47fb5 100644 --- a/superset-frontend/src/components/index.ts +++ b/superset-frontend/src/components/index.ts @@ -33,7 +33,6 @@ export { default as Button } from './Button'; */ export { AutoComplete, - Avatar, Col, Divider, Empty, diff --git a/superset-frontend/src/theme/index.ts b/superset-frontend/src/theme/index.ts index 857e95888f935..900a2b926e13d 100644 --- a/superset-frontend/src/theme/index.ts +++ b/superset-frontend/src/theme/index.ts @@ -52,6 +52,11 @@ const baseConfig: ThemeConfig = { zIndexPopupBase: supersetTheme.zIndex.max, }, components: { + Avatar: { + containerSize: 32, + fontSize: supersetTheme.typography.sizes.s, + lineHeight: 32, + }, Badge: { paddingXS: supersetTheme.gridUnit * 2, },