Skip to content

Commit f54b645

Browse files
GarthDBGarthDB
committed
fix!: avatar needs a div wrapper for to support express border overlay
BREAKING CHANGE: for express to support the transparent border overlay, the avatar needs to be wrapped in a div to support pseudo elements.
1 parent 2b492d8 commit f54b645

File tree

5 files changed

+153
-40
lines changed

5 files changed

+153
-40
lines changed

‎components/avatar/index.css‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,13 +85,32 @@ governing permissions and limitations under the License.
8585
}
8686

8787
.spectrum-Avatar {
88+
display: inline-block;
89+
position: relative;
8890
inline-size: var(--spectrum-avatar-width);
8991
block-size: var(--spectrum-avatar-height);
9092

9193
border-radius: var(--spectrum-avatar-border-radius);
92-
border-width: var(--spectrum-avatar-border-size);
93-
border-style: solid;
94+
border-width: 0;
9495

9596
-webkit-user-drag: none;
9697
user-select: none;
98+
overflow: hidden;
99+
100+
&:after {
101+
content: '';
102+
position: absolute;
103+
inset-block-start: 0;
104+
inset-block-end: 0;
105+
inset-inline-start: 0;
106+
inset-inline-end: 0;
107+
box-sizing: border-box;
108+
border-width: var(--spectrum-avatar-border-size);
109+
border-style: solid;
110+
border-radius: var(--spectrum-avatar-border-radius);
111+
}
112+
}
113+
.spectrum-Avatar-image {
114+
inline-size: var(--spectrum-avatar-width);
115+
block-size: var(--spectrum-avatar-height);
97116
}

‎components/avatar/metadata/avatar.yml‎

