Skip to content

Commit a827601

Browse files
cdransfcdransf
authored
feat(avatar): migrate s2 avatar (#3355)
* chore(s2-avatar): initial commit * chore(s2-avatar): add sizing and border tokens
1 parent f028eef commit a827601

File tree

3 files changed

+114
-65
lines changed

3 files changed

+114
-65
lines changed

‎.changeset/friendly-dolls-raise.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@spectrum-css/avatar": major
3+
---
4+
5+
Adds support for new avatar-size tokens (avatar-size-800 to avatar-size-1500). Updates avatar component story to support new sizes. Adds support for avatar-border-color and avatar-border-thickness.

‎components/avatar/index.css

Lines changed: 108 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -11,121 +11,165 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
.spectrum-Avatar {
14-
--spectrum-avatar-color-opacity: 1;
14+
--spectrum-avatar-color-opacity: 1;
1515

16-
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-100);
17-
--spectrum-avatar-block-size: var(--spectrum-avatar-size-100);
16+
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-100);
17+
--spectrum-avatar-block-size: var(--spectrum-avatar-size-100);
1818

19-
--spectrum-avatar-border-radius: var(--spectrum-avatar-block-size);
19+
--spectrum-avatar-border-radius: var(--spectrum-avatar-block-size);
20+
--spectrum-avatar-border-thickness: var(--spectrum-avatar-border-width);
21+
--spectrum-avatar-border-color-default: var(--spectrum-avatar-border-color);
2022

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);
23+
--spectrum-avatar-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
24+
--spectrum-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
25+
--spectrum-avatar-focus-indicator-color: var(--spectrum-focus-indicator-color);
2426

25-
--spectrum-avatar-color-opacity-disabled: var(--spectrum-avatar-opacity-disabled);
27+
--spectrum-avatar-color-opacity-disabled: var(--spectrum-avatar-opacity-disabled);
2628
}
2729

2830
.spectrum-Avatar--size50 {
29-
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-50);
30-
--spectrum-avatar-block-size: var(--spectrum-avatar-size-50)
31+
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-50);
32+
--spectrum-avatar-block-size: var(--spectrum-avatar-size-50);
3133
}
3234

3335
.spectrum-Avatar--size75 {
34-
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-75);
35-
--spectrum-avatar-block-size: var(--spectrum-avatar-size-75)
36+
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-75);
37+
--spectrum-avatar-block-size: var(--spectrum-avatar-size-75);
3638
}
3739

3840
.spectrum-Avatar--size100 {
39-
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-100);
40-
--spectrum-avatar-block-size: var(--spectrum-avatar-size-100)
41+
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-100);
42+
--spectrum-avatar-block-size: var(--spectrum-avatar-size-100);
4143
}
4244

4345
.spectrum-Avatar--size200 {
44-
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-200);
45-
--spectrum-avatar-block-size: var(--spectrum-avatar-size-200)
46+
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-200);
47+
--spectrum-avatar-block-size: var(--spectrum-avatar-size-200);
4648
}
4749

4850
.spectrum-Avatar--size300 {
49-
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-300);
50-
--spectrum-avatar-block-size: var(--spectrum-avatar-size-300)
51+
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-300);
52+
--spectrum-avatar-block-size: var(--spectrum-avatar-size-300);
5153
}
5254

5355
.spectrum-Avatar--size400 {
54-
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-400);
55-
--spectrum-avatar-block-size: var(--spectrum-avatar-size-400)
56+
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-400);
57+
--spectrum-avatar-block-size: var(--spectrum-avatar-size-400);
5658
}
5759

5860
.spectrum-Avatar--size500 {
59-
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-500);
60-
--spectrum-avatar-block-size: var(--spectrum-avatar-size-500)
61+
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-500);
62+
--spectrum-avatar-block-size: var(--spectrum-avatar-size-500);
6163
}
6264

6365
.spectrum-Avatar--size600 {
64-
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-600);
65-
--spectrum-avatar-block-size: var(--spectrum-avatar-size-600)
66+
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-600);
67+
--spectrum-avatar-block-size: var(--spectrum-avatar-size-600);
6668
}
6769

