Pass the avatar prop "size" properly to "avatarSize" swift property (#572)

* initial commit

* Change files

* Updated podfile

* Added all sizes to test

.vscode/settings.json

@@ -63,6 +63,7 @@
     "editor.formatOnSave": false
   },
   "cSpell.words": [
+    "Larrson",
     "TESTPAGE",
     "beachball",
     "consts",

apps/fluent-tester/src/FluentTester/TestComponents/Avatar/AvatarTest.tsx

@@ -16,7 +16,7 @@ const avatar: React.FunctionComponent<{}> = () => {
   return (
     <Stack style={stackStyle}>
       <Text>Name</Text>
-      <Avatar primaryText="Kat Larson" />
+      <Avatar primaryText="Kat Larrson" />
       <Text>Name and Email</Text>
       <Avatar primaryText="Kat Larrson" secondaryText="Kat.Larrson@example.com" />
       <Text>Name, Email, and Image</Text>
@@ -30,27 +30,44 @@ const avatar: React.FunctionComponent<{}> = () => {
 };
 
 const stylizedAvatar: React.FunctionComponent<{}> = () => {
-  const CustomizedAvatar = Avatar.customize({
+  const ExtraSmallAvatar = Avatar.customize({
+    size: 'xSmall',
+  });
+
+  const SmallAvatar = Avatar.customize({
+    size: 'small',
+  });
+
+  const MediumAvatar = Avatar.customize({
+    size: 'medium',
+  });
+
+  const LargeAvatar = Avatar.customize({
     size: 'large',
   });
 
+  const ExtraLargeAvatar = Avatar.customize({
+    size: 'xLarge',
+  });
+
+  const ExtraExtraLargeAvatar = Avatar.customize({
+    size: 'xxLarge',
+  });
+
   return (
     <Stack style={stackStyle}>
-      <Text>Name</Text>
-      <CustomizedAvatar primaryText="Kat Larrson" />
-      <Text>Name and Email</Text>
-      <CustomizedAvatar primaryText="Kat Larrson" secondaryText="Kat.Larrson@example.com" />
-      <Text>Name, Email, and Image</Text>
-      <CustomizedAvatar primaryText="Kat Larrson" secondaryText="Kat.Larrson@example.com" imageSource={testImageSource} />
-      <Text>Name, Email, Image, and Presence</Text>
-      <CustomizedAvatar
-        primaryText="Kat Larrson"
-        secondaryText="Kat.Larrson@example.com"
-        imageSource={testImageSource}
-        presence="available"
-      />
-      <Text>Square Style</Text>
-      <CustomizedAvatar primaryText="FluentUI" avatarStyle="square" />
+      <Text>Extra Small</Text>
+      <ExtraSmallAvatar primaryText="Kat Larrson" />
+      <Text>Small</Text>
+      <SmallAvatar primaryText="Kat Larrson" />
+      <Text>Medium</Text>
+      <MediumAvatar primaryText="Kat Larrson" />
+      <Text>Large</Text>
+      <LargeAvatar primaryText="Kat Larrson" />
+      <Text>Extra Large</Text>
+      <ExtraLargeAvatar primaryText="Kat Larrson" />
+      <Text>Extra Extra Large</Text>
+      <ExtraExtraLargeAvatar primaryText="Kat Larrson" />
     </Stack>
   );
 };

apps/ios/src/Podfile.lock

@@ -9,7 +9,7 @@ PODS:
     - React-Core (= 0.62.2)
     - React-jsi (= 0.62.2)
     - ReactCommon/turbomodule/core (= 0.62.2)
-  - FluentUI-React-Native-Avatar (0.2.5):
+  - FluentUI-React-Native-Avatar (0.3.0):
     - MicrosoftFluentUI (~> 0.1.16)
     - React
   - FluentUI-React-Native-Shimmer (0.3.3):
@@ -409,7 +409,7 @@ SPEC CHECKSUMS:
   DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2
   FBLazyVector: 4aab18c93cd9546e4bfed752b4084585eca8b245
   FBReactNativeSpec: 5465d51ccfeecb7faa12f9ae0024f2044ce4044e
-  FluentUI-React-Native-Avatar: b2d40d426a6d3e4d627c2d30e1f2885caff20768
+  FluentUI-React-Native-Avatar: a1276fc37349a22465dcfdee8a46aeb3222a6b2f
   FluentUI-React-Native-Shimmer: 504dd3c43aea2d84855bdd369621069fab0274b2
   Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51
   glog: 1f3da668190260b06b429bb211bfbee5cd790c28

change/@fluentui-react-native-experimental-avatar-2020-12-11-17-40-52-avatar_size_fix.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Fixed bug where AvatarSize was not properly set",
+  "packageName": "@fluentui-react-native/experimental-avatar",
+  "email": "saadnajmi2@gmail.com",
+  "dependentChangeType": "patch",
+  "date": "2020-12-11T23:40:52.581Z"
+}

change/@fluentui-react-native-tester-2020-12-11-17-40-52-avatar_size_fix.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Updated Avatar test to use xxLarge size",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "saadnajmi2@gmail.com",
+  "dependentChangeType": "patch",
+  "date": "2020-12-11T23:40:12.533Z"
+}

change/@fluentui-react-native-tester-win32-2020-12-11-17-40-52-avatar_size_fix.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Updated Avatar test to use xxLarge size",
+  "packageName": "@fluentui-react-native/tester-win32",
+  "email": "saadnajmi2@gmail.com",
+  "dependentChangeType": "patch",
+  "date": "2020-12-11T23:40:33.772Z"
+}

packages/experimental/Avatar/ios/MSFAvatarViewManager.m

@@ -51,7 +51,8 @@ RCT_ENUM_CONVERTER(MSFPresence, (@{
 
 @interface RCT_EXTERN_MODULE(MSFAvatarViewManager, RCTViewManager)
 
-RCT_EXPORT_VIEW_PROPERTY(avatarSize, MSFAvatarSize);
+RCT_REMAP_VIEW_PROPERTY(size, avatarSize, MSFAvatarSize);
+
 RCT_EXPORT_VIEW_PROPERTY(avatarBackgroundColor, UIColor);
 RCT_EXPORT_VIEW_PROPERTY(customBorderImage, UIImage);