Lines changed: 60 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/avatar/
55
sections:
66
- name: Migration Guide
77
description: |
8+
### A div wrapper is required for avatar
9+
```
10+
<div class="spectrum-Avatar spectrum-Avatar--size50">
11+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
12+
</div>
13+
```
814
### Sizes added to `avatar`.
915
A second class has to be added to `spectrum-Avatar` to declare which size to use. The available size classes are: `spectrum-Avatar--size50`, `spectrum-Avatar--size75`, `spectrum-Avatar--size100`, `spectrum-Avatar--size200`, `spectrum-Avatar--size300`, `spectrum-Avatar--size400`, `spectrum-Avatar--size500`, `spectrum-Avatar--size600`, and `spectrum-Avatar--size700`.
1016
examples:
@@ -14,47 +20,83 @@ examples:
1420
<div class="spectrum-Examples spectrum-Examples--vertical">
1521
<div class="spectrum-Examples-item">
1622
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">50</h4>
17-
<img class="spectrum-Avatar spectrum-Avatar--size50" src="img/example-ava.jpg" alt="Avatar">
18-
<img class="spectrum-Avatar spectrum-Avatar--size50 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
23+
<div class="spectrum-Avatar spectrum-Avatar--size50">
24+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
25+
</div>
26+
<div class="spectrum-Avatar spectrum-Avatar--size50 is-disabled"">
27+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
28+
</div>
1929
</div>
2030
<div class="spectrum-Examples-item">
2131
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">75</h4>
22-
<img class="spectrum-Avatar spectrum-Avatar--size75" src="img/example-ava.jpg" alt="Avatar">
23-
<img class="spectrum-Avatar spectrum-Avatar--size75 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
32+
<div class="spectrum-Avatar spectrum-Avatar--size75">
33+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
34+
</div>
35+
<div class="spectrum-Avatar spectrum-Avatar--size75 is-disabled"">
36+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
37+
</div>
2438
</div>
2539
<div class="spectrum-Examples-item">
2640
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">100 (default)</h4>
27-
<img class="spectrum-Avatar spectrum-Avatar--size100" src="img/example-ava.jpg" alt="Avatar">
28-
<img class="spectrum-Avatar spectrum-Avatar--size100 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
41+
<div class="spectrum-Avatar spectrum-Avatar--size100">
42+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
43+
</div>
44+
<div class="spectrum-Avatar spectrum-Avatar--size100 is-disabled"">
45+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
46+
</div>
2947
</div>
3048
<div class="spectrum-Examples-item">
3149
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">200</h4>
32-
<img class="spectrum-Avatar spectrum-Avatar--size200" src="img/example-ava.jpg" alt="Avatar">
33-
<img class="spectrum-Avatar spectrum-Avatar--size200 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
50+
<div class="spectrum-Avatar spectrum-Avatar--size200">
51+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
52+
</div>
53+
<div class="spectrum-Avatar spectrum-Avatar--size200 is-disabled"">
54+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
55+
</div>
3456
</div>
3557
<div class="spectrum-Examples-item">
3658
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">300</h4>
37-
<img class="spectrum-Avatar spectrum-Avatar--size300" src="img/example-ava.jpg" alt="Avatar">
38-
<img class="spectrum-Avatar spectrum-Avatar--size300 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
59+
<div class="spectrum-Avatar spectrum-Avatar--size300">
60+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
61+
</div>
62+
<div class="spectrum-Avatar spectrum-Avatar--size300 is-disabled"">
63+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
64+
</div>
3965
</div>
4066
<div class="spectrum-Examples-item">
4167
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">400</h4>
42-
<img class="spectrum-Avatar spectrum-Avatar--size400" src="img/example-ava.jpg" alt="Avatar">
43-
<img class="spectrum-Avatar spectrum-Avatar--size400 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
68+
<div class="spectrum-Avatar spectrum-Avatar--size400">
69+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
70+
</div>
71+
<div class="spectrum-Avatar spectrum-Avatar--size400 is-disabled"">
72+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
73+
</div>
4474
</div>
4575
<div class="spectrum-Examples-item">
4676
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">500</h4>
47-
<img class="spectrum-Avatar spectrum-Avatar--size500" src="img/example-ava.jpg" alt="Avatar">
48-
<img class="spectrum-Avatar spectrum-Avatar--size500 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
77+
<div class="spectrum-Avatar spectrum-Avatar--size500">
78+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
79+
</div>
80+
<div class="spectrum-Avatar spectrum-Avatar--size500 is-disabled"">
81+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
82+
</div>
4983
</div>
5084
<div class="spectrum-Examples-item">
5185
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">600</h4>
52-
<img class="spectrum-Avatar spectrum-Avatar--size600" src="img/example-ava.jpg" alt="Avatar">
53-
<img class="spectrum-Avatar spectrum-Avatar--size600 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
86+
<div class="spectrum-Avatar spectrum-Avatar--size600">
87+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
88+
</div>
89+
<div class="spectrum-Avatar spectrum-Avatar--size600 is-disabled"">
90+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
91+
</div>
5492
</div>
5593
<div class="spectrum-Examples-item">
5694
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">700</h4>
57-
<img class="spectrum-Avatar spectrum-Avatar--size700" src="img/example-ava.jpg" alt="Avatar">
58-
<img class="spectrum-Avatar spectrum-Avatar--size700 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
95+
<div class="spectrum-Avatar spectrum-Avatar--size700">
96+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
97+
</div>
98+
<div class="spectrum-Avatar spectrum-Avatar--size700 is-disabled"">
99+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
100+
</div>
59101
</div>
60102
</div>

