Make EntityAvatar round, deprecate all badges

This is the same work that I've already done in the FE monorepo. I'm doing it here too so that the docs look up-to-date when we merge the code in the FE monorepo. This duplication won't be needed once we switch traffic to the new docs.
thumbtack · Sep 12, 2024 · 6d7e481 · 6d7e481
1 parent b613f15
commit 6d7e481
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 64 deletions.
diff --git a/packages/thumbprint-react/components/Avatar/__snapshots__/test.tsx.snap b/packages/thumbprint-react/components/Avatar/__snapshots__/test.tsx.snap
@@ -15,12 +15,12 @@ exports[`EntityAvatar renders an image when the user has one 1`] = `
     }
   >
     <Image
-      className="squareAvatar"
+      className="avatarRadius"
       height="48px"
       src="//https://i.pravatar.cc/140"
     >
       <picture
-        className="picture squareAvatar"
+        className="picture avatarRadius"
       >
         <img
           alt=""
@@ -63,7 +63,7 @@ exports[`EntityAvatar renders the initials when the user has no image 1`] = `
     }
   >
     <span
-      className="initialsAvatar squareAvatar"
+      className="initialsAvatar avatarRadius"
       style={
         Object {
           "backgroundColor": "#e8f1fd",
@@ -93,12 +93,12 @@ exports[`adds the \`fullName\` as \`alt\` text when image is provided 1`] = `
   >
     <Image
       alt="Avatar for Duck Goose"
-      className="circleAvatar"
+      className="avatarRadius"
       height="48px"
       src="//https://i.pravatar.cc/140"
     >
       <picture
-        className="picture circleAvatar"
+        className="picture avatarRadius"
       >
         <img
           alt="Avatar for Duck Goose"
@@ -141,7 +141,7 @@ exports[`adds the \`fullName\` as \`title\` text 1`] = `
     }
   >
     <span
-      className="initialsAvatar circleAvatar"
+      className="initialsAvatar avatarRadius"
       style={
         Object {
           "backgroundColor": "#fafafa",
@@ -170,12 +170,12 @@ exports[`adds the \`fullName\` as \`title\` text 2`] = `
   >
     <Image
       alt="Avatar for Duck Goose"
-      className="circleAvatar"
+      className="avatarRadius"
       height="48px"
       src="//https://i.pravatar.cc/140"
     >
       <picture
-        className="picture circleAvatar"
+        className="picture avatarRadius"
       >
         <img
           alt="Avatar for Duck Goose"
@@ -219,7 +219,7 @@ exports[`adds the \`fullName\` as \`title\` text 3`] = `
     }
   >
     <span
-      className="initialsAvatar circleAvatar"
+      className="initialsAvatar avatarRadius"
       style={
         Object {
           "backgroundColor": "#fdf7e7",
@@ -248,7 +248,7 @@ exports[`does not add the \`fullName\` as \`alt\` text when no image is provided
     }
   >
     <span
-      className="initialsAvatar circleAvatar"
+      className="initialsAvatar avatarRadius"
       style={
         Object {
           "backgroundColor": "#fafafa",
@@ -275,7 +275,7 @@ exports[`does not render a badge by default 1`] = `
     }
   >
     <span
-      className="initialsAvatar circleAvatar"
+      className="initialsAvatar avatarRadius"
       style={
         Object {
           "backgroundColor": "#fdf7e7",
@@ -304,7 +304,7 @@ exports[`does not render a badge by default 2`] = `
     }
   >
     <span
-      className="initialsAvatar circleAvatar"
+      className="initialsAvatar avatarRadius"
       style={
         Object {
           "backgroundColor": "#fdf7e7",
@@ -332,7 +332,7 @@ exports[`renders \`isOnline\` when \`isOnline\` is true 1`] = `
     }
   >
     <span
-      className="initialsAvatar circleAvatar"
+      className="initialsAvatar avatarRadius"
       style={
         Object {
           "backgroundColor": "#fafafa",
@@ -375,7 +375,7 @@ exports[`renders a badge if valid badge prop is supplied 1`] = `
     }
   >
     <span
