@fluentui-react-native/tester 0.170.50 → 0.170.52

package/src/TestComponents/TabList/TabListTest.tsx

@@ -1,231 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-
-import { ButtonV1 as Button } from '@fluentui-react-native/button';
-import { Divider } from '@fluentui-react-native/divider';
-import { TABLIST_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-import { Menu, MenuTrigger, MenuList, MenuItem, MenuPopover } from '@fluentui-react-native/menu';
-import { TabList, Tab } from '@fluentui-react-native/tablist';
-import { TextV1 as Text } from '@fluentui-react-native/text';
-
-import { TabListE2ETest } from './TabListE2ETest';
-import { svgProps, fontProps } from '../Common/iconExamples';
-import { stackStyle } from '../Common/styles';
-import type { PlatformStatus, TestSection } from '../Test';
-import { Test } from '../Test';
-
-const SubHeader = Text.customize({ variant: 'subheaderStandard' });
-const Header = Text.customize({ variant: 'headerStandard' });
-const Line = Divider.customize({ paddingVertical: 4 });
-const PaddedTabList = TabList.customize({
-  paddingVertical: 4,
-});
-
-const TabListDefaultTest: React.FunctionComponent = () => {
-  const [key, setKey] = React.useState('tab1');
-  return (
-    <View style={stackStyle}>
-      <Header>Uncontrolled Component</Header>
-      <Line />
-      <PaddedTabList defaultSelectedKey={'tab1'}>
-        <Tab tabKey="tab1">Tab 1</Tab>
-        <Tab tabKey="tab2">Tab 2</Tab>
-        <Tab tabKey="tab3">Tab 3</Tab>
-      </PaddedTabList>
-      <Header>Controlled Component</Header>
-      <Line />
-      <Text>Selected Key: {key}</Text>
-      <PaddedTabList
-        selectedKey={key}
-        onTabSelect={(val) => {
-          console.log('New key:', val);
-          setKey(val);
-        }}
-      >
-        <Tab tabKey="tab1">Tab 1</Tab>
-        <Tab tabKey="tab2">Tab 2</Tab>
-        <Tab tabKey="tab3">Tab 3</Tab>
-      </PaddedTabList>
-    </View>
-  );
-};
-
-const TabListDisabledTest: React.FunctionComponent = () => {
-  return (
-    <View style={stackStyle}>
-      <PaddedTabList defaultSelectedKey="tab2">
-        <Tab disabled tabKey="tab1">
-          Tab 1
-        </Tab>
-        <Tab tabKey="tab2">Tab 2</Tab>
-        <Tab disabled tabKey="tab3">
-          Tab 3
-        </Tab>
-        <Tab tabKey="tab4">Tab 4</Tab>
-      </PaddedTabList>
-      <PaddedTabList disabled>
-        <Tab tabKey="tab1">Tab 1</Tab>
-        <Tab tabKey="tab2">Tab 2</Tab>
-        <Tab tabKey="tab3">Tab 3</Tab>
-      </PaddedTabList>
-    </View>
-  );
-};
-
-const TabListVariantsTest: React.FunctionComponent = () => {
-  return (
-    <View style={stackStyle}>
-      <Header>Size Variants</Header>
-      <Line />
-      <SubHeader>Small</SubHeader>
-      <PaddedTabList defaultSelectedKey="sm1" size="small">
-        <Tab tabKey="sm1">Small Tab 1</Tab>
-        <Tab tabKey="sm2">Small Tab 2</Tab>
-        <Tab tabKey="sm3">Small Tab 3</Tab>
-      </PaddedTabList>
-      <SubHeader>Medium (default)</SubHeader>
-      <PaddedTabList defaultSelectedKey="m1" size="medium">
-        <Tab tabKey="m1">Medium Tab 1</Tab>
-        <Tab tabKey="m2">Medium Tab 2</Tab>
-        <Tab tabKey="m3">Medium Tab 3</Tab>
-      </PaddedTabList>
-      <SubHeader>Large</SubHeader>
-      <PaddedTabList defaultSelectedKey="lg1" size="large">
-        <Tab tabKey="lg1">Large Tab 1</Tab>
-        <Tab tabKey="lg2">Large Tab 2</Tab>
-        <Tab tabKey="lg3">Large Tab 3</Tab>
-      </PaddedTabList>
-      <Header>Appearance</Header>
-      <Line />
-      <SubHeader>Transparent Appearance</SubHeader>
-      <PaddedTabList defaultSelectedKey="tab1" appearance="transparent">
-        <Tab tabKey="tab1">Tab 1</Tab>
-        <Tab tabKey="tab2">Tab 2</Tab>
-        <Tab tabKey="tab3">Tab 3</Tab>
-      </PaddedTabList>
-      <SubHeader>Subtle Appearance</SubHeader>
-      <PaddedTabList defaultSelectedKey="tab1" appearance="subtle">
-        <Tab tabKey="tab1">Tab 1</Tab>
-        <Tab tabKey="tab2">Tab 2</Tab>
-        <Tab tabKey="tab3">Tab 3</Tab>
-      </PaddedTabList>
-      <Header>Vertical Orientation</Header>
-      <Line />
-      <PaddedTabList defaultSelectedKey="tab1" vertical>
-        <Tab tabKey="tab1">Tab 1</Tab>
-        <Tab tabKey="tab2">Tab 2</Tab>
-        <Tab tabKey="tab3">Tab 3</Tab>
-      </PaddedTabList>
-    </View>
-  );
-};
-
-const TabListIconTest: React.FunctionComponent = () => {
-  return (
-    <View style={stackStyle}>
-      <TabList defaultSelectedKey="fontIcon">
-        <Tab icon={{ fontSource: fontProps }} tabKey="fontIcon">
-          Font Icon
-        </Tab>
-        <Tab icon={{ fontSource: fontProps }} tabKey="fontIconOnly" />
-        <Tab icon={{ svgSource: svgProps }} tabKey="svgIcon">
-          SVG Icon
-        </Tab>
-        <Tab icon={{ svgSource: svgProps }} tabKey="svgIconOnly" />
-      </TabList>
-    </View>
-  );
-};
-
-const TabListViewTest: React.FunctionComponent = () => {
-  const [key, setKey] = React.useState('a');
-  const views = React.useMemo(
-    () => ({
-      a: (
-        <View>
-          <SubHeader>This is View 1</SubHeader>
-          <Text variant="body1">Here is some text.</Text>
-        </View>
-      ),
-      b: (
-        <View>
-          <SubHeader>This is View 2</SubHeader>
-          <Button>Button 1</Button>
-        </View>
-      ),
-      c: (
-        <View>
-          <SubHeader>This is View 3</SubHeader>
-          <Menu>
-            <MenuTrigger>
-              <Button>Menu</Button>
-            </MenuTrigger>
-            <MenuPopover>
-              <MenuList>
-                <MenuItem>Item 1</MenuItem>
-                <MenuItem>Item 2</MenuItem>
-                <MenuItem>Item 3</MenuItem>
-              </MenuList>
-            </MenuPopover>
-          </Menu>
-        </View>
-      ),
-    }),
-    [],
-  );
-  return (
-    <View style={stackStyle}>
-      <TabList selectedKey={key} onTabSelect={setKey}>
-        <Tab tabKey="a">View 1</Tab>
-        <Tab tabKey="b">View 2</Tab>
-        <Tab tabKey="c">View 3</Tab>
-      </TabList>
-      {views[key]}
-    </View>
-  );
-};
-
-const sections: TestSection[] = [
-  {
-    name: 'TabList Controlled vs Uncontrolled',
-    component: TabListDefaultTest,
-    testID: TABLIST_TESTPAGE,
-  },
-  {
-    name: 'Disabled',
-    component: TabListDisabledTest,
-  },
-  {
-    name: 'Variants',
-    component: TabListVariantsTest,
-  },
-  {
-    name: 'Icon',
-    component: TabListIconTest,
-  },
-  {
-    name: 'Rendering Content Separately',
-    component: TabListViewTest,
-  },
-];
-
-const e2eSections: TestSection[] = [
-  {
-    name: 'E2E Tests',
-    component: TabListE2ETest,
-  },
-];
-
-export const TabListTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Production',
-    uwpStatus: 'Backlog',
-    iosStatus: 'Production',
-    macosStatus: 'Production',
-    androidStatus: 'Production',
-  };
-
-  const description = 'With Tabs, users can navigate to another view.';
-
-  return <Test name="TabList Test" description={description} sections={sections} status={status} e2eSections={e2eSections} />;
-};

