From 6e665c3e07c1c585a244e83d75a3cc7f541b37fe Mon Sep 17 00:00:00 2001 From: Mehmet Salih Yavuz Date: Wed, 13 Nov 2024 13:13:43 +0300 Subject: [PATCH] refactor(Avatar): Migrate Avatar to Ant Design 5 (#30740) --- .../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 +++----------- .../src/components/Tooltip/index.tsx | 18 +------- superset-frontend/src/components/index.ts | 1 - superset-frontend/src/theme/index.ts | 8 ++++ 7 files changed, 113 insertions(+), 45 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 000000000..d9b6a5bcc --- /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 000000000..91cf1ef5e --- /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 000000000..910c3eead --- /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 } 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 b5586304d..b4c12c48f 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/Tooltip/index.tsx b/superset-frontend/src/components/Tooltip/index.tsx index 8752a47ac..86c616bf9 100644 --- a/superset-frontend/src/components/Tooltip/index.tsx +++ b/superset-frontend/src/components/Tooltip/index.tsx @@ -16,13 +16,12 @@ * specific language governing permissions and limitations * under the License. */ -import { useTheme, css } from '@superset-ui/core'; +import { useTheme } from '@superset-ui/core'; import { Tooltip as AntdTooltip } from 'antd'; import { TooltipProps, TooltipPlacement as AntdTooltipPlacement, } from 'antd/lib/tooltip'; -import { Global } from '@emotion/react'; export type TooltipPlacement = AntdTooltipPlacement; @@ -30,21 +29,6 @@ export const Tooltip = (props: TooltipProps) => { const theme = useTheme(); return ( <> - {/* Safari hack to hide browser default tooltips */} - p { - margin: 0; - } - `} - />