refactor(Avatar): Migrate Avatar to Ant Design 5 (#30740)

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) => <Avatar {...args} />;
+
+InteractiveAvatar.args = {
+  alt: '',
+  gap: 4,
+  shape: 'circle',
+  size: 'default',
+  src: '',
+  draggable: false,
+};
+
+InteractiveAvatar.argTypes = {
+  shape: {
+    options: ['circle', 'square'],
+    control: { type: 'select' },
+  },
+};

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(<Avatar />);
+
+  expect(container).toBeInTheDocument();
+});

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 <AntdAvatar {...props} />;
+}
+
+export function AvatarGroup(props: GroupProps) {
+  return <AntdAvatar.Group {...props} />;
+}
+
+export type { AvatarProps, GroupProps };

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 (
-    <StyledGroup maxCount={maxCount}>
+    <AvatarGroup max={{ count: maxCount }}>
       {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 (
           <Tooltip key={name} title={name} placement="top">
-            <StyledAvatar
+            <Avatar
               key={name}
               style={{
                 backgroundColor: color,
@@ -79,10 +57,10 @@ export default function FacePile({ users, maxCount = 4 }: FacePileProps) {
             >
               {first_name?.[0]?.toLocaleUpperCase()}
               {last_name?.[0]?.toLocaleUpperCase()}
-            </StyledAvatar>
+            </Avatar>
           </Tooltip>
         );
       })}
-    </StyledGroup>
+    </AvatarGroup>
   );
 }

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 */}
-      <Global
-        styles={css`
-          .ant-tooltip-open {
-            display: inline-block;
-            &::after {
-              content: '';
-              display: block;
-            }
-          }
-          .ant-tooltip-inner > p {
-            margin: 0;
-          }
-        `}
-      />
       <AntdTooltip
         overlayStyle={{ fontSize: theme.typography.sizes.s, lineHeight: '1.6' }}
         overlayInnerStyle={{

superset-frontend/src/components/index.ts

@@ -33,7 +33,6 @@ export { default as Card } from './Card';
  */
 export {
   AutoComplete,
-  Avatar,
   Col,
   Divider,
   Empty,

superset-frontend/src/theme/index.ts

@@ -55,6 +55,11 @@ const baseConfig: ThemeConfig = {
     zIndexPopupBase: supersetTheme.zIndex.max,
   },
   components: {
+    Avatar: {
+      containerSize: 32,
+      fontSize: supersetTheme.typography.sizes.s,
+      lineHeight: 32,
+    },
     Badge: {
       paddingXS: supersetTheme.gridUnit * 2,
     },
@@ -71,6 +76,9 @@ const baseConfig: ThemeConfig = {
       colorText: supersetTheme.colors.text.label,
       remainingColor: supersetTheme.colors.grayscale.light4,
     },
+    Popover: {
+      colorBgElevated: supersetTheme.colors.grayscale.light5,
+    },
     Slider: {
       trackBgDisabled: supersetTheme.colors.grayscale.light1,
       colorBgElevated: supersetTheme.colors.grayscale.light5,