Modernize <Avatar> component code, fix an overflow bug

stylesheets/_modules.scss

@@ -1423,7 +1423,7 @@
   &:focus {
     outline: none;
 
-    .module-avatar {
+    .module-Avatar {
       @include keyboard-mode {
         box-shadow: 0 0 0 3px $ultramarine-ui-light;
       }
@@ -3980,322 +3980,6 @@ button.module-conversation-details__action-button {
   }
 }
 
-// Module: Avatar
-
-.module-avatar {
-  position: relative;
-  vertical-align: middle;
-  display: inline-block;
-  border-radius: 50%;
-  user-select: none;
-
-  img {
-    object-fit: cover;
-    border-radius: 50%;
-  }
-}
-
-.module-avatar-button {
-  @include button-reset;
-
-  // Ensures that the border of the item sticks tight to the inner contents
-  width: 100%;
-  line-height: 0;
-  border-radius: 50%;
-
-  @include keyboard-mode {
-    &:focus {
-      box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
-    }
-  }
-}
-
-.module-avatar__label {
-  width: 100%;
-  text-align: center;
-  font-weight: bold;
-  text-transform: uppercase;
-
-  @include light-theme {
-    color: $color-white;
-  }
-  @include dark-theme {
-    color: $color-gray-05;
-  }
-}
-
-.module-avatar__icon {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.module-avatar__icon--group {
-  @include light-theme {
-    @include color-svg('../images/icons/v2/group-outline-40.svg', $color-white);
-  }
-  @include dark-theme {
-    @include color-svg(
-      '../images/icons/v2/group-outline-40.svg',
-      $color-gray-05
-    );
-  }
-}
-
-.module-avatar__icon--direct {
-  @include light-theme {
-    @include color-svg(
-      '../images/icons/v2/profile-outline-40.svg',
-      $color-white
-    );
-  }
-  @include dark-theme {
-    @include color-svg(
-      '../images/icons/v2/profile-outline-40.svg',
-      $color-gray-05
-    );
-  }
-}
-
-.module-avatar--28 {
-  min-width: 28px;
-  height: 28px;
-  width: 28px;
-
-  img {
-    height: 28px;
-    width: 28px;
-  }
-}
-
-.module-avatar__icon--28.module-avatar__icon--group {
-  height: 20px;
-  width: 20px;
-  @include light-theme {
-    @include color-svg('../images/icons/v2/group-outline-20.svg', $color-white);
-  }
-  @include dark-theme {
-    @include color-svg(
-      '../images/icons/v2/group-outline-20.svg',
-      $color-gray-05
-    );
-  }
-}
-.module-avatar__icon--28.module-avatar__icon--direct {
-  height: 20px;
-  width: 20px;
-  @include light-theme {
-    @include color-svg(
-      '../images/icons/v2/profile-outline-20.svg',
-      $color-white
-    );
-  }
-  @include dark-theme {
-    @include color-svg(
-      '../images/icons/v2/profile-outline-20.svg',
-      $color-gray-05
-    );
-  }
-}
-
-.module-avatar__label--28 {
-  font-size: 14px;
-  line-height: 28px;
-}
-
-.module-avatar--32 {
-  height: 32px;
-  width: 32px;
-  min-width: 32px;
-
-  img {
-    height: 32px;
-    width: 32px;
-  }
-}
-
-.module-avatar__icon--32.module-avatar__icon--group {
-  height: 20px;
-  width: 20px;
-  @include light-theme {
-    @include color-svg('../images/icons/v2/group-outline-20.svg', $color-white);
-  }
-  @include dark-theme {
-    @include color-svg(
-      '../images/icons/v2/group-outline-20.svg',
-      $color-gray-05
-    );
-  }
-}
-.module-avatar__icon--32.module-avatar__icon--direct {
-  height: 20px;
-  width: 20px;
-  @include light-theme {
-    @include color-svg(
-      '../images/icons/v2/profile-outline-20.svg',
-      $color-white
-    );
-  }
-  @include dark-theme {
-    @include color-svg(
-      '../images/icons/v2/profile-outline-20.svg',
-      $color-gray-05
-    );
-  }
-}
-
-.module-avatar__label--32 {
-  font-size: 14px;
-  line-height: 32px;
-}
-
-.module-avatar--52 {
-  height: 52px;
-  width: 52px;
-  min-width: 52px;
-
-  img {
-    height: 52px;
-    width: 52px;
-  }
-}
-
-.module-avatar__label--52 {
-  width: 52px;
-  font-size: 22px;
-  letter-spacing: 0.19px;
-  line-height: 52px;
-}
-
-.module-avatar__icon--52 {
-  height: 38px;
-  width: 38px;
-}
-.module-avatar__icon--52.module-avatar__icon--direct {
-  height: 42px;
-  width: 42px;
-}
-
-.module-avatar--80 {
-  height: 80px;
-  width: 80px;
-  min-width: 80px;
-
-  img {
-    height: 80px;
-    width: 80px;
-  }
-}
-
-.module-avatar__label--80 {
-  width: 80px;
-  font-size: 40px;
-  line-height: 80px;
-}
-
-.module-avatar__icon--80 {
-  height: 58px;
-  width: 58px;
-}
-
-.module-avatar__icon--80.module-avatar__icon--direct {
-  height: 62px;
-  width: 62px;
-}
-
-.module-avatar--96 {
-  height: 96px;
-  width: 96px;
-  min-width: 96px;
-
-  img {
-    height: 96px;
-    width: 96px;
-  }
-}
-
-.module-avatar__label--96 {
-  width: 96px;
-  font-size: 48px;
-  line-height: 96px;
-}
-
-.module-avatar__icon--96 {
-  height: 70px;
-  width: 70px;
-}
-
-.module-avatar--112 {
-  height: 112px;
-  width: 112px;
-  min-width: 112px;
-
-  img {
-    height: 112px;
-    width: 112px;
-  }
-}
-
-.module-avatar__label--112 {
-  width: 112px;
-  font-size: 56px;
-  line-height: 112px;
-}
-
-.module-avatar__icon--112 {
-  height: 81px;
-  width: 81px;
-}
-.module-avatar__icon--112.module-avatar__icon--direct {
-  height: 87px;
-  width: 87px;
-}
-
-.module-avatar__icon--note-to-self {
-  width: 70%;
-  height: 70%;
-
-  @include light-theme {
-    @include color-svg('../images/note-28.svg', $color-white);
-  }
-  @include dark-theme {
-    @include color-svg('../images/note-28.svg', $color-gray-05);
-  }
-}
-
-.module-avatar--no-image {
-  @include light-theme {
-    background-color: $color-conversation-grey;
-  }
-  @include dark-theme {
-    background-color: $color-conversation-grey-shade;
-  }
-}
-
-.module-avatar__spinner-container {
-  padding: 4px;
-}
-
-.module-avatar--signal-blue {
-  background-color: $ultramarine-ui-light;
-}
-
-@each $color, $value in $conversation-colors {
-  .module-avatar--#{$color} {
-    @include light-theme {
-      background-color: $value;
-    }
-  }
-}
-@each $color, $value in $conversation-colors-shade {
-  .module-avatar--#{$color} {
-    @include dark-theme {
-      background-color: $value;
-    }
-  }
-}
-
 // Module: Main Header
 
 .module-main-header {
@@ -6684,7 +6368,7 @@ button.module-image__border-overlay:focus {
       }
 
       // The avatar image can be dragged on Windows.
-      .module-avatar img {
+      .module-Avatar img {
         -webkit-user-drag: none;
         -webkit-user-select: none;
       }

stylesheets/components/Avatar.scss

@@ -0,0 +1,113 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+.module-Avatar {
+  align-items: center;
+  border-radius: 100%;
+  display: inline-flex;
+  justify-content: center;
+  line-height: 0;
+  overflow: hidden;
+  user-select: none;
+  vertical-align: middle;
+
+  &__button {
+    @include button-reset;
+
+    align-items: center;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    width: 100%;
+
+    @include keyboard-mode {
+      &:focus {
+        box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
+      }
+    }
+  }
+
+  img {
+    object-fit: cover;
+    height: 100%;
+    width: 100%;
+  }
+
+  &__label {
+    align-items: center;
+    display: flex;
+    font-weight: bold;
+    justify-content: center;
+    text-align: center;
+    text-transform: uppercase;
+    transition: font-size 100ms ease-out;
+
+    @include light-theme {
+      color: $color-white;
+    }
+    @include dark-theme {
+      color: $color-gray-05;
+    }
+  }
+
+  &__icon {
+    @mixin avatar-icon($icon) {
+      @include light-theme {
+        @include color-svg($icon, $color-white);
+      }
+      @include dark-theme {
+        @include color-svg($icon, $color-gray-05);
+      }
+    }
+
+    &--direct {
+      @include avatar-icon('../images/icons/v2/profile-outline-20.svg');
+      height: 60%;
+      width: 60%;
+    }
+
+    &--group {
+      @include avatar-icon('../images/icons/v2/group-outline-20.svg');
+      height: 60%;
+      width: 60%;
+    }
+
+    &--note-to-self {
+      @include avatar-icon('../images/note-28.svg');
+      height: 70%;
+      width: 70%;
+    }
+  }
+
+  &__spinner-container {
+    padding: 4px;
+  }
+
+  &--no-image {
+    @include light-theme {
+      background-color: $color-conversation-grey;
+    }
+    @include dark-theme {
+      background-color: $color-conversation-grey-shade;
+    }
+  }
+
+  &--signal-blue {
+    background-color: $ultramarine-ui-light;
+  }
+
+  @each $color, $value in $conversation-colors {
+    &--#{$color} {
+      @include light-theme {
+        background-color: $value;
+      }
+    }
+  }
+  @each $color, $value in $conversation-colors-shade {
+    &--#{$color} {
+      @include dark-theme {
+        background-color: $value;
+      }
+    }
+  }
+}

stylesheets/manifest.scss

@@ -28,6 +28,7 @@
 
 // New style: components
 @import './components/AddGroupMembersModal.scss';
+@import './components/Avatar.scss';
 @import './components/AvatarInput.scss';
 @import './components/Button.scss';
 @import './components/ContactPill.scss';

ts/components/Avatar.stories.tsx

@@ -44,7 +44,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   onClick: action('onClick'),
   phoneNumber: text('phoneNumber', overrideProps.phoneNumber || ''),
   size: 80,
-  title: '',
+  title: overrideProps.title || '',
 });
 
 const sizes: Array<Props['size']> = [112, 96, 80, 52, 32, 28];
