chore: update usages of the customStyles to use classes instead

Signed-off-by: blam <ben@blam.sh>

packages/core-components/src/components/Avatar/Avatar.stories.tsx

@@ -16,6 +16,15 @@
 
 import React from 'react';
 import { Avatar } from './Avatar';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+  avatar: {
+    width: '24px',
+    height: '24px',
+    fontSize: '8px',
+  },
+});
 
 export default {
   title: 'Data Display/Avatar',
@@ -34,9 +43,7 @@ export const NameFallback = () => <Avatar displayName="Jenny Doe" />;
 
 export const Empty = () => <Avatar />;
 
-export const CustomStyling = () => (
-  <Avatar
-    displayName="Jenny Doe"
-    customStyles={{ width: '24px', height: '24px', fontSize: '8px' }}
-  />
-);
+export const CustomStyling = () => {
+  const classes = useStyles();
+  return <Avatar displayName="Jenny Doe" classes={classes} />;
+};

packages/core-components/src/components/Avatar/Avatar.tsx

@@ -21,32 +21,23 @@ import React, { CSSProperties } from 'react';
 import { extractInitials, stringToColor } from './utils';
 
 /** @public */
-export type AvatarClassKey = 'avatar';
+export type AvatarClassKey = 'avatar' | 'avatarText';
 
-const useStyles = ({
-  styles,
-  fontStyles,
-}: {
-  styles: CSSProperties;
-  fontStyles: CSSProperties;
-}) =>
-  makeStyles(
-    (theme: Theme) => ({
-      avatar: {
-        width: '4rem',
-        height: '4rem',
-        color: theme.palette.common.white,
-        ...styles,
-      },
-      avatarText: {
-        fontWeight: theme.typography.fontWeightBold,
-        letterSpacing: '1px',
-        textTransform: 'uppercase',
-        ...fontStyles,
-      },
-    }),
-    { name: 'BackstageAvatar' },
-  )();
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    avatar: {
+      width: '4rem',
+      height: '4rem',
+      color: theme.palette.common.white,
+    },
+    avatarText: {
+      fontWeight: theme.typography.fontWeightBold,
+      letterSpacing: '1px',
+      textTransform: 'uppercase',
+    },
+  }),
+  { name: 'BackstageAvatar' },
+);
 
 /**
  * Properties for {@link Avatar}.
@@ -64,8 +55,14 @@ export interface AvatarProps {
   picture?: string;
   /**
    * Custom styles applied to avatar
+   * @deprecated - use the classes property instead
    */
   customStyles?: CSSProperties;
