@fluentui-react-native/tester 0.170.50 → 0.170.52

package/src/TestComponents/LinkLegacy/LinkLegacyTest.tsx

@@ -1,54 +0,0 @@
-import * as React from 'react';
-import { Alert } from 'react-native';
-
-import { Link } from '@fluentui/react-native';
-import { LINK_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-import { Stack } from '@fluentui-react-native/stack';
-
-import { E2ELinkLegacyTest } from './E2ELinkLegacyTest';
-import { stackStyle } from '../Common/styles';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
-
-const Links: React.FunctionComponent = () => {
-  const doPress = (): void => {
-    Alert.alert('Alert.', 'You have been alerted.');
-  };
-
-  return (
-    <Stack style={stackStyle}>
-      <Link url="https://www.bing.com/" content="Click to navigate." />
-      <Link onPress={doPress} content="Click to alert." />
-    </Stack>
-  );
-};
-
-const linkSections: TestSection[] = [
-  {
-    name: 'Navigation and Alert',
-    testID: LINK_TESTPAGE,
-    component: Links,
-  },
-];
-
-const e2eSections: TestSection[] = [
-  {
-    name: 'Link E2E Test',
-    component: E2ELinkLegacyTest,
-  },
-];
-
-export const LinkLegacyTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Deprecated',
-    uwpStatus: 'Deprecated',
-    iosStatus: 'Deprecated',
-    macosStatus: 'Deprecated',
-    androidStatus: 'Deprecated',
-  };
-
-  const description =
-    'With a Link, users can navigate to another page, window, or Help topic; display a definition; initiate a command; or choose an option. A Link indicates that it can be clicked, typically by being displayed using the visited or unvisited link system colors. Traditionally, Links are underlined as well, but that approach is often unnecessary and falling out of favor to reduce visual clutter.\n\nA Link is the lightest weight clickable control, and is often used to reduce the visual complexity of a design.';
-
-  return <Test name="Link Legacy Test" description={description} sections={linkSections} status={status} e2eSections={e2eSections}></Test>;
-};

package/src/TestComponents/LinkLegacy/index.ts

@@ -1 +0,0 @@
-export * from './LinkLegacyTest';

package/src/TestComponents/LinkV1/E2ELinkV1Test.tsx

@@ -1,38 +0,0 @@
-import * as React from 'react';
-
-import { LinkV1 as Link } from '@fluentui/react-native';
-import {
-  LINKV1_TEST_COMPONENT,
-  LINKV1_ACCESSIBILITY_LABEL,
-  LINKV1_NO_A11Y_LABEL_COMPONENT,
-  LINKV1_TEST_COMPONENT_LABEL,
-} from '@fluentui-react-native/e2e-testing';
-import { Stack } from '@fluentui-react-native/stack';
-
-import { stackStyle } from '../Common/styles';
-import { testProps } from '../Common/TestProps';
-
-export const E2ELinkV1Test: React.FunctionComponent = () => {
-  const doPress = (): void => {
-    console.log('Link pressed');
-  };
-
-  return (
-    <Stack style={stackStyle}>
-      <Link
-        url="https://www.bing.com/"
-        accessibilityLabel={LINKV1_ACCESSIBILITY_LABEL}
-        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-        {...testProps(LINKV1_TEST_COMPONENT)}
-      >
-        Link with Accessibility Label
-      </Link>
-      <Link
-        onPress={doPress} /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-        {...testProps(LINKV1_NO_A11Y_LABEL_COMPONENT)}
-      >
-        {LINKV1_TEST_COMPONENT_LABEL}
-      </Link>
-    </Stack>
-  );
-};

package/src/TestComponents/LinkV1/InlineLinksTest.android.tsx