-      className="initialsAvatar circleAvatar"
+      className="initialsAvatar avatarRadius"
       style={
         Object {
           "backgroundColor": "#fdf7e7",
@@ -433,7 +433,7 @@ exports[`renders a badge if valid badge prop is supplied 2`] = `
     }
   >
     <span
-      className="initialsAvatar circleAvatar"
+      className="initialsAvatar avatarRadius"
       style={
         Object {
           "backgroundColor": "#fdf7e7",
@@ -491,7 +491,7 @@ exports[`renders a badge if valid badge prop is supplied 3`] = `
     }
   >
     <span
-      className="initialsAvatar circleAvatar"
+      className="initialsAvatar avatarRadius"
       style={
         Object {
           "backgroundColor": "#fdf7e7",
@@ -537,7 +537,7 @@ exports[`renders an SVG when \`isChecked\` is true 1`] = `
     }
   >
     <span
-      className="initialsAvatar circleAvatar"
+      className="initialsAvatar avatarRadius"
       style={
         Object {
           "backgroundColor": "#fdf7e7",
@@ -595,7 +595,7 @@ exports[`renders an SVG when \`isChecked\` is true 2`] = `
     }
   >
     <span
-      className="initialsAvatar circleAvatar"
+      className="initialsAvatar avatarRadius"
       style={
         Object {
           "backgroundColor": "#fdf7e7",
@@ -652,12 +652,12 @@ exports[`renders an image when the user has one 1`] = `
     }
   >
     <Image
-      className="circleAvatar"
+      className="avatarRadius"
       height="48px"
       src="//https://i.pravatar.cc/140"
     >
       <picture
-        className="picture circleAvatar"
+        className="picture avatarRadius"
       >
         <img
           alt=""
@@ -701,7 +701,7 @@ exports[`renders checkmark SVG when \`isChecked\` and \`isOnline\` are true 1`]
     }
   >
     <span
