feat(ui): Re-style suggested avatar stack (#38286)

docs-ui/stories/components/suggestedAvatarStack.stories.js

@@ -41,7 +41,7 @@ export const SuggestedAvatars = ({...args}) => {
   TeamStore.loadInitialData([exampleTeam]);
   return (
     <SuggestedAvatarContainer>
-      <SuggestedAvatarStack {...args} />
+      <SuggestedAvatarStack size={24} {...args} />
     </SuggestedAvatarContainer>
   );
 };
@@ -66,5 +66,5 @@ SuggestedAvatars.parameters = {
 };
 
 const SuggestedAvatarContainer = styled('div')`
-  width: 40px;
+  display: flex;
 `;

static/app/components/avatar/actorAvatar.tsx

@@ -15,6 +15,7 @@ type Props = {
   gravatar?: boolean;
   hasTooltip?: boolean;
   onClick?: () => void;
+  round?: boolean;
   size?: number;
   suggested?: boolean;
   title?: string;

static/app/components/avatar/baseAvatar.tsx

@@ -24,7 +24,8 @@ const StyledBaseAvatar = styled('span')<{
 }>`
   flex-shrink: 0;
   border-radius: ${p => (p.round ? '50%' : '3px')};
-  border: ${p => (p.suggested ? `1px dashed ${p.theme.gray400}` : 'none')};
+  border: ${p => (p.suggested ? `2px solid ${p.theme.background}` : 'none')};
+  background-color: ${p => (p.suggested ? p.theme.background : 'none')};
 `;
 
 const defaultProps: DefaultProps = {
@@ -172,7 +173,6 @@ class BaseAvatar extends Component<Props, State> {
           round={round}
           remoteSize={DEFAULT_REMOTE_SIZE}
           suggested={suggested}
-          grayscale={suggested}
           {...eventProps}
         />
       );
@@ -185,7 +185,6 @@ class BaseAvatar extends Component<Props, State> {
           src={this.buildUploadUrl()}
           {...eventProps}
           suggested={suggested}
-          grayscale={suggested}
         />
       );
     }

static/app/components/avatar/gravatar.tsx

@@ -24,7 +24,6 @@ function Gravatar({
   onError,
   onLoad,
   suggested,
-  grayscale,
 }: Props) {
   const isMounted = useRef(false);
   const [MD5, setMD5] = useState<HasherHelper>();
@@ -70,7 +69,6 @@ function Gravatar({
       onLoad={onLoad}
       onError={onError}
       suggested={suggested}
-      grayscale={grayscale}
     />
   );
 }

static/app/components/avatar/styles.tsx

@@ -1,7 +1,6 @@
 import {css} from '@emotion/react';
 
 export type ImageStyleProps = {
-  grayscale?: boolean;
   round?: boolean;
   suggested?: boolean;
 };
@@ -11,11 +10,6 @@ export const imageStyle = (props: ImageStyleProps) => css`
   top: 0px;
   left: 0px;
   border-radius: ${props.round ? '50%' : '3px'};
-  ${props.grayscale &&
-  css`
-    padding: 1px;
-    filter: grayscale(100%);
-  `}
   ${props.suggested &&
   css`
     opacity: 50%;

static/app/components/avatar/suggestedAvatarStack.tsx

@@ -14,19 +14,17 @@ type Props = {
 const MAX_SUGGESTIONS = 5;
 
 const SuggestedAvatarStack = ({owners, tooltip, tooltipOptions, ...props}: Props) => {
-  const backgroundAvatarProps = {
-    ...props,
-    round: owners[0].type === 'user',
-    suggested: true,
-  };
+  const [firstSuggestion, ...suggestedOwners] = owners;
   const numAvatars = Math.min(owners.length, MAX_SUGGESTIONS);
   return (
     <AvatarStack data-test-id="suggested-avatar-stack">
-      {[...Array(numAvatars - 1)].map((_, i) => (
-        <BackgroundAvatar
-          {...backgroundAvatarProps}
+      {suggestedOwners.slice(0, numAvatars - 1).map((owner, i) => (
+        <Avatar
+          {...props}
+          suggested
+          round={firstSuggestion.type === 'user'}
+          actor={owner}
           key={i}
-          type="background"
           index={i}
           hasTooltip={false}
         />
@@ -34,7 +32,7 @@ const SuggestedAvatarStack = ({owners, tooltip, tooltipOptions, ...props}: Props
       <Avatar
         {...props}
         suggested
-        actor={owners[0]}
+        actor={firstSuggestion}
         index={numAvatars - 1}
         tooltip={tooltip}
         tooltipOptions={{...tooltipOptions, skipWrapper: true}}
@@ -57,8 +55,4 @@ const Avatar = styled(ActorAvatar)<{index: number}>`
   ${translateStyles}
 `;
 
-const BackgroundAvatar = styled(BaseAvatar)<{index: number}>`
-  ${translateStyles}
-`;
-
 export default SuggestedAvatarStack;

static/app/components/letterAvatar.tsx

@@ -87,7 +87,8 @@ const LetterAvatar = styled(
           height="120"
           rx="15"
           ry="15"
-          fill={suggested ? theme.white : getColor(identifier)}
+          opacity={suggested ? '50%' : '100%'}
+          fill={getColor(identifier)}
         />
         <text
           x="50%"
@@ -95,7 +96,7 @@ const LetterAvatar = styled(
           fontSize="65"
           style={{dominantBaseline: 'central'}}
           textAnchor="middle"
-          fill={suggested ? theme.gray400 : theme.white}
+          fill={theme.white}
         >
           {getInitials(displayName)}
         </text>