‎components/avatar/skin.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ governing permissions and limitations under the License.
1313
.spectrum-Avatar {
1414
opacity: var(--spectrum-avatar-size-100-opacity);
1515

16-
border-color: var(--spectrum-avatar-size-100-border-color);
16+
&:after {
17+
border-color: var(--spectrum-avatar-size-100-border-color);
18+
}
1719

1820
&.is-disabled {
1921
opacity: var(--spectrum-avatar-size-100-opacity-disabled);

‎components/tag/metadata/tag.yml‎

Lines changed: 45 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@ SpectrumSiteSlug: https://spectrum.adobe.com/page/tag/
55
sections:
66
- name: Migration Guide
77
description: |
8+
### A div wrapper is required for avatar
9+
```
10+
<div class="spectrum-Avatar spectrum-Avatar--size50 spectrum-Tag-avatar">
11+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
12+
</div>
13+
```
814
### Change avatar icon size to small
915
If you use avatar icon along with tag, please replace `.spectrum-Icon--sizeXS` with `.spectrum-Icon--sizeS`.
1016
examples:
@@ -20,7 +26,9 @@ examples:
2026
</div>
2127
2228
<div class="spectrum-Tag spectrum-Tag--sizeS" tabindex="0">
23-
<img class="spectrum-Avatar spectrum-Avatar--size50 spectrum-Tag-avatar" src="img/example-ava.jpg" alt="Avatar">
29+
<div class="spectrum-Avatar spectrum-Avatar--size50 spectrum-Tag-avatar">
30+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
31+
</div>
2432
<span class="spectrum-Tag-label">Shantanu</span>
2533
</div>
2634
@@ -40,7 +48,9 @@ examples:
4048
</div>
4149
4250
<div class="spectrum-Tag spectrum-Tag--sizeS is-selected" tabindex="0">
43-
<img class="spectrum-Avatar spectrum-Avatar--size50 spectrum-Tag-avatar" src="img/example-ava.jpg" alt="Avatar">
51+
<div class="spectrum-Avatar spectrum-Avatar--size50 spectrum-Tag-avatar">
52+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
53+
</div>
4454
<span class="spectrum-Tag-label">Shantanu</span>
4555
</div>
4656
@@ -60,7 +70,9 @@ examples:
6070
</div>
6171
6272
<div class="spectrum-Tag spectrum-Tag--sizeS is-invalid" tabindex="0">
63-
<img class="spectrum-Avatar spectrum-Avatar--size50 spectrum-Tag-avatar" src="img/example-ava.jpg" alt="Avatar">
73+
<div class="spectrum-Avatar spectrum-Avatar--size50 spectrum-Tag-avatar">
74+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
75+
</div>
6476
<span class="spectrum-Tag-label">Shantanu</span>
6577
</div>
6678
@@ -80,7 +92,9 @@ examples:
8092
</div>
8193
8294
<div class="spectrum-Tag spectrum-Tag--sizeS is-disabled" tabindex="-1">
83-
<img class="spectrum-Avatar spectrum-Avatar--size50 spectrum-Tag-avatar" src="img/example-ava.jpg" alt="Avatar">
95+
<div class="spectrum-Avatar spectrum-Avatar--size50 spectrum-Tag-avatar">
96+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
97+
</div>
8498
<span class="spectrum-Tag-label">Shantanu</span>
8599
</div>
86100
@@ -100,7 +114,9 @@ examples:
100114
</div>
101115
102116
<div class="spectrum-Tag spectrum-Tag--sizeS is-selected is-invalid" tabindex="0">
103-
<img class="spectrum-Avatar spectrum-Avatar--size50 spectrum-Tag-avatar" src="img/example-ava.jpg" alt="Avatar">
117+
<div class="spectrum-Avatar spectrum-Avatar--size50 spectrum-Tag-avatar">
118+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
119+
</div>
104120
<span class="spectrum-Tag-label">Shantanu</span>
105121
</div>
106122
@@ -125,7 +141,9 @@ examples:
125141
</div>
126142
127143
<div class="spectrum-Tag spectrum-Tag--sizeS" tabindex="0">
128-
<img class="spectrum-Avatar spectrum-Avatar--size50 spectrum-Tag-avatar" src="img/example-ava.jpg" alt="Avatar">
144+
<div class="spectrum-Avatar spectrum-Avatar--size50 spectrum-Tag-avatar">
145+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
146+
</div>
129147
<span class="spectrum-Tag-label">Shantanu</span>
130148
</div>
131149
@@ -154,7 +172,9 @@ examples:
154172
</div>
155173
156174
<div class="spectrum-Tag spectrum-Tag--sizeM" tabindex="0">
157-
<img class="spectrum-Avatar spectrum-Avatar--size100 spectrum-Tag-avatar" src="img/example-ava.jpg" alt="Avatar">
175+
<div class="spectrum-Avatar spectrum-Avatar--size100 spectrum-Tag-avatar">
176+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
177+
</div>
158178
<span class="spectrum-Tag-label">Shantanu</span>
159179
</div>
160180
@@ -183,7 +203,9 @@ examples:
183203
</div>
184204
185205
<div class="spectrum-Tag spectrum-Tag--sizeL" tabindex="0">
186-
<img class="spectrum-Avatar spectrum-Avatar--size100 spectrum-Tag-avatar" src="img/example-ava.jpg" alt="Avatar">
206+
<div class="spectrum-Avatar spectrum-Avatar--size100 spectrum-Tag-avatar">
207+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
208+
</div>
187209
<span class="spectrum-Tag-label">Shantanu</span>
188210
</div>
189211
@@ -222,7 +244,9 @@ examples:
222244
</div>
223245
224246
<div class="spectrum-Tag spectrum-Tag--sizeS" tabindex="0">
225-
<img class="spectrum-Avatar spectrum-Avatar--size50 spectrum-Tag-avatar" src="img/example-ava.jpg" alt="Avatar">
247+
<div class="spectrum-Avatar spectrum-Avatar--size50 spectrum-Tag-avatar">
248+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
249+
</div>
226250
<span class="spectrum-Tag-label">Shantanu</span>
227251
<button class="spectrum-ClearButton spectrum-ClearButton--small spectrum-Tag-clearButton" aria-label="Remove tag 1" tabindex="-1">
228252
<svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
@@ -257,7 +281,9 @@ examples:
257281
</div>
258282
259283
<div class="spectrum-Tag spectrum-Tag--sizeS is-selected" tabindex="0">
260-
<img class="spectrum-Avatar spectrum-Avatar--size50 spectrum-Tag-avatar" src="img/example-ava.jpg" alt="Avatar">
284+
<div class="spectrum-Avatar spectrum-Avatar--size50 spectrum-Tag-avatar">
285+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
286+
</div>
261287
<span class="spectrum-Tag-label">Shantanu</span>
262288
<button class="spectrum-ClearButton spectrum-ClearButton--small spectrum-Tag-clearButton" aria-label="Remove tag 1" tabindex="-1">
263289
<svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
@@ -292,7 +318,9 @@ examples:
292318
</div>
293319
294320
<div class="spectrum-Tag spectrum-Tag--sizeS is-invalid" tabindex="0">
295-
<img class="spectrum-Avatar spectrum-Avatar--size50 spectrum-Tag-avatar" src="img/example-ava.jpg" alt="Avatar">
321+
<div class="spectrum-Avatar spectrum-Avatar--size50 spectrum-Tag-avatar">
322+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
323+
</div>
296324
<span class="spectrum-Tag-label">Shantanu</span>
297325
<button class="spectrum-ClearButton spectrum-ClearButton--small spectrum-Tag-clearButton" aria-label="Remove tag 1" tabindex="-1">
298326
<svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
@@ -327,7 +355,9 @@ examples:
327355
</div>
328356
329357
<div class="spectrum-Tag spectrum-Tag--sizeS is-disabled" tabindex="-1">
330-
<img class="spectrum-Avatar spectrum-Avatar--size50 spectrum-Tag-avatar" src="img/example-ava.jpg" alt="Avatar">
358+
<div class="spectrum-Avatar spectrum-Avatar--size50 spectrum-Tag-avatar">
359+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
360+
</div>
331361
<span class="spectrum-Tag-label">Shantanu</span>
332362
<button class="spectrum-ClearButton spectrum-ClearButton--small spectrum-Tag-clearButton" aria-label="Remove tag 1" tabindex="-1">
333363
<svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
@@ -361,7 +391,9 @@ examples:
361391
</div>
362392
363393
<div class="spectrum-Tag spectrum-Tag--sizeS is-selected is-invalid" tabindex="0">
364-
<img class="spectrum-Avatar spectrum-Avatar--size50 spectrum-Tag-avatar" src="img/example-ava.jpg" alt="Avatar">
394+
<div class="spectrum-Avatar spectrum-Avatar--size50 spectrum-Tag-avatar">
395+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
396+
</div>
365397
<span class="spectrum-Tag-label">Shantanu</span>
366398
<button class="spectrum-ClearButton spectrum-ClearButton--small spectrum-Tag-clearButton" aria-label="Remove tag 1" tabindex="-1">
367399
<svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">

0 commit comments

Comments
 (0)