Update avatars (#42456)

* Use image dimensions, update for labels on avatar status

* More bulletproof

* update

diff --git a/scss/_avatar.scss b/scss/_avatar.scss
index b097e9ce827cc76c6f3e155bd3b6a74c2e8bb8c2..14326aced156d8e63ec09545344cd1ae66d47abd 100644 (file)
--- a/scss/_avatar.scss
+++ b/scss/_avatar.scss
@@ -44,10 +44,12 @@ $avatar-sizes: defaults(
     "lg": (
       size: 3rem,
       status-size: 1rem,
+      border-width: 3px,
     ),
     "xl": (
       size: 4rem,
       status-size: 1.25rem,
+      border-width: 4px,
     ),
   ),
   $avatar-sizes
@@ -72,6 +74,12 @@ $avatar-sizes: defaults(
     vertical-align: middle;
     background-color: var(--theme-bg, var(--avatar-bg));
     @include border-radius(var(--avatar-border-radius));
+
+    > .avatar-img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
   }
 
   .avatar-subtle {
@@ -80,10 +88,7 @@ $avatar-sizes: defaults(
   }
 
   .avatar-img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    @include border-radius(inherit);
+    @include border-radius(var(--avatar-border-radius, 50%));
   }
 
   .avatar-status {
@@ -139,12 +144,16 @@ $avatar-sizes: defaults(
 
   @each $size, $tokens in $avatar-sizes {
     .avatar-#{$size},
-    .avatar-stack-#{$size} {
+    .avatar-stack-#{$size} > .avatar {
       --avatar-size: #{map.get($tokens, size)};
 
       @if map.has-key($tokens, status-size) {
         --avatar-status-size: #{map.get($tokens, status-size)};
       }
+
+      @if map.has-key($tokens, border-width) {
+        --avatar-border-width: #{map.get($tokens, border-width)};
+      }
     }
   }
 }

diff --git a/site/src/content/docs/components/avatar.mdx b/site/src/content/docs/components/avatar.mdx
index 1ac53f977e784b120a616bfc6134819ffdc5ad9d..40df23f82b531cbc10b84d04f68bdf7f1d4fb3ab 100644 (file)
--- a/site/src/content/docs/components/avatar.mdx
+++ b/site/src/content/docs/components/avatar.mdx
@@ -17,6 +17,10 @@ Use `.avatar` with an `.avatar-img` for image-based avatars. The parent `.avatar
     <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
   </span>`} />
 
+When used inside the `.avatar` wrapper, the image fills the wrapper and its size is set with `--avatar-size`. Used on its own, `.avatar-img` honors its own `width` and `height` instead, so set them to your desired size.
+
+<Example code={`<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo" width="50" height="50">`} />
+
 ### Initials
 
 Use text content inside `.avatar` for initials-based avatars.
@@ -63,6 +67,12 @@ Avatars come in multiple sizes: extra small, small, default, large, and extra la
     <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
   </span>`} />
 
+Use a custom size by modifying the `--bs-avatar-size` variable.
+
+<Example code={`<span class="avatar" style="--bs-avatar-size: 8rem;">
+    <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
+  </span>`} />
+
 ## Status indicator
 
 Add a `.avatar-status` element inside the avatar to show a status indicator. Each status has a distinct shape and color:
@@ -72,21 +82,23 @@ Add a `.avatar-status` element inside the avatar to show a status indicator. Eac
 - `.status-busy` — red rounded square
 - `.status-away` — yellow circle
 
+Because the status is conveyed purely through color and shape, give each `.avatar-status` a `role="img"` and an `aria-label` (e.g. `Online`) so assistive technologies can announce it.
+
 <Example code={`<span class="avatar">
     <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
-    <span class="avatar-status status-online"></span>
+    <span class="avatar-status status-online" role="img" aria-label="Online"></span>
   </span>
   <span class="avatar">
     <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
-    <span class="avatar-status status-offline"></span>
+    <span class="avatar-status status-offline" role="img" aria-label="Offline"></span>
   </span>
   <span class="avatar">
     <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
-    <span class="avatar-status status-busy"></span>
+    <span class="avatar-status status-busy" role="img" aria-label="Busy"></span>
   </span>
   <span class="avatar">
     <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
-    <span class="avatar-status status-away"></span>
+    <span class="avatar-status status-away" role="img" aria-label="Away"></span>
   </span>`} />
 
 ### Status with sizes
@@ -95,23 +107,23 @@ The status indicator scales with the avatar size.
 
 <Example code={`<span class="avatar avatar-xs">
     <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
-    <span class="avatar-status status-online"></span>
+    <span class="avatar-status status-online" role="img" aria-label="Online"></span>
   </span>
   <span class="avatar avatar-sm">
     <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
-    <span class="avatar-status status-online"></span>
+    <span class="avatar-status status-online" role="img" aria-label="Online"></span>
   </span>
   <span class="avatar">
     <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
-    <span class="avatar-status status-online"></span>
+    <span class="avatar-status status-online" role="img" aria-label="Online"></span>
   </span>
   <span class="avatar avatar-lg">
     <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
-    <span class="avatar-status status-online"></span>
+    <span class="avatar-status status-online" role="img" aria-label="Online"></span>
   </span>
   <span class="avatar avatar-xl">
     <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
-    <span class="avatar-status status-online"></span>
+    <span class="avatar-status status-online" role="img" aria-label="Online"></span>
   </span>`} />
 
 ## Avatar stack
@@ -212,7 +224,20 @@ Combine with initials to show a count of additional users.
       <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
     </span>
     <span class="avatar">
-      <img class="avatar-img" src="https://i.pravatar.cc/150?img=34" alt="User avatar">
+      <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
+    </span>
+    <span class="avatar theme-secondary">+5</span>
+  </div>`} />
+
+<Example code={`<div class="avatar-stack avatar-stack-xl">
+    <span class="avatar">
+      <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
+    </span>
+    <span class="avatar">
+      <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
+    </span>
+    <span class="avatar">
+      <img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
     </span>
     <span class="avatar theme-secondary">+5</span>
   </div>`} />