-      className="initialsAvatar circleAvatar"
+      className="initialsAvatar avatarRadius"
       style={
         Object {
           "backgroundColor": "#fafafa",
@@ -755,7 +755,7 @@ exports[`renders the initials when the user has no image 1`] = `
     }
   >
     <span
-      className="initialsAvatar circleAvatar"
+      className="initialsAvatar avatarRadius"
       style={
         Object {
           "backgroundColor": "#e8f1fd",

diff --git a/packages/thumbprint-react/components/Avatar/index.module.scss b/packages/thumbprint-react/components/Avatar/index.module.scss
@@ -36,10 +36,6 @@
     font-weight: 700;
 }
 
-.circleAvatar {
+.avatarRadius {
     border-radius: 50%;
 }
-
-.squareAvatar {
-    border-radius: 4px;
-}
diff --git a/packages/thumbprint-react/components/Avatar/index.tsx b/packages/thumbprint-react/components/Avatar/index.tsx
@@ -81,15 +81,15 @@ const EntityAvatar = forwardRef<HTMLElement, EntityAvatarProps>(
             >
                 {imageUrl ? (
                     <Image
-                        className={styles.squareAvatar}
+                        className={styles.avatarRadius}
                         src={imageUrl}
                         alt={fullName && `Avatar for ${fullName}`}
                         height={typeof size === 'string' ? dimensions[size] : `${size}px`}
                         ref={outerRef}
                     />
                 ) : (
                     <span
-                        className={`${styles.initialsAvatar} ${styles.squareAvatar}`}
+                        className={`${styles.initialsAvatar} ${styles.avatarRadius}`}
                         style={getStyle(initial)}
                         title={fullName && `Avatar for ${fullName}`}
                     >
@@ -124,6 +124,7 @@ export interface EntityAvatarProps {
     size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | number;
     /**
      * Displays a badge if the user is online.
+     * @deprecated Indicate this information outside of the avatar instead.
      */
     isOnline?: boolean;
 }
@@ -152,15 +153,15 @@ const UserAvatar = forwardRef<HTMLElement, UserAvatarProps>(
             >
                 {imageUrl ? (
                     <Image
-                        className={styles.circleAvatar}
+                        className={styles.avatarRadius}
                         src={imageUrl}
                         alt={fullName && `Avatar for ${fullName}`}
                         height={typeof size === 'string' ? dimensions[size] : `${size}px`}
                         ref={outerRef}
                     />
                 ) : (
                     <span
-                        className={`${styles.initialsAvatar} ${styles.circleAvatar}`}
+                        className={`${styles.initialsAvatar} ${styles.avatarRadius}`}
                         style={getStyle(initials)}
                         title={fullName && `Avatar for ${fullName}`}
                     >
@@ -203,6 +204,7 @@ export interface UserAvatarProps {
     isChecked?: boolean;
     /**
      * Displays a badge if the user is online.
+     * @deprecated Indicate this information outside of the avatar instead.
      */
     isOnline?: boolean;
 }

diff --git a/packages/thumbprint-react/components/Avatar/subcomponents/badge.tsx b/packages/thumbprint-react/components/Avatar/subcomponents/badge.tsx
@@ -11,27 +11,22 @@ type SizeClassesType = {
     xsmall: {
         userOnline: ConfigItem;
         userChecked: ConfigItem;
-        entityOnline: ConfigItem;
     };
     small: {
         userOnline: ConfigItem;
         userChecked: ConfigItem;
-        entityOnline: ConfigItem;
     };
     medium: {
         userOnline: ConfigItem;
         userChecked: ConfigItem;
-        entityOnline: ConfigItem;
     };
     large: {
         userOnline: ConfigItem;
         userChecked: ConfigItem;
-        entityOnline: ConfigItem;
     };
     xlarge: {
         userOnline: ConfigItem;
         userChecked: ConfigItem;
-        entityOnline: ConfigItem;
     };
 };
 
@@ -48,9 +43,6 @@ const sizeClasses: SizeClassesType = {
             right: -4,
             size: 17,
         },
-        entityOnline: {
-            size: 12,
-        },
     },
     small: {
         userOnline: {
@@ -63,9 +55,6 @@ const sizeClasses: SizeClassesType = {
             right: -4,
             size: 17,
         },
-        entityOnline: {
-            size: 12,
-        },
     },
     medium: {
         userOnline: {
@@ -78,9 +67,6 @@ const sizeClasses: SizeClassesType = {
             right: -2,
             size: 20,
         },
-        entityOnline: {
-            size: 14,
-        },
     },
     large: {
         userOnline: {
@@ -93,9 +79,6 @@ const sizeClasses: SizeClassesType = {
             right: 0,
             size: 24,
         },
-        entityOnline: {
-            size: 18,
-        },
     },
     xlarge: {
         userOnline: {
@@ -108,13 +91,10 @@ const sizeClasses: SizeClassesType = {
             right: 6,
             size: 30,
         },
-        entityOnline: {
-            size: 24,
-        },
     },
 };
 
-type BadgeType = 'userOnline' | 'userChecked' | 'entityOnline';
+type BadgeType = 'userOnline' | 'userChecked';
 
 interface PropTypes {
     size: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
@@ -124,17 +104,13 @@ interface PropTypes {
 
 /**
  * `Badge` appears on the top-right corner of an `Avatar`. It is used to either
- * show a checkmark or an indicator that there are unread notifications.
+ * show a checkmark or an indicator that there are unread notifications. This is deprecated.
  */
 export default function Badge({ size, type, children }: PropTypes): JSX.Element {
-    let badgeType: BadgeType = 'entityOnline';
+    let badgeType: BadgeType = 'userOnline';
 
-    if (type === 'user') {
-        if (children) {
-            badgeType = 'userChecked';
-        } else {
-            badgeType = 'userOnline';
-        }
+    if (type === 'user' && children) {
+        badgeType = 'userChecked';
     }
 
     const styleConfig: ConfigItem = sizeClasses[size][badgeType];
@@ -143,10 +119,8 @@ export default function Badge({ size, type, children }: PropTypes): JSX.Element
         <div
             className={styles.badge}
             style={{
-                // EntityAvatar badges stick out by one third of their diameter.
-                // UserAvatar badges have custom positions in the style object.
-                top: badgeType === 'entityOnline' ? -(styleConfig.size / 3) : styleConfig.top,
-                right: badgeType === 'entityOnline' ? -(styleConfig.size / 3) : styleConfig.right,
+                top: styleConfig.top,
+                right: styleConfig.right,
                 width: styleConfig.size,
                 height: styleConfig.size,
             }}