package/src/TestComponents/Test.tsx

@@ -1,244 +0,0 @@
-import * as React from 'react';
-import { Platform, StyleSheet, Switch, View } from 'react-native';
-
-import { Link, Separator, Text, ToggleButton } from '@fluentui/react-native';
-import { ButtonV1 as Button } from '@fluentui-react-native/button';
-import { E2E_MODE_SWITCH, E2E_TEST_SECTION } from '@fluentui-react-native/e2e-testing';
-import type { SvgIconProps } from '@fluentui-react-native/icon';
-import { Stack } from '@fluentui-react-native/stack';
-import { useTheme } from '@fluentui-react-native/theme-types';
-import type { SvgProps } from 'react-native-svg';
-import Svg, { G, Path } from 'react-native-svg';
-
-import { stackStyle } from './Common/styles';
-import { testProps } from './Common/TestProps';
-
-export type TestSection = {
-  name: string;
-  testID?: string;
-  component: React.FunctionComponent;
-} | null;
-
-export type Status = 'Production' | 'Beta' | 'Experimental' | 'Backlog' | 'N/A' | 'Deprecated';
-export type PlatformStatus = {
-  win32Status: Status;
-  uwpStatus: Status;
-  iosStatus: Status;
-  macosStatus: Status;
-  androidStatus: Status;
-};
-
-export interface TestProps {
-  name: string;
-  description: string;
-  spec?: string;
-  status: PlatformStatus;
-  sections: TestSection[];
-  e2eSections?: TestSection[];
-}
-
-const definitions = {
-  Production: 'Control is ready for broad partner use and to be used in production-ready scenarios.',
-  Beta: 'Control is ready for partner consumption, but not ready for production release (e.g. fixing bugs).',
-  Experimental: 'Control code checked into repo, but not ready for partner use.',
-  Backlog: 'Control is in plan and on our backlog to deliver.',
-  'N/A': 'Control is not in current plan.',
-  Deprecated: 'Control is being deprecated.',
-};
-
-const styles = StyleSheet.create({
-  name: {
-    marginTop: 4,
-    flex: Platform.select({ ios: 0, android: 0, default: 1 }),
-  },
-  definitionHeader: {
-    marginTop: 12,
-    marginBottom: 6,
-  },
-  description: {
-    alignItems: 'flex-start',
-    flexWrap: 'wrap',
-  },
-  header: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    flexWrap: 'wrap',
-  },
-  section: {
-    marginTop: 12,
-  },
-  statusView: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  statusLabel: {
-    marginTop: 2,
-    marginStart: 4,
-  },
-  status: {
-    fontWeight: 'normal',
-  },
-  // This button is only for our E2E testing framework. We want to be able to put keyboard focus in any test page if we need it.
-  // This button will be at the top of every test page and allows us to do that. But we don't want partners to see it.
-  e2eFocusButton: {
-    opacity: 0,
-  },
-  e2eSection: {
-    marginBottom: 4,
-  },
-  e2eSwitch: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  e2eSwitchLabel: {
-    marginRight: 4,
-    textAlignVertical: 'center',
-  },
-});
-
-export const Test = (props: TestProps): React.ReactElement<Record<string, never>> => {
-  const [showStatus, setShowStatus] = React.useState(false);
-  const [showE2E, setShowE2E] = React.useState(false);
-
-  const toggleSvg: React.FunctionComponent<SvgProps> = () => {
-    const plusPath =
-      'M6.5 1.75C6.5 1.33579 6.16421 1 5.75 1C5.33579 1 5 1.33579 5 1.75V5H1.75C1.33579 5 1 5.33579 1 5.75C1 6.16421 1.33579 6.5 1.75 6.5H5V9.75C5 10.1642 5.33579 10.5 5.75 10.5C6.16421 10.5 6.5 10.1642 6.5 9.75V6.5H9.75C10.1642 6.5 10.5 6.16421 10.5 5.75C10.5 5.33579 10.1642 5 9.75 5H6.5V1.75Z';
-    const minusPath = 'M2.75 5.25h6.5s0.75 0 0.75 0.75v0s0 0.75 -0.75 0.75h-6.5s-0.75 0 -0.75 -0.75v0s0 -0.75 0.75 -0.75';
-
-    const path = showStatus ? minusPath : plusPath;
-    return (
-      <Svg>
-        <G>
-          <Path d={path} fill="black" />
-        </G>
-      </Svg>
-    );
-  };
-  const svgProps: SvgIconProps = {
-    src: toggleSvg,
-  };
-
-  const theme = useTheme();
-  const fontFamily = theme.typography.families.primary;
-
-  const plusCodepoint = 0x2795;
-  const minusCodepoint = 0x2796;
-  const fontIconProps = {
-    fontFamily: fontFamily,
-    codepoint: showStatus ? minusCodepoint : plusCodepoint,
-    fontSize: 10,
-  };
-
-  const toggleIconProps = Platform.OS === 'windows' ? { fontSource: fontIconProps } : { svgSource: svgProps, width: 12, height: 12 };
-  const { e2eSections } = props;
-
-  const isMobile = Platform.OS === 'ios' || Platform.OS === 'android';
-
-  return (
-    <View>
-      <View style={styles.header}>
-        <Text style={styles.name} variant="heroSemibold">
-          {props.name}
-        </Text>
-        {!isMobile && (
-          <Button
-            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-            {...testProps('Focus_Button')}
-            style={styles.e2eFocusButton}
-          >
-            E2E Button
-          </Button>
-        )}
-        {props.e2eSections && (
-          <View style={styles.e2eSwitch}>
-            <Text style={styles.e2eSwitchLabel} {...(isMobile ? {} : { variant: 'body1Strong' })}>
-              E2E Mode
-            </Text>
-            <Switch onValueChange={setShowE2E} value={showE2E} {...testProps(E2E_MODE_SWITCH)} />
-          </View>
-        )}
-        {props.spec && <Link url={props.spec} content="SPEC" />}
-      </View>
-      <Separator />
-      {e2eSections && showE2E && (
-        // We can check if the E2E section renders by checking if the "E2E Tests" header has rendered for each spec
-        <>
-          <Text variant="headerSemibold" {...testProps(E2E_TEST_SECTION)}>
-            E2E Tests
-          </Text>
-          {e2eSections.map((section, i) => {
-            if (section === null) {
-              return null;
-            }
-            const { component: E2EComponent } = section;
-            return <E2EComponent key={i} />;
-          })}
-        </>
-      )}
-      <Stack style={stackStyle}>
-        <Text style={styles.description}>{props.description}</Text>
-      </Stack>
-      <Stack style={stackStyle}>
-        <View style={styles.statusView}>
-          <Text variant="headerStandard">Platform Status</Text>
-          <ToggleButton iconOnly={true} icon={toggleIconProps} onClick={() => setShowStatus(!showStatus)} />
-        </View>
-        {showStatus && (
-          <>
-            <Text style={styles.statusLabel} variant="bodySemibold">
-              Win32: <Text style={styles.status}>{props.status.win32Status}</Text>
-            </Text>
-            <Text style={styles.statusLabel} variant="bodySemibold">
-              UWP: <Text style={styles.status}>{props.status.uwpStatus}</Text>
-            </Text>
-            <Text style={styles.statusLabel} variant="bodySemibold">
-              iOS: <Text style={styles.status}>{props.status.iosStatus}</Text>
-            </Text>
-            <Text style={styles.statusLabel} variant="bodySemibold">
-              macOS: <Text style={styles.status}>{props.status.macosStatus}</Text>
-            </Text>
-            <Text style={styles.statusLabel} variant="bodySemibold">
-              Android: <Text style={styles.status}>{props.status.androidStatus}</Text>
-            </Text>
-
-            <Text style={styles.definitionHeader} variant="headerStandard">
-              Status Definitions
-            </Text>
-            {Object.entries(definitions).map(([key, value]) => {
-              return (
-                <Text style={styles.statusLabel} variant="bodySemibold" key={key}>
-                  {key}: <Text style={styles.status}>{value}</Text>
-                </Text>
-              );
-            })}
-          </>
-        )}
-      </Stack>
-      {props.sections.map((section, index) => {
-        if (section == null) {
-          return <></>;
-        }
-
-        const TestComponent = section.component;
-        return (
-          <View key={index}>
-            <Text
-              style={styles.section}
-              variant="headerSemibold"
-              /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-              {...testProps(section.testID)}
-            >
-              {section.name}
-            </Text>
-            <Separator />
-            <TestComponent />
-          </View>
-        );
-      })}
-    </View>
-  );
-};