6870
.spectrum-Avatar--size700 {
69-
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-700);
70-
--spectrum-avatar-block-size: var(--spectrum-avatar-size-700)
71+
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-700);
72+
--spectrum-avatar-block-size: var(--spectrum-avatar-size-700);
73+
}
74+
75+
.spectrum-Avatar--size800 {
76+
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-800);
77+
--spectrum-avatar-block-size: var(--spectrum-avatar-size-800);
78+
}
79+
80+
.spectrum-Avatar--size900 {
81+
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-900);
82+
--spectrum-avatar-block-size: var(--spectrum-avatar-size-900);
83+
}
84+
85+
.spectrum-Avatar--size1000 {
86+
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-1000);
87+
--spectrum-avatar-block-size: var(--spectrum-avatar-size-1000);
88+
}
89+
90+
.spectrum-Avatar--size1100 {
91+
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-1100);
92+
--spectrum-avatar-block-size: var(--spectrum-avatar-size-1100);
93+
}
94+
95+
.spectrum-Avatar--size1200 {
96+
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-1200);
97+
--spectrum-avatar-block-size: var(--spectrum-avatar-size-1200);
98+
}
99+
100+
.spectrum-Avatar--size1300 {
101+
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-1300);
102+
--spectrum-avatar-block-size: var(--spectrum-avatar-size-1300);
103+
}
104+
105+
.spectrum-Avatar--size1400 {
106+
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-1400);
107+
--spectrum-avatar-block-size: var(--spectrum-avatar-size-1400);
108+
}
109+
110+
.spectrum-Avatar--size1500 {
111+
--spectrum-avatar-inline-size: var(--spectrum-avatar-size-1500);
112+
--spectrum-avatar-block-size: var(--spectrum-avatar-size-1500);
71113
}
72114

73115
@media (forced-colors: active) {
74-
.spectrum-Avatar {
75-
--highcontrast-avatar-focus-indicator-color: CanvasText;
76-
}
116+
.spectrum-Avatar {
117+
--highcontrast-avatar-focus-indicator-color: CanvasText;
118+
}
77119
}
78120

79121
.spectrum-Avatar {
80-
display: inline-block;
81-
position: relative;
82-
inline-size: var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size));
83-
block-size: var(--mod-avatar-block-size, var(--spectrum-avatar-block-size));
122+
display: inline-block;
123+
position: relative;
124+
inline-size: var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size));
125+
block-size: var(--mod-avatar-block-size, var(--spectrum-avatar-block-size));
84126

85-
border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius));
86-
border-width: 0;
127+
border-style: solid;
128+
border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius));
129+
border-width: var(--spectrum-avatar-border-thickness);
130+
border-color: var(--spectrum-avatar-border-color-default);
87131

88-
outline: none;
132+
outline: none;
89133

90-
-webkit-user-drag: none;
91-
user-select: none;
134+
-webkit-user-drag: none;
135+
user-select: none;
92136

93-
overflow: visible;
137+
overflow: visible;
94138

95-
opacity: var(--mod-avatar-color-opacity, var(--spectrum-avatar-color-opacity));
139+
opacity: var(--mod-avatar-color-opacity, var(--spectrum-avatar-color-opacity));
96140

97-
&.is-disabled {
98-
opacity: var(--highcontrast-avatar-color-opacity-disabled, var(--mod-avatar-color-opacity-disabled, var(--spectrum-avatar-color-opacity-disabled)));
99-
}
141+
&.is-disabled {
142+
opacity: var(--highcontrast-avatar-color-opacity-disabled, var(--mod-avatar-color-opacity-disabled, var(--spectrum-avatar-color-opacity-disabled)));
143+
}
100144
}
101145

102146
.spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible {
103-
&::after {
104-
pointer-events: none;
105-
content: "";
106-
position: absolute;
107-
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);
108-
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);
109-
110-
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));
111-
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));
112-
113-
border-style: solid;
114-
border-width: var(--mod-avatar-focus-indicator-thickness, var(--spectrum-avatar-focus-indicator-thickness));
115-
border-color: var(--highcontrast-avatar-focus-indicator-color, var(--mod-avatar-focus-indicator-color, var(--spectrum-avatar-focus-indicator-color)));
116-
border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius));
117-
}
147+
&::after {
148+
pointer-events: none;
149+
content: "";
150+
position: absolute;
151+
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);
152+
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);
153+
154+
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));
155+
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));
156+
157+
border-style: solid;
158+
border-width: var(--mod-avatar-focus-indicator-thickness, var(--spectrum-avatar-focus-indicator-thickness));
159+
border-color: var(--highcontrast-avatar-focus-indicator-color, var(--mod-avatar-focus-indicator-color, var(--spectrum-avatar-focus-indicator-color)));
160+
border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius));
161+
}
118162
}
119163

120164
.spectrum-Avatar-link {
121-
outline: none;
122-
outline-color: transparent;
123-
outline-style: solid;
165+
outline: none;
166+
outline-color: transparent;
167+
outline-style: solid;
124168
}
125169

126170
.spectrum-Avatar-image {
127-
inline-size: var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size));
128-
block-size: var(--mod-avatar-block-size, var(--spectrum-avatar-block-size));
171+
inline-size: var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size));
172+
block-size: var(--mod-avatar-block-size, var(--spectrum-avatar-block-size));
129173

130-
border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius));
174+
border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius));
131175
}

‎components/avatar/stories/avatar.stories.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default {
1515
type: { summary: "string" },
1616
category: "Component",
1717
},
18-
options: ["50", "75", "100", "200", "300", "400", "500", "600", "700"],
18+
options: ["50", "75", "100", "200", "300", "400", "500", "600", "700", "800", "900", "1000", "1100", "1200", "1300", "1400", "1500"],
1919
control: "select",
2020
},
2121
image: {

0 commit comments

Comments
 (0)