From 59c47be484909d2d4cae9feb0a007b3a1e62e0a7 Mon Sep 17 00:00:00 2001
From: Brian Calvery <bcalvery@microsoft.com>
Date: Tue, 29 Jan 2019 13:43:23 -0800
Subject: [PATCH 1/3] changes to add white border around avatar in contrast
 theme

---
 .../Variations/AvatarExampleImageCustomization.shorthand.tsx | 2 ++
 .../teams-high-contrast/components/Avatar/avatarVariables.ts | 2 ++
 src/themes/teams/components/Avatar/avatarStyles.ts           | 5 ++++-
 src/themes/teams/components/Avatar/avatarVariables.ts        | 4 ++++
 4 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx
index d0ba6ea13e..fce4870516 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx
@@ -10,6 +10,8 @@ const AvatarExampleImageCustomizationShorthand = () => (
     &emsp;
     <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' }}
diff --git a/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts b/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts
index 4780286ced..f4910c3837 100644
--- a/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts
+++ b/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: 'white',
+  avatarBorderWidth: 2,
   statusBorderColor: siteVariables.black,
 })
diff --git a/src/themes/teams/components/Avatar/avatarStyles.ts b/src/themes/teams/components/Avatar/avatarStyles.ts
index 1c4a6d0f78..6116f8d633 100644
--- a/src/themes/teams/components/Avatar/avatarStyles.ts
+++ b/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)
diff --git a/src/themes/teams/components/Avatar/avatarVariables.ts b/src/themes/teams/components/Avatar/avatarVariables.ts
index 87bf062513..f952d65e12 100644
--- a/src/themes/teams/components/Avatar/avatarVariables.ts
+++ b/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,
 })

From d6305bf84c94cbf9e2badb38e6f1b2929bfad8b8 Mon Sep 17 00:00:00 2001
From: Brian Calvery <bcalvery@microsoft.com>
Date: Tue, 29 Jan 2019 14:33:43 -0800
Subject: [PATCH 2/3] add changelog entry for PR

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 22a21b9482..2adc9f9af5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -41,6 +41,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))

From 2c538699a4301a2a76b38f947ef16834a2bbac81 Mon Sep 17 00:00:00 2001
From: Brian Calvery <bcalvery@microsoft.com>
Date: Thu, 31 Jan 2019 10:49:38 -0800
Subject: [PATCH 3/3] changing color name to use variable name.

---
 .../teams-high-contrast/components/Avatar/avatarVariables.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts b/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts
index f4910c3837..657bffbe47 100644
--- a/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts
+++ b/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts
@@ -2,7 +2,7 @@ import { AvatarVariables } from '../../../teams/components/Avatar/avatarVariable
 import { Partial } from 'types/utils'
 
 export default (siteVariables: any): Partial<AvatarVariables> => ({
-  avatarBorderColor: 'white',
+  avatarBorderColor: siteVariables.white,
   avatarBorderWidth: 2,
   statusBorderColor: siteVariables.black,
 })