From 83a171925ff8540f5acad8ce415a3cc747259e94 Mon Sep 17 00:00:00 2001 From: blam Date: Tue, 12 Mar 2024 10:46:35 +0100 Subject: [PATCH 01/12] chore: move the styles into the avatar theme so it can be overriden Signed-off-by: blam --- .../src/components/Avatar/Avatar.tsx | 36 ++++++++++--------- 1 file changed, 20 insertions(+), 16 deletions(-) diff --git a/packages/core-components/src/components/Avatar/Avatar.tsx b/packages/core-components/src/components/Avatar/Avatar.tsx index 3727c892f9..2b3336830a 100644 --- a/packages/core-components/src/components/Avatar/Avatar.tsx +++ b/packages/core-components/src/components/Avatar/Avatar.tsx @@ -23,21 +23,23 @@ import { extractInitials, stringToColor } from './utils'; /** @public */ export type AvatarClassKey = 'avatar'; -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' }, -); +const useStyles = (styles: CSSProperties) => + makeStyles( + (theme: Theme) => ({ + avatar: { + width: '4rem', + height: '4rem', + color: theme.palette.common.white, + ...styles, + }, + avatarText: { + fontWeight: theme.typography.fontWeightBold, + letterSpacing: '1px', + textTransform: 'uppercase', + }, + }), + { name: 'BackstageAvatar' }, + )(); /** * Properties for {@link Avatar}. @@ -69,13 +71,15 @@ export interface AvatarProps { */ export function Avatar(props: AvatarProps) { const { displayName, picture, customStyles } = props; - const classes = useStyles(); let styles = { ...customStyles }; const fontStyles = { fontFamily: styles.fontFamily, fontSize: styles.fontSize, fontWeight: styles.fontWeight, }; + + const classes = useStyles(styles); + // 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 From 527c9464a3e7e3033ef6a8436f20820a2e009aab Mon Sep 17 00:00:00 2001 From: blam Date: Tue, 12 Mar 2024 10:51:41 +0100 Subject: [PATCH 02/12] chore: remove styles Signed-off-by: blam --- .../src/components/Avatar/Avatar.tsx | 33 ++++++++++--------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/packages/core-components/src/components/Avatar/Avatar.tsx b/packages/core-components/src/components/Avatar/Avatar.tsx index 2b3336830a..183753734c 100644 --- a/packages/core-components/src/components/Avatar/Avatar.tsx +++ b/packages/core-components/src/components/Avatar/Avatar.tsx @@ -23,7 +23,13 @@ import { extractInitials, stringToColor } from './utils'; /** @public */ export type AvatarClassKey = 'avatar'; -const useStyles = (styles: CSSProperties) => +const useStyles = ({ + styles, + fontStyles, +}: { + styles: CSSProperties; + fontStyles: CSSProperties; +}) => makeStyles( (theme: Theme) => ({ avatar: { @@ -36,6 +42,7 @@ const useStyles = (styles: CSSProperties) => fontWeight: theme.typography.fontWeightBold, letterSpacing: '1px', textTransform: 'uppercase', + ...fontStyles, }, }), { name: 'BackstageAvatar' }, @@ -72,14 +79,6 @@ export interface AvatarProps { export function Avatar(props: AvatarProps) { const { displayName, picture, customStyles } = props; let styles = { ...customStyles }; - const fontStyles = { - fontFamily: styles.fontFamily, - fontSize: styles.fontSize, - fontWeight: styles.fontWeight, - }; - - const classes = useStyles(styles); - // 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 @@ -90,19 +89,21 @@ export function Avatar(props: AvatarProps) { ...customStyles, }; } + const fontStyles = { + fontFamily: styles.fontFamily, + fontSize: styles.fontSize, + fontWeight: styles.fontWeight, + }; + + const classes = useStyles({ styles, fontStyles }); + return ( - + {displayName && ( {extractInitials(displayName)} From aa1c88d525031e43dfc4938e9e4ecffcc480536e Mon Sep 17 00:00:00 2001 From: blam Date: Tue, 12 Mar 2024 10:52:36 +0100 Subject: [PATCH 03/12] chore: add changeset Signed-off-by: blam Signed-off-by: blam --- .changeset/three-ears-brake.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/three-ears-brake.md diff --git a/.changeset/three-ears-brake.md b/.changeset/three-ears-brake.md new file mode 100644 index 0000000000..e3ac0949e1 --- /dev/null +++ b/.changeset/three-ears-brake.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Move inline styles into classes for `Avatar` component From a89dfedbdd3394d39a6ce05f0b239202a5386553 Mon Sep 17 00:00:00 2001 From: blam Date: Tue, 12 Mar 2024 11:09:20 +0100 Subject: [PATCH 04/12] chore: fix Signed-off-by: blam Signed-off-by: blam --- packages/core-components/src/components/Avatar/Avatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core-components/src/components/Avatar/Avatar.tsx b/packages/core-components/src/components/Avatar/Avatar.tsx index 183753734c..148d455312 100644 --- a/packages/core-components/src/components/Avatar/Avatar.tsx +++ b/packages/core-components/src/components/Avatar/Avatar.tsx @@ -30,7 +30,7 @@ const useStyles = ({ styles: CSSProperties; fontStyles: CSSProperties; }) => - makeStyles( + makeStyles( (theme: Theme) => ({ avatar: { width: '4rem', From 31fd1bc4e278ba6e5ed922436d2bb903ebffb4b4 Mon Sep 17 00:00:00 2001 From: blam Date: Tue, 12 Mar 2024 11:12:06 +0100 Subject: [PATCH 05/12] chore: remove visual UI tests that are caught by snapshots Signed-off-by: blam --- .../src/components/Avatar/Avatar.test.tsx | 23 ------------------- 1 file changed, 23 deletions(-) diff --git a/packages/core-components/src/components/Avatar/Avatar.test.tsx b/packages/core-components/src/components/Avatar/Avatar.test.tsx index 4c726eb785..1c08d57679 100644 --- a/packages/core-components/src/components/Avatar/Avatar.test.tsx +++ b/packages/core-components/src/components/Avatar/Avatar.test.tsx @@ -17,7 +17,6 @@ import { render } from '@testing-library/react'; import React from 'react'; import { Avatar } from './Avatar'; -import { stringToColor } from './utils'; describe('', () => { it('renders without exploding', async () => { @@ -25,26 +24,4 @@ describe('', () => { expect(getByText('JD')).toBeInTheDocument(); }); - - it('generates a background color', async () => { - const bgcolor = stringToColor('John Doe'); - const { getByText } = render(); - expect(getByText('JD').parentElement).toHaveStyle( - `background-color: ${bgcolor}`, - ); - }); - - it('does not generate a background color when a picture is given', async () => { - const bgcolor = stringToColor('John Doe'); - const { getByAltText } = render( - , - ); - - expect(getByAltText('John Doe')).not.toHaveStyle( - `background-color: ${bgcolor}`, - ); - }); }); From a9493c0beaa6ae9189d9dcf87023e65aff87a64e Mon Sep 17 00:00:00 2001 From: blam Date: Tue, 12 Mar 2024 11:58:45 +0100 Subject: [PATCH 06/12] chore: wrap in a use memo Signed-off-by: blam Signed-off-by: blam --- .../src/components/Avatar/Avatar.tsx | 41 +++++++++++-------- 1 file changed, 23 insertions(+), 18 deletions(-) diff --git a/packages/core-components/src/components/Avatar/Avatar.tsx b/packages/core-components/src/components/Avatar/Avatar.tsx index 148d455312..6e5e90797f 100644 --- a/packages/core-components/src/components/Avatar/Avatar.tsx +++ b/packages/core-components/src/components/Avatar/Avatar.tsx @@ -16,7 +16,7 @@ import MaterialAvatar from '@material-ui/core/Avatar'; import { makeStyles, Theme } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; -import React, { CSSProperties } from 'react'; +import React, { CSSProperties, useMemo } from 'react'; import { extractInitials, stringToColor } from './utils'; @@ -30,23 +30,28 @@ const useStyles = ({ 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' }, - )(); + useMemo( + () => + 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' }, + )(), + // eslint-disable-next-line react-hooks/exhaustive-deps + [JSON.stringify(styles), JSON.stringify(fontStyles)], + ); /** * Properties for {@link Avatar}. From e70464afcaa58db49481188eb898867d942b3993 Mon Sep 17 00:00:00 2001 From: blam Date: Tue, 12 Mar 2024 13:08:55 +0100 Subject: [PATCH 07/12] chore: remove the use memo hook Signed-off-by: blam --- .../src/components/Avatar/Avatar.tsx | 41 ++++++++----------- 1 file changed, 18 insertions(+), 23 deletions(-) diff --git a/packages/core-components/src/components/Avatar/Avatar.tsx b/packages/core-components/src/components/Avatar/Avatar.tsx index 6e5e90797f..148d455312 100644 --- a/packages/core-components/src/components/Avatar/Avatar.tsx +++ b/packages/core-components/src/components/Avatar/Avatar.tsx @@ -16,7 +16,7 @@ import MaterialAvatar from '@material-ui/core/Avatar'; import { makeStyles, Theme } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; -import React, { CSSProperties, useMemo } from 'react'; +import React, { CSSProperties } from 'react'; import { extractInitials, stringToColor } from './utils'; @@ -30,28 +30,23 @@ const useStyles = ({ styles: CSSProperties; fontStyles: CSSProperties; }) => - useMemo( - () => - 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' }, - )(), - // eslint-disable-next-line react-hooks/exhaustive-deps - [JSON.stringify(styles), JSON.stringify(fontStyles)], - ); + 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' }, + )(); /** * Properties for {@link Avatar}. From ab185c688a2f4b7ea51eb5e949cfe1705d57c368 Mon Sep 17 00:00:00 2001 From: blam Date: Tue, 12 Mar 2024 14:08:44 +0100 Subject: [PATCH 08/12] chore: update usages of the customStyles to use classes instead Signed-off-by: blam --- .../src/components/Avatar/Avatar.stories.tsx | 19 +++-- .../src/components/Avatar/Avatar.tsx | 79 ++++++++++--------- .../lib/PullRequestCard/PullRequestCard.tsx | 8 +- .../PullRequestCardReviewer.tsx | 34 +++++--- .../CardContentFields/CardContentFields.tsx | 35 +++++--- .../Group/MembersList/MembersListCard.tsx | 37 +++++---- 6 files changed, 125 insertions(+), 87 deletions(-) diff --git a/packages/core-components/src/components/Avatar/Avatar.stories.tsx b/packages/core-components/src/components/Avatar/Avatar.stories.tsx index 59f2fb6cfa..dc0f7c00e7 100644 --- a/packages/core-components/src/components/Avatar/Avatar.stories.tsx +++ b/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 = () => ; export const Empty = () => ; -export const CustomStyling = () => ( - -); +export const CustomStyling = () => { + const classes = useStyles(); + return ; +}; diff --git a/packages/core-components/src/components/Avatar/Avatar.tsx b/packages/core-components/src/components/Avatar/Avatar.tsx index 148d455312..7f33caba1f 100644 --- a/packages/core-components/src/components/Avatar/Avatar.tsx +++ b/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 ( - + {displayName && ( {extractInitials(displayName)} diff --git a/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCard.tsx b/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCard.tsx index dd9fff86b5..fb5d9acd99 100644 --- a/plugins/azure-devops/src/components/PullRequestsPage/lib/PullRequestCard/PullRequestCard.tsx +++ b/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 = ( {pullRequest.title} @@ -90,12 +94,10 @@ export const PullRequestCard = ({ ); - const classes = useStyles(); - return ( ( - + }, + avatarText: { + fontSize: '1rem', + }, + }, + { name: 'PullRequestCardReviewer' }, ); + +export const PullRequestCardReviewer = ({ + reviewer, +}: PullRequestCardReviewerProps) => { + const classes = useStyles(); + + return ( + + ); +}; diff --git a/plugins/bazaar/src/components/CardContentFields/CardContentFields.tsx b/plugins/bazaar/src/components/CardContentFields/CardContentFields.tsx index 247a1f6011..40f8a51044 100644 --- a/plugins/bazaar/src/components/CardContentFields/CardContentFields.tsx +++ b/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 (
@@ -84,17 +105,7 @@ export const CardContentFields = ({ > - 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 }) => { Date: Tue, 12 Mar 2024 14:23:14 +0100 Subject: [PATCH 09/12] chore: don't update the types Signed-off-by: blam --- packages/core-components/api-report.md | 4 ++++ packages/core-components/src/components/Avatar/Avatar.tsx | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index a9372921b2..7fd706db43 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -95,6 +95,10 @@ export type AvatarClassKey = 'avatar'; // @public export interface AvatarProps { + classes?: { + [key in 'avatar' | 'avatarText']?: string; + }; + // @deprecated customStyles?: CSSProperties; displayName?: string; picture?: string; diff --git a/packages/core-components/src/components/Avatar/Avatar.tsx b/packages/core-components/src/components/Avatar/Avatar.tsx index 7f33caba1f..2567e9c20b 100644 --- a/packages/core-components/src/components/Avatar/Avatar.tsx +++ b/packages/core-components/src/components/Avatar/Avatar.tsx @@ -21,7 +21,7 @@ import React, { CSSProperties } from 'react'; import { extractInitials, stringToColor } from './utils'; /** @public */ -export type AvatarClassKey = 'avatar' | 'avatarText'; +export type AvatarClassKey = 'avatar'; const useStyles = makeStyles( (theme: Theme) => ({ @@ -62,7 +62,7 @@ export interface AvatarProps { /** * Custom styles applied to avatar */ - classes?: { [key in AvatarClassKey]?: string }; + classes?: { [key in 'avatar' | 'avatarText']?: string }; } /** From b7b0466df777ec36b6c112f441cacc79aa10fc1b Mon Sep 17 00:00:00 2001 From: blam Date: Tue, 12 Mar 2024 14:31:34 +0100 Subject: [PATCH 10/12] chore: fix changesets Signed-off-by: blam --- .changeset/kind-spies-hunt.md | 7 +++++++ .changeset/three-ears-brake.md | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 .changeset/kind-spies-hunt.md diff --git a/.changeset/kind-spies-hunt.md b/.changeset/kind-spies-hunt.md new file mode 100644 index 0000000000..fdffd5f5e0 --- /dev/null +++ b/.changeset/kind-spies-hunt.md @@ -0,0 +1,7 @@ +--- +'@backstage/plugin-azure-devops': patch +'@backstage/plugin-bazaar': patch +'@backstage/plugin-org': patch +--- + +Remove the use of the deprecated `customStyles` for `Avatar` diff --git a/.changeset/three-ears-brake.md b/.changeset/three-ears-brake.md index e3ac0949e1..5e20281eec 100644 --- a/.changeset/three-ears-brake.md +++ b/.changeset/three-ears-brake.md @@ -2,4 +2,4 @@ '@backstage/core-components': patch --- -Move inline styles into classes for `Avatar` component +Deprecate the `customStyles` prop for the `Avatar` component in favour of the `classes` prop. From 4c15101568f14828cba5a0e9c7638dab1a1d43de Mon Sep 17 00:00:00 2001 From: blam Date: Tue, 12 Mar 2024 14:33:05 +0100 Subject: [PATCH 11/12] chore: actually use the background Signed-off-by: blam --- packages/core-components/src/components/Avatar/Avatar.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/core-components/src/components/Avatar/Avatar.tsx b/packages/core-components/src/components/Avatar/Avatar.tsx index 2567e9c20b..564fa951f0 100644 --- a/packages/core-components/src/components/Avatar/Avatar.tsx +++ b/packages/core-components/src/components/Avatar/Avatar.tsx @@ -29,6 +29,8 @@ const useStyles = makeStyles( width: '4rem', height: '4rem', color: theme.palette.common.white, + backgroundColor: (props: { backgroundColor?: string }) => + props.backgroundColor, }, avatarText: { fontWeight: theme.typography.fontWeightBold, From 2b467ddd5721f16be4aa11905a11edcbd1452e41 Mon Sep 17 00:00:00 2001 From: blam Date: Tue, 12 Mar 2024 14:45:10 +0100 Subject: [PATCH 12/12] chore: refactor a little bit Signed-off-by: blam --- .../core-components/src/components/Avatar/Avatar.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/core-components/src/components/Avatar/Avatar.tsx b/packages/core-components/src/components/Avatar/Avatar.tsx index 564fa951f0..d3b0a13602 100644 --- a/packages/core-components/src/components/Avatar/Avatar.tsx +++ b/packages/core-components/src/components/Avatar/Avatar.tsx @@ -19,6 +19,7 @@ import Typography from '@material-ui/core/Typography'; import React, { CSSProperties } from 'react'; import { extractInitials, stringToColor } from './utils'; +import classNames from 'classnames'; /** @public */ export type AvatarClassKey = 'avatar'; @@ -94,18 +95,24 @@ export function Avatar(props: AvatarProps) { !picture ? { backgroundColor: stringToColor(displayName || '') } : {}, ); + const avatarClassNames = classNames(props.classes?.avatar, classes.avatar); + const avatarTextClassNames = classNames( + props.classes?.avatarText, + classes.avatarText, + ); + return ( {displayName && ( {extractInitials(displayName)}