+
+  /**
+   * Custom styles applied to avatar
+   */
+  classes?: { [key in AvatarClassKey]?: string };
 }
 
 /**
@@ -78,32 +75,36 @@ export interface AvatarProps {
  */
 export function Avatar(props: AvatarProps) {
   const { displayName, picture, customStyles } = props;
-  let styles = { ...customStyles };
-  // We only calculate the background color if there's not an avatar
-  // picture. If there is a picture, it might have a transparent
-  // background and we don't know whether the calculated background
-  // color will clash.
-  if (!picture) {
-    styles = {
-      backgroundColor: stringToColor(displayName || ''),
-      ...customStyles,
-    };
-  }
+  const styles = { ...customStyles };
+
+  // TODO: Remove this with the customStyles deprecation
   const fontStyles = {
     fontFamily: styles.fontFamily,
     fontSize: styles.fontSize,
     fontWeight: styles.fontWeight,
   };
 
-  const classes = useStyles({ styles, fontStyles });
+  // We only calculate the background color if there's not an avatar
+  // picture. If there is a picture, it might have a transparent
+  // background and we don't know whether the calculated background
+  // color will clash.
+  const classes = useStyles(
+    !picture ? { backgroundColor: stringToColor(displayName || '') } : {},
+  );
 
   return (
-    <MaterialAvatar alt={displayName} src={picture} className={classes.avatar}>
+    <MaterialAvatar
+      alt={displayName}
+      src={picture}
+      className={`${props.classes?.avatarText} ${classes.avatar}`}
+      style={styles}
+    >
       {displayName && (
         <Typography
           variant="h6"
           component="span"
-          className={classes.avatarText}
+          className={`${props.classes?.avatarText} ${classes.avatarText}`}
+          style={fontStyles}
         >
           {extractInitials(displayName)}
         </Typography>

plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCard.tsx

@@ -51,6 +51,8 @@ const useStyles = makeStyles(
     policies: {
       flex: 1,
     },
+    avatar: { width: '2.5rem', height: '2.5rem' },
+    avatarText: { fontSize: '1rem' },
   }),
   { name: 'PullRequestCard' },
 );
@@ -64,6 +66,8 @@ export const PullRequestCard = ({
   pullRequest,
   simplified,
 }: PullRequestCardProps) => {
+  const classes = useStyles();
+
   const title = (
     <Link to={pullRequest.link ?? ''} title={pullRequest.description}>
       {pullRequest.title}
@@ -90,12 +94,10 @@ export const PullRequestCard = ({
     <Avatar
       displayName={pullRequest.createdBy?.displayName}
       picture={pullRequest.createdBy?.imageUrl}
-      customStyles={{ width: '2.5rem', height: '2.5rem', fontSize: '1rem' }}
+      classes={{ avatar: classes.avatar, avatarText: classes.avatarText }}
     />
   );
 
-  const classes = useStyles();
-
   return (
     <Card
       classes={{ root: classes.card }}

plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCardReviewer.tsx

@@ -17,22 +17,36 @@
 import { Avatar } from '@backstage/core-components';
 import React from 'react';
 import { Reviewer } from '@backstage/plugin-azure-devops-common';
+import { makeStyles } from '@material-ui/core/styles';
 
 type PullRequestCardReviewerProps = {
   reviewer: Reviewer;
 };
 
-export const PullRequestCardReviewer = ({
-  reviewer,
-}: PullRequestCardReviewerProps) => (
-  <Avatar
-    displayName={reviewer.displayName}
-    picture={reviewer.imageUrl}
-    customStyles={{
+const useStyles = makeStyles(
+  {
+    avatar: {
       width: '2.5rem',
       height: '2.5rem',
-      fontSize: '1rem',
       border: '0.3rem solid silver',
-    }}
-  />
+    },
+    avatarText: {
+      fontSize: '1rem',
+    },
+  },
+  { name: 'PullRequestCardReviewer' },
 );
+
+export const PullRequestCardReviewer = ({
+  reviewer,
+}: PullRequestCardReviewerProps) => {
+  const classes = useStyles();
+
+  return (
+    <Avatar
+      displayName={reviewer.displayName}
+      picture={reviewer.imageUrl}
+      classes={classes}
+    />
+  );
+};

plugins/bazaar/src/components/CardContentFields/CardContentFields.tsx

@@ -19,6 +19,8 @@ import Grid from '@material-ui/core/Grid';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import Typography from '@material-ui/core/Typography';
+import makeStyles from '@material-ui/core/styles/makeStyles';
+
 import { GridSize } from '@material-ui/core/Grid';
 import { parseEntityRef } from '@backstage/catalog-model';
 import { Avatar, Link } from '@backstage/core-components';
@@ -35,6 +37,25 @@ type Props = {
   membersSize: GridSize;
 };
 
+const useStyles = makeStyles(
+  {
+    avatar: {
+      width: '19px',
+      height: '19px',
+      float: 'left',
+      marginRight: '0.3rem',
+      marginTop: '0rem',
+      marginBottom: '0rem',
+      alignItems: 'left',
+    },
+    avatarText: {
+      fontSize: '8px',
+      textAlign: 'left',
+    },
+  },
+  { name: 'CardContentFields' },
+);
+
 export const CardContentFields = ({
   bazaarProject,
   members,
@@ -42,7 +63,7 @@ export const CardContentFields = ({
   membersSize,
 }: Props) => {
   const catalogEntityRoute = useRouteRef(entityRouteRef);
-
+  const classes = useStyles();
   return (
     <div>
       <Card>
@@ -84,17 +105,7 @@ export const CardContentFields = ({
                       >
                         <Avatar
                           displayName={member.userId}
-                          customStyles={{
-                            width: '19px',
-                            height: '19px',
-                            fontSize: '8px',
-                            float: 'left',
-                            marginRight: '0.3rem',
-                            marginTop: '0rem',
-                            marginBottom: '0rem',
-                            alignItems: 'left',
-                            textAlign: 'left',
-                          }}
+                          classes={classes}
                           picture={member.picture}
                         />
                         <Link

plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx

@@ -49,19 +49,25 @@ import {
 } from '../../../../helpers/helpers';
 import { EntityRefLink } from '@backstage/plugin-catalog-react';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    card: {
-      border: `1px solid ${theme.palette.divider}`,
-      boxShadow: theme.shadows[2],
-      borderRadius: '4px',
-      overflow: 'visible',
-      position: 'relative',
-      margin: theme.spacing(4, 1, 1),
-      flex: '1',
-      minWidth: '0px',
-    },
-  }),
+const useStyles = makeStyles(
+  (theme: Theme) =>
+    createStyles({
+      card: {
+        border: `1px solid ${theme.palette.divider}`,
+        boxShadow: theme.shadows[2],
+        borderRadius: '4px',
+        overflow: 'visible',
+        position: 'relative',
+        margin: theme.spacing(4, 1, 1),
+        flex: '1',
+        minWidth: '0px',
+      },
+      avatar: {
+        position: 'absolute',
+        top: '-2rem',
+      },
+    }),
+  { name: 'MembersListCardComponent' },
 );
 
 const MemberComponent = (props: { member: UserEntity }) => {
@@ -84,10 +90,7 @@ const MemberComponent = (props: { member: UserEntity }) => {
         <Avatar
           displayName={displayName}
           picture={profile?.picture}
-          customStyles={{
-            position: 'absolute',
-            top: '-2rem',
-          }}
+          classes={classes}
         />
         <Box
           pt={2}