@fluentui-react-native/tester 0.126.16 → 0.126.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.126.16",
+  "version": "0.126.17",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -35,41 +35,41 @@
   "dependencies": {
     "@fluentui-react-native/android-theme": ">=0.15.5 <1.0.0",
     "@fluentui-react-native/apple-theme": ">=0.17.6 <1.0.0",
-    "@fluentui-react-native/avatar": "^1.5.8",
-    "@fluentui-react-native/badge": ">=0.4.9 <1.0.0",
-    "@fluentui-react-native/button": ">=0.32.15 <1.0.0",
+    "@fluentui-react-native/avatar": "^1.5.9",
+    "@fluentui-react-native/badge": ">=0.4.10 <1.0.0",
+    "@fluentui-react-native/button": ">=0.32.16 <1.0.0",
     "@fluentui-react-native/default-theme": ">=0.16.20 <1.0.0",
-    "@fluentui-react-native/dropdown": ">=0.7.10 <1.0.0",
+    "@fluentui-react-native/dropdown": ">=0.7.11 <1.0.0",
     "@fluentui-react-native/experimental-activity-indicator": ">=0.7.7 <1.0.0",
     "@fluentui-react-native/experimental-avatar": ">=0.17.3 <1.0.0",
-    "@fluentui-react-native/experimental-button": "0.16.73",
-    "@fluentui-react-native/experimental-checkbox": "0.13.23",
+    "@fluentui-react-native/experimental-button": "0.16.74",
+    "@fluentui-react-native/experimental-checkbox": "0.13.24",
     "@fluentui-react-native/experimental-expander": "0.5.7",
     "@fluentui-react-native/experimental-icon": ">=0.1.11 <1.0.0",
-    "@fluentui-react-native/experimental-menu-button": ">=0.6.12 <1.0.0",
+    "@fluentui-react-native/experimental-menu-button": ">=0.6.13 <1.0.0",
     "@fluentui-react-native/experimental-native-date-picker": ">=0.7.4 <1.0.0",
-    "@fluentui-react-native/experimental-radio-group": "^0.9.0",
+    "@fluentui-react-native/experimental-radio-group": "^0.9.1",
     "@fluentui-react-native/experimental-shadow": "0.2.55",
     "@fluentui-react-native/experimental-shimmer": "0.8.7",
-    "@fluentui-react-native/experimental-tabs": "0.8.17",
-    "@fluentui-react-native/experimental-text": ">=0.11.37 <1.0.0",
+    "@fluentui-react-native/experimental-tabs": "0.8.18",
+    "@fluentui-react-native/experimental-text": ">=0.11.38 <1.0.0",
     "@fluentui-react-native/framework": ">=0.8.30 <1.0.0",
-    "@fluentui-react-native/icon": "0.16.9",
+    "@fluentui-react-native/icon": "0.16.10",
     "@fluentui-react-native/interactive-hooks": ">=0.22.6 <1.0.0",
-    "@fluentui-react-native/menu": "^1.2.8",
+    "@fluentui-react-native/menu": "^1.2.9",
     "@fluentui-react-native/merge-props": ">=0.5.1 <1.0.0",
     "@fluentui-react-native/separator": "^0.14.3",
-    "@fluentui-react-native/notification": "0.21.10",
-    "@fluentui-react-native/stack": ">=0.7.38 <1.0.0",
-    "@fluentui-react-native/switch": "^0.8.8",
-    "@fluentui-react-native/text": ">=0.19.6 <1.0.0",
+    "@fluentui-react-native/notification": "0.21.11",
+    "@fluentui-react-native/stack": ">=0.7.39 <1.0.0",
+    "@fluentui-react-native/switch": "^0.8.9",
+    "@fluentui-react-native/text": ">=0.19.7 <1.0.0",
     "@fluentui-react-native/theme": ">=0.7.14 <1.0.0",
     "@fluentui-react-native/theme-tokens": "^0.22.5",
     "@fluentui-react-native/theme-types": ">=0.28.0 <1.0.0",
     "@fluentui-react-native/themed-stylesheet": "^1.4.1",
     "@fluentui-react-native/theming-utils": ">=0.21.0 <1.0.0",
     "@fluentui-react-native/win32-theme": ">=0.24.7 <1.0.0",
-    "@fluentui/react-native": ">=0.35.0 <1.0.0",
+    "@fluentui/react-native": ">=0.35.1 <1.0.0",
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-native-fontawesome": "^0.3.0",

package/src/TestComponents/Button/ButtonTest.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ButtonFocusTest_deprecated } from './deprecated/ButtonFocusTest';
 import { ButtonIconTest_deprecated } from './deprecated/ButtonIconTest';
