Improving Vertical Alignment of Checkbox's Text (#396)

* Yarn

* Aligning text better vertically

* Removing 'baseline' alignment

* Change files

change/@fluentui-react-native-checkbox-2020-08-14-09-40-09-sammy-CheckboxTextVerticality.json

@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Aligning checkbox text centered vertically",
+  "packageName": "@fluentui-react-native/checkbox",
+  "email": "safreibe@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-14T16:40:09.749Z"
+}

packages/components/Checkbox/src/Checkbox.settings.ts

@@ -17,7 +17,7 @@ export const settings: IComposeSettings<ICheckboxType> = [
       accessibilityRole: 'checkbox',
       style: {
         display: 'flex',
-        alignItems: 'flex-start',
+        alignItems: 'center',
         flexDirection: 'row',
         minHeight: 14,
         marginTop: 0,
@@ -29,9 +29,8 @@ export const settings: IComposeSettings<ICheckboxType> = [
         height: 14,
         width: 14,
         marginEnd: 4,
-        marginTop: 5,
         borderStyle: 'solid',
-        borderWidth: 1,
+        borderWidth: 1
       }
     },
     checkmark: {
@@ -46,9 +45,9 @@ export const settings: IComposeSettings<ICheckboxType> = [
     content: {
       variant: 'bodyStandard',
       style: {
-        marginTop: 1,
         borderStyle: 'dotted',
-        borderWidth: 1
+        borderWidth: 1,
+        marginTop: 3
       }
     },
     _precedence: ['disabled', 'boxAtEnd', 'hovered', 'focused', 'pressed', 'checked'],
@@ -57,7 +56,7 @@ export const settings: IComposeSettings<ICheckboxType> = [
         tokens: {
           backgroundColor: 'menuItemBackgroundHovered',
           textBorderColor: 'focusBorder'
-        },
+        }
       },
       checked: {
         checkmark: {