@fluentui-react-native/tester 0.107.2 → 0.108.1

package/src/TestComponents/CheckboxExperimental/CheckboxTest.tsx

@@ -3,16 +3,29 @@ import { EXPERIMENTAL_CHECKBOX_TESTPAGE } from './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 } from 'react-native';
+import { View, TextInput, Platform } from 'react-native';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import { E2ECheckboxExperimentalTest } from './E2ECheckboxExperimentalTest';
 import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { Text } from '@fluentui-react-native/text';
 
 function onChangeUncontrolled(_e: InteractionEvent, isChecked: boolean) {
   console.log(isChecked);
 }
 
+const AndroidBasicCheckbox = () => {
+  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 BasicCheckbox: React.FunctionComponent = () => {
   return (
     <View>
@@ -147,15 +160,23 @@ const TokenCheckbox: React.FunctionComponent = () => {
   );
 };
 
+const UnSupportedOnAndroid = () => {
+  return (
+    <Text style={{ margin: 10, fontSize: 14 }} color="red">
+      Unsupported on Android
+    </Text>
+  );
+};
+
 const checkboxSections: TestSection[] = [
   {
     name: 'Basic Checkboxes',
     testID: EXPERIMENTAL_CHECKBOX_TESTPAGE,
-    component: BasicCheckbox,
+    component: Platform.OS === 'android' ? AndroidBasicCheckbox : BasicCheckbox,
   },
   {
     name: 'Size Checkboxes',
-    component: SizeCheckbox,
+    component: Platform.OS === 'android' ? UnSupportedOnAndroid : SizeCheckbox,
   },
   {
     name: 'Other Implementations',

package/src/TestComponents/Common/iconExamples.tsx

@@ -1,13 +1,15 @@
 import { Platform } from 'react-native';
-import { SvgIconProps, FontIconProps } from '@fluentui-react-native/icon';
-import TestSvg from '../Button/test.svg';
+import { SvgIconProps, FontIconProps, IconProps } from '@fluentui-react-native/icon';
+import TestSvg from '../../../assets/test.svg';
 
 export const svgProps: SvgIconProps = {
   src: TestSvg,
   viewBox: '0 0 500 500',
 };
 
-const testTtf = require('./../../../../assets/Font_Awesome_900.otf');
+export const iconProps: IconProps = { svgSource: svgProps };
+
+export const testTtf = require('../../../assets/Font_Awesome_900.otf');
 
 export const fontProps: FontIconProps = Platform.select({
   macos: {
@@ -23,4 +25,4 @@ export const fontProps: FontIconProps = Platform.select({
   },
 });
 
-export const testImage = require('./../../../assets/icon_24x24.png');
+export const testImage = require('../../../assets/icon_24x24.png');

package/src/TestComponents/CornerRadius/CornerRadiusTest.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { HOMEPAGE_CORNERRADIUS_TESTPAGE } from './consts';
+import { Test, TestSection, PlatformStatus } from '../Test';
+import { View } from 'react-native';
+import { Stack } from '@fluentui-react-native/stack';
+import { stackStyle } from '../Common/styles';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import { Text } from '@fluentui/react-native';
+import { useFluentTheme } from '@fluentui-react-native/framework';
+import { getCurrentAppearance } from '@fluentui-react-native/theming-utils';
+
+interface CornerRadiusTestComponentProps {
+  name: string;
+  cornerRadius: number;
+}
+
+const CornerRadiusTestComponent: React.FunctionComponent<CornerRadiusTestComponentProps> = (props: CornerRadiusTestComponentProps) => {
+  const theme = useFluentTheme();
+  const isLightMode = getCurrentAppearance(theme.host.appearance, 'light') === 'light';
+
+  const outerBoxProps = React.useMemo(
+    () => ({
+      height: 60,
+      margin: 16,
+      backgroundColor: isLightMode ? globalTokens.color.grey80 : globalTokens.color.grey10,
+      borderRadius: props.cornerRadius,
+    }),
+    [props.cornerRadius, isLightMode],
+  );
+
+  const innerCircleIndicatorProps = React.useMemo(
+    () => ({
+      height: Math.min(props.cornerRadius * 2, 60),
+      width: Math.min(props.cornerRadius * 2, 60),
+      borderRadius: props.cornerRadius,
+      backgroundColor: isLightMode ? globalTokens.color.grey10 : globalTokens.color.grey80,
+    }),
+    [props.cornerRadius, isLightMode],
+  );
+
+  return (
+    <View>
+      <Text variant="bodySemibold">{props.name + ': ' + props.cornerRadius + 'px'}</Text>
+      <View style={outerBoxProps}>
+        <View style={innerCircleIndicatorProps}></View>
+      </View>
+    </View>
+  );
+};
+
+const CornerRadiusTest: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Stack style={stackStyle} gap={500}>
+        <CornerRadiusTestComponent name="radiusNone" cornerRadius={globalTokens.corner.radiusNone} />
+        <CornerRadiusTestComponent name="radius20" cornerRadius={globalTokens.corner.radius20} />
+        <CornerRadiusTestComponent name="radius40" cornerRadius={globalTokens.corner.radius40} />
+        <CornerRadiusTestComponent name="radius60" cornerRadius={globalTokens.corner.radius60} />
+        <CornerRadiusTestComponent name="radius80" cornerRadius={globalTokens.corner.radius80} />
+        <CornerRadiusTestComponent name="radius120" cornerRadius={globalTokens.corner.radius120} />
+        <CornerRadiusTestComponent name="radiusCircular" cornerRadius={globalTokens.corner.radiusCircular} />
+      </Stack>
+    </View>
+  );
+};
+
+const cornerRadiusSections: TestSection[] = [
+  {
+    name: 'Basic Usage',
+    testID: HOMEPAGE_CORNERRADIUS_TESTPAGE,
+    component: CornerRadiusTest,
+  },
+];
+
+export const CornerRadiusTokensTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Experimental',
+    uwpStatus: 'Experimental',
+    iosStatus: 'Experimental',
+    macosStatus: 'Experimental',
+    androidStatus: 'Experimental',
+  };
+
+  const description = 'The different global corner radius tokens available in Fluent UI.';
+
+  return <Test name="Corner Radius Tokens Test" description={description} sections={cornerRadiusSections} status={status} />;
+};

package/src/TestComponents/CornerRadius/consts.ts

@@ -0,0 +1,2 @@
+export const HOMEPAGE_CORNERRADIUS_BUTTON = 'Homepage_CornerRadius_Button';
+export const HOMEPAGE_CORNERRADIUS_TESTPAGE = 'CornerRadius_TestPage';

package/src/TestComponents/CornerRadius/index.ts

@@ -0,0 +1,2 @@
+export * from './CornerRadiusTest';
+export * from './consts';

package/src/TestComponents/Drawer/DrawerTest.tsx

@@ -5,20 +5,14 @@ import { Link } from '@fluentui/react-native';
 import { Button } from '@fluentui-react-native/experimental-button';
 import { Drawer } from '@fluentui-react-native/experimental-drawer';
 import { Stack } from '@fluentui-react-native/stack';
-import { Icon, SvgIconProps } from '@fluentui-react-native/icon';
+import { Icon } from '@fluentui-react-native/icon';
 import { DRAWER_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
-
-import TestSvg from '../Icon/assets/test.svg';
+import { svgProps } from '../Common/iconExamples';
 
 const BasicDrawer: React.FunctionComponent = () => {
   const stdBtnRef = React.useRef(null);
 
-  const svgProps: SvgIconProps = {
-    src: TestSvg,
-    viewBox: '0 0 500 500',
-  };
-
   return (
     <Stack style={stackStyle} gap={5}>
       <Drawer>

package/src/TestComponents/Icon/IconE2ETest.tsx

@@ -5,8 +5,7 @@ import { Text } from '@fluentui/react-native';
 import { Icon } from '@fluentui-react-native/icon';
 import { ICON_ACCESSIBILITY_LABEL } from './consts';
 import { RasterImageIconProps } from '@fluentui-react-native/icon';
-
-const testImage = require('../../../../assets/icon_24x24.png');
+import { testImage } from '../Common/iconExamples';
 
 export const E2ETestingIcon: React.FunctionComponent = () => {
   const rasterRainbowSpectrumProps: RasterImageIconProps = { src: testImage };

package/src/TestComponents/Icon/IconExperimental.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { FontIcon, SvgIcon, Icon } from '@fluentui-react-native/experimental-icon';
 import { Text, View } from 'react-native';
-import TestSvg from './assets/test.svg';
+import TestSvg from '../../../assets/test.svg';
 import { SvgIconProps } from '@fluentui-react-native/experimental-icon';
 
 const fontBuiltInProps = {

package/src/TestComponents/Icon/IconTest.tsx

@@ -7,10 +7,7 @@ import { Test, TestSection, PlatformStatus } from '../Test';
 import { ICON_TESTPAGE } from './consts';
 import { E2ETestingIcon } from './IconE2ETest';
 import { IconExperimental } from './IconExperimental';
-
-const testImage = require('../../../../assets/icon_24x24.png');
-const testTtf = require('./../../../assets/Font_Awesome_900.otf');
-import TestSvg from './assets/test.svg';
+import { testImage, testTtf, svgProps } from '../Common/iconExamples';
 
 const Icons: React.FunctionComponent = () => {
   const fontCustomFontProps: FontIconProps = {
@@ -26,11 +23,6 @@ const Icons: React.FunctionComponent = () => {
     fontSize: 32,
   };
 
-  const svgProps: SvgIconProps = {
-    src: TestSvg,
-    viewBox: '0 0 500 500',
-  };
-
   // d20 icon by Lonnie Tapscott, licensed under CC BY, modified to use "currentColor"
   // https://thenounproject.com/search/?q=d20&i=2453700
   const svgD20DataUriProps: SvgIconProps = {

package/src/TestComponents/MenuButton/NestedMenuButtonTest.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { Text, View, Switch } from 'react-native';
 import { Separator, MenuButton } from '@fluentui/react-native';
-import { menuItems, testImage, iconProps } from './testData';
+import { menuItems, iconProps } from './testData';
 import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonTestStyles';
+import { testImage } from '../Common/iconExamples';
 
 export const NestedMenuButton: React.FunctionComponent = () => {
   const [lastMenuItemClicked, setLastMenuItemClicked] = React.useState(null);

package/src/TestComponents/MenuButton/StandardMenuButtonTest.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { Separator, MenuButton, ContextualMenuProps } from '@fluentui/react-native';
 import { Text, View, Switch, Platform } from 'react-native';
-import { menuItems, iconProps, testImage } from './testData';
+import { menuItems, iconProps } from './testData';
 import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonTestStyles';
 import { IconSourcesType } from '@fluentui-react-native/icon';
+import { testImage } from '../Common/iconExamples';
 
 export const StandardMenuButton: React.FunctionComponent = () => {
   const [lastMenuItemClicked, setLastMenuItemClicked] = React.useState(null);

package/src/TestComponents/MenuButton/testData.ts

@@ -1,14 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import { MenuButtonItemProps } from '@fluentui/react-native';
-import { SvgIconProps } from '@fluentui-react-native/icon';
-export const testImage = require('./../../../assets/icon_24x24.png');
-import TestSvg from '../Button/test.svg';
 import { MENU_ITEM_1_COMPONENT } from './consts';
-
-const svgProps: SvgIconProps = {
-  src: TestSvg,
-  viewBox: '0 0 500 500',
-};
+import { svgProps, testImage } from '../Common/iconExamples';
 
 export const menuItems: MenuButtonItemProps[] = [
   {

package/src/TestComponents/MenuButtonExperimental/NestedMenuButtonTest.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { Text, View, Switch } from 'react-native';
 import { Separator } from '@fluentui/react-native';
-import { menuItems, testImage, iconProps } from './testData';
+import { menuItems, iconProps } from './testData';
 import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonTestStyles';
 import { MenuButton } from '@fluentui-react-native/experimental-menu-button';
+import { testImage } from '../Common/iconExamples';
 
 export const NestedMenuButton: React.FunctionComponent = () => {
   const [lastMenuItemClicked, setLastMenuItemClicked] = React.useState(null);

package/src/TestComponents/MenuButtonExperimental/StandardMenuButtonTest.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { Separator, ContextualMenuProps } from '@fluentui/react-native';
 import { Text, View, Switch, Platform } from 'react-native';
-import { menuItems, iconProps, testImage } from './testData';
+import { menuItems, iconProps } from './testData';
 import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonTestStyles';
 import { IconSourcesType } from '@fluentui-react-native/icon';
 import { MenuButton } from '@fluentui-react-native/experimental-menu-button';
+import { testImage } from '../Common/iconExamples';
 
 export const StandardMenuButton: React.FunctionComponent = () => {
   const [lastMenuItemClicked, setLastMenuItemClicked] = React.useState(null);

package/src/TestComponents/MenuButtonExperimental/testData.ts

@@ -1,13 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import { MenuButtonItemProps } from '@fluentui/react-native';
-import { SvgIconProps } from '@fluentui-react-native/icon';
-export const testImage = require('./../../../assets/icon_24x24.png');
-import TestSvg from '../Button/test.svg';
-
-const svgProps: SvgIconProps = {
-  src: TestSvg,
-  viewBox: '0 0 500 500',
-};
+import { testImage, svgProps } from '../Common/iconExamples';
 
 export const menuItems: MenuButtonItemProps[] = [
   {