-import { BUTTON_TESTPAGE } from '../../../../E2E/src/Button/consts';
+import { BUTTON_TESTPAGE } from '../../../../E2E/src/ButtonLegacy/consts';
 import { E2EButtonTest_deprecated } from './deprecated/E2EButtonTest';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { ButtonVariantTest } from './ButtonVariantTestSection';
@@ -9,7 +9,7 @@ import { ToggleButtonTest } from './ToggleButtonTestSection';
 import { ButtonIconTest } from '../Button/ButtonIconTestSection';
 import { ButtonSizeTest } from './ButtonSizeTestSection';
 import { ButtonShapeTest } from './ButtonShapeTestSection';
-import { E2EButtonExperimentalTest } from './E2EButtonTest';
+import { E2EButtonTest } from './E2EButtonTest';
 import { ButtonHOCTest } from '../Button/ButtonHOCTestSection';
 import { Platform } from 'react-native';
 
@@ -46,7 +46,7 @@ const buttonSections: TestSection[] = [
   },
   {
     name: 'E2E Button Testing',
-    component: E2EButtonExperimentalTest,
+    component: E2EButtonTest,
   },
   {
     name: 'Deprecated Basic Button',

package/src/TestComponents/Button/E2EButtonTest.tsx

@@ -16,11 +16,11 @@ import {
   BUTTON_PRESS_TEST_COMPONENT_LABEL,
   BUTTON_FOCUSABLE_TEST_COMPONENT,
   BUTTON_FOCUSABLE_TEST_COMPONENT_LABEL,
-} from '../../../../E2E/src/Button/consts';
+} from '../../../../E2E/src/ButtonLegacy/consts';
 import { IViewWin32Props } from '@office-iss/react-native-win32';
 import { testProps } from '../Common/TestProps';
 
-export const E2EButtonExperimentalTest: React.FunctionComponent = () => {
+export const E2EButtonTest: React.FunctionComponent = () => {
   const [buttonPressed, setButtonPressed] = React.useState(false);
   const [keyDetected, setKeyDetected] = React.useState('');
 

package/src/TestComponents/Button/deprecated/E2EButtonTest.tsx

@@ -10,7 +10,7 @@ import {
   BUTTON_NO_A11Y_LABEL_COMPONENT_DEPRECATED,
   BUTTON_ACCESSIBILITY_LABEL_DEPRECATED,
   BUTTON_TEST_COMPONENT_LABEL_DEPRECATED,
-} from '../../../../../E2E/src/Button/consts';
+} from '../../../../../E2E/src/ButtonLegacy/consts';
 import { testProps } from '../../Common/TestProps';
 
 export const E2EButtonTest_deprecated: React.FunctionComponent = () => {

package/src/TestComponents/CheckboxLegacy/CheckboxLegacyE2ETest.tsx

@@ -0,0 +1,51 @@
+import { Checkbox, Text } from '@fluentui/react-native';
+import * as React from 'react';
+import { View } from 'react-native';
+import { stackStyle } from '../Common/styles';
+import {
+  CHECKBOX_TEST_COMPONENT,
+  CHECKBOX_ON_PRESS,
+  CHECKBOX_NO_A11Y_LABEL_COMPONENT,
+  CHECKBOX_TEST_COMPONENT_LABEL,
+  CHECKBOX_ACCESSIBILITY_LABEL,
+} from '../../../../E2E/src/CheckboxLegacy/consts';
+import { Stack } from '@fluentui-react-native/stack';
+import { testProps } from '../Common/TestProps';
+
+export const CheckboxLegacyE2ETest: React.FunctionComponent = () => {
+  const [checkboxPressed, setCheckboxPressed] = React.useState(false);
+
+  const onClick = React.useCallback(
+    (checked) => {
+      setCheckboxPressed(checked);
+    },
+    [setCheckboxPressed],
+  );
+
+  return (
+    <View>
+      <Stack style={stackStyle}>
+        <Checkbox
+          accessibilityLabel={CHECKBOX_ACCESSIBILITY_LABEL}
+          disabled={false}
+          label="Testing accessibilityLabel"
+          onChange={onClick}
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(CHECKBOX_TEST_COMPONENT)}
+        />
+        <Checkbox
+          label={CHECKBOX_TEST_COMPONENT_LABEL}
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(CHECKBOX_NO_A11Y_LABEL_COMPONENT)}
+        />
+        {checkboxPressed ? (
+          <Text /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps(CHECKBOX_ON_PRESS)}
+          >
+            Checkbox Selected
+          </Text>
+        ) : null}
+      </Stack>
+    </View>
+  );
+};