package/src/TestComponents/TextLegacy/CustomizeUsage.tsx

@@ -1,126 +0,0 @@
-import * as React from 'react';
-import { Platform, View } from 'react-native';
-
-import { Text } from '@fluentui/react-native';
-import { Stack } from '@fluentui-react-native/stack';
-
-import { stackStyle } from '../Common/styles';
-
-const RedCaptionBold = Text.customize({ tokens: { variant: 'captionStandard', fontWeight: '700', color: '#ff0000' } });
-const OrangeSecondaryBold = Text.customize({ tokens: { variant: 'secondaryStandard', fontWeight: '700', color: '#ff9900' } });
-const YellowBodyBold = Text.customize({ tokens: { variant: 'bodyStandard', fontWeight: '700', color: '#f3ce00' } });
-const GreenSubheaderBold = Text.customize({ tokens: { variant: 'subheaderStandard', fontWeight: '700', color: '#02c440' } });
-const BlueHeaderBold = Text.customize({ tokens: { variant: 'headerStandard', fontWeight: '700', color: '#0229c4' } });
-const IndigoHeroBold = Text.customize({ tokens: { variant: 'heroStandard', fontWeight: '700', color: '#4b0082' } });
-const PurpleHeroLargeBold = Text.customize({ tokens: { variant: 'heroLargeStandard', fontWeight: '700', color: '#8402c4' } });
-
-// Android has a limited fontFamily support and unknown fonts fallback to sans-serif (Roboto).
-// Custom fonts (ttf, otf) are supported but need to be linked using 'react-native link'
-// The supported font families can be found as <aliases> at https://android.googlesource.com/platform/frameworks/base/+/master/data/fonts/fonts.xml
-const CustomFontNames = {
-  ...Platform.select({
-    android: {
-      CourierNew: 'courier new',
-      Georgia: 'georgia',
-      TimesNewRoman: 'times new roman',
-    },
-    default: {
-      CourierNew: 'Courier New',
-      Georgia: 'Georgia',
-      TimesNewRoman: 'Times New Roman',
-    },
-  }),
-};
-
-const ArialBlack = Text.customize({ tokens: { variant: 'heroLargeStandard', fontFamily: 'Arial Black' } });
-const BrushScriptMT = Text.customize({ tokens: { variant: 'heroStandard', fontFamily: 'Brush Script MT' } });
-const CourierNew = Text.customize({ tokens: { variant: 'headerStandard', fontFamily: CustomFontNames.CourierNew } });
-const Georgia = Text.customize({ tokens: { variant: 'subheaderStandard', fontFamily: CustomFontNames.Georgia } });
-const TimesNewRoman = Text.customize({ tokens: { variant: 'secondaryStandard', fontFamily: CustomFontNames.TimesNewRoman } });
-const Wingdings = Text.customize({ tokens: { variant: 'captionStandard', fontFamily: 'Wingdings' } });
-
-// Examples of supported Android fonts.
-const Casual = Text.customize({ tokens: { variant: 'heroStandard', fontFamily: 'casual' } });
-const Cursive = Text.customize({ tokens: { variant: 'heroStandard', fontFamily: 'cursive' } });
-// Examples of iOS fonts.
-const Papyrus = Text.customize({ tokens: { variant: 'heroLargeStandard', fontFamily: 'Papyrus' } });
-const Helvetica = Text.customize({ tokens: { variant: 'heroLargeStandard', fontFamily: 'Helvetica' } });
-// Fonts supported on Android and iOS
-const Arial = Text.customize({ tokens: { variant: 'heroLargeStandard', fontFamily: 'arial' } });
-
-export const CustomizeUsage: React.FunctionComponent = () => {
-  const CustomUsageStack = () => {
-    return (
-      <Stack style={stackStyle} gap={5}>
-        <RedCaptionBold>RedCaptionBold</RedCaptionBold>
-        <OrangeSecondaryBold>OrangeSecondaryBold</OrangeSecondaryBold>
-        <YellowBodyBold>YellowBodyBold</YellowBodyBold>
-        <GreenSubheaderBold>GreenSubheaderBold</GreenSubheaderBold>
-        <BlueHeaderBold>BlueHeaderBold</BlueHeaderBold>
-        <IndigoHeroBold>IndigoHeroBold</IndigoHeroBold>
-        <PurpleHeroLargeBold>PurpleHeroLargeBold</PurpleHeroLargeBold>
-      </Stack>
-    );
-  };
-
-  const CustomFontStack = () => {
-    return (
-      <Stack style={stackStyle} gap={5}>
-        <ArialBlack>Arial Black</ArialBlack>
-        <BrushScriptMT>Brush Script MT</BrushScriptMT>
-        <CourierNew>Courier New</CourierNew>
-        <Georgia>Georgia</Georgia>
-        <TimesNewRoman>TimesNewRoman</TimesNewRoman>
-        <Wingdings>Wingdings</Wingdings>
-      </Stack>
-    );
-  };
-  const CustomFontStackAndroid = () => {
-    return (
-      <Stack style={stackStyle} gap={5}>
-        <Arial>Arial</Arial>
-        <Casual>Casual</Casual>
-        <Cursive>Cursive</Cursive>
-        <CourierNew>Courier New</CourierNew>
-        <Georgia>Georgia</Georgia>
-        <TimesNewRoman>TimesNewRoman</TimesNewRoman>
-      </Stack>
-    );
-  };
-  const CustomFontStackiOS = () => {
-    return (
-      <Stack style={stackStyle} gap={5}>
-        <Arial>Arial</Arial>
-        <Papyrus>Papyrus</Papyrus>
-        <Helvetica>Helvetica</Helvetica>
-        <CourierNew>Courier New</CourierNew>
-        <Georgia>Georgia</Georgia>
-        <TimesNewRoman>TimesNewRoman</TimesNewRoman>
-      </Stack>
-    );
-  };
-
-  switch (Platform.OS) {
-    case 'android':
-      return (
-        <View>
-          <CustomUsageStack />
-          <CustomFontStackAndroid />
-        </View>
-      );
-    case 'ios':
-      return (
-        <View>
-          <CustomUsageStack />
-          <CustomFontStackiOS />
-        </View>
-      );
-    default:
-      return (
-        <View>
-          <CustomUsageStack />
-          <CustomFontStack />
-        </View>
-      );
-  }
-};

