[Checkbox] Documentation and tester update for checkbox on Android (#2444)

* doc updates for checkbox

* Change files

* types doc update

* update spec for android unsupported props

* Change files

* checkbox android completion

Author: rohanprasadofficial

apps/fluent-tester/src/TestComponents/CheckboxExperimental/CheckboxTest.tsx

@@ -59,7 +59,7 @@ const OtherCheckbox: React.FunctionComponent = () => {
     setisChecked(false);
   }, []);
 
-  const memoizedStyles = React.useMemo(() => (Platform.OS === 'android' ? { ...mobileStyles.containerSpacedEvenly, height: 200 } : {}), []);
+  const memoizedStyles = React.useMemo(() => (Platform.OS === 'android' ? { ...mobileStyles.containerSpacedEvenly, height: 150 } : {}), []);
 
   return (
     <View style={memoizedStyles}>
@@ -71,8 +71,12 @@ const OtherCheckbox: React.FunctionComponent = () => {
       </Button>
 
       <Checkbox label="This is a controlled Checkbox" checked={isChecked} />
-      <Checkbox label="Checkbox rendered with labelPosition 'before' (controlled)" labelPosition="before" checked={isChecked} />
-      <Checkbox label="A required checkbox with other required text" required="**" />
+      {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>
   );
 };
@@ -193,10 +197,13 @@ const checkboxSections: TestSection[] = [
     name: 'Other Implementations',
     component: OtherCheckbox,
   },
-  {
-    name: 'Token Customized Checkboxes',
-    component: TokenCheckbox,
-  },
+  Platform.select({
+    android: null,
+    default: {
+      name: 'Token Customized Checkboxes',
+      component: TokenCheckbox,
+    },
+  }),
   {
     name: 'E2E Testing for Experimental Checkbox',
     component: E2ECheckboxExperimentalTest,

change/@fluentui-react-native-checkbox-07d31e7e-35ec-4f28-aaef-4fff811393f0.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "update spec for android unsupported props",
+  "packageName": "@fluentui-react-native/checkbox",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-tester-60fdaae2-298b-4074-b249-9b87d3b58309.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "doc updates for checkbox",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/components/Checkbox/SPEC.md

@@ -195,6 +195,7 @@ export interface CheckboxProps extends Omit<IViewProps, 'onPress'> {
    *
    * @default after
    * @platform win32
+   * Note: 'before' is not supported for Android
    */
   labelPosition?: 'before' | 'after';
 
@@ -214,6 +215,7 @@ export interface CheckboxProps extends Omit<IViewProps, 'onPress'> {
    *
    * @default square
    * @platform iOS, windows, win32
+   * Note : 'circular' is not supported on Android
    */
   shape?: CheckboxShape;
 
@@ -227,6 +229,7 @@ export interface CheckboxProps extends Omit<IViewProps, 'onPress'> {
   /**
    * Provides a tooltip while hovering over Checkbox component
    * @platform win32
+   * Note: Not supported for Android
    */
   tooltip?: string;
 }
@@ -302,6 +305,7 @@ export interface CheckboxTokens extends FontTokens, IForegroundColorTokens, IBac
   /**
    * States that can be applied to a Checkbox.
    * These can be used to modify styles of the Checkbox when under the specified state.
+   * Note: 'hovered','focused','circular','labelIsBefore','large' are not supported for Android
    */
   disabled?: CheckboxTokens;
   label?: CheckboxTokens;

packages/components/Checkbox/src/Checkbox.types.ts

@@ -74,6 +74,7 @@ export interface CheckboxTokens extends FontTokens, IForegroundColorTokens, IBac
   /**
    * States that can be applied to a checkbox
    * These can be used to modify styles of the Checkbox when under the specified state.
+   * Note: 'hovered','focused','circular','labelIsBefore','large' are not supported for Android
    */
   disabled?: CheckboxTokens;
   label?: CheckboxTokens;
@@ -128,7 +129,7 @@ export interface CheckboxProps extends Omit<IViewProps, 'onPress'> {
 
   /**
    * Allows you to set the checkbox to be at the before (start) or after (end) the label
-   *
+   * Note: 'before' is not supported for Android
    * @default after
    */
   labelPosition?: 'before' | 'after';
@@ -148,7 +149,8 @@ export interface CheckboxProps extends Omit<IViewProps, 'onPress'> {
    * The shape of the checkbox. Can be either (rounded) square or circular.
    *
    * @default square
-   * @platform Android, iOS, windows, win32
+   * @platform iOS, windows, win32
+   * Note : 'circular' is not supported on Android
    */
   shape?: CheckboxShape;
 
@@ -160,6 +162,7 @@ export interface CheckboxProps extends Omit<IViewProps, 'onPress'> {
 
   /**
    * Provides a tooltip while hovering over Checkbox component
+   * Note: Not supported for Android
    */
   tooltip?: string;
 }
@@ -177,6 +180,7 @@ export interface CheckboxState extends PressableState {
 
   /**
    * Determines position of Checkbox. True if labelPosition is set to 'before'
+   * Note : Not supported on Android
    */
   labelIsBefore?: boolean;
 }