From 695e01f4552216ac185946942101f16e28c585ce Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Fri, 15 Feb 2019 12:25:29 +0100
Subject: [PATCH 1/8] -fixed circular icons not to appear with border by
 default

---
 .../IconExampleBordered.shorthand.tsx         | 11 +---
 .../IconExampleCircular.shorthand.tsx         | 59 +++++++++++++++----
 .../components/Icon/Variations/index.tsx      |  2 +-
 .../teams/components/Icon/iconStyles.ts       |  9 +--
 4 files changed, 57 insertions(+), 24 deletions(-)

diff --git a/docs/src/examples/components/Icon/Variations/IconExampleBordered.shorthand.tsx b/docs/src/examples/components/Icon/Variations/IconExampleBordered.shorthand.tsx
index efe2eeaf47..60a8cbc284 100644
--- a/docs/src/examples/components/Icon/Variations/IconExampleBordered.shorthand.tsx
+++ b/docs/src/examples/components/Icon/Variations/IconExampleBordered.shorthand.tsx
@@ -6,14 +6,9 @@ const IconExampleBordered = () => (
     <Icon name="chess rook" bordered />
     <Icon name="book" bordered />
     <Icon name="expand" bordered />
-    <Icon name="play" bordered />
-    <Icon name="call" bordered />
-    <Icon name="call-video" bordered />
-    <Icon name="stop" bordered />
-    <Icon name="calendar alternate outline" bordered />
-    <Icon name="coffee" bordered />
-    <Icon name="compass outline" bordered />
-    <Icon name="area chart" bordered />
+    <Icon name="calendar alternate outline" bordered circular />
+    <Icon name="compass outline" bordered circular />
+    <Icon name="area chart" bordered circular />
   </div>
 )
 
diff --git a/docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.tsx b/docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.tsx
index 41facfdb3e..45eb37ef1f 100644
--- a/docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.tsx
+++ b/docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.tsx
@@ -3,17 +3,54 @@ import { Icon } from '@stardust-ui/react'
 
 const IconExampleCircular = () => (
   <div>
-    <Icon name="chess rook" circular />
-    <Icon name="book" circular />
-    <Icon name="expand" circular />
-    <Icon name="play" circular />
-    <Icon name="call" circular />
-    <Icon name="call-video" circular />
-    <Icon name="stop" circular />
-    <Icon name="calendar alternate outline" circular />
-    <Icon name="coffee" circular />
-    <Icon name="compass outline" circular />
-    <Icon name="area chart" circular />
+    <Icon
+      name="chess rook"
+      circular
+      variables={siteVars => ({
+        backgroundColor: siteVars.colors.grey[500],
+        color: siteVars.colors.white,
+      })}
+    />
+    <Icon
+      name="book"
+      circular
+      variables={siteVars => ({
+        backgroundColor: siteVars.colors.grey[500],
+        color: siteVars.colors.white,
+      })}
+    />
+    <Icon
+      name="expand"
+      circular
+      variables={siteVars => ({
+        backgroundColor: siteVars.colors.grey[500],
+        color: siteVars.colors.white,
+      })}
+    />
+    <Icon
+      name="calendar alternate outline"
+      circular
+      variables={siteVars => ({
+        backgroundColor: siteVars.colors.grey[500],
+        color: siteVars.colors.white,
+      })}
+    />
+    <Icon
+      name="compass outline"
+      circular
+      variables={siteVars => ({
+        backgroundColor: siteVars.colors.grey[500],
+        color: siteVars.colors.white,
+      })}
+    />
+    <Icon
+      name="area chart"
+      circular
+      variables={siteVars => ({
+        backgroundColor: siteVars.colors.grey[500],
+        color: siteVars.colors.white,
+      })}
+    />
   </div>
 )
 
diff --git a/docs/src/examples/components/Icon/Variations/index.tsx b/docs/src/examples/components/Icon/Variations/index.tsx
index 31544ab2ba..0242309424 100644
--- a/docs/src/examples/components/Icon/Variations/index.tsx
+++ b/docs/src/examples/components/Icon/Variations/index.tsx
@@ -21,7 +21,7 @@ const Variations = () => (
     />
     <ComponentExample
       title="Bordered"
-      description="An icon can be formatted to appear with rectangular border."
+      description="An icon can be formatted to appear with rectangular or circular border."
       examplePath="components/Icon/Variations/IconExampleBordered"
     />
     <ComponentExample
diff --git a/packages/react/src/themes/teams/components/Icon/iconStyles.ts b/packages/react/src/themes/teams/components/Icon/iconStyles.ts
index 2dac6bdb2c..26e16159fa 100644
--- a/packages/react/src/themes/teams/components/Icon/iconStyles.ts
+++ b/packages/react/src/themes/teams/components/Icon/iconStyles.ts
@@ -58,12 +58,11 @@ const getXSpacingStyles = (xSpacing: IconXSpacing, horizontalSpace: string): ICS
   }
 }
 