@@ -1,46 +0,0 @@
-import * as React from 'react';
-import { View, Alert, StyleSheet } from 'react-native';
-
-import { LinkV1 as Link, TextV1 as Text } from '@fluentui/react-native';
-import { Stack } from '@fluentui-react-native/stack';
-
-import { stackStyle } from '../Common/styles';
-
-export const InlineLinks: React.FunctionComponent = () => {
-  const doPress = React.useCallback(() => Alert.alert('Alert.', 'You have been alerted.'), []);
-  const doA11yTap = React.useCallback(() => Alert.alert('Alert.', 'You have invoked onA11yTap.'), []);
-
-  return (
-    // RN Core has a bug where Text in Text is not keyboard accessible. Issues - #32004, #35194.
-    // This is a workaround for the issue. Once those issues are resolved, InlineLinksTest.android.tsx can be removed.
-    <Stack style={stackStyle}>
-      <View style={styles.row}>
-        <Text>Click </Text>
-        <Link inline onPress={doPress} onAccessibilityTap={doA11yTap}>
-          this link
-        </Link>
-        <Text> to alert me.</Text>
-      </View>
-      <View style={styles.row}>
-        <Text>This </Text>
-        <Link inline onPress={doPress} disabled focusable>
-          link
-        </Link>
-        <Text> is disabled but focusable.</Text>
-      </View>
-      <View style={styles.row}>
-        <Text>Follow this </Text>
-        <Link inline url="https://www.bing.com/">
-          link
-        </Link>
-        <Text> to navigate.</Text>
-      </View>
-    </Stack>
-  );
-};
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-  },
-});

package/src/TestComponents/LinkV1/InlineLinksTest.tsx

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import { Alert } from 'react-native';
-
-import { LinkV1 as Link, TextV1 as Text } from '@fluentui/react-native';
-import { Stack } from '@fluentui-react-native/stack';
-
-import { stackStyle } from '../Common/styles';
-
-export const InlineLinks: React.FunctionComponent = () => {
-  const doPress = React.useCallback(() => Alert.alert('Alert.', 'You have been alerted.'), []);
-  const doA11yTap = React.useCallback(() => Alert.alert('Alert.', 'You have invoked onA11yTap.'), []);
-
-  return (
-    <Stack style={stackStyle}>
-      <Text>
-        Click{' '}
-        <Link inline onPress={doPress} onAccessibilityTap={doA11yTap}>
-          this link
-        </Link>{' '}
-        to alert me.
-      </Text>
-      <Text>
-        This{' '}
-        <Link inline onPress={doPress} disabled focusable>
-          link
-        </Link>{' '}
-        is disabled and not focusable.
-      </Text>
-      <Text>
-        Follow this{' '}
-        <Link inline url="https://www.bing.com/">
-          link
-        </Link>{' '}
-        to navigate.
-      </Text>
-    </Stack>
-  );
-};

package/src/TestComponents/LinkV1/LinkV1Test.tsx

