Skip to content

Commit 0cf3b6b

Browse files
laraharrowLuke BowermanLuke Bowerman
authored
Icon "size" property now supports "t-shirt" sizing (#992)
* Merge clean-up * Icon t-shirt size implemented * Master merge snapshot effects * \Icon t-shirt size implemented * Leverage styled-system for icon sizes * CHANGELOG update * Update packages/www/src/documentation/components/content/icon.mdx * tests update Co-authored-by: Luke Bowerman <[email protected]> Co-authored-by: Luke Bowerman <[email protected]>
1 parent f2d3789 commit 0cf3b6b

File tree

25 files changed

+531
-356
lines changed

25 files changed

+531
-356
lines changed

‎CHANGELOG.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,12 @@ All notable changes to this project will be documented in this file.
55
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
77

8-
## [UNRELEASED]
8+
## UNRELEASED
99

1010
### Changed
1111

12+
- `Icon` now supports "t-shirt" sizing. (i.e.: `size="small"`)
13+
1214
- Jest no longer requires artifact build before being run
1315

1416
## [0.8.4]

‎packages/components/src/Avatar/__snapshots__/Avatar.test.tsx.snap‎

Lines changed: 36 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`AvatarCombo renders Avatar and its secondary avatar 1`] = `
4-
.c6 {
4+
.c7 {
5+
width: 1.5rem;
6+
height: 1.5rem;
57
color: #9785F2;
6-
width: 1rem;
7-
height: 1rem;
88
-webkit-align-items: center;
99
-webkit-box-align: center;
1010
-ms-flex-align: center;
@@ -63,7 +63,7 @@ exports[`AvatarCombo renders Avatar and its secondary avatar 1`] = `
6363
border: solid 1px currentColor;
6464
}
6565
66-
.c5 .c7 {
66+
.c5 .c6 {
6767
height: 20px;
6868
width: 20px;
6969
}
@@ -82,7 +82,7 @@ exports[`AvatarCombo renders Avatar and its secondary avatar 1`] = `
8282
width: 20px;
8383
}
8484
85-
.c0 .c4 .c7 {
85+
.c0 .c4 .c6 {
8686
height: 14px;
8787
width: 14px;
8888
}
@@ -110,9 +110,7 @@ exports[`AvatarCombo renders Avatar and its secondary avatar 1`] = `
110110
className="c4 c5"
111111
>
112112
<div
113-
className="c6 c7 "
114-
color="keyFocus"
115-
size="1rem"
113+
className="c6 c7"
116114
>
117115
<svg
118116
fill="currentColor"
@@ -134,10 +132,10 @@ exports[`AvatarCombo renders Avatar and its secondary avatar 1`] = `
134132
`;
135133

136134
exports[`AvatarCombo renders Avatar initials and secondary with Code icon 1`] = `
137-
.c6 {
135+
.c7 {
136+
width: 1.5rem;
137+
height: 1.5rem;
138138
color: #9785F2;
139-
width: 1rem;
140-
height: 1rem;
141139
-webkit-align-items: center;
142140
-webkit-box-align: center;
143141
-ms-flex-align: center;
@@ -196,7 +194,7 @@ exports[`AvatarCombo renders Avatar initials and secondary with Code icon 1`] =
196194
border: solid 1px currentColor;
197195
}
198196
199-
.c5 .c7 {
197+
.c5 .c6 {
200198
height: 20px;
201199
width: 20px;
202200
}
@@ -215,7 +213,7 @@ exports[`AvatarCombo renders Avatar initials and secondary with Code icon 1`] =
215213
width: 20px;
216214
}
217215
218-
.c0 .c4 .c7 {
216+
.c0 .c4 .c6 {
219217
height: 14px;
220218
width: 14px;
221219
}
@@ -243,9 +241,7 @@ exports[`AvatarCombo renders Avatar initials and secondary with Code icon 1`] =
243241
className="c4 c5"
244242
>
245243
<div
246-
className="c6 c7 "
247-
color="keyFocus"
248-
size="1rem"
244+
className="c6 c7"
249245
>
250246
<svg
251247
fill="currentColor"
@@ -267,10 +263,10 @@ exports[`AvatarCombo renders Avatar initials and secondary with Code icon 1`] =
267263
`;
268264

269265
exports[`AvatarCombo renders AvatarIcon and secondary avatar if user is not available and updates icon if passed. 1`] = `
270-
.c2 {
266+
.c3 {
267+
width: 1.5rem;
268+
height: 1.5rem;
271269
color: #9785F2;
272-
width: 1rem;
273-
height: 1rem;
274270
-webkit-align-items: center;
275271
-webkit-box-align: center;
276272
-ms-flex-align: center;
@@ -298,7 +294,7 @@ exports[`AvatarCombo renders AvatarIcon and secondary avatar if user is not avai
298294
border: solid 1px currentColor;
299295
}
300296
301-
.c1 .c3 {
297+
.c1 .c2 {
302298
height: 20px;
303299
width: 20px;
304300
}
@@ -320,7 +316,7 @@ exports[`AvatarCombo renders AvatarIcon and secondary avatar if user is not avai
320316
border: solid 1px currentColor;
321317
}
322318
323-
.c5 .c3 {
319+
.c5 .c2 {
324320
height: 20px;
325321
width: 20px;
326322
}
@@ -339,7 +335,7 @@ exports[`AvatarCombo renders AvatarIcon and secondary avatar if user is not avai
339335
width: 20px;
340336
}
341337
342-
.c0 .c4 .c3 {
338+
.c0 .c4 .c2 {
343339
height: 14px;
344340
width: 14px;
345341
}
@@ -351,9 +347,7 @@ exports[`AvatarCombo renders AvatarIcon and secondary avatar if user is not avai
351347
className="c1"
352348
>
353349
<div
354-
className="c2 c3 "
355-
color="keyFocus"
356-
size="1rem"
350+
className="c2 c3"
357351
>
358352
<svg
359353
fill="currentColor"
@@ -375,9 +369,7 @@ exports[`AvatarCombo renders AvatarIcon and secondary avatar if user is not avai
375369
className="c4 c5"
376370
>
377371
<div
378-
className="c2 c3 "
379-
color="keyFocus"
380-
size="1rem"
372+
className="c2 c3"
381373
>
382374
<svg
383375
fill="currentColor"
@@ -401,10 +393,10 @@ exports[`AvatarCombo renders AvatarIcon and secondary avatar if user is not avai
401393
`;
402394

403395
exports[`AvatarIcon renders 1`] = `
404-
.c1 {
396+
.c2 {
397+
width: 1.5rem;
398+
height: 1.5rem;
405399
color: #9785F2;
406-
width: 1rem;
407-
height: 1rem;
408400
-webkit-align-items: center;
409401
-webkit-box-align: center;
410402
-ms-flex-align: center;
@@ -415,7 +407,7 @@ exports[`AvatarIcon renders 1`] = `
415407
display: inline-flex;
416408
}
417409
418-
.c3 .c2 {
410+
.c3 .c1 {
419411
height: 20px;
420412
width: 20px;
421413
}
@@ -437,17 +429,17 @@ exports[`AvatarIcon renders 1`] = `
437429
border: solid 1px currentColor;
438430
}
439431
440-
.c0 .c2 {
432+
.c0 .c1 {
441433
height: 20px;
442434
width: 20px;
443435
}
444436
445-
.c4 .c2 {
437+
.c4 .c1 {
446438
height: 20px;
447439
width: 20px;
448440
}
449441
450-
.c5 .c6 .c2 {
442+
.c5 .c6 .c1 {
451443
height: 14px;
452444
width: 14px;
453445
}
@@ -456,9 +448,7 @@ exports[`AvatarIcon renders 1`] = `
456448
className="c0"
457449
>
458450
<div
459-
className="c1 c2 "
460-
color="keyFocus"
461-
size="1rem"
451+
className="c1 c2"
462452
>
463453
<svg
464454
fill="currentColor"
@@ -479,10 +469,10 @@ exports[`AvatarIcon renders 1`] = `
479469
`;
480470

481471
exports[`AvatarIcon renders different icon if specified 1`] = `
482-
.c1 {
472+
.c2 {
473+
width: 1.5rem;
474+
height: 1.5rem;
483475
color: #9785F2;
484-
width: 1rem;
485-
height: 1rem;
486476
-webkit-align-items: center;
487477
-webkit-box-align: center;
488478
-ms-flex-align: center;
@@ -493,7 +483,7 @@ exports[`AvatarIcon renders different icon if specified 1`] = `
493483
display: inline-flex;
494484
}
495485
496-
.c3 .c2 {
486+
.c3 .c1 {
497487
height: 20px;
498488
width: 20px;
499489
}
@@ -515,17 +505,17 @@ exports[`AvatarIcon renders different icon if specified 1`] = `
515505
border: solid 1px currentColor;
516506
}
517507
518-
.c0 .c2 {
508+
.c0 .c1 {
519509
height: 20px;
520510
width: 20px;
521511
}
522512
523-
.c4 .c2 {
513+
.c4 .c1 {
524514
height: 20px;
525515
width: 20px;
526516
}
527517
528-
.c5 .c6 .c2 {
518+
.c5 .c6 .c1 {
529519
height: 14px;
530520
width: 14px;
531521
}
@@ -534,9 +524,7 @@ exports[`AvatarIcon renders different icon if specified 1`] = `
534524
className="c0"
535525
>
536526
<div
537-
className="c1 c2 "
538-
color="keyFocus"
539-
size="1rem"
527+
className="c1 c2"
540528
>
541529
<svg
542530
fill="currentColor"

0 commit comments

Comments
 (0)