@@ -59,15 +59,31 @@ story.add('Avatar', () => {
 
 story.add('One-word Name', () => {
   const props = createProps({
-    name: 'John',
+    title: 'John',
   });
 
   return sizes.map(size => <Avatar key={size} {...props} size={size} />);
 });
 
-story.add('Multi-word Name', () => {
+story.add('Two-word Name', () => {
   const props = createProps({
-    name: 'John Smith',
+    title: 'John Smith',
+  });
+
+  return sizes.map(size => <Avatar key={size} {...props} size={size} />);
+});
+
+story.add('Wide initials', () => {
+  const props = createProps({
+    title: 'Walter White',
+  });
+
+  return sizes.map(size => <Avatar key={size} {...props} size={size} />);
+});
+
+story.add('Three-word name', () => {
+  const props = createProps({
+    title: 'Walter H. White',
   });
 
   return sizes.map(size => <Avatar key={size} {...props} size={size} />);

ts/components/Avatar.tsx

@@ -1,7 +1,12 @@
 // Copyright 2018-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import * as React from 'react';
+import React, {
+  FunctionComponent,
+  ReactNode,
+  useEffect,
+  useState,
+} from 'react';
 import classNames from 'classnames';
 
 import { Spinner } from './Spinner';
@@ -9,6 +14,7 @@ import { Spinner } from './Spinner';
 import { getInitials } from '../util/getInitials';
 import { LocalizerType } from '../types/Util';
 import { ColorType } from '../types/Colors';
+import * as log from '../logging/log';
 
 export enum AvatarSize {
   TWENTY_EIGHT = 28,
@@ -40,111 +46,35 @@ export type Props = {
   i18n: LocalizerType;
 } & Pick<React.HTMLProps<HTMLDivElement>, 'className'>;
 
-type State = {
+export const Avatar: FunctionComponent<Props> = ({
-  readonly imageBroken: boolean;
+  avatarPath,
-  readonly lastAvatarPath?: string;
+  className,
-};
+  color,
+  conversationType,
+  i18n,
+  innerRef,
+  loading,
+  noteToSelf,
+  onClick,
+  size,
+  title,
+}) => {
+  const [imageBroken, setImageBroken] = useState(false);
 
-export class Avatar extends React.Component<Props, State> {
+  useEffect(() => {
-  public handleImageErrorBound: () => void;
+    setImageBroken(false);
+  }, [avatarPath]);
 
-  public constructor(props: Props) {
+  const initials = getInitials(title);
-    super(props);
+  const hasImage = !noteToSelf && avatarPath && !imageBroken;
+  const shouldUseInitials =
+    !hasImage && conversationType === 'direct' && Boolean(initials);
 
-    this.handleImageErrorBound = this.handleImageError.bind(this);
+  let contents: ReactNode;
-
+  if (loading) {
-    this.state = {
-      lastAvatarPath: props.avatarPath,
-      imageBroken: false,
-    };
-  }
-
-  public static getDerivedStateFromProps(props: Props, state: State): State {
-    if (props.avatarPath !== state.lastAvatarPath) {
-      return {
-        ...state,
-        lastAvatarPath: props.avatarPath,
-        imageBroken: false,
-      };
-    }
-
-    return state;
-  }
-
-  public handleImageError(): void {
-    window.log.info(
-      'Avatar: Image failed to load; failing over to placeholder'
-    );
-    this.setState({
-      imageBroken: true,
-    });
-  }
-
-  public renderImage(): JSX.Element | null {
-    const { avatarPath, i18n, title } = this.props;
-    const { imageBroken } = this.state;
-
-    if (!avatarPath || imageBroken) {
-      return null;
-    }
-
-    return (
-      <img
-        onError={this.handleImageErrorBound}
-        alt={i18n('contactAvatarAlt', [title])}
-        src={avatarPath}
-      />
-    );
-  }
-
-  public renderNoImage(): JSX.Element {
-    const { conversationType, noteToSelf, size, title } = this.props;
-
-    const initials = getInitials(title);
-    const isGroup = conversationType === 'group';
-
-    if (noteToSelf) {
-      return (
-        <div
-          className={classNames(
-            'module-avatar__icon',
-            'module-avatar__icon--note-to-self',
-            `module-avatar__icon--${size}`
-          )}
-        />
-      );
-    }
-
-    if (!isGroup && initials) {
-      return (
-        <div
-          className={classNames(
-            'module-avatar__label',
-            `module-avatar__label--${size}`
-          )}
-        >
-          {initials}
-        </div>
-      );
-    }
-
-    return (
-      <div
-        className={classNames(
-          'module-avatar__icon',
-          `module-avatar__icon--${conversationType}`,
-          `module-avatar__icon--${size}`
-        )}
-      />
-    );
-  }
-
-  public renderLoading(): JSX.Element {
-    const { size } = this.props;
     const svgSize = size < 40 ? 'small' : 'normal';
-
+    contents = (
-    return (
+      <div className="module-Avatar__spinner-container">
-      <div className="module-avatar__spinner-container">
         <Spinner
           size={`${size - 8}px`}
           svgSize={svgSize}
@@ -152,58 +82,72 @@ export class Avatar extends React.Component<Props, State> {
         />
       </div>
     );
-  }
+  } else if (hasImage) {
-
+    contents = (
-  public render(): JSX.Element {
+      <img
-    const {
+        onError={() => {
-      avatarPath,
+          log.warn('Avatar: Image failed to load; failing over to placeholder');
-      color,
+          setImageBroken(true);
-      innerRef,
+        }}
-      loading,
+        alt={i18n('contactAvatarAlt', [title])}
-      noteToSelf,
+        src={avatarPath}
-      onClick,
+      />
-      size,
+    );
-      className,
+  } else if (noteToSelf) {
-    } = this.props;
+    contents = (
-    const { imageBroken } = this.state;
-
-    const hasImage = !noteToSelf && avatarPath && !imageBroken;
-
-    if (![28, 32, 52, 80, 96, 112].includes(size)) {
-      throw new Error(`Size ${size} is not supported!`);
-    }
-
-    let contents;
-
-    if (loading) {
-      contents = this.renderLoading();
-    } else if (onClick) {
-      contents = (
-        <button
-          type="button"
-          className="module-avatar-button"
-          onClick={onClick}
-        >
-          {hasImage ? this.renderImage() : this.renderNoImage()}
-        </button>
-      );
-    } else {
-      contents = hasImage ? this.renderImage() : this.renderNoImage();
-    }
-
-    return (
       <div
         className={classNames(
-          'module-avatar',
+          'module-Avatar__icon',
-          `module-avatar--${size}`,
+          'module-Avatar__icon--note-to-self'
-          hasImage ? 'module-avatar--with-image' : 'module-avatar--no-image',
-          !hasImage ? `module-avatar--${color}` : null,
-          className
         )}
-        ref={innerRef}
+      />
+    );
+  } else if (shouldUseInitials) {
+    contents = (
+      <div
+        className="module-Avatar__label"
+        style={{ fontSize: Math.ceil(size * 0.5) }}
       >
-        {contents}
+        {initials}
       </div>
     );
+  } else {
+    contents = (
+      <div
+        className={classNames(
+          'module-Avatar__icon',
+          `module-Avatar__icon--${conversationType}`
+        )}
+      />
+    );
   }
-}
+
+  if (onClick) {
+    contents = (
+      <button className="module-Avatar__button" type="button" onClick={onClick}>
+        {contents}
+      </button>
+    );
+  }
+
+  return (
+    <div
+      className={classNames(
+        'module-Avatar',
+        hasImage ? 'module-Avatar--with-image' : 'module-Avatar--no-image',
+        {
+          [`module-Avatar--${color}`]: !hasImage,
+        },
+        className
+      )}
+      style={{
+        minWidth: size,
+        width: size,
+        height: size,
+      }}
+      ref={innerRef}
+    >
+      {contents}
+    </div>
+  );
+};