package/src/TestComponents/CheckboxLegacy/CheckboxLegacyTest.tsx

@@ -0,0 +1,188 @@
+import { Checkbox } from '@fluentui/react-native';
+import { Theme, useTheme } from '@fluentui-react-native/theme-types';
+import * as React from 'react';
+import { View, TextInput } from 'react-native';
+import { commonTestStyles as commonStyles } from '../Common/styles';
+import { CHECKBOX_TESTPAGE } from '../../../../E2E/src/CheckboxLegacy/consts';
+import { CheckboxLegacyE2ETest } from './CheckboxLegacyE2ETest';
+import { Test, TestSection, PlatformStatus } from '../Test';
+import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+
+function onChangeUncontrolled(isChecked: boolean) {
+  console.log(isChecked);
+}
+
+const BasicCheckbox: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Checkbox label="Unchecked checkbox (undefined)" onChange={onChangeUncontrolled} />
+      <Checkbox label="Unchecked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked={false} />
+      <Checkbox
+        label="Checked checkbox (uncontrolled)"
+        onChange={onChangeUncontrolled}
+        defaultChecked={true}
+        accessibilityLabel="Hello there"
+      />
+      <Checkbox label="Disabled checkbox" onChange={onChangeUncontrolled} defaultChecked={false} disabled={true} />
+      <Checkbox label="Disabled checked checkbox" onChange={onChangeUncontrolled} defaultChecked={true} disabled={true} />
+      <Checkbox label="Checkbox will display a tooltip" onChange={onChangeUncontrolled} tooltip="This is a tooltip" />
+    </View>
+  );
+};
+
+const OtherCheckbox: React.FunctionComponent = () => {
+  const [isCheckedControlled1, setCheckedControlled1] = React.useState(false);
+  const onChangeControlled1 = React.useCallback((checked) => {
+    setCheckedControlled1(checked);
+  }, []);
+
+  const [isCheckedControlled2, setCheckedControlled2] = React.useState(true);
+  const onChangeControlled2 = React.useCallback((checked) => {
+    setCheckedControlled2(checked);
+  }, []);
+
+  return (
+    <View>
+      <Checkbox label="This is a controlled Checkbox" onChange={onChangeControlled1} checked={isCheckedControlled1} />
+      <Checkbox
+        label="Checkbox rendered with boxSide 'end' (controlled)"
+        onChange={onChangeControlled2}
+        boxSide="end"
+        checked={isCheckedControlled2}
+      />
+    </View>
+  );
+};
+
+const CircularCheckbox = Checkbox.customize({ tokens: { borderRadius: 50 } });
+
+const CircleColorCheckbox = Checkbox.customize({
+  tokens: { borderRadius: 50, checkboxBackgroundColor: 'white' },
+  _overrides: {
+    checked: {
+      tokens: {
+        checkboxBackgroundColor: 'green',
+        checkboxBorderColor: 'green',
+        checkmarkColor: 'white',
+      },
+    },
+    focused: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
+    hovered: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
+    pressed: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundPressed' } },
+  },
+});
+
+const HoverCheckbox = Checkbox.customize({
+  _overrides: {
+    checked: {
+      tokens: {
+        checkboxBackgroundColor: 'black',
+        checkmarkColor: 'white',
+      },
+    },
+    hovered: {
+      tokens: {
+        checkmarkVisibility: 1,
+      },
+    },
+  },
+});
+
+const getThemedStyles = themedStyleSheet((t: Theme) => {
+  return { textbox: { ...commonStyles.textBox, borderColor: t.colors.inputBorder } };
+});
+
+const TokenCheckbox: React.FunctionComponent = () => {
+  const [checkboxColor, setCheckboxColor] = React.useState('blue');
+  const [checkmarkColor, setCheckmarkColor] = React.useState('white');
+
+  const BlueCheckbox = Checkbox.customize({
+    tokens: { checkboxBackgroundColor: 'white' },
+    _overrides: {
+      checked: {
+        tokens: {
+          checkboxBackgroundColor: checkboxColor,
+          checkboxBorderColor: checkboxColor,
+          checkmarkColor: checkmarkColor,
+        },
+      },
+      focused: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
+      hovered: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
+      pressed: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundPressed' } },
+    },
+  });
+
+  const theme = useTheme();
+  const textBoxBorderStyle = getThemedStyles(theme);
+
+  return (
+    <View>
+      <CircularCheckbox label="A circular checkbox" onChange={onChangeUncontrolled} defaultChecked={false} />
+      <HoverCheckbox label="A checkbox with checkmark visible on hover" onChange={onChangeUncontrolled} defaultChecked={false} />
+      <CircleColorCheckbox label="A circular token-customized checkbox" onChange={onChangeUncontrolled} defaultChecked={true} />
+      <BlueCheckbox
+        label="Token-customized checkbox. Customizable below."
+        onChange={onChangeUncontrolled}
+        boxSide="end"
+        defaultChecked={false}
+      />
+
+      <TextInput
+        accessibilityLabel="Background color"
+        style={textBoxBorderStyle.textbox}
+        placeholder="Background color"
+        blurOnSubmit={true}
+        onSubmitEditing={(e) => {
+          setCheckboxColor(e.nativeEvent.text);
+        }}
+      />
+
+      <TextInput
+        accessibilityLabel="Checkmark color"
+        style={textBoxBorderStyle.textbox}
+        placeholder="Checkmark color"
+        blurOnSubmit={true}
+        onSubmitEditing={(e) => {
+          setCheckmarkColor(e.nativeEvent.text);
+        }}
+      />
+    </View>
+  );
+};
+
+const checkboxSections: TestSection[] = [
+  {
+    name: 'Basic Checkboxes',
+    testID: CHECKBOX_TESTPAGE,
+    component: BasicCheckbox,
+  },
+  {
+    name: 'Other Implementations',
+    component: OtherCheckbox,
+  },
+  {
+    name: 'Token Customized Checkboxes',
+    component: TokenCheckbox,
+  },
+  {
+    name: 'Checkbox for E2E Testing',
+    component: CheckboxLegacyE2ETest,
+  },
+];
+
+export const CheckboxLegacyTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Deprecated',
+    uwpStatus: 'Deprecated',
+    iosStatus: 'N/A',
+    macosStatus: 'Deprecated',
+    androidStatus: 'N/A',
+  };
+
+  const description =
+    'Checkboxes give people a way to select one or more items from a group, or switch between two mutually exclusive options (checked or unchecked, on or off).';
+
+  const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/Checkbox/SPEC.md';
+
+  return <Test name="Checkbox Legacy Test" description={description} spec={spec} sections={checkboxSections} status={status} />;
+};

