Skip to content

Commit 98b3f66

Browse files
GarthDBGarthDB
committed
feat: added all the avatar sizes in DNA
BREAKING CHANGE: a size class is now required
1 parent 68047af commit 98b3f66

File tree

3 files changed

+133
-8
lines changed

3 files changed

+133
-8
lines changed

‎components/avatar/index.css

Lines changed: 77 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,85 @@ 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";
14+
15+
.spectrum-Avatar--size50 {
16+
@remapvars {
17+
find: /--spectrum-avatar-size-50(.*)/;
18+
filter: color;
19+
replace: --spectrum-avatar$1;
20+
}
21+
}
22+
23+
.spectrum-Avatar--size75 {
24+
@remapvars {
25+
find: /--spectrum-avatar-size-75(.*)/;
26+
filter: color;
27+
replace: --spectrum-avatar$1;
28+
}
29+
}
30+
31+
.spectrum-Avatar--size100 {
32+
@remapvars {
33+
find: /--spectrum-avatar-size-100(.*)/;
34+
filter: color;
35+
replace: --spectrum-avatar$1;
36+
}
37+
}
38+
39+
.spectrum-Avatar--size200 {
40+
@remapvars {
41+
find: /--spectrum-avatar-size-200(.*)/;
42+
filter: color;
43+
replace: --spectrum-avatar$1;
44+
}
45+
}
46+
47+
.spectrum-Avatar--size300 {
48+
@remapvars {
49+
find: /--spectrum-avatar-size-300(.*)/;
50+
filter: color;
51+
replace: --spectrum-avatar$1;
52+
}
53+
}
54+
55+
.spectrum-Avatar--size400 {
56+
@remapvars {
57+
find: /--spectrum-avatar-size-400(.*)/;
58+
filter: color;
59+
replace: --spectrum-avatar$1;
60+
}
61+
}
62+
63+
.spectrum-Avatar--size500 {
64+
@remapvars {
65+
find: /--spectrum-avatar-size-500(.*)/;
66+
filter: color;
67+
replace: --spectrum-avatar$1;
68+
}
69+
}
70+
71+
.spectrum-Avatar--size600 {
72+
@remapvars {
73+
find: /--spectrum-avatar-size-600(.*)/;
74+
filter: color;
75+
replace: --spectrum-avatar$1;
76+
}
77+
}
78+
79+
.spectrum-Avatar--size700 {
80+
@remapvars {
81+
find: /--spectrum-avatar-size-700(.*)/;
82+
filter: color;
83+
replace: --spectrum-avatar$1;
84+
}
85+
}
86+
1387
.spectrum-Avatar {
14-
inline-size: var(--spectrum-avatar-size-50-width);
15-
block-size: var(--spectrum-avatar-size-50-height);
88+
inline-size: var(--spectrum-avatar-width);
89+
block-size: var(--spectrum-avatar-height);
1690

17-
border-radius: var(--spectrum-avatar-size-50-border-radius);
91+
border-radius: var(--spectrum-avatar-border-radius);
1892
border-style: none;
1993

2094
-webkit-user-drag: none;

‎components/avatar/metadata/avatar.yml

Lines changed: 54 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,60 @@
1-
id: avatar
21
name: Avatar
32
status: Verified
3+
description: An image representing a user.
4+
SpectrumSiteSlug: https://spectrum.adobe.com/page/avatar/
5+
sections:
6+
- name: Migration Guide
7+
description: |
8+
### Sizes added to `avatar`.
9+
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`.
410
examples:
511
- id: avatar
612
name: Standard
713
markup: |
8-
<img class="spectrum-Avatar" src="img/example-ava.jpg" alt="Avatar">
9-
<img class="spectrum-Avatar is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
14+
<div class="spectrum-Examples spectrum-Examples--vertical">
15+
<div class="spectrum-Examples-item">
16+
<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">
19+
</div>
20+
<div class="spectrum-Examples-item">
21+
<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">
24+
</div>
25+
<div class="spectrum-Examples-item">
26+
<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">
29+
</div>
30+
<div class="spectrum-Examples-item">
31+
<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">
34+
</div>
35+
<div class="spectrum-Examples-item">
36+
<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">
39+
</div>
40+
<div class="spectrum-Examples-item">
41+
<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">
44+
</div>
45+
<div class="spectrum-Examples-item">
46+
<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">
49+
</div>
50+
<div class="spectrum-Examples-item">
51+
<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">
54+
</div>
55+
<div class="spectrum-Examples-item">
56+
<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">
59+
</div>
60+
</div>

‎components/avatar/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"build": "gulp"
1717
},
1818
"peerDependencies": {
19-
"@spectrum-css/vars": "^3.0.0-beta.1"
19+
"@spectrum-css/vars": "^3.0.0"
2020
},
2121
"devDependencies": {
2222
"@spectrum-css/component-builder": "^2.0.0",
@@ -27,4 +27,4 @@
2727
"access": "public"
2828
},
2929
"homepage": "https://opensource.adobe.com/spectrum-css/"
30-
}
30+
}

0 commit comments

Comments
 (0)