-const getBorderedStyles = (circular: boolean, boxShadowColor: string): ICSSInJSStyle => {
+const getBorderedStyles = (boxShadowColor: string): ICSSInJSStyle => {
   return {
     ...getPaddedStyle(),
 
     boxShadow: `0 0 0 .05rem ${boxShadowColor} inset`,
-    ...(circular ? { borderRadius: '50%' } : {}),
   }
 }
 
@@ -118,8 +117,10 @@ const iconStyles: ComponentSlotStylesInput<IconProps, IconVariables> = {
 
       ...getXSpacingStyles(xSpacing, v.horizontalSpace),
 
-      ...((bordered || v.borderColor || circular) &&
-        getBorderedStyles(circular, v.borderColor || getIconColor(color, v))),
+      ...(circular && { ...getPaddedStyle(), borderRadius: '50%' }),
+
+      ...((bordered || v.borderColor) &&
+        getBorderedStyles(v.borderColor || getIconColor(color, v))),
 
       ...(!rtl && {
         transform: `rotate(${rotate}deg)`,

From 2954771be55428d792efc129cd998eaac4a364da Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Fri, 15 Feb 2019 12:29:52 +0100
Subject: [PATCH 2/8] -updated changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0dd74c7bef..46ec64430d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### Fixes
+- removed logic for adding borders by default if the `Icon` has the `circular` prop @mnajdova ([#907](https://github.com/stardust-ui/react/pull/907))
+
 <!--------------------------------[ v0.21.1 ]------------------------------- -->
 ## [v0.21.1](https://github.com/stardust-ui/react/tree/v0.21.1) (2019-02-14)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.21.0...v0.21.1)

From d9f00a24d0c3fb3df17182ac3acac38c2a64355a Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 20 Feb 2019 17:00:03 +0100
Subject: [PATCH 3/8] -improved examples

---
 .../IconExampleBordered.shorthand.tsx         | 11 +++-
 .../IconExampleCircular.shorthand.tsx         | 59 ++++---------------
 2 files changed, 19 insertions(+), 51 deletions(-)

diff --git a/docs/src/examples/components/Icon/Variations/IconExampleBordered.shorthand.tsx b/docs/src/examples/components/Icon/Variations/IconExampleBordered.shorthand.tsx
index 60a8cbc284..efe2eeaf47 100644
--- a/docs/src/examples/components/Icon/Variations/IconExampleBordered.shorthand.tsx
+++ b/docs/src/examples/components/Icon/Variations/IconExampleBordered.shorthand.tsx
@@ -6,9 +6,14 @@ const IconExampleBordered = () => (
     <Icon name="chess rook" bordered />
     <Icon name="book" bordered />
     <Icon name="expand" bordered />
-    <Icon name="calendar alternate outline" bordered circular />
-    <Icon name="compass outline" bordered circular />
-    <Icon name="area chart" bordered circular />
+    <Icon name="play" bordered />
+    <Icon name="call" bordered />
+    <Icon name="call-video" bordered />
+    <Icon name="stop" bordered />
+    <Icon name="calendar alternate outline" bordered />
+    <Icon name="coffee" bordered />
+    <Icon name="compass outline" bordered />
+    <Icon name="area chart" bordered />
   </div>
 )
 
diff --git a/docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.tsx b/docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.tsx
index 45eb37ef1f..cba85f6218 100644
--- a/docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.tsx
+++ b/docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.tsx
@@ -3,54 +3,17 @@ import { Icon } from '@stardust-ui/react'
 
 const IconExampleCircular = () => (
   <div>
-    <Icon
-      name="chess rook"
-      circular
-      variables={siteVars => ({
-        backgroundColor: siteVars.colors.grey[500],
-        color: siteVars.colors.white,
-      })}
-    />
-    <Icon
-      name="book"
-      circular
-      variables={siteVars => ({
-        backgroundColor: siteVars.colors.grey[500],
-        color: siteVars.colors.white,
-      })}
-    />
-    <Icon
-      name="expand"
-      circular
-      variables={siteVars => ({
-        backgroundColor: siteVars.colors.grey[500],
-        color: siteVars.colors.white,
-      })}
-    />
-    <Icon
-      name="calendar alternate outline"
-      circular
-      variables={siteVars => ({
-        backgroundColor: siteVars.colors.grey[500],
-        color: siteVars.colors.white,
-      })}
-    />
-    <Icon
-      name="compass outline"
-      circular
-      variables={siteVars => ({
-        backgroundColor: siteVars.colors.grey[500],
-        color: siteVars.colors.white,
-      })}
-    />
-    <Icon
-      name="area chart"
-      circular
-      variables={siteVars => ({
-        backgroundColor: siteVars.colors.grey[500],
-        color: siteVars.colors.white,
-      })}
-    />
+    <Icon name="chess rook" circular bordered />
+    <Icon name="book" circular bordered />
+    <Icon name="expand" circular bordered />
+    <Icon name="play" circular bordered />
+    <Icon name="call" circular bordered />
+    <Icon name="call-video" circular bordered />
+    <Icon name="stop" circular bordered />
+    <Icon name="calendar alternate outline" circular bordered />
+    <Icon name="coffee" circular bordered />
+    <Icon name="compass outline" circular bordered />
+    <Icon name="area chart" circular bordered />
   </div>
 )
 

From 0ba54de5e69034b366dedea94e8d72fdf3ecd58c Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 20 Feb 2019 17:08:49 +0100
Subject: [PATCH 4/8] -reverted description on the border example

---
 docs/src/examples/components/Icon/Variations/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/examples/components/Icon/Variations/index.tsx b/docs/src/examples/components/Icon/Variations/index.tsx
index 0242309424..31544ab2ba 100644
--- a/docs/src/examples/components/Icon/Variations/index.tsx
+++ b/docs/src/examples/components/Icon/Variations/index.tsx
@@ -21,7 +21,7 @@ const Variations = () => (
     />
     <ComponentExample
       title="Bordered"
-      description="An icon can be formatted to appear with rectangular or circular border."
+      description="An icon can be formatted to appear with rectangular border."
       examplePath="components/Icon/Variations/IconExampleBordered"
     />
     <ComponentExample

From 018482abca660b7c82f190bfd4f2fb89d7379c33 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 20 Feb 2019 17:29:03 +0100
Subject: [PATCH 5/8] -introduce breaking changes in the changelog -fixes
 examples and components dependent on the circular Icon

---
 CHANGELOG.md                                         |  4 +++-
 .../components/Animation/Types/AnimationExample.tsx  |  2 +-
 .../Animation/Types/AnimationExampleDelay.tsx        |  2 +-
 .../Animation/Types/AnimationExampleDirection.tsx    |  8 ++++----
 .../Animation/Types/AnimationExampleDuration.tsx     |  2 +-
 .../Animation/Types/AnimationExampleFillMode.tsx     |  8 ++++----
 .../Types/AnimationExampleIterationCount.tsx         |  8 ++++----
 .../Types/AnimationExampleKeyframeParams.tsx         |  6 +++---
 .../Animation/Types/AnimationExamplePlayState.tsx    |  2 +-
 .../Types/AnimationExampleTimingFunction.tsx         | 12 ++++++------
 .../src/components/RadioGroup/RadioGroupItem.tsx     |  1 +
 11 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 27bc78081d..60e014af6a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### BREAKING CHANGES
+- removed logic for adding borders by default if the `Icon` has the `circular` prop @mnajdova ([#907](https://github.com/stardust-ui/react/pull/907))
+
 ### Features
 - Export `lock` SVG icon @VyshnaviDasari ([#906](https://github.com/stardust-ui/react/pull/906))
 - Adding status behavior @kolaps33 ([#880](https://github.com/stardust-ui/react/pull/880))
@@ -28,7 +31,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Display correctly images in portrait mode inside `Avatar` @layershifter ([#899](https://github.com/stardust-ui/react/pull/899))
 - Expose `Popup`'s content Ref @sophieH29 ([#913](https://github.com/stardust-ui/react/pull/913))
 - Fix `Button` Teams theme styles to use semibold weight @notandrew ([#829](https://github.com/stardust-ui/react/pull/829))
-- removed logic for adding borders by default if the `Icon` has the `circular` prop @mnajdova ([#907](https://github.com/stardust-ui/react/pull/907))
 
 <!--------------------------------[ v0.21.1 ]------------------------------- -->
 ## [v0.21.1](https://github.com/stardust-ui/react/tree/v0.21.1) (2019-02-14)
diff --git a/docs/src/examples/components/Animation/Types/AnimationExample.tsx b/docs/src/examples/components/Animation/Types/AnimationExample.tsx
index 1401bcbaf6..c4ef960f4e 100644
--- a/docs/src/examples/components/Animation/Types/AnimationExample.tsx
+++ b/docs/src/examples/components/Animation/Types/AnimationExample.tsx
@@ -17,7 +17,7 @@ const spinner = {
 const AnimationExample = () => (
   <Provider theme={{ animations: { spinner } }}>
     <Animation name="spinner">
-      <Icon name="umbrella" circular />
+      <Icon name="umbrella" circular bordered />
     </Animation>
   </Provider>
 )
diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleDelay.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleDelay.tsx
index 870798c023..69e87858c1 100644
--- a/docs/src/examples/components/Animation/Types/AnimationExampleDelay.tsx
+++ b/docs/src/examples/components/Animation/Types/AnimationExampleDelay.tsx
@@ -20,7 +20,7 @@ const AnimationExampleDelay = () => (
     <br />
     <Provider theme={{ animations: { spinner } }}>
       <Animation name="spinner" delay="5s">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
     </Provider>
   </div>
diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleDirection.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleDirection.tsx
index 5582331bab..1fe4beeb2e 100644
--- a/docs/src/examples/components/Animation/Types/AnimationExampleDirection.tsx
+++ b/docs/src/examples/components/Animation/Types/AnimationExampleDirection.tsx
@@ -22,16 +22,16 @@ const AnimationExampleDirection = () => (
       <Text content="Alternate" />
       <Text content="Alternate reverse" />
       <Animation name="spinner">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="spinner" direction="reverse">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="spinner" direction="alternate">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="spinner" direction="alternate-reverse">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
     </Grid>
   </Provider>
diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleDuration.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleDuration.tsx
index a1792c9f13..d32ef096b4 100644
--- a/docs/src/examples/components/Animation/Types/AnimationExampleDuration.tsx
+++ b/docs/src/examples/components/Animation/Types/AnimationExampleDuration.tsx
@@ -17,7 +17,7 @@ const spinner = {
 const AnimationExampleDuration = () => (
   <Provider theme={{ animations: { spinner } }}>
     <Animation name="spinner" duration="1s">
-      <Icon name="umbrella" circular />
+      <Icon name="umbrella" circular bordered />
     </Animation>
   </Provider>
 )
diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleFillMode.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleFillMode.tsx
index cf5712cf13..7a33ec8380 100644
--- a/docs/src/examples/components/Animation/Types/AnimationExampleFillMode.tsx
+++ b/docs/src/examples/components/Animation/Types/AnimationExampleFillMode.tsx
@@ -18,16 +18,16 @@ const AnimationExampleFillMode = () => (
       <Text content="Backwards" />
       <Text content="Both" />
       <Animation name="colorChanger" fillMode="none" delay="3s" iterationCount="1">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="colorChanger" fillMode="forwards" delay="3s" iterationCount="1">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="colorChanger" fillMode="backwards" delay="3s" iterationCount="1">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="colorChanger" fillMode="both" delay="3s" iterationCount="1">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
     </Grid>
   </Provider>
diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleIterationCount.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleIterationCount.tsx
index bfa4b025b7..90b6ef3d9c 100644
--- a/docs/src/examples/components/Animation/Types/AnimationExampleIterationCount.tsx
+++ b/docs/src/examples/components/Animation/Types/AnimationExampleIterationCount.tsx
@@ -22,16 +22,16 @@ const AnimationExampleIterationCount = () => (
       <Text content="5 iterations" />
       <Text content="Infinite" />
       <Animation name="spinner" iterationCount="1">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="spinner" iterationCount="2">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="spinner" iterationCount="5">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="spinner" iterationCount="infinite">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
     </Grid>
   </Provider>
diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleKeyframeParams.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleKeyframeParams.tsx
index d76dc484c8..112efb54ba 100644
--- a/docs/src/examples/components/Animation/Types/AnimationExampleKeyframeParams.tsx
+++ b/docs/src/examples/components/Animation/Types/AnimationExampleKeyframeParams.tsx
@@ -19,13 +19,13 @@ const AnimationExample = () => (
   <Provider theme={{ animations: { colorChanger } }}>
     <div>
       <Animation name="colorChanger">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="colorChanger" keyframeParams={{ fromColor: 'green', toColor: 'yellow' }}>
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="colorChanger" keyframeParams={{ toColor: 'black' }}>
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
     </div>
   </Provider>
diff --git a/docs/src/examples/components/Animation/Types/AnimationExamplePlayState.tsx b/docs/src/examples/components/Animation/Types/AnimationExamplePlayState.tsx
index 7180e8f537..38c16ee140 100644
--- a/docs/src/examples/components/Animation/Types/AnimationExamplePlayState.tsx
+++ b/docs/src/examples/components/Animation/Types/AnimationExamplePlayState.tsx
@@ -38,7 +38,7 @@ class AnimationExamplePlayState extends React.Component {
           <br />
           <br />
           <Animation name="spinner" playState={this.state.playState}>
-            <Icon name="umbrella" circular />
+            <Icon name="umbrella" circular bordered />
           </Animation>
         </div>
       </Provider>
diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleTimingFunction.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleTimingFunction.tsx
index 1442b14d7f..aa18dacac4 100644
--- a/docs/src/examples/components/Animation/Types/AnimationExampleTimingFunction.tsx
+++ b/docs/src/examples/components/Animation/Types/AnimationExampleTimingFunction.tsx
@@ -24,22 +24,22 @@ const AnimationExampleTimingFunction = () => (
       <Text content="Ease in out" />
       <Text content="Cubic bezier" />
       <Animation name="spinner" timingFunction="ease">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="spinner" timingFunction="linear">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="spinner" timingFunction="ease-in">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="spinner" timingFunction="ease-out">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="spinner" timingFunction="ease-in-out">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
       <Animation name="spinner" timingFunction="cubic-bezier(0.1, 0.5, 0.1, 0.5)">
-        <Icon name="umbrella" circular />
+        <Icon name="umbrella" circular bordered />
       </Animation>
     </Grid>
   </Provider>
diff --git a/packages/react/src/components/RadioGroup/RadioGroupItem.tsx b/packages/react/src/components/RadioGroup/RadioGroupItem.tsx
index e1c3ae6426..86d07213a2 100644
--- a/packages/react/src/components/RadioGroup/RadioGroupItem.tsx
+++ b/packages/react/src/components/RadioGroup/RadioGroupItem.tsx
@@ -160,6 +160,7 @@ class RadioGroupItem extends AutoControlledComponent<
           {Icon.create(icon || '', {
             defaultProps: {
               circular: true,
+              bordered: true,
               size: 'smaller',
               styles: styles.icon,
             },

From 6a26e9215bba3256e2e63102e5f90af110a8f010 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 20 Feb 2019 17:43:56 +0100
Subject: [PATCH 6/8] -fix typo on the changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 60e014af6a..a48c520261 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,7 +18,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ## [Unreleased]
 
 ### BREAKING CHANGES
-- removed logic for adding borders by default if the `Icon` has the `circular` prop @mnajdova ([#907](https://github.com/stardust-ui/react/pull/907))
+- removed logic for adding border by default if the `Icon` has the `circular` prop @mnajdova ([#907](https://github.com/stardust-ui/react/pull/907))
 
 ### Features
 - Export `lock` SVG icon @VyshnaviDasari ([#906](https://github.com/stardust-ui/react/pull/906))

From 3644191e7a586f828b518837763cefc237a3efc8 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 20 Feb 2019 18:03:02 +0100
Subject: [PATCH 7/8] -fix

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a48c520261..60e014af6a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,7 +18,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ## [Unreleased]
 
 ### BREAKING CHANGES
-- removed logic for adding border by default if the `Icon` has the `circular` prop @mnajdova ([#907](https://github.com/stardust-ui/react/pull/907))
+- removed logic for adding borders by default if the `Icon` has the `circular` prop @mnajdova ([#907](https://github.com/stardust-ui/react/pull/907))
 
 ### Features
 - Export `lock` SVG icon @VyshnaviDasari ([#906](https://github.com/stardust-ui/react/pull/906))

From 9aafc77608e1a46a48d743bf517a4f9e90ec8b7c Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Thu, 21 Feb 2019 11:56:00 +0100
Subject: [PATCH 8/8] -fixed avatar icon example

---
 .../AvatarExampleImageCustomization.shorthand.tsx         | 8 +++++++-
 1 file changed, 7 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 3c3f8a6207..f2f012ba58 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx
@@ -17,7 +17,13 @@ const AvatarExampleImageCustomizationShorthand = () => (
       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' }} />
+        <Icon
+          name="user"
+          circular
+          bordered
+          variables={{ color: 'blue' }}
+          styles={{ boxSizing: 'border-box', padding: '8px' }}
+        />
       }
       status={{ color: 'green', icon: 'check', title: 'Available' }}
     />