@@ -1,196 +0,0 @@
-import * as React from 'react';
-import { Alert, View, StyleSheet, Text, TextInput } from 'react-native';
-import { Platform } from 'react-native';
-
-import type { LinkTokens } from '@fluentui/react-native';
-import { LinkV1 as Link } from '@fluentui/react-native';
-import { LINKV1_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-import { Stack } from '@fluentui-react-native/stack';
-
-import { E2ELinkV1Test } from './E2ELinkV1Test';
-import { InlineLinks } from './InlineLinksTest';
-import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
-
-const DefaultLinks: React.FunctionComponent = () => {
-  const doPress = React.useCallback(() => Alert.alert('Alert.', 'You have been alerted.'), []);
-  const doAllyTap = React.useCallback(() => Alert.alert('Alert.', 'You have invoked onAllyTap.'), []);
-
-  return (
-    <Stack style={stackStyle}>
-      <Link tooltip={'https://www.bing.com/'} url="https://www.bing.com/">
-        Click to navigate.
-      </Link>
-      <Link onPress={doPress} onAccessibilityTap={doAllyTap}>
-        Click to alert.
-      </Link>
-      <Link disabled>Disabled Link</Link>
-    </Stack>
-  );
-};
-
-const SubtleLinks: React.FunctionComponent = () => {
-  const doPress = React.useCallback(() => Alert.alert('Alert.', 'You have been alerted.'), []);
-  const doAllyTap = React.useCallback(() => Alert.alert('Alert.', 'You have invoked onAllyTap.'), []);
-  const supportsInlineLink = Platform.OS !== ('win32' as any);
-
-  return (
-    <Stack style={stackStyle}>
-      <Link appearance="subtle" url="https://www.bing.com/">
-        Click to navigate.
-      </Link>
-      {supportsInlineLink && (
-        <Text>
-          This is inline Link.{' '}
-          <Link appearance="subtle" inline onPress={doPress} onAccessibilityTap={doAllyTap}>
-            Click to alert.
-          </Link>
-        </Text>
-      )}
-      <Link appearance="subtle" onPress={doPress} disabled>
-        Disabled Link
-      </Link>
-    </Stack>
-  );
-};
-
-const styles = StyleSheet.create({
-  tokensRow: {
-    flexDirection: 'row',
-    marginBottom: 10,
-  },
-  tokensColumn: {
-    flexDirection: 'column',
-    margin: 10,
-  },
-});
-
-const BlueHeaderBold = Link.customize({ variant: 'headerStandard', fontWeight: '700', color: '#0229c4', textAlign: 'right' });
-const CustomLinks: React.FunctionComponent = () => {
-  const [linkColor, setLinkColor] = React.useState<string>('blue');
-  const [linkFont, setLinkFont] = React.useState<string>('Ariel');
-  const [linkFontSize, setLinkFontSize] = React.useState<number>(12);
-  const [linkText, setLinkText] = React.useState<string>('Click to Navigate');
-  const [linkUrl, setLinkUrl] = React.useState<string>('https://www.bing.com/');
-
-  const CustomLink = React.useMemo(() => {
-    const tokens: LinkTokens = {
-      color: linkColor,
-      fontFamily: linkFont,
-      fontSize: linkFontSize,
-    };
-    return Link.customize(tokens);
-  }, [linkColor, linkFont, linkFontSize]);
-
-  return (
-    <View style={styles.tokensColumn}>
-      <View style={styles.tokensRow}>
-        <View>
-          <Text>Text Tokens</Text>
-          <TextInput
-            accessibilityLabel="Link color"
-            style={commonStyles.textBox}
-            placeholder="Link color"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setLinkColor(e.nativeEvent.text);
-            }}
-          />
-          <TextInput
-            accessibilityLabel="Link font"
-            style={commonStyles.textBox}
-            placeholder="Link font"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setLinkFont(e.nativeEvent.text);
-            }}
-          />
-          <TextInput
-            accessibilityLabel="Link font size"
-            style={commonStyles.textBox}
-            placeholder="Link font size"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setLinkFontSize(parseInt(e.nativeEvent.text));
-            }}
-          />
-        </View>
-        <View>
-          <Text>Content and URL customize</Text>
-          <TextInput
-            accessibilityLabel="Link text"
-            style={commonStyles.textBox}
-            placeholder="Link text"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setLinkText(e.nativeEvent.text);
-            }}
-          />
-          <TextInput
-            accessibilityLabel="Link Url"
-            style={commonStyles.textBox}
-            placeholder="Link URL"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setLinkUrl(e.nativeEvent.text);
-            }}
-          />
-        </View>
-      </View>
-      <CustomLink align="end" url={linkUrl}>
-        {linkText}
-      </CustomLink>
-      <BlueHeaderBold>BlueHeaderBold</BlueHeaderBold>
-    </View>
-  );
-};
-
-const linkSections: TestSection[] = [
-  {
-    name: 'Default Links',
-    testID: LINKV1_TESTPAGE,
-    component: DefaultLinks,
-  },
-  {
-    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 the same.
-    android: null,
-    default: {
-      name: 'Subtle Links',
-      component: SubtleLinks,
-    },
-  }),
-  Platform.select({
-    android: null,
-    default: {
-      name: 'Custom Link',
-      component: CustomLinks,
-    },
-  }),
-];
-
-const e2eSections: TestSection[] = [
-  {
-    name: 'Link E2E Test',
-    component: E2ELinkV1Test,
-  },
-];
-
-export const LinkV1Test: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Production',
-    uwpStatus: 'Backlog',
-    iosStatus: 'Production',
-    macosStatus: 'Production',
-    androidStatus: 'Production',
-  };
-
-  const description =
-    'With a Link, users can navigate to another page, window, or Help topic; display a definition; initiate a command; or choose an option. A Link indicates that it can be clicked, typically by being displayed using the visited or unvisited link system colors. Traditionally, Links are underlined as well, but that approach is often unnecessary and falling out of favor to reduce visual clutter.\n\nA Link is the lightest weight clickable control, and is often used to reduce the visual complexity of a design.';
-
-  return <Test name="LinkV1 Test" description={description} sections={linkSections} status={status} e2eSections={e2eSections}></Test>;
-};

