FAB iOS Fix and E2E Link Fix

CONTRIBUTING.md

@@ -55,7 +55,7 @@ Most components should use the compose framework as it offers the comprehensive
 1. Update your `package.json` file. This defines the name, fields, and dependencies of the npm package that will be published for this component.
 1. As a pattern, we prefix `experimental` components with the word "experimental". For example, we have `@fluentui-react-native/experimental-button`.
 
-**Additionally, we require integrating your new component/test page with our E2E testing infrastructure. Whenever a new component/test page is created, it should map to new tests in /apps/fluent-tester/src/E2E. This is to create a sophisticated, in-depth testing infrastructure that ensures that we don't regress our component library in the future; giving our partners and customers the best experience possible. Please see [Authoring an E2E Test](https://github.com/microsoft/fluentui-react-native/tree/main/apps/fluent-tester/src/E2E#authoring-e2e-test).**
+**Additionally, we require integrating your new component/test page with our E2E testing infrastructure. Whenever a new component/test page is created, it should map to new tests in /apps/fluent-tester/src/E2E. This is to create a sophisticated, in-depth testing infrastructure that ensures that we don't regress our component library in the future; giving our partners and customers the best experience possible. Please see [Authoring an E2E Test](https://github.com/microsoft/fluentui-react-native/tree/main/apps/E2E#authoring-e2e-test).**
 
 Reach out to Samuel Freiberg with any questions related to E2E testing.
 

change/@fluentui-react-native-button-6e9b526b-44b9-44c1-a7d4-714054ace485.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Provided FAB Tokens for iOS",
+  "packageName": "@fluentui-react-native/button",
+  "email": "ayushsinghs@yahoo.in",
+  "dependentChangeType": "patch"
+}

packages/components/Button/src/FAB/FABColorTokens.ts

@@ -3,27 +3,49 @@ import { TokenSettings } from '@fluentui-react-native/use-styling';
 import { FABTokens } from './FAB.types';
 
 export const defaultFABColorTokens: TokenSettings<FABTokens, Theme> = (t: Theme): FABTokens => ({
-  // Coloring same as primary
-  backgroundColor: t.colors.brandedBackground,
-  color: t.colors.brandedContent,
-  borderColor: t.colors.brandedBorder,
-  iconColor: t.colors.brandedIcon,
+  // Default coloring same as 'primary' or 'accent'
+  backgroundColor: t.colors.brandBackground,
+  color: t.colors.neutralForegroundOnColor,
+  iconColor: t.colors.neutralForegroundOnColor,
+  rippleColor: 'transparent', //Android Only
   disabled: {
-    backgroundColor: t.colors.brandedDisabledBackground,
-    color: t.colors.brandedDisabledContent,
-    borderColor: t.colors.brandedDisabledBorder,
-    iconColor: t.colors.brandedDisabledIcon,
+    backgroundColor: t.colors.neutralBackground5,
+    color: t.colors.neutralForegroundDisabled,
+    iconColor: t.colors.neutralForegroundDisabled,
   },
   pressed: {
-    backgroundColor: t.colors.brandedPressedBackground,
-    color: t.colors.brandedPressedContent,
-    borderColor: t.colors.brandedPressedBorder,
-    iconColor: t.colors.brandedPressedIcon,
+    backgroundColor: t.colors.brandBackgroundPressed,
+    color: t.colors.neutralForegroundOnColor,
+    iconColor: t.colors.neutralForegroundOnColor,
   },
   focused: {
-    backgroundColor: t.colors.brandedFocusedBackground,
-    color: t.colors.brandedFocusedContent,
-    borderColor: t.colors.brandedFocusedBorder,
-    iconColor: t.colors.brandedFocusedIcon,
+    backgroundColor: t.colors.brandBackground,
+    color: t.colors.neutralForegroundOnColor,
+    borderColor: t.colors.strokeFocus2,
+    borderInnerColor: t.colors.strokeFocus1,
+    iconColor: t.colors.neutralForegroundOnColor,
+  },
+  subtle: {
+    backgroundColor: t.colors.neutralBackground5,
+    color: t.colors.brandForeground1,
+    iconColor: t.colors.brandForeground1,
+    rippleColor: 'transparent',
+    disabled: {
+      backgroundColor: t.colors.neutralBackgroundDisabled,
+      color: t.colors.neutralForegroundDisabled,
+      iconColor: t.colors.neutralForegroundDisabled,
+    },
+    pressed: {
+      backgroundColor: t.colors.neutralBackground1Pressed,
+      color: t.colors.brandForeground1Pressed,
+      iconColor: t.colors.brandForeground1Pressed,
+    },
+    focused: {
+      backgroundColor: t.colors.neutralBackground5,
+      color: t.colors.brandForeground1,
+      borderColor: t.colors.strokeFocus2,
+      borderInnerColor: t.colors.strokeFocus1,
+      iconColor: t.colors.brandForeground1,
+    },
   },
 });

packages/components/Button/src/FAB/FABTokens.ts

@@ -5,14 +5,74 @@ import { FABTokens } from './FAB.types';
 
 export const defaultFABTokens: TokenSettings<FABTokens, Theme> = (t: Theme) =>
   ({
-    borderRadius: globalTokens.corner.radiusCircular,
-    minHeight: 56,
-    minWidth: 56,
-    padding: globalTokens.spacing.l,
-    hasContent: {
-      hasIconBefore: {
-        spacingIconContentBefore: globalTokens.spacing.mNudge,
+    elevation: t.shadows.shadow8.key.blur,
+    disabled: {
+      elevation: 0,
+    },
+    pressed: {
+      elevation: t.shadows.shadow2.key.blur,
+    },
+    focused: {
+      elevation: t.shadows.shadow2.key.blur,
+      borderWidth: globalTokens.stroke.width20,
+      borderInnerWidth: globalTokens.stroke.width10,
+    },
+    subtle: {
+      elevation: t.shadows.shadow8.key.blur,
+      disabled: {
+        elevation: 0,
+      },
+      pressed: {
+        elevation: t.shadows.shadow2.key.blur,
+      },
+      focused: {
+        elevation: t.shadows.shadow2.key.blur,
+        borderWidth: globalTokens.stroke.width20,
+        borderInnerWidth: globalTokens.stroke.width10,
+      },
+    },
+    large: {
+      borderRadius: globalTokens.corner.radiusCircular,
+      iconSize: 24,
+      minHeight: 56,
+      minWidth: 56,
+      paddingHorizontal: globalTokens.spacing.m,
+      paddingVertical: globalTokens.spacing.m,
+      spacingIconContentBefore: 0,
+      hasContent: {
+        borderRadius: globalTokens.corner.radiusCircular,
+        iconSize: 24,
+        fontSize: t.typography.variants.body1Strong.size,
+        fontFamily: t.typography.variants.body1Strong.face,
+        fontWeight: t.typography.variants.body1Strong.weight,
+        minHeight: 56,
+        minWidth: 56,
+        paddingStart: globalTokens.spacing.m,
+        paddingEnd: globalTokens.spacing.l,
+        paddingVertical: globalTokens.spacing.m,
+        spacingIconContentBefore: globalTokens.spacing.xs,
+      },
+    },
+    small: {
+      borderRadius: globalTokens.corner.radiusCircular,
+      iconSize: 20,
+      minHeight: 44,
+      minWidth: 44,
+      paddingHorizontal: globalTokens.spacing.s,
+      paddingVertical: globalTokens.spacing.s,
+      spacingIconContentBefore: 0,
+      hasContent: {
+        borderRadius: globalTokens.corner.radiusCircular,
+        iconSize: 20,
+        fontSize: t.typography.variants.body2Strong.size,
+        fontFamily: t.typography.variants.body2Strong.face,
+        fontWeight: t.typography.variants.body2Strong.weight,
+        minHeight: 44,
+        minWidth: 44,
+        paddingHorizontal: globalTokens.spacing.s,
+        paddingStart: globalTokens.spacing.s,
+        paddingEnd: globalTokens.spacing.m,
+        spacingIconContentBefore: globalTokens.spacing.xs,
       },
     },
-    shadowToken: t.shadows.shadow8,
   } as FABTokens);