package/src/TestComponents/CheckboxLegacy/index.ts

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

package/src/TestComponents/CheckboxV1/CheckboxV1Test.tsx

@@ -0,0 +1,226 @@
+import * as React from 'react';
+import { CHECKBOXV1_TESTPAGE } from '../../../../E2E/src/CheckboxV1/consts';
+import { Test, TestSection, PlatformStatus } from '../Test';
+import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
+import { Theme, useTheme } from '@fluentui-react-native/theme-types';
+import { View, TextInput, Platform } from 'react-native';
+import { commonTestStyles as commonStyles, mobileStyles } from '../Common/styles';
+import { E2ECheckboxV1Test } from './E2ECheckboxV1Test';
+import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
+import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
+
+function onChangeUncontrolled(_e: InteractionEvent, isChecked: boolean) {
+  console.log(isChecked);
+}
+
+const BasicCheckbox: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Checkbox label="Unchecked checkbox (undefined)" onChange={onChangeUncontrolled} />
+      <Checkbox label="Unchecked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked={false} />
+      <Checkbox label="Checked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked accessibilityLabel="Hello there" />
+      <Checkbox label="Disabled checkbox" disabled />
+      <Checkbox label="Disabled checked checkbox" defaultChecked disabled />
+    </View>
+  );
+};
+
+const DesktopSpecificCheckbox: React.FunctionComponent = () => {
+  return (
+    <>
+      <Checkbox label="Checkbox will display a tooltip" tooltip="This is a tooltip" />
+      <Checkbox label="A circular checkbox" shape="circular" />
+      <Checkbox label="A checkbox with label placed before" labelPosition="before" />
+      <Checkbox label="A required checkbox" required />
+    </>
+  );
+};
+
+const SizeCheckbox: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Checkbox tooltip="Medium checkbox" size="medium" />
+      <Checkbox tooltip="Large checkbox" size="large" />
+      <Checkbox label="Medium checkbox" size="medium" />
+      <Checkbox label="Large checkbox" size="large" />
+    </View>
+  );
+};
+
+const OtherCheckbox: React.FunctionComponent = () => {
+  const [isChecked, setisChecked] = React.useState(false);
+
+  const setCheckedTrue = React.useCallback(() => {
+    setisChecked(true);
+  }, []);
+
+  const setCheckedFalse = React.useCallback(() => {
+    setisChecked(false);
+  }, []);
+
+  const memoizedStyles = React.useMemo(() => (Platform.OS === 'android' ? { ...mobileStyles.containerSpacedEvenly, height: 150 } : {}), []);
+
+  return (
+    <View style={memoizedStyles}>
+      <Button onClick={setCheckedTrue} size="small">
+        Check controlled checkboxes below
+      </Button>
+      <Button onClick={setCheckedFalse} size="small">
+        Uncheck controlled checkboxes below
+      </Button>
+
+      <Checkbox label="This is a controlled Checkbox" checked={isChecked} />
+      {Platform.OS !== 'android' && (
+        <>
+          <Checkbox label="Checkbox rendered with labelPosition 'before' (controlled)" labelPosition="before" checked={isChecked} />
+          <Checkbox label="A required checkbox with other required text" required="**" />
+        </>
+      )}
+    </View>
+  );
+};
+
+const CircleColorCheckbox = Checkbox.customize({
+  checked: {
+    checkboxBackgroundColor: 'green',
+    checkboxBorderColor: 'green',
+    checkmarkColor: 'white',
+  },
+});
+
+const HoverCheckbox = Checkbox.customize({
+  hovered: {
+    checkmarkOpacity: 1,
+  },
+});
+
+const BigLabelCheckbox = Checkbox.customize({
+  label: {
+    fontSize: 24,
+    fontWeight: 'bold',
+  },
+});
+
+const ComposedCheckbox = Checkbox.compose({
+  slotProps: {
+    label: { style: { color: 'hotpink' } },
+  },
+});
+
+const getThemedStyles = themedStyleSheet((t: Theme) => {
+  return { textbox: { ...commonStyles.textBox, borderColor: t.colors.inputBorder } };
+});
+
+const TokenCheckbox: React.FunctionComponent = () => {
+  const [checkboxColor, setCheckboxColor] = React.useState('blue');
+  const [checkmarkColor, setCheckmarkColor] = React.useState('white');
+
+  const BlueCheckbox = Checkbox.customize({
+    checked: {
+      checkboxBackgroundColor: checkboxColor,
+      checkboxBorderColor: checkboxColor,
+      checkmarkColor: checkmarkColor,
+    },
+  });
+
+  const theme = useTheme();
+  const textBoxBorderStyle = getThemedStyles(theme);
+
+  return (
+    <View>
+      {Platform.OS !== 'android' && (
+        <>
+          <HoverCheckbox label="A checkbox with checkmark visible on hover" onChange={onChangeUncontrolled} />
+          <CircleColorCheckbox
+            label="A circular token-customized checkbox"
+            shape="circular"
+            onChange={onChangeUncontrolled}
+            defaultChecked
+          />
+        </>
+      )}
+
+      <BigLabelCheckbox label="A checkbox with a bold large font label" />
+      <ComposedCheckbox label="A checkbox with a hot pink label and no padding" />
+
+      <BlueCheckbox
+        label="Token-customized checkbox. Customizable below."
+        onChange={onChangeUncontrolled}
+        labelPosition="before"
+        defaultChecked={false}
+      />
+      <TextInput
+        accessibilityLabel="Background color"
+        style={textBoxBorderStyle.textbox}
+        placeholder="Background color"
+        blurOnSubmit={true}
+        onSubmitEditing={(e) => {
+          setCheckboxColor(e.nativeEvent.text);
+        }}
+      />
+
+      <TextInput
+        accessibilityLabel="Checkmark color"
+        style={textBoxBorderStyle.textbox}
+        placeholder="Checkmark color"
+        blurOnSubmit={true}
+        onSubmitEditing={(e) => {
+          setCheckmarkColor(e.nativeEvent.text);
+        }}
+      />
+    </View>
+  );
+};
+
+const checkboxSections: TestSection[] = [
+  {
+    name: 'Basic Checkboxes',
+    testID: CHECKBOXV1_TESTPAGE,
+    component: BasicCheckbox,
+  },
+  Platform.select({
+    android: null,
+    default: {
+      name: 'Size Checkboxes',
+      component: SizeCheckbox,
+    },
+  }),
+  Platform.select({
+    android: null,
+    default: {
+      name: 'Desktop Specific Checkboxes',
+      component: DesktopSpecificCheckbox,
+    },
+  }),
+  {
+    name: 'Other Implementations',
+    component: OtherCheckbox,
+  },
+  Platform.select({
+    android: null,
+    default: {
+      name: 'Token Customized Checkboxes',
+      component: TokenCheckbox,
+    },
+  }),
+  {
+    name: 'E2E Testing for CheckboxV1',
+    component: E2ECheckboxV1Test,
+  },
+];
+
+export const CheckboxV1Test: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Production',
+    uwpStatus: 'N/A',
+    iosStatus: 'N/A',
+    macosStatus: 'Experimental',
+    androidStatus: 'Experimental',
+  };
+
+  const description =
+    'Checkboxes give people a way to select one or more items from a group, or switch between two mutually exclusive options (checked or unchecked, on or off).';
+
+  return <Test name="CheckboxV1 Test" description={description} sections={checkboxSections} status={status} />;
+};

