We would like to report a small breaking change to avatar in Dialtone v7.16.0. This will only affect HTML/CSS implementations of the avatar. Any usage of the DtAvatar Vue component will not be broken by this change.
If you previously had an HTML/CSS avatar showing initials structured like this:
<div class="d-avatar d-avatar--md">
DP
</div>
It now needs to have an additional wrapper div with class d-avatar__canvas and an additional span with class d-avatar__initials wrapping the initials.
<div class="d-avatar d-avatar--md">
<div class="d-avatar__canvas">
<span class="d-avatar__initials">DP</span>
</div>
</div>
If you previously had an HTML/CSS avatar with an icon in it like so:
<div class="d-avatar d-avatar--md">
<dt-icon name="video" size="300" />
</div>
It now needs to have an additional wrapper div with class d-avatar__canvas and an additional span with class d-avatar__icon wrapping the icon.
<div class="d-avatar d-avatar--md">
<div class="d-avatar__canvas">
<span class="d-avatar__icon">
<dt-icon name="video" size="300" />
</span>
</div>
</div>
Ideally just upgrade any elements affected by this to the avatar vue component. If that is not possible then modify the HTML to reflect the above structure. Thanks!