fix(Avatar): add white border around avatar in contrast theme (#795)

changes to add white border around avatar in contrast theme

Author: bcalvery

CHANGELOG.md

@@ -83,6 +83,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix alignment of `Layout`'s `main` area @kuzhelov ([#752](https://github.com/stardust-ui/react/pull/752))
 - Call `Popup` `onOpenChange` on all user initiated events @levithomason ([#619](https://github.com/stardust-ui/react/pull/619))
 - Fix `ChatMessage` - Author element should always be rendered @sophieH29 ([#761](https://github.com/stardust-ui/react/pull/761))
+- Fix `Avatar` - Add white circle border in contrast theme @bcalvery ([#795](https://github.com/stardust-ui/react/pull/795))
 
 ### Features
 - Add and export 'missed call' icon in Teams theme @codepretty ([#748](https://github.com/stardust-ui/react/pull/748))

docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx

@@ -10,6 +10,8 @@ const AvatarExampleImageCustomizationShorthand = () => (
      
     <Avatar
       image={
+        // This example does not react to the avatar size variable
+        // and otherwise produces bad results when border is applied compared to "normal" image
         <Icon name="user" circular variables={{ color: 'blue' }} styles={{ padding: '8px' }} />
       }
       status={{ color: 'green', icon: 'check', title: 'Available' }}

src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts

@@ -2,5 +2,7 @@ import { AvatarVariables } from '../../../teams/components/Avatar/avatarVariable
 import { Partial } from 'types/utils'
 
 export default (siteVariables: any): Partial<AvatarVariables> => ({
+  avatarBorderColor: siteVariables.white,
+  avatarBorderWidth: 2,
   statusBorderColor: siteVariables.black,
 })

src/themes/teams/components/Avatar/avatarStyles.ts

@@ -14,8 +14,11 @@ const avatarStyles: ComponentSlotStylesInput<AvatarPropsWithDefaults, any> = {
       width: sizeInRem,
     }
   },
-  image: (): ICSSInJSStyle => ({
+  image: ({ variables }): ICSSInJSStyle => ({
     verticalAlign: 'top',
+    borderStyle: 'solid',
+    borderColor: variables.avatarBorderColor,
+    borderWidth: `${variables.avatarBorderWidth}px`,
   }),
   label: ({ props: { size } }): ICSSInJSStyle => {
     const sizeInRem = pxToRem(size)

src/themes/teams/components/Avatar/avatarVariables.ts

@@ -1,9 +1,13 @@
 export interface AvatarVariables {
+  avatarBorderColor: string
+  avatarBorderWidth: number
   statusBorderColor: string
   statusBorderWidth: number
 }
 
 export default (siteVariables): AvatarVariables => ({
+  avatarBorderColor: '',
+  avatarBorderWidth: 0,
   statusBorderColor: siteVariables.bodyBackground,
   statusBorderWidth: 2,
 })