package/src/TestComponents/CheckboxV1/E2ECheckboxV1Test.tsx

@@ -0,0 +1,53 @@
+import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
+import * as React from 'react';
+import { View } from 'react-native';
+import { stackStyle } from '../Common/styles';
+import {
+  CHECKBOXV1_TEST_COMPONENT,
+  CHECKBOXV1_ACCESSIBILITY_LABEL,
+  CHECKBOXV1_NO_A11Y_LABEL_COMPONENT,
+  CHECKBOXV1_TEST_COMPONENT_LABEL,
+  CHECKBOXV1_ON_PRESS,
+} from '../../../../E2E/src/CheckboxV1/consts';
+import { Stack } from '@fluentui-react-native/stack';
+import { Text } from '@fluentui/react-native';
+import { testProps } from '../Common/TestProps';
+
+export const E2ECheckboxV1Test: React.FunctionComponent = () => {
+  const [checkboxPressed, setCheckboxPressed] = React.useState(false);
+
+  const onClick = React.useCallback(
+    (_e, checked) => {
+      setCheckboxPressed(checked);
+    },
+    [setCheckboxPressed],
+  );
+
+  return (
+    <View>
+      <Stack style={stackStyle}>
+        <Checkbox
+          accessibilityLabel={CHECKBOXV1_ACCESSIBILITY_LABEL}
+          disabled={false}
+          label="Testing accessibilityLabel"
+          onChange={onClick}
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(CHECKBOXV1_TEST_COMPONENT)}
+        />
+        <Checkbox
+          label={CHECKBOXV1_TEST_COMPONENT_LABEL}
+          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+          {...testProps(CHECKBOXV1_NO_A11Y_LABEL_COMPONENT)}
+        />
+        {checkboxPressed ? (
+          <Text
+            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+            {...testProps(CHECKBOXV1_ON_PRESS)}
+          >
+            Checkbox Selected
+          </Text>
+        ) : null}
+      </Stack>
+    </View>
+  );
+};

