Skip to content

Commit 8db2337

Browse files
Yosevu Kilonzopfultonbernhard-adobe
authored
refactor(avatar)!: use spectrum tokens (#1565)
BREAKING CHANGE: migrates Avatar to new tokens system Co-authored-by: Patrick Fulton <pfulton@adobe.com> Co-authored-by: Bernhard Schmidt <bschmidt@adobe.com>
1 parent 1de360b commit 8db2337

File tree

10 files changed

+176
-103
lines changed

10 files changed

+176
-103
lines changed

‎components/avatar/gulpfile.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
module.exports = require('@spectrum-css/component-builder');
1+
module.exports = require('@spectrum-css/component-builder-simple');

‎components/avatar/index.css‎

Lines changed: 77 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
Copyright 2019 Adobe. All rights reserved.
2+
Copyright 2023 Adobe. All rights reserved.
33
This file is licensed to you under the Apache License, Version 2.0 (the "License");
44
you may not use this file except in compliance with the License. You may obtain a copy
55
of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -10,107 +10,123 @@ OF ANY KIND, either express or implied. See the License for the specific languag
1010
governing permissions and limitations under the License.
1111
*/
1212

13-
@import "../vars/css/components/spectrum-avatar.css";
13+
.spectrum-Avatar {
14+
--spectrum-avatar-color-opacity: 1;
15+
16+
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-100);
17+
--spectrum-avatar-block-size: var(--spectrum-avatar-size-100);
18+
19+
--spectrum-avatar-border-radius: var(--spectrum-avatar-block-size);
20+
21+
--spectrum-avatar-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
22+
--spectrum-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
23+
--spectrum-avatar-focus-indicator-color: var(--spectrum-focus-indicator-color);
24+
25+
--spectrum-avatar-color-opacity-disabled: var(--spectrum-avatar-opacity-disabled);
26+
}
1427

1528
.spectrum-Avatar--size50 {
16-
@remapvars {
17-
find: /--spectrum-avatar-size-50(.*)/;
18-
filter: color;
19-
replace: --spectrum-avatar$1;
20-
}
29+
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-50);
30+
--spectrum-avatar-block-size: var(--spectrum-avatar-size-50)
2131
}
2232

2333
.spectrum-Avatar--size75 {
24-
@remapvars {
25-
find: /--spectrum-avatar-size-75(.*)/;
26-
filter: color;
27-
replace: --spectrum-avatar$1;
28-
}
34+
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-75);
35+
--spectrum-avatar-block-size: var(--spectrum-avatar-size-75)
2936
}
3037

3138
.spectrum-Avatar--size100 {
32-
@remapvars {
33-
find: /--spectrum-avatar-size-100(.*)/;
34-
filter: color;
35-
replace: --spectrum-avatar$1;
36-
}
39+
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-100);
40+
--spectrum-avatar-block-size: var(--spectrum-avatar-size-100)
3741
}
3842

3943
.spectrum-Avatar--size200 {
40-
@remapvars {
41-
find: /--spectrum-avatar-size-200(.*)/;
42-
filter: color;
43-
replace: --spectrum-avatar$1;
44-
}
44+
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-200);
45+
--spectrum-avatar-block-size: var(--spectrum-avatar-size-200)
4546
}
4647

4748
.spectrum-Avatar--size300 {
48-
@remapvars {
49-
find: /--spectrum-avatar-size-300(.*)/;
50-
filter: color;
51-
replace: --spectrum-avatar$1;
52-
}
49+
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-300);
50+
--spectrum-avatar-block-size: var(--spectrum-avatar-size-300)
5351
}
5452

5553
.spectrum-Avatar--size400 {
56-
@remapvars {
57-
find: /--spectrum-avatar-size-400(.*)/;
58-
filter: color;
59-
replace: --spectrum-avatar$1;
60-
}
54+
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-400);
55+
--spectrum-avatar-block-size: var(--spectrum-avatar-size-400)
6156
}
6257

6358
.spectrum-Avatar--size500 {
64-
@remapvars {
65-
find: /--spectrum-avatar-size-500(.*)/;
66-
filter: color;
67-
replace: --spectrum-avatar$1;
68-
}
59+
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-500);
60+
--spectrum-avatar-block-size: var(--spectrum-avatar-size-500)
6961
}
7062

7163
.spectrum-Avatar--size600 {
72-
@remapvars {
73-
find: /--spectrum-avatar-size-600(.*)/;
74-
filter: color;
75-
replace: --spectrum-avatar$1;
76-
}
64+
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-600);
65+
--spectrum-avatar-block-size: var(--spectrum-avatar-size-600)
7766
}
7867

7968
.spectrum-Avatar--size700 {
80-
@remapvars {
81-
find: /--spectrum-avatar-size-700(.*)/;
82-
filter: color;
83-
replace: --spectrum-avatar$1;
69+
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-700);
70+
--spectrum-avatar-block-size: var(--spectrum-avatar-size-700)
71+
}
72+
73+
@media (forced-colors: active) {
74+
.spectrum-Avatar {
75+
--highcontrast-avatar-color-opacity-disabled: 1;
76+
--highcontrast-avatar-focus-indicator-color: CanvasText;
8477
}
8578
}
8679

8780
.spectrum-Avatar {
8881
display: inline-block;
8982
position: relative;
90-
inline-size: var(--spectrum-avatar-width);
91-
block-size: var(--spectrum-avatar-height);
83+
inline-size: var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size));
84+
block-size: var(--mod-avatar-block-size, var(--spectrum-avatar-block-size));
9285

93-
border-radius: var(--spectrum-avatar-border-radius);
86+
border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius));
9487
border-width: 0;
9588

89+
outline: none;
90+
9691
-webkit-user-drag: none;
9792
user-select: none;
98-
overflow: hidden;
9993

100-
&:after {
101-
content: '';
94+
overflow: visible;
95+
96+
opacity: var(--mod-avatar-color-opacity, var(--spectrum-avatar-color-opacity));
97+
98+
&.is-disabled {
99+
opacity: var(--highcontrast-avatar-color-opacity-disabled, var(--mod-avatar-color-opacity-disabled, var(--spectrum-avatar-color-opacity-disabled)));
100+
}
101+
}
102+
103+
.spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible {
104+
&::after {
105+
pointer-events: none;
106+
content: "";
102107
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);
108+
inset-block-start: calc((var(--mod-avatar-focus-indicator-gap, var(--spectrum-avatar-focus-indicator-gap)) + var(--mod-avatar-focus-indicator-thickness, var(--spectrum-avatar-focus-indicator-thickness))) * -1);
109+
inset-inline-start: calc((var(--mod-avatar-focus-indicator-gap, var(--spectrum-avatar-focus-indicator-gap)) + var(--mod-avatar-focus-indicator-thickness, var(--spectrum-avatar-focus-indicator-thickness))) * -1);
110+
111+
inline-size: calc(var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)) + (var(--mod-avatar-focus-indicator-gap, var(--spectrum-avatar-focus-indicator-gap)) * 2));
112+
block-size: calc(var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)) + (var(--mod-avatar-focus-indicator-gap, var(--spectrum-avatar-focus-indicator-gap)) * 2));
113+
109114
border-style: solid;
110-
border-radius: var(--spectrum-avatar-border-radius);
115+
border-width: var(--mod-avatar-focus-indicator-thickness, var(--spectrum-avatar-focus-indicator-thickness));
116+
border-color: var(--highcontrast-avatar-focus-indicator-color, var(--mod-avatar-focus-indicator-color, var(--spectrum-avatar-focus-indicator-color)));
117+
border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius));
111118
}
112119
}
120+
121+
.spectrum-Avatar-link {
122+
outline-color: transparent;
123+
outline-style: solid;
124+
outline: none;
125+
}
126+
113127
.spectrum-Avatar-image {
114-
inline-size: var(--spectrum-avatar-width);
115-
block-size: var(--spectrum-avatar-height);
128+
inline-size: var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size));
129+
block-size: var(--mod-avatar-block-size, var(--spectrum-avatar-block-size));
130+
131+
border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius));
116132
}

‎components/avatar/metadata/avatar.yml‎

