Merge pull request #2483 from teamleadercrm/avatar-custom-tooltip

Add `tooltipProps` to `Avatar` to allow a custom tooltip

CHANGELOG.md

@@ -12,6 +12,12 @@
 
 ### Dependency updates
 
+## [18.2.0] - 2022-12-08
+
+### Added
+
+- `Avatar`: Add a prop `tooltipProps` to allow a custom tooltip ([@BeirlaenAaron](https://github.com/BeirlaenAaron)) in ([#2483](https://github.com/teamleadercrm/ui/pull/2483))
+
 ## [18.1.2] - 2022-12-07
 
 ### Fixed

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@teamleader/ui",
   "description": "Teamleader UI library",
-  "version": "18.1.2",
+  "version": "18.2.0",
   "author": "Teamleader <[email protected]>",
   "bugs": {
     "url": "https://github.com/teamleadercrm/ui/issues"

src/components/avatar/Avatar.tsx

@@ -48,6 +48,8 @@ export interface AvatarProps extends Omit<BoxProps, 'size' | 'ref'> {
   team?: boolean;
   /** If true, the name will be shown in a tooltip on hover. */
   tooltip?: boolean;
+  /** The tooltip props for the avatar */
+  tooltipProps?: TooltipProps;
 }
 
 type AvatarInternalComponentProps = { size: Exclude<typeof SIZES[number], 'fullscreen' | 'smallest'> } & Pick<
@@ -138,6 +140,7 @@ const Avatar = ({
   id,
   onImageChange,
   team,
+  tooltipProps,
   ...others
 }: AvatarProps) => {
   const avatarClassNames = cx(
@@ -151,23 +154,24 @@ const Avatar = ({
     className,
   );
 
-  const enableTooltip = tooltip && typeof fullName === 'string' && fullName.length > 0;
+  const enableTooltip = tooltip && ((typeof fullName === 'string' && fullName.length > 0) || tooltipProps?.tooltip);
 
   const Component = enableTooltip ? TooltippedBox : Box;
-  const tooltipProps = enableTooltip
+  const defaultToolTipProps = enableTooltip
     ? {
         tooltip: <TextBodyCompact>{fullName}</TextBodyCompact>,
         tooltipColor: 'white',
         tooltipPosition: 'top',
         tooltipSize: 'small',
+        ...tooltipProps,
       }
     : {};
 
   return (
     <Component
       {...others}
       {...(selectable && { boxSizing: 'content-box', padding: size === 'hero' ? 2 : 1 })}
-      {...(tooltipProps as TooltipProps)}
+      {...(defaultToolTipProps as TooltipProps)}
       className={avatarClassNames}
     >
       <AvatarInternalComponent

src/components/avatar/avatar.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Avatar, Bullet } from '../../index';
+import { Avatar, Bullet, TextBodyCompact } from '../../index';
 import avatars from '../../static/data/avatar';
 import { addStoryInGroup, MID_LEVEL_BLOCKS } from '../../../.storybook/utils';
 
@@ -29,3 +29,13 @@ export const WithBullet = () => (
     <Bullet borderColor="neutral" borderTint="lightest" color="ruby" />
   </Avatar>
 );
+
+export const WithCustomTooltip: ComponentStory<typeof Avatar> = (args) => <Avatar {...args} />;
+
+WithCustomTooltip.args = {
+  tooltip: true,
+  tooltipProps: {
+    tooltip: <TextBodyCompact>Unassigned</TextBodyCompact>,
+    tooltipSize: 'small',
+  },
+};