Blue - v1.9.0

AvatarStack + Avatar - Version 2!

This update adds a new version of AvatarStack to Blue - AvatarStackV2. This component can be enabled by adding the version={2} to any AvatarStack. The component was designed with backwards compatibility.

propConnect all the things!

Quite a bit of refactor work was done with Blue's internals, specifically the Animate and AnimateGroup component. The previous React.cloneElement based pattern has been replaced with PropProvider to pass props down. This is a much better pattern as it doesn't force the target child to be a direct child. There can be many components in between because the passing of props operates under React context.

This pattern was also used for AvatarStack passing props down to Avatar.

Avatar enhancements

The Avatar component has been improved to better handle the image load transition. Previously, it was jump between a transparent circle -> image. Now, it shows the specified brand color as the background, and the image is transitioned in (when ready).

Layer stacking / Auto sizing

In addition to some minor UI adjustments for AvatarV2, AvatarStackV2 presents the Avatars slightly differently. The Avatars are layered differently (as seen in the screenshot), and resize based on the number of avatars within the collection.