Lines changed: 72 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
name: Avatar
22
status: Verified
3-
description: An image representing a user.
3+
description: |
4+
An image representing a user.
5+
6+
An avatar image is wrapped in a link that uses the `.spectrum-Avatar-link`
7+
class by default, however, an avatar may also be used without a link.
48
SpectrumSiteSlug: https://spectrum.adobe.com/page/avatar/
59
sections:
610
- name: Migration Guide
@@ -21,75 +25,126 @@ examples:
2125
<div class="spectrum-Examples-item">
2226
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">50</h4>
2327
<div class="spectrum-Avatar spectrum-Avatar--size50">
24-
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
28+
<a href="#" class="spectrum-Avatar-link">
29+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
30+
</a>
2531
</div>
2632
<div class="spectrum-Avatar spectrum-Avatar--size50 is-disabled"">
27-
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
33+
<a href="#" class="spectrum-Avatar-link">
34+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
35+
</a>
2836
</div>
2937
</div>
3038
<div class="spectrum-Examples-item">
3139
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">75</h4>
3240
<div class="spectrum-Avatar spectrum-Avatar--size75">
33-
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
41+
<a href="#" class="spectrum-Avatar-link">
42+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
43+
</a>
3444
</div>
3545
<div class="spectrum-Avatar spectrum-Avatar--size75 is-disabled"">
36-
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
46+
<a href="#" class="spectrum-Avatar-link">
47+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
48+
</a>
3749
</div>
3850
</div>
3951
<div class="spectrum-Examples-item">
4052
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">100 (default)</h4>
4153
<div class="spectrum-Avatar spectrum-Avatar--size100">
42-
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
54+
<a href="#" class="spectrum-Avatar-link">
55+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
56+
</a>
4357
</div>
4458
<div class="spectrum-Avatar spectrum-Avatar--size100 is-disabled"">
45-
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
59+
<a href="#" class="spectrum-Avatar-link">
60+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
61+
</a>
4662
</div>
4763
</div>
4864
<div class="spectrum-Examples-item">
4965
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">200</h4>
5066
<div class="spectrum-Avatar spectrum-Avatar--size200">
51-
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
67+
<a href="#" class="spectrum-Avatar-link">
68+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
69+
</a>
5270
</div>
5371
<div class="spectrum-Avatar spectrum-Avatar--size200 is-disabled"">
54-
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
72+
<a href="#" class="spectrum-Avatar-link">
73+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
74+
</a>
5575
</div>
5676
</div>
5777
<div class="spectrum-Examples-item">
5878
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">300</h4>
5979
<div class="spectrum-Avatar spectrum-Avatar--size300">
60-
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
80+
<a href="#" class="spectrum-Avatar-link">
81+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
82+
</a>
6183
</div>
6284
<div class="spectrum-Avatar spectrum-Avatar--size300 is-disabled"">
63-
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
85+
<a href="#" class="spectrum-Avatar-link">
86+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
87+
</a>
6488
</div>
6589
</div>
6690
<div class="spectrum-Examples-item">
6791
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">400</h4>
6892
<div class="spectrum-Avatar spectrum-Avatar--size400">
69-
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
93+
<a href="#" class="spectrum-Avatar-link">
94+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
95+
</a>
7096
</div>
7197
<div class="spectrum-Avatar spectrum-Avatar--size400 is-disabled"">
72-
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
98+
<a href="#" class="spectrum-Avatar-link">
99+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
100+
</a>
73101
</div>
74102
</div>
75103
<div class="spectrum-Examples-item">
76104
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">500</h4>
77105
<div class="spectrum-Avatar spectrum-Avatar--size500">
78-
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
106+
<a href="#" class="spectrum-Avatar-link">
107+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
108+
</a>
79109
</div>
80110
<div class="spectrum-Avatar spectrum-Avatar--size500 is-disabled"">
81-
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
111+
<a href="#" class="spectrum-Avatar-link">
112+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
113+
</a>
82114
</div>
83115
</div>
84116
<div class="spectrum-Examples-item">
85117
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">600</h4>
86118
<div class="spectrum-Avatar spectrum-Avatar--size600">
87-
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
119+
<a href="#" class="spectrum-Avatar-link">
120+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
121+
</a>
88122
</div>
89123
<div class="spectrum-Avatar spectrum-Avatar--size600 is-disabled"">
90-
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
124+
<a href="#" class="spectrum-Avatar-link">
125+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
126+
</a>
91127
</div>
92128
</div>
129+
<div class="spectrum-Examples-item">
130+
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">700</h4>
131+
<div class="spectrum-Avatar spectrum-Avatar--size700">
132+
<a href="#" class="spectrum-Avatar-link">
133+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
134+
</a>
135+
</div>
136+
<div class="spectrum-Avatar spectrum-Avatar--size700 is-disabled"">
137+
<a href="#" class="spectrum-Avatar-link">
138+
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
139+
</a>
140+
</div>
141+
</div>
142+
</div>
143+
144+
- id: avatar-no-link
145+
name: No Link
146+
markup: |
147+
<div class="spectrum-Examples spectrum-Examples--vertical">
93148
<div class="spectrum-Examples-item">
94149
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">700</h4>
95150
<div class="spectrum-Avatar spectrum-Avatar--size700">

‎components/avatar/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@spectrum-css/avatar",
3-
"version": "5.0.27",
3+
"version": "6.0.0-beta.1",
44
"description": "The Spectrum CSS avatar component",
55
"license": "Apache-2.0",
66
"homepage": "https://opensource.adobe.com/spectrum-css/",
@@ -17,11 +17,11 @@
1717
"build": "gulp"
1818
},
1919
"peerDependencies": {
20-
"@spectrum-css/vars": "^8.0.0"
20+
"@spectrum-css/tokens": "^7.0.0"
2121
},
2222
"devDependencies": {
23-
"@spectrum-css/component-builder": "^4.0.1",
24-
"@spectrum-css/vars": "^8.0.3",
23+
"@spectrum-css/component-builder-simple": "^2.0.0",
24+
"@spectrum-css/tokens": "^7.0.0",
2525
"gulp": "^4.0.0"
2626
},
2727
"publishConfig": {

‎components/avatar/stories/template.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ export const Template = ({
1616
try {
1717
// Load styles for this component
1818
import(/* webpackPrefetch: true */ "../index.css");
19-
import(/* webpackPrefetch: true */ "../skin.css");
2019
} catch (e) {
2120
console.warn(e);
2221
}

0 commit comments

Comments
 (0)