@fluentui-react-native/tester 0.86.1 → 0.88.0

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/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,