package/src/TestComponents/LinkV1/index.ts

@@ -1 +0,0 @@
-export * from './LinkV1Test';

package/src/TestComponents/Menu/E2EMenuTest.tsx

@@ -1,127 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-
-import { ButtonV1 as Button } from '@fluentui-react-native/button';
-import {
-  MENUITEM_ACCESSIBILITY_LABEL,
-  MENUITEM_NO_A11Y_LABEL_COMPONENT,
-  MENUTRIGGER_TEST_COMPONENT,
-  MENUITEM_TEST_LABEL,
-  MENU_ON_CLOSE,
-  MENU_ON_OPEN,
-  MENUITEM_TEST_COMPONENT,
-  MENUPOPOVER_TEST_COMPONENT,
-  MENU_CALLBACK_RESET_BUTTON,
-  MENUITEM_FOURTH_COMPONENT,
-  MENUITEM_DISABLED_COMPONENT,
-  MENUITEM_CALLBACK_LABEL,
-} from '@fluentui-react-native/e2e-testing';
-import { Menu, MenuDivider, MenuGroup, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui-react-native/menu';
-import { Stack } from '@fluentui-react-native/stack';
-import { TextV1 as Text } from '@fluentui-react-native/text';
-
-import { stackStyle } from '../Common/styles';
-import { testProps } from '../Common/TestProps';
-
-export const E2EMenuTest: React.FunctionComponent = () => {
-  const [menuOpened, setMenuOpened] = React.useState(false);
-  const [numOnClickCalls, setNumOnClickCalls] = React.useState(0);
-
-  const onOpenChange = React.useCallback(
-    (_e: any, isOpen: boolean) => {
-      setMenuOpened(isOpen);
-    },
-    [setMenuOpened],
-  );
-
-  const onItemClick = () => {
-    setNumOnClickCalls((n) => n + 1);
-  };
-
-  const onResetClick = () => {
-    setNumOnClickCalls(0);
-  };
-
-  return (
-    <Stack style={stackStyle}>
-      <View style={{ flexDirection: 'row' }}>
-        {menuOpened ? (
-          <Text /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */ {...testProps(MENU_ON_OPEN)}>
-            Menu opened
-          </Text>
-        ) : (
-          <Text /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */ {...testProps(MENU_ON_CLOSE)}>
-            Menu closed
-          </Text>
-        )}
-        <Button
-          onClick={onResetClick}
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */ {...testProps(
-            MENU_CALLBACK_RESET_BUTTON,
-          )}
-        >
-          Reset Item Callback
-        </Button>
-        <Menu open={menuOpened} onOpenChange={onOpenChange}>
-          <MenuTrigger>
-            <Button
-              /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-              {...testProps(MENUTRIGGER_TEST_COMPONENT)}
-            >
-              Test
-            </Button>
-          </MenuTrigger>
-          <MenuPopover
-            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-            {...testProps(MENUPOPOVER_TEST_COMPONENT)}
-          >
-            <MenuList>
-              <MenuGroup>
-                <MenuItem
-                  onClick={onItemClick}
-                  accessibilityLabel={MENUITEM_ACCESSIBILITY_LABEL}
-                  persistOnClick
-                  /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-                  {...testProps(MENUITEM_TEST_COMPONENT)}
-                >
-                  A plain MenuItem
-                </MenuItem>
-                <MenuItem
-                  onClick={onItemClick}
-                  /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-                  {...testProps(MENUITEM_DISABLED_COMPONENT)}
-                  disabled
-                  persistOnClick
-                >
-                  A second disabled plain MenuItem
-                </MenuItem>
-              </MenuGroup>
-              <MenuDivider />
-              <MenuGroup>
-                <MenuItem
-                  /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-                  {...testProps(MENUITEM_NO_A11Y_LABEL_COMPONENT)}
-                >
-                  {MENUITEM_TEST_LABEL}
-                </MenuItem>
-                <MenuItem
-                  /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-                  {...testProps(MENUITEM_FOURTH_COMPONENT)}
-                >
-                  A fourth plain MenuItem
-                </MenuItem>
-              </MenuGroup>
-            </MenuList>
-          </MenuPopover>
-        </Menu>
-      </View>
-      <Text
-        style={{ marginVertical: 4 }}
-        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-        {...testProps(MENUITEM_CALLBACK_LABEL)}
-      >
-        {`onClick fired ${numOnClickCalls} times`}
-      </Text>
-    </Stack>
-  );
-};

package/src/TestComponents/Menu/MenuComponentOutsideMenuList.tsx

@@ -1,26 +0,0 @@
-import * as React from 'react';
-
-import { ButtonV1 as Button } from '@fluentui/react-native';
-import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu';
-import { Stack } from '@fluentui-react-native/stack';
-
-import { stackStyle } from '../Common/styles';
-
-export const MenuComponentOutsideMenuList: React.FunctionComponent = () => {
-  return (
-    <Stack style={stackStyle}>
-      <Menu>
-        <MenuTrigger>
-          <Button>The Menu</Button>
-        </MenuTrigger>
-        <MenuPopover>
-          <MenuList>
-            <MenuItem>A plain MenuItem</MenuItem>
-            <MenuItem>A plain MenuItem 2</MenuItem>
-          </MenuList>
-          <Button>Not in arrow loop</Button>
-        </MenuPopover>
-      </Menu>
-    </Stack>
-  );
-};

package/src/TestComponents/Menu/MenuIcons.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { Platform } from 'react-native';
-
-import { ButtonV1 as Button } from '@fluentui/react-native';
-import { Menu, MenuItem, MenuItemCheckbox, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu';
-import { Stack } from '@fluentui-react-native/stack';
-
-import { testImage, svgProps } from '../Common/iconExamples';
-import { stackStyle } from '../Common/styles';
-
-const fontBuiltInProps = {
-  fontFamily: 'Arial',
-  codepoint: 0x2663,
-};
-const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
-
-export const MenuIcons: React.FunctionComponent = () => {
-  return (
-    <Stack style={stackStyle}>
-      <Menu hasIcons>
-        <MenuTrigger>
-          <Button>Items with icons</Button>
-        </MenuTrigger>
-        <MenuPopover>
-          <MenuList>
-            <MenuItem icon={{ source: testImage }}>Option 1 image icon</MenuItem>
-            <MenuItem icon={{ fontSource: { ...fontBuiltInProps, style: { textAlign: 'center', marginTop: -1 } } }}>
-              Option 2 font icon
-            </MenuItem>
-            {svgIconsEnabled && <MenuItem icon={{ svgSource: svgProps }}>Option 3 svg icon</MenuItem>}
-            <MenuItem>Option 4 no icon</MenuItem>
-            <MenuItemCheckbox icon={{ source: testImage }} name="Option4">
-              Option 5 checkbox
-            </MenuItemCheckbox>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    </Stack>
-  );
-};

package/src/TestComponents/Menu/MenuRefs.tsx

@@ -1,31 +0,0 @@
-import * as React from 'react';
-
-import { ButtonV1 as Button } from '@fluentui/react-native';
-import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu';
-import { Stack } from '@fluentui-react-native/stack';
-
-import { stackStyle } from '../Common/styles';
-
-export const MenuTriggerChildRef: React.FunctionComponent = () => {
-  const ref = React.useRef(null);
-  const onClick = React.useCallback(() => {
-    ref?.current?.focus();
-  }, [ref]);
-
-  return (
-    <Stack style={stackStyle}>
-      <Button onClick={onClick}>Click to focus Menu trigger</Button>
-
-      <Menu>
-        <MenuTrigger>
-          <Button componentRef={ref}>The Menu</Button>
-        </MenuTrigger>
-        <MenuPopover>
-          <MenuList>
-            <MenuItem>A plain MenuItem</MenuItem>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    </Stack>
-  );
-};