-
Notifications
You must be signed in to change notification settings - Fork 55
fix(Avatar): add white border around avatar in contrast theme #795
Conversation
The issue is that, for the second example we don't update the padding on the icon according to the size of the avatar. It seems to be an issue on our side. |
…x/avatar-contrast-738
@@ -10,6 +10,8 @@ const AvatarExampleImageCustomizationShorthand = () => ( | |||
  | |||
<Avatar | |||
image={ | |||
// This example does not react to the avatar size variable |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 thanks for spotting this!
@@ -2,5 +2,7 @@ import { AvatarVariables } from '../../../teams/components/Avatar/avatarVariable | |||
import { Partial } from 'types/utils' | |||
|
|||
export default (siteVariables: any): Partial<AvatarVariables> => ({ | |||
avatarBorderColor: 'white', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
would suggest to use color from siteVariables
here (i.e. siteVariables.white
), for the sake of consistency - or let me know if there any reason to not use it
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good catch. Thanks!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
please, just take a look on this comment before merge: https://github.com/stardust-ui/react/pull/795/files#r252747086 . Thank you!
…x/avatar-contrast-738
…-ui/react into fix/avatar-contrast-738
This change adds properties for setting the border for the avatar, which is used in the contrast theme to draw a white border around the image.
Before:
After:
Known issues:
The example in the docs with a custom image value (using Icon instead of Image) isn't rendering correctly. It seems like the example is perhaps broken, because it doesn't respect avatar size property.
Default size:
Both set to 28: