Skip to content

Commit ea71b3b

Browse files
mdomdo
authored
Update avatars (twbs#42456)
* Use image dimensions, update for labels on avatar status * More bulletproof * update
1 parent 6ff1601 commit ea71b3b

2 files changed

Lines changed: 49 additions & 15 deletions

File tree

‎scss/_avatar.scss‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,10 +44,12 @@ $avatar-sizes: defaults(
4444
"lg": (
4545
size: 3rem,
4646
status-size: 1rem,
47+
border-width: 3px,
4748
),
4849
"xl": (
4950
size: 4rem,
5051
status-size: 1.25rem,
52+
border-width: 4px,
5153
),
5254
),
5355
$avatar-sizes
@@ -72,6 +74,12 @@ $avatar-sizes: defaults(
7274
vertical-align: middle;
7375
background-color: var(--theme-bg, var(--avatar-bg));
7476
@include border-radius(var(--avatar-border-radius));
77+
78+
> .avatar-img {
79+
width: 100%;
80+
height: 100%;
81+
object-fit: cover;
82+
}
7583
}
7684

7785
.avatar-subtle {
@@ -80,10 +88,7 @@ $avatar-sizes: defaults(
8088
}
8189

8290
.avatar-img {
83-
width: 100%;
84-
height: 100%;
85-
object-fit: cover;
86-
@include border-radius(inherit);
91+
@include border-radius(var(--avatar-border-radius, 50%));
8792
}
8893

8994
.avatar-status {
@@ -139,12 +144,16 @@ $avatar-sizes: defaults(
139144

140145
@each $size, $tokens in $avatar-sizes {
141146
.avatar-#{$size},
142-
.avatar-stack-#{$size} {
147+
.avatar-stack-#{$size} > .avatar {
143148
--avatar-size: #{map.get($tokens, size)};
144149

145150
@if map.has-key($tokens, status-size) {
146151
--avatar-status-size: #{map.get($tokens, status-size)};
147152
}
153+
154+
@if map.has-key($tokens, border-width) {
155+
--avatar-border-width: #{map.get($tokens, border-width)};
156+
}
148157
}
149158
}
150159
}

‎site/src/content/docs/components/avatar.mdx‎

Lines changed: 35 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ Use `.avatar` with an `.avatar-img` for image-based avatars. The parent `.avatar
1717
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
1818
</span>`} />
1919

20+
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.
21+
22+
<Example code={`<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo" width="50" height="50">`} />
23+
2024
### Initials
2125

2226
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
6367
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
6468
</span>`} />
6569

70+
Use a custom size by modifying the `--bs-avatar-size` variable.
71+
72+
<Example code={`<span class="avatar" style="--bs-avatar-size: 8rem;">
73+
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
74+
</span>`} />
75+
6676
## Status indicator
6777

6878
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
7282
- `.status-busy` — red rounded square
7383
- `.status-away` — yellow circle
7484

85+
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.
86+
7587
<Example code={`<span class="avatar">
7688
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
77-
<span class="avatar-status status-online"></span>
89+
<span class="avatar-status status-online" role="img" aria-label="Online"></span>
7890
</span>
7991
<span class="avatar">
8092
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
81-
<span class="avatar-status status-offline"></span>
93+
<span class="avatar-status status-offline" role="img" aria-label="Offline"></span>
8294
</span>
8395
<span class="avatar">
8496
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
85-
<span class="avatar-status status-busy"></span>
97+
<span class="avatar-status status-busy" role="img" aria-label="Busy"></span>
8698
</span>
8799
<span class="avatar">
88100
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
89-
<span class="avatar-status status-away"></span>
101+
<span class="avatar-status status-away" role="img" aria-label="Away"></span>
90102
</span>`} />
91103

92104
### Status with sizes
@@ -95,23 +107,23 @@ The status indicator scales with the avatar size.
95107

96108
<Example code={`<span class="avatar avatar-xs">
97109
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
98-
<span class="avatar-status status-online"></span>
110+
<span class="avatar-status status-online" role="img" aria-label="Online"></span>
99111
</span>
100112
<span class="avatar avatar-sm">
101113
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
102-
<span class="avatar-status status-online"></span>
114+
<span class="avatar-status status-online" role="img" aria-label="Online"></span>
103115
</span>
104116
<span class="avatar">
105117
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
106-
<span class="avatar-status status-online"></span>
118+
<span class="avatar-status status-online" role="img" aria-label="Online"></span>
107119
</span>
108120
<span class="avatar avatar-lg">
109121
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
110-
<span class="avatar-status status-online"></span>
122+
<span class="avatar-status status-online" role="img" aria-label="Online"></span>
111123
</span>
112124
<span class="avatar avatar-xl">
113125
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
114-
<span class="avatar-status status-online"></span>
126+
<span class="avatar-status status-online" role="img" aria-label="Online"></span>
115127
</span>`} />
116128

117129
## Avatar stack
@@ -212,7 +224,20 @@ Combine with initials to show a count of additional users.
212224
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
213225
</span>
214226
<span class="avatar">
215-
<img class="avatar-img" src="https://i.pravatar.cc/150?img=34" alt="User avatar">
227+
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
228+
</span>
229+
<span class="avatar theme-secondary">+5</span>
230+
</div>`} />
231+
232+
<Example code={`<div class="avatar-stack avatar-stack-xl">
233+
<span class="avatar">
234+
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
235+
</span>
236+
<span class="avatar">
237+
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
238+
</span>
239+
<span class="avatar">
240+
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
216241
</span>
217242
<span class="avatar theme-secondary">+5</span>
218243
</div>`} />

0 commit comments

Comments
 (0)