Creating Avatars

In today’s Zoom session, I streamed the design and creation process for creating a new Avatar component for G2. This Avatar goes beyond air-bending an image in a circle. Earlier on in the session (but also throughout), we detailed some flexible, intelligent, and DX (designer/developer experience) features, including:

• Name to initial rendering (e.g. Eileen V. to EV)
• A range of default (preferred) sizes, which can be customized
• A set of shape variations (e.g. Circle or Rounded Square)
• The ability to render a “status dot” in the top corner
• Tooltip that appears to display the full user name
• An AvatarGroup that will stack and layer Avatars within

A screenshot with a collection of Avatar components from Storybook.

Thanks to G2’s core systems and the existing component set, in a short amount of time, we were able to prototype an Avatar component that could accommodate a wide range of use-cases (noted above):

The next step is to refactor the prototype code to create the Avatar component for real!

Zoom Session

Here is an upload of today’s Zoom session. A huge thanks to Eileen for collaborating and pairing the entire time!

Update

The Avatar component has been recoded and released! Here are the docs for the new Avatar component.