package/src/TestComponents/CheckboxV1/index.ts

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

package/src/TestComponents/Icon/IconLegacyE2ETest.tsx

@@ -0,0 +1,33 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import * as React from 'react';
+import { View } from 'react-native';
+import { Text } from '@fluentui/react-native';
+import { Icon } from '@fluentui-react-native/icon';
+import { ICON_ACCESSIBILITY_LABEL } from '../../../../E2E/src/IconLegacy/consts';
+import { RasterImageIconProps } from '@fluentui-react-native/icon';
+import { testImage } from '../Common/iconExamples';
+
+export const E2ETestingIcon: React.FunctionComponent = () => {
+  const rasterRainbowSpectrumProps: RasterImageIconProps = { src: testImage };
+  const rasterChessProps: RasterImageIconProps = { src: { uri: 'https://static.thenounproject.com/png/2960386-200.png' } };
+
+  const showRasterIcons = true;
+
+  return (
+    <View>
+      {showRasterIcons ? (
+        <View>
+          <Text>Raster icons</Text>
+          <Icon
+            rasterImageSource={rasterRainbowSpectrumProps}
+            width={100}
+            height={100}
+            color="green"
+            accessibilityLabel={ICON_ACCESSIBILITY_LABEL}
+          />
+          <Icon rasterImageSource={rasterChessProps} width={100} height={100} color="blue" />
+        </View>
+      ) : null}
+    </View>
+  );
+};