@fluentui-react-native/tester 0.86.2 → 0.89.0

package/src/TestComponents/Common/MenuPicker.desktop.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { Text, View, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu';
 import { MenuPickerProps, collectionItem } from './MenuPicker';
-import { ButtonV1 as Button } from '@fluentui/react-native';
+import { ButtonV1 as Button, Text } from '@fluentui/react-native';
 import { SvgXml } from 'react-native-svg';
 
 const chevronXml = `

package/src/TestComponents/RadioGroupExperimental/DefaultRadioGroup.tsx

@@ -0,0 +1,44 @@
+import { RadioGroup } from '@fluentui-react-native/experimental-radio-group';
+import { RadioButton } from '@fluentui/react-native';
+import { Separator } from '@fluentui/react-native';
+import * as React from 'react';
+import { View } from 'react-native';
+
+export const DefaultRadioGroup: React.FunctionComponent = () => {
+  // Client's example onChange function
+  const onChange = (key: string) => {
+    console.log(key);
+  };
+
+  const [selectedKey, setSelectedKey] = React.useState('C');
+
+  const onChange2 = React.useCallback((key: string) => {
+    setSelectedKey(key);
+  }, []);
+
+  return (
+    <View>
+      <RadioGroup label="Uncontrolled RadioGroup" defaultValue="X" onChange={onChange}>
+        <RadioButton content="Option W" buttonKey="W" accessibilityLabel="Test Accessibility Label" />
+        <RadioButton content="Option X" buttonKey="X" />
+        <RadioButton content="Option Y (disabled)" buttonKey="C" disabled={true} />
+        <RadioButton content="Option Z" buttonKey="Z" />
+      </RadioGroup>
+      <Separator />
+      <RadioGroup label="Controlled RadioGroup" value={selectedKey} onChange={onChange2}>
+        <View>
+          <RadioButton
+            content="Option A"
+            buttonKey="A"
+            accessibilityLabel="Test Accessibility Label"
+            accessibilityPositionInSet={1}
+            accessibilitySetSize={4}
+          />
+          <RadioButton content="Option B" buttonKey="B" accessibilityPositionInSet={2} accessibilitySetSize={4} />
+          <RadioButton content="Option C" buttonKey="C" accessibilityPositionInSet={3} accessibilitySetSize={4} />
+          <RadioButton content="Option D" buttonKey="D" accessibilityPositionInSet={4} accessibilitySetSize={4} />
+        </View>
+      </RadioGroup>
+    </View>
+  );
+};

package/src/TestComponents/RadioGroupExperimental/RadioGroupExperimentalTest.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { RADIO_GROUP_EXPERIMENTAL_TESTPAGE } from './consts';
+import { DefaultRadioGroup } from './DefaultRadioGroup';
+import { Test, TestSection, PlatformStatus } from '../Test';
+
+const radioGroupExperimentalSections: TestSection[] = [
+  {
+    name: 'Default RadioGroup Usage',
+    testID: RADIO_GROUP_EXPERIMENTAL_TESTPAGE,
+    component: DefaultRadioGroup,
+  },
+];
+
+export const RadioGroupExperimentalTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Beta',
+    uwpStatus: 'Experimental',
+    iosStatus: 'Experimental',
+    macosStatus: 'Backlog',
+    androidStatus: 'Backlog',
+  };
+
+  const description =
+    'RadioGroup lets users select a single option from two or more choices. Each option is represented by one Radio; a user can select only one Radio in a RadioGroup.';
+
+  return (
+    <Test name="Experimental RadioGroup Test" description={description} sections={radioGroupExperimentalSections} status={status}></Test>
+  );
+};

package/src/TestComponents/RadioGroupExperimental/consts.ts

@@ -0,0 +1,2 @@
+export const HOMEPAGE_RADIO_GROUP_EXPERIMENTAL_BUTTON = 'Homepage_RadioGroupExperimental_Button';
+export const RADIO_GROUP_EXPERIMENTAL_TESTPAGE = 'RadioGroupExperimental_TestPage';

package/src/TestComponents/RadioGroupExperimental/index.ts

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

package/src/TestComponents/Test.tsx

@@ -1,8 +1,11 @@
 import * as React from 'react';
-import { StyleSheet, View, Platform } from 'react-native';
-import { Text, Separator } from '@fluentui/react-native';
+import { Platform, StyleSheet, View } from 'react-native';
+import { Text, ToggleButton, Separator } from '@fluentui/react-native';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from './Common/styles';
+import { useTheme } from '@fluentui-react-native/theme-types';
+import Svg, { G, Path, SvgProps } from 'react-native-svg';
+import { SvgIconProps } from '@fluentui-react-native/icon';
 
 export type TestSection = {
   name: string;
@@ -26,10 +29,22 @@ export interface TestProps {
   sections: 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.',
+};
+
 const styles = StyleSheet.create({
   name: {
     marginTop: 4,
   },
+  definitionHeader: {
+    marginTop: 12,
+    marginBottom: 6,
+  },
   description: {
     alignItems: 'flex-start',
     flexWrap: 'wrap',
@@ -39,12 +54,9 @@ const styles = StyleSheet.create({
   },
   statusView: {
     flexDirection: 'row',
-    alignItems: 'flex-start',
+    alignItems: 'center',
     justifyContent: 'space-between',
   },
-  statusHeader: {
-    marginBottom: 6,
-  },
   statusLabel: {
     marginTop: 2,
     marginStart: 4,
@@ -54,10 +66,40 @@ const styles = StyleSheet.create({
   },
 });
 
-// mobile platform check to not render status components.
-const isMobile = Platform.OS == 'android' || (Platform.OS == 'ios' && !Platform.isPad);
-
 export const Test = (props: TestProps): React.ReactElement<Record<string, never>> => {
+  const [showStatus, setShowStatus] = 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 };
+
   return (
     <View testID="ScrollViewAreaForComponents">
       <Text style={[styles.name]} variant="heroSemibold">
@@ -67,57 +109,42 @@ export const Test = (props: TestProps): React.ReactElement<Record<string, never>
       <Stack style={stackStyle}>
         <Text style={styles.description}>{props.description}</Text>
       </Stack>
-      {!isMobile && (
-        <Stack style={stackStyle}>
-          <View style={styles.statusView}>
-            <Stack>
-              <Text style={[styles.statusHeader]} variant="headerStandard">
-                Platform Status
-              </Text>
-              <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>
-            </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>
 
-            <Stack style={stackStyle}>
-              <Text style={[styles.statusHeader]} variant="headerStandard">
-                Status Definitions
-              </Text>
-              <Text style={[styles.statusLabel]} variant="bodySemibold">
-                Production:{' '}
-                <Text style={styles.status}>Control is ready for broad partner use and to be used in production-ready scenarios.</Text>
-              </Text>
-              <Text style={[styles.statusLabel]} variant="bodySemibold">
-                Beta:{' '}
-                <Text style={styles.status}>
-                  Control is ready for partner consumption, but not ready for production release (e.g. fixing bugs).
+            <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>
-              </Text>
-              <Text style={[styles.statusLabel]} variant="bodySemibold">
-                Experimental: <Text style={styles.status}>Control code checked into repo, but not ready for partner use.</Text>
-              </Text>
-              <Text style={[styles.statusLabel]} variant="bodySemibold">
-                Backlog: <Text style={styles.status}>Control is in plan and on our backlog to deliver.</Text>
-              </Text>
-              <Text style={[styles.statusLabel]} variant="bodySemibold">
-                N/A: <Text style={styles.status}>Control is not in current plan.</Text>
-              </Text>
-            </Stack>
-          </View>
-        </Stack>
-      )}
+              );
+            })}
+          </>
+        )}
+      </Stack>
       {props.sections.map((section, index) => {
         const TestComponent = section.component;
         return (

package/src/testPages.ts

@@ -22,6 +22,7 @@ import { PersonaTest, HOMEPAGE_PERSONA_BUTTON } from './TestComponents/Persona';
 import { PersonaCoinTest, HOMEPAGE_PERSONACOIN_BUTTON } from './TestComponents/PersonaCoin';
 import { PressableTest, HOMEPAGE_PRESSABLE_BUTTON } from './TestComponents/Pressable';
 import { RadioGroupTest, HOMEPAGE_RADIOGROUP_BUTTON } from './TestComponents/RadioGroup';
+import { HOMEPAGE_RADIO_GROUP_EXPERIMENTAL_BUTTON } from './TestComponents/RadioGroupExperimental';
 import { SeparatorTest, HOMEPAGE_SEPARATOR_BUTTON } from './TestComponents/Separator';
 import { ShadowTest, HOMEPAGE_SHADOW_BUTTON } from './TestComponents/Shadow';
 import { ShimmerTest, HOMEPAGE_SHIMMER_BUTTON } from './TestComponents/Shimmer';
@@ -33,6 +34,7 @@ import { TextTest, HOMEPAGE_TEXT_BUTTON } from './TestComponents/Text';
 import { TextExperimentalTest, HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON } from './TestComponents/TextExperimental';
 import { ThemeTest, HOMEPAGE_THEME_BUTTON } from './TestComponents/Theme';
 import { TokenTest, HOMEPAGE_TOKEN_BUTTON } from './TestComponents/Tokens';
+import { RadioGroupExperimentalTest } from './TestComponents/RadioGroupExperimental';
 
 export const tests: TestDescription[] = [
   {
@@ -180,6 +182,12 @@ export const tests: TestDescription[] = [
     testPage: HOMEPAGE_RADIOGROUP_BUTTON,
     platforms: ['android', 'ios', 'macos', 'web', 'win32'],
   },
+  {
+    name: 'RadioGroup (Experimental)',
+    component: RadioGroupExperimentalTest,
+    testPage: HOMEPAGE_RADIO_GROUP_EXPERIMENTAL_BUTTON,
+    platforms: ['android', 'ios', 'macos', 'web', 'win32'],
+  },
   {
     name: 'Separator',
     component: SeparatorTest,