package/src/TestComponents/TextLegacy/PressableUsage.tsx

@@ -1,55 +0,0 @@
-import * as React from 'react';
-import { Alert, Linking, View } from 'react-native';
-
-import { Text } from '@fluentui/react-native';
-import { Stack } from '@fluentui-react-native/stack';
-import type { IKeyboardEvent, IHandledKeyboardEvent } from '@office-iss/react-native-win32';
-
-import { stackStyle } from '../Common/styles';
-
-export const PressableUsage: React.FunctionComponent = () => {
-  const _onPress = (): void => {
-    Linking.openURL('https://www.microsoft.com');
-  };
-
-  const _onKeyDown = (ev: IKeyboardEvent) => {
-    if (ev.nativeEvent.key === 'Enter' || ev.nativeEvent.key == 'Space') Linking.openURL('https://www.microsoft.com');
-  };
-
-  const _onPress2 = (): void => {
-    Alert.alert('Alert', 'Success!');
-  };
-
-  const _onKeyDown2 = (ev: IKeyboardEvent) => {
-    if (ev.nativeEvent.key === 'Enter' || ev.nativeEvent.key == ' ') Alert.alert('Alert', 'Success!');
-  };
-
-  const handledNativeKeyboardEvents: IHandledKeyboardEvent[] = [{ key: 'Enter' }, { key: 'Space' }];
-
-  return (
-    <View>
-      <Stack style={stackStyle} gap={5}>
-        <Text variant={'bodyStandard'}>
-          To learn more about microsoft, visit this{' '}
-          <Text variant={'bodyStandard'} color="blue" keyDownEvents={handledNativeKeyboardEvents} onPress={_onPress} onKeyDown={_onKeyDown}>
-            webpage
-          </Text>{' '}
-          for more details.
-        </Text>
-        <Text variant={'bodyStandard'}>
-          Press{' '}
-          <Text
-            variant={'bodyStandard'}
-            color="blue"
-            keyDownEvents={handledNativeKeyboardEvents}
-            onPress={_onPress2}
-            onKeyDown={_onKeyDown2}
-          >
-            here
-          </Text>{' '}
-          to view an alert.
-        </Text>
-      </Stack>
-    </View>
-  );
-};

package/src/TestComponents/TextLegacy/StandardUsage.tsx

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-
-import { Text } from '@fluentui/react-native';
-import { Stack } from '@fluentui-react-native/stack';
-
-import { stackStyle } from '../Common/styles';
-
-export const StandardUsage: React.FunctionComponent = () => {
-  return (
-    <View>
-      <Stack style={stackStyle} gap={5}>
-        <Text variant="captionStandard">CaptionStandard</Text>
-        <Text variant="secondaryStandard">SecondaryStandard</Text>
-        <Text variant="secondarySemibold">SecondarySemibold</Text>
-        <Text variant="bodyStandard">BodyStandard</Text>
-        <Text variant="bodySemibold">BodySemibold</Text>
-        <Text variant="subheaderStandard">SubheaderStandard</Text>
-        <Text variant="subheaderSemibold">SubheaderSemibold</Text>
-        <Text variant="headerStandard">HeaderStandard</Text>
-        <Text variant="headerSemibold">HeaderSemibold</Text>
-        <Text variant="heroStandard">HeroStandard</Text>
-        <Text variant="heroSemibold">HeroSemibold</Text>
-        <Text variant="heroLargeStandard">HeroLargeStandard</Text>
-        <Text variant="heroLargeSemibold">HeroLargeSemibold</Text>
-      </Stack>
-    </View>
-  );
-};