@fluentui-react-native/tester 0.101.8 → 0.102.0

package/src/TestComponents/RadioGroupExperimental/HorizontalRadioGroup.tsx

@@ -0,0 +1,29 @@
+import { RadioGroup, Radio } from '@fluentui-react-native/experimental-radio-group';
+import { Separator } from '@fluentui/react-native';
+import * as React from 'react';
+import { View } from 'react-native';
+
+export const HorizontalRadioGroup: React.FunctionComponent = () => {
+  // Client's example onChange function
+  const onChange = React.useCallback((key: string) => {
+    console.log(key);
+  }, []);
+
+  return (
+    <View>
+      <RadioGroup layout={'horizontal'} label="Horizontal RadioGroup" defaultValue="X" onChange={onChange}>
+        <Radio label="Apple" value="W" />
+        <Radio label="Pear" value="X" />
+        <Radio label="Banana" value="C" />
+        <Radio label="Orange" value="Z" />
+      </RadioGroup>
+      <Separator />
+      <RadioGroup layout={'horizontal-stacked'} label="Horizontal-Stacked RadioGroup" defaultValue="X" onChange={onChange}>
+        <Radio label="Apple" value="W" />
+        <Radio label="Pear" value="X" />
+        <Radio label="Banana" value="C" />
+        <Radio label="Orange" value="Z" />
+      </RadioGroup>
+    </View>
+  );
+};

package/src/TestComponents/RadioGroupExperimental/RadioGroupExperimentalTest.tsx

@@ -4,6 +4,7 @@ import { DefaultRadioGroup } from './DefaultRadioGroup';
 import { RequiredRadioGroup } from './RequiredRadioGroup';
 import { DisabledRadioGroup } from './DisabledRadioGroup';
 import { SubtextRadioGroup } from './SubtextRadioGroup';
+import { HorizontalRadioGroup } from './HorizontalRadioGroup';
 import { Test, TestSection, PlatformStatus } from '../Test';
 
 const radioGroupExperimentalSections: TestSection[] = [
@@ -27,6 +28,11 @@ const radioGroupExperimentalSections: TestSection[] = [
     testID: RADIO_GROUP_EXPERIMENTAL_TESTPAGE,
     component: SubtextRadioGroup,
   },
+  {
+    name: 'Other Layouts',
+    testID: RADIO_GROUP_EXPERIMENTAL_TESTPAGE,
+    component: HorizontalRadioGroup,
+  },
 ];
 
 export const RadioGroupExperimentalTest: React.FunctionComponent = () => {