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
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.
G2 Components 