fix(avatar): sizing issues #976
Conversation
kuzhelov
requested review from
dvdzkwsk,
layershifter,
levithomason,
miroslavstastny and
mnajdova
as code owners
Codecov Report
@@ Coverage Diff @@
## master #976 +/- ##
========================================
- Coverage 81.01% 81% -0.01%
========================================
Files 665 665
Lines 8527 8528 +1
Branches 1442 1443 +1
========================================
Hits 6908 6908
- Misses 1605 1606 +1
Partials 14 14
Continue to review full report at Codecov.
|
| @@ -26,6 +27,7 @@ const avatarStyles: ComponentSlotStylesInput<AvatarProps, any> = { | |||
| } | |||
| }, | |||
| image: ({ variables: v }): ICSSInJSStyle => ({ | |||
| boxSizing: 'border-box', | |||
There was a problem hiding this comment.
I saw that you added the same thing in the image, that would mean that we don't need i there.
There was a problem hiding this comment.
yes, but this is, actually, necessary, as not only the Image component could be rendered here. Essentially, we would like to ensure that all sizing props defined for this slot will be applied in the expected way
| @@ -31,6 +31,7 @@ const radioStyles: ComponentSlotStylesInput< | |||
|
|
|||
| icon: ({ props: p, variables: v }): ICSSInJSStyle => ({ | |||
| margin: `0 ${pxToRem(10)} 0 0`, | |||
| padding: 0, | |||
There was a problem hiding this comment.
I am confused with this change... Can you explain what this was added?
There was a problem hiding this comment.
yes, have addressed related visual regression in icon's styles, thank you!
!! Important follow-up
Please, note that
box-sizingissue is, essentially, the one that we might expect for other components to appear. This becomes to be an issue after static styles of Semantic UI were eliminated - one of the rules they had introduced wasbox-sizingone.TODO
Appearance of Avatar component in Teams High Contrast theme was fixed. Specifically, the following
aspects were addressed:
Avatar sizing issue
When theme switch to Teams Hight Contrast (and, apart from other style changes,
borderbeing introduced to Avatar), Avatar's size was increased by border's thickness value:Teams default theme (size is 32px)
Teams High Contrast theme (size has changed to 32px + 2 * 2px)
This has happened because of absence of
box-sizing: border-boxCSS rule.Font-based
IconcomponentWhen is provided into
imageslot ofAvatarcomponent (originally reported here #795):Was
Now