[Link] Documentation and tester update for link on Android (#2442)

### Platforms Impacted
- [ ] iOS
- [ ] macOS
- [ ] win32 (Office)
- [ ] windows
- [x] android

### Description of changes
Updates the documentation and tester app for Link for android. 

### Verification
Visual Verification on Android

### Pull request checklist

This PR has considered (when applicable):
- [ ] Automated Tests
- [x] Documentation and examples
- [ ] Keyboard Accessibility
- [ ] Voiceover
- [ ] Internationalization and Right-to-left Layouts

Author: rohanprasadofficial

apps/fluent-tester/src/TestComponents/LinkExperimental/LinkTest.tsx

@@ -152,20 +152,22 @@ const linkSections: TestSection[] = [
     name: 'Inline Links',
     component: InlineLinks,
   },
-  ...Platform.select({
-    // As per design discussion , There is no use case for subtle link on Android , No tokens available for same.
-    android: [null],
-    default: [
-      {
-        name: 'Subtle Links',
-        component: SubtleLinks,
-      },
-    ],
+  Platform.select({
+    // As per design discussion, there is no use case for subtle link on Android, no tokens available for the same.
+    android: null,
+    default: {
+      name: 'Subtle Links',
+      component: SubtleLinks,
+    },
   }),
-  {
-    name: 'Custom Link',
-    component: CustomLinks,
-  },
+  Platform.select({
+    android: null,
+    default: {
+      name: 'Custom Link',
+      component: CustomLinks,
+    },
+  }),
+
   {
     name: 'Link E2E Test',
     component: LinkE2ETest,

change/@fluentui-react-native-experimental-link-48d7f3c8-c8d9-4ae0-8974-15dc2ed7e079.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "doc and tester update for link on Android",
+  "packageName": "@fluentui-react-native/experimental-link",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-link-8b20094f-15ef-48d2-8995-a9d489c423d1.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "spec update , address pr feedbacks",
+  "packageName": "@fluentui-react-native/link",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-tester-addcaaf8-9d36-462d-bc09-66fa747d2d78.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "doc and tester update for link on Android",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/components/Link/SPEC.md

@@ -75,6 +75,7 @@ Below is the set of props the Text supports:
 export interface LinkProps extends IWithPressableOptions<TextProps> {
   /**
    * The appearance of the link, either `default` or `subtle`
+   * Note: 'subtle' is not supported for Android
    * @default default
    */
   appearance?: LinkAppearance;
@@ -100,6 +101,7 @@ export interface LinkProps extends IWithPressableOptions<TextProps> {
   url?: string;
   /**
    * Text that should show in a tooltip when the user hovers over a button.
+   * Note: Not supported for Android
    */
   tooltip?: string;
 }
@@ -121,6 +123,8 @@ export interface LinkTokens extends TextTokens {
 }
 ```
 
+Note: 'hovered','focused','visited','subtle' are not supported for Android
+
 ## Behaviors
 
 ### Link with url

packages/experimental/Link/src/Link.types.ts

@@ -7,6 +7,7 @@ export const linkName = 'Link';
 export type LinkState = IPressableState & {
   /**
    * Specifies whether the link has been visited.
+   * Note: Not supported for Android
    * @default false
    */
   visited?: boolean;
@@ -24,6 +25,7 @@ export type LinkState = IPressableState & {
   inline?: boolean;
   /**
    * Specifies whether the link is subtle.
+   * Note: Not supported for Android
    * @default false
    */
   subtle?: boolean;
@@ -32,6 +34,7 @@ export type LinkState = IPressableState & {
 /**
  * Link tokens, these are the internally configurable values for Link elements. In particular these
  * drive decisions on how to build the styles
+ * Note: 'hovered','focused','visited','subtle' are not supported for Android
  */
 export interface LinkTokens extends TextTokens {
   hovered?: LinkTokens;
@@ -51,6 +54,7 @@ export type LinkAppearance = 'default' | 'subtle';
 export interface LinkProps extends IWithPressableOptions<TextProps> {
   /**
    * The appearance of the link, either `default` or `subtle`
+   * Note: 'subtle' is not supported for Android
    * @default default
    */
   appearance?: LinkAppearance;
@@ -76,6 +80,7 @@ export interface LinkProps extends IWithPressableOptions<TextProps> {
   url?: string;
   /**
    * Text that should show in a tooltip when the user hovers over a button.
+   * Note: Not supported for Android
    */
   tooltip?: string;
 }

packages/experimental/Link/src/LinkTokens.android.ts

@@ -6,7 +6,7 @@ export const defaultLinkTokens: TokenSettings<LinkTokens, Theme> = (t: Theme) =>
   ({
     color: t.colors.brandForeground1,
     alignSelf: 'flex-start',
-    variant: 'body1',
+    variant: 'caption1Strong',
     inline: {
       textDecorationLine: 'underline',
     },

packages/experimental/Link/src/__tests__/__snapshots__/Link.test.tsx.snap

@@ -38,11 +38,8 @@ exports[`Link component tests Default Link 1`] = `
       Object {
         "alignSelf": "flex-start",
         "color": "#0f6cbd",
-        "fontFamily": "Segoe UI",
-        "fontSize": 13,
-        "fontWeight": "400",
         "margin": 0,
-        "variant": "body1",
+        "variant": "caption1Strong",
       }
     }
   >
@@ -88,11 +85,8 @@ exports[`Link component tests Default Link as a pressable 1`] = `
       Object {
         "alignSelf": "flex-start",
         "color": "#0f6cbd",
-        "fontFamily": "Segoe UI",
-        "fontSize": 13,
-        "fontWeight": "400",
         "margin": 0,
-        "variant": "body1",
+        "variant": "caption1Strong",
       }
     }
   >
@@ -129,12 +123,9 @@ exports[`Link component tests Inline Link 1`] = `
     Object {
       "alignSelf": "flex-start",
       "color": "#0f6cbd",
-      "fontFamily": "Segoe UI",
-      "fontSize": 13,
-      "fontWeight": "400",
       "margin": 0,
       "textDecorationLine": "underline",
-      "variant": "body1",
+      "variant": "caption1Strong",
     }
   }
   tooltip="https://www.bing.com"
@@ -182,11 +173,8 @@ exports[`Link component tests Subtle Link 1`] = `
       Object {
         "alignSelf": "flex-start",
         "color": "#0f6cbd",
-        "fontFamily": "Segoe UI",
-        "fontSize": 13,
-        "fontWeight": "400",
         "margin": 0,
-        "variant": "body1",
+        "variant": "caption1Strong",
       }
     }
   >