@fluentui-react-native/tester 0.107.2 → 0.108.1

package/src/E2E/common/NavigateAppPage.ts

@@ -3,6 +3,7 @@ import { HOMEPAGE_AVATAR_BUTTON } from '../../TestComponents/Avatar/consts';
 import { HOMEPAGE_BADGE_BUTTON } from '../../TestComponents/Badge/consts';
 import { HOMEPAGE_CHECKBOX_BUTTON } from '../../TestComponents/Checkbox/consts';
 import { HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON } from '../../TestComponents/CheckboxExperimental/consts';
+import { HOMEPAGE_CORNERRADIUS_BUTTON } from '../../TestComponents/CornerRadius/consts';
 import { HOMEPAGE_BUTTON_BUTTON } from '../../TestComponents/Button/consts';
 import { HOMEPAGE_CALLOUT_BUTTON } from '../../TestComponents/Callout/consts';
 import { HOMEPAGE_CONTEXTUALMENU_BUTTON } from '../../TestComponents/ContextualMenu/consts';
@@ -19,8 +20,11 @@ import { HOMEPAGE_PERSONA_BUTTON } from '../../TestComponents/Persona/consts';
 import { HOMEPAGE_PERSONACOIN_BUTTON } from '../../TestComponents/PersonaCoin/consts';
 import { HOMEPAGE_PRESSABLE_BUTTON } from '../../TestComponents/Pressable/consts';
 import { HOMEPAGE_RADIOGROUP_BUTTON } from '../../TestComponents/RadioGroup/consts';
+import { HOMEPAGE_RADIO_GROUP_EXPERIMENTAL_BUTTON } from '../../TestComponents/RadioGroupExperimental/consts';
 import { HOMEPAGE_SEPARATOR_BUTTON } from '../../TestComponents/Separator/consts';
+import { HOMEPAGE_SHADOW_BUTTON } from '../../TestComponents/Shadow/consts';
 import { HOMEPAGE_SHIMMER_BUTTON } from '../../TestComponents/Shimmer/consts';
+import { HOMEPAGE_STROKEWIDTH_BUTTON } from '../../TestComponents/StrokeWidth/consts';
 import { HOMEPAGE_SVG_BUTTON } from '../../TestComponents/Svg/consts';
 import { HOMEPAGE_SWITCH_BUTTON } from '../../TestComponents/Switch/consts';
 import { HOMEPAGE_TEXT_BUTTON } from '../../TestComponents/Text/consts';
@@ -64,6 +68,10 @@ class NavigateAppPage extends BasePage {
     await (await this.contextualMenuPage).click();
   }
 
+  async clickAndGoToCornerRadiusTokensPage() {
+    await (await this.cornerRadiusTokensPage).click();
+  }
+
   async clickAndGoToFocusTrapZonePage() {
     await (await this.focusTrapZonePage).click();
   }
@@ -112,14 +120,26 @@ class NavigateAppPage extends BasePage {
     await (await this.radioGroupPage).click();
   }
 
+  async clickAndGoToRadioGroupExperimentalPage() {
+    await (await this.radioGroupExperimentalPage).click();
+  }
+
   async clickAndGoToSeparatorPage() {
     await (await this.separatorPage).click();
   }
 
+  async clickAndGoToShadowPage() {
+    await (await this.shadowPage).click();
+  }
+
   async clickAndGoToShimmerPage() {
     await (await this.shimmerPage).click();
   }
 
+  async clickAndGoToStrokeWidthTokensPage() {
+    await (await this.strokeWidthTokensPage).click();
+  }
+
   async clickAndGoToSvgPage() {
     await (await this.svgPage).click();
   }
@@ -192,6 +212,10 @@ class NavigateAppPage extends BasePage {
     return By(HOMEPAGE_CONTEXTUALMENU_BUTTON);
   }
 
+  private get cornerRadiusTokensPage() {
+    return By(HOMEPAGE_CORNERRADIUS_BUTTON);
+  }
+
   private get focusTrapZonePage() {
     return By(HOMEPAGE_FOCUSTRAPZONE_BUTTON);
   }
@@ -240,14 +264,26 @@ class NavigateAppPage extends BasePage {
     return By(HOMEPAGE_RADIOGROUP_BUTTON);
   }
 
+  private get radioGroupExperimentalPage() {
+    return By(HOMEPAGE_RADIO_GROUP_EXPERIMENTAL_BUTTON);
+  }
+
   private get separatorPage() {
     return By(HOMEPAGE_SEPARATOR_BUTTON);
   }
 
+  private get shadowPage() {
+    return By(HOMEPAGE_SHADOW_BUTTON);
+  }
+
   private get shimmerPage() {
     return By(HOMEPAGE_SHIMMER_BUTTON);
   }
 
+  private get strokeWidthTokensPage() {
+    return By(HOMEPAGE_STROKEWIDTH_BUTTON);
+  }
+
   private get svgPage() {
     return By(HOMEPAGE_SVG_BUTTON);
   }

package/src/FluentTester.tsx

@@ -1,5 +1,5 @@
 import { Theme } from '@fluentui-react-native/framework';
-import { FocusTrapZone, Separator, Text } from '@fluentui/react-native';
+import { Separator, Text } from '@fluentui/react-native';
 import { ButtonV1 as Button } from '@fluentui-react-native/button';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
 import * as React from 'react';
@@ -78,6 +78,15 @@ export const FluentTester: React.FunctionComponent<FluentTesterProps> = (props:
 
   const themedStyles = getThemedStyles(useTheme());
 
+  // This is used to initially bring focus to the app on win32
+  const focusOnMountRef = React.useRef<View>();
+
+  React.useEffect(() => {
+    if (Platform.OS === ('win32' as any)) {
+      focusOnMountRef.current.focus();
+    }
+  }, []);
+
   const RootView = Platform.select({
     ios: SafeAreaView,
     default: View,
@@ -147,6 +156,8 @@ export const FluentTester: React.FunctionComponent<FluentTesterProps> = (props:
                 onClick={() => setSelectedTestIndex(index)}
                 style={fluentTesterStyles.testListItem}
                 testID={description.testPage}
+                // This ref so focus can be set on it when the app mounts in win32. Without this, focus won't be set anywhere.
+                {...(index === 0 && { componentRef: focusOnMountRef })}
               >
                 {description.name}
               </Button>
@@ -227,15 +238,9 @@ export const FluentTester: React.FunctionComponent<FluentTesterProps> = (props:
   return (
     // TODO: Figure out why making this view accessible breaks element querying on iOS.
     <View accessible={Platform.OS !== 'ios'} testID={ROOT_VIEW} style={commonTestStyles.flex}>
-      {Platform.OS === ('win32' as any) ? (
-        <FocusTrapZone style={themedStyles.root}>
-          <TesterContent />
-        </FocusTrapZone>
-      ) : (
-        <RootView style={themedStyles.root}>
-          <TesterContent />
-        </RootView>
-      )}
+      <RootView style={themedStyles.root}>
+        <TesterContent />
+      </RootView>
     </View>
   );
 };

package/src/FluentTesterApp.tsx

@@ -37,7 +37,7 @@ const useSizeClassIOS_DO_NOT_USE: () => SizeClassIOS = () => {
 
 export const FluentTesterApp: React.FunctionComponent<FluentTesterProps> = (props) => {
   const sizeClass = useSizeClassIOS_DO_NOT_USE();
-  const isMobile = Platform.OS == 'android' || (Platform.OS === 'ios' && Platform.isPad === false);
+  const isMobile = Platform.OS === 'android' || (Platform.OS === 'ios' && Platform.isPad === false);
 
   // If on iPad we are presented in a Split View or Slide Over context, show the single pane view.
   const shouldShowSinglePane = isMobile || (!isMobile && sizeClass === 'compact');

package/src/TestComponents/Avatar/BasicAvatar.tsx

@@ -4,8 +4,7 @@ import { PresenceBadgeStatuses, PresenceBadgeStatus } from '@fluentui-react-nati
 import { View, Text, Platform } from 'react-native';
 import { satyaPhotoUrl, undefinedText } from './../PersonaCoin/styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
-import TestSvg from '../../FluentTester/test-data/test.svg';
-import { SvgIconProps } from '@fluentui-react-native/icon';
+import { svgProps } from '../Common/iconExamples';
 import { StyledPicker } from '../Common/StyledPicker';
 import { ToggleButton } from '@fluentui/react-native';
 
@@ -40,11 +39,6 @@ export const StandardUsage: FunctionComponent = () => {
     codepoint: 0x2663,
   };
 
-  const svgProps: SvgIconProps = {
-    src: TestSvg,
-    viewBox: '0 0 500 500',
-  };
-
   const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
   const badgeStatus = presence === undefinedText ? undefined : presence;
 

package/src/TestComponents/Avatar/CustomizedAvatar.tsx

@@ -4,8 +4,7 @@ import { View, Text, TextInput, Platform, StyleSheet } from 'react-native';
 import { steveBallmerPhotoUrl } from './../PersonaCoin/styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import { FontWeight } from '@fluentui-react-native/theme-types';
-import { SvgIconProps } from '@fluentui-react-native/icon';
-import TestSvg from '../../FluentTester/test-data/test.svg';
+import { svgProps } from '../Common/iconExamples';
 import { ToggleButton } from '@fluentui/react-native';
 
 const styles = StyleSheet.create({
@@ -67,10 +66,6 @@ export const CustomizeUsage: React.FunctionComponent = () => {
   ]);
 
   const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
-  const svgProps: SvgIconProps = {
-    src: TestSvg,
-    viewBox: '0 0 500 500',
-  };
 
   return (
     <View style={commonStyles.root}>

package/src/TestComponents/Badge/BasicBadgeTest.tsx

@@ -15,12 +15,11 @@ import {
   BadgeProps,
   BadgeTokens,
 } from '@fluentui-react-native/badge';
-import { SvgIconProps } from '@fluentui-react-native/icon';
 import { StyledPicker } from '../Common/StyledPicker';
 import { satyaPhotoUrl } from './../PersonaCoin/styles';
-import TestSvg from '../../FluentTester/test-data/test.svg';
 import { ToggleButton } from '@fluentui/react-native';
 import { useFluentTheme } from '@fluentui-react-native/framework';
+import { svgProps, iconProps } from '../Common/iconExamples';
 
 const badgeColors: BadgeColor[] = [...BadgeColors];
 const badgeShapes: BadgeShape[] = [...BadgeShapes];
@@ -50,10 +49,6 @@ export const BasicBadge: React.FunctionComponent = () => {
   const onShowIconChange = useCallback(() => setShowIcon(!showIcon), [showIcon, setShowIcon]);
 
   const theme = useFluentTheme();
-  const svgProps: SvgIconProps = {
-    src: TestSvg,
-    viewBox: '0 0 500 500',
-  };
 
   const fontBuiltInProps = {
     fontFamily: 'Arial',
@@ -62,7 +57,6 @@ export const BasicBadge: React.FunctionComponent = () => {
   };
 
   const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
-  const iconProps = { svgSource: svgProps, width: 20, height: 20 };
 
   const shadow = showShadow ? theme.shadows.shadow4 : undefined;
   const CustomBadge = useCustomizedBadge({ shadowToken: shadow });
@@ -126,12 +120,12 @@ export const BasicBadge: React.FunctionComponent = () => {
       {svgIconsEnabled && (
         <>
           <Text>Badge with icon</Text>
-          <Badge icon={{ svgSource: svgProps }} iconPosition="after">
+          <Badge icon={iconProps} iconPosition="after">
             Badge with
             <Image source={{ uri: satyaPhotoUrl }} style={{ width: 20, height: 20 }} />
             <Text style={{ backgroundColor: 'yellow' }}>optional content</Text>
           </Badge>
-          <Badge appearance="outline" icon={iconProps} />
+          <Badge appearance="outline" icon={{ ...iconProps, width: 20, height: 20 }} />
           <Badge icon={{ fontSource: { ...fontBuiltInProps }, color: '#fff' }}>Badge with icon</Badge>
           <Text>Customized Badge with icon</Text>
           <StyledBadge icon={{ svgSource: svgProps }}>Styled badge</StyledBadge>

package/src/TestComponents/Badge/CounterBadgeTest.tsx

@@ -2,15 +2,9 @@
 import React from 'react';
 import { View, Platform, Text } from 'react-native';
 import { CounterBadge } from '@fluentui-react-native/badge';
-import { SvgIconProps } from '@fluentui-react-native/icon';
-import TestSvg from '../../FluentTester/test-data/test.svg';
+import { iconProps } from '../Common/iconExamples';
 
 export const CounterBadgeTest: React.FunctionComponent = () => {
-  const svgProps: SvgIconProps = {
-    src: TestSvg,
-    viewBox: '0 0 500 500',
-  };
-
   const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
 
   return (
@@ -26,7 +20,7 @@ export const CounterBadgeTest: React.FunctionComponent = () => {
       <CounterBadge badgeColor="important" overflowCount={1000} count={777}></CounterBadge>
       <CounterBadge badgeColor="danger" overflowCount={1000} count={1500}></CounterBadge>
       <CounterBadge count={13} />
-      {svgIconsEnabled && <CounterBadge count={17} icon={{ svgSource: svgProps }} iconPosition="after" />}
+      {svgIconsEnabled && <CounterBadge count={17} icon={iconProps} iconPosition="after" />}
     </View>
   );
 };

package/src/TestComponents/Button/ButtonHOCTestSection.tsx

@@ -1,19 +1,18 @@
 import { ButtonV1 as Button } from '@fluentui/react-native';
 import { TextV1 as Text } from '@fluentui-react-native/text';
-import { Icon, SvgIconProps } from '@fluentui-react-native/icon';
 import * as React from 'react';
-import { Platform, Pressable, View } from 'react-native';
+import { Platform, View } from 'react-native';
 import { commonTestStyles, stackStyle } from '../Common/styles';
-import TestSvg from './test.svg';
 import { InteractionEvent, isGestureResponderEvent } from '@fluentui-react-native/interactive-hooks';
+import { svgProps } from '../Common/iconExamples';
 
 const CustomText = Text.customize({ fontSize: 'header', color: 'hotpink' });
 const CustomButton = Button.customize({ backgroundColor: 'pink' });
 const CustomIconButton = Button.customize({ iconColor: 'yellow' });
 const ComposedButton = Button.compose({
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore Not all slots have to be overridden for compose to work
   slots: {
-    root: Pressable,
-    icon: Icon,
     content: CustomText,
   },
   slotProps: {
@@ -22,10 +21,6 @@ const ComposedButton = Button.compose({
     },
   },
 });
-const svgProps: SvgIconProps = {
-  src: TestSvg,
-  viewBox: '0 0 500 500',
-};
 
 export const ButtonHOCTest: React.FunctionComponent = () => {
   const buttonRef = React.useRef(null);

package/src/TestComponents/Button/ButtonIconTestSection.android.tsx

@@ -0,0 +1,30 @@
+import { ButtonV1 as Button } from '@fluentui/react-native';
+import * as React from 'react';
+import { View } from 'react-native';
+import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
+import { svgProps } from '../Common/iconExamples';
+
+export const ButtonIconTest: React.FunctionComponent = () => {
+  const fontBuiltInProps = {
+    fontFamily: 'Arial',
+    codepoint: 0x2663,
+    fontSize: 24,
+  };
+
+  /* eslint-disable @typescript-eslint/no-var-requires */
+  const testImage = require('../../../../assets/icon_24x24.png');
+
+  return (
+    <View style={testContentRootViewStyle}>
+      <Button icon={{ fontSource: fontBuiltInProps }} style={commonTestStyles.vmargin}>
+        Font icon
+      </Button>
+      <Button appearance="accent" icon={{ svgSource: svgProps, color: 'black' }} style={commonTestStyles.vmargin}>
+        SVG
+      </Button>
+      <Button icon={testImage} style={commonTestStyles.vmargin}>
+        PNG
+      </Button>
+    </View>
+  );
+};

package/src/TestComponents/Button/ButtonIconTestSection.tsx

@@ -2,8 +2,7 @@ import { ButtonV1 as Button } from '@fluentui/react-native';
 import * as React from 'react';
 import { Platform, View, StyleSheet } from 'react-native';
 import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
-import { SvgIconProps } from '@fluentui-react-native/icon';
-import TestSvg from './test.svg';
+import { testImage, svgProps, iconProps } from '../Common/iconExamples';
 import { SvgXml } from 'react-native-svg';
 
 const styles = StyleSheet.create({
@@ -17,13 +16,6 @@ export const ButtonIconTest: React.FunctionComponent = () => {
     fontSize: 24,
   };
 
-  /* eslint-disable @typescript-eslint/no-var-requires */
-  const testImage = require('../../../../assets/icon_24x24.png');
-
-  const svgProps: SvgIconProps = {
-    src: TestSvg,
-    viewBox: '0 0 500 500',
-  };
   const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
 
   const chevronXml = `
@@ -54,7 +46,7 @@ export const ButtonIconTest: React.FunctionComponent = () => {
           <Button appearance="primary" icon={{ svgSource: svgProps, color: 'red' }} style={commonTestStyles.vmargin}>
             SVG
           </Button>
-          <Button icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin}>
+          <Button icon={iconProps} style={commonTestStyles.vmargin}>
             SVG
           </Button>
         </>
@@ -66,7 +58,7 @@ export const ButtonIconTest: React.FunctionComponent = () => {
         PNG
       </Button>
       {svgIconsEnabled && (
-        <Button style={commonTestStyles.vmargin} icon={{ svgSource: svgProps }}>
+        <Button style={commonTestStyles.vmargin} icon={iconProps}>
           Icon Button and Chevron
           <View style={styles.chevron}>
             <SvgXml xml={chevronXml} />

package/src/TestComponents/Button/ButtonSizeTestSection.tsx

@@ -1,16 +1,12 @@
-import { ButtonV1 as Button, CompoundButton } from '@fluentui/react-native';
-import { SvgIconProps } from '@fluentui-react-native/icon';
+import { ButtonV1 as Button, CompoundButton, FAB } from '@fluentui/react-native';
 import * as React from 'react';
 import { Platform, View } from 'react-native';
 import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
-import TestSvg from './test.svg';
+import { iconProps } from '../Common/iconExamples';
 
 export const ButtonSizeTest: React.FunctionComponent = () => {
-  const svgProps: SvgIconProps = {
-    src: TestSvg,
-    viewBox: '0 0 500 500',
-  };
   const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
+
   return (
     <View style={testContentRootViewStyle}>
       {svgIconsEnabled && (
@@ -18,7 +14,7 @@ export const ButtonSizeTest: React.FunctionComponent = () => {
           <Button
             iconOnly
             size="small"
-            icon={{ svgSource: svgProps }}
+            icon={iconProps}
             accessibilityLabel="Small size button with accessibility icon"
             style={commonTestStyles.vmargin}
             tooltip="button tooltip"
@@ -26,26 +22,32 @@ export const ButtonSizeTest: React.FunctionComponent = () => {
           <Button
             iconOnly
             size="medium"
-            icon={{ svgSource: svgProps }}
+            icon={iconProps}
             accessibilityLabel="Medium size button with accessibility icon"
             style={commonTestStyles.vmargin}
           />
           <Button
             iconOnly
             size="large"
-            icon={{ svgSource: svgProps }}
+            icon={iconProps}
             accessibilityLabel="Large size button with accessibility icon"
             style={commonTestStyles.vmargin}
           />
-          <Button size="small" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin}>
+          <Button size="small" icon={iconProps} style={commonTestStyles.vmargin}>
             Small Button with icon
           </Button>
-          <Button size="medium" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin}>
+          <Button size="medium" icon={iconProps} style={commonTestStyles.vmargin}>
             Medium Button with icon
           </Button>
-          <Button size="large" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin}>
+          <Button size="large" icon={iconProps} style={commonTestStyles.vmargin}>
             Large Button with icon
           </Button>
+          <FAB size="small" icon={iconProps} style={commonTestStyles.vmargin}>
+            Small FAB
+          </FAB>
+          <FAB size="large" icon={iconProps} style={commonTestStyles.vmargin}>
+            Large FAB
+          </FAB>
         </>
       )}
       <Button size="small" style={commonTestStyles.vmargin}>
@@ -57,35 +59,39 @@ export const ButtonSizeTest: React.FunctionComponent = () => {
       <Button size="large" style={commonTestStyles.vmargin}>
         Large
       </Button>
-      <Button loading size="small" style={commonTestStyles.vmargin}>
-        Loading Button Small
-      </Button>
-      <Button loading size="medium" style={commonTestStyles.vmargin}>
-        Loading Button Medium
-      </Button>
-      <Button loading size="large" style={commonTestStyles.vmargin}>
-        Loading Button Large
-      </Button>
-      <CompoundButton secondaryContent="Small compound button" size="small" style={commonTestStyles.vmargin}>
-        Compound Button
-      </CompoundButton>
-      <CompoundButton secondaryContent="Medium compound button" size="medium" style={commonTestStyles.vmargin}>
-        Compound Button
-      </CompoundButton>
-      <CompoundButton secondaryContent="Large compound button" size="large" style={commonTestStyles.vmargin}>
-        Compound Button
-      </CompoundButton>
-      {svgIconsEnabled && (
+      {Platform.OS !== 'android' && (
         <>
-          <CompoundButton icon={{ svgSource: svgProps }} secondaryContent="SecondaryContent" size="small" style={commonTestStyles.vmargin}>
-            Content
+          <Button loading size="small" style={commonTestStyles.vmargin}>
+            Loading Button Small
+          </Button>
+          <Button loading size="medium" style={commonTestStyles.vmargin}>
+            Loading Button Medium
+          </Button>
+          <Button loading size="large" style={commonTestStyles.vmargin}>
+            Loading Button Large
+          </Button>
+          <CompoundButton secondaryContent="Small compound button" size="small" style={commonTestStyles.vmargin}>
+            Compound Button
           </CompoundButton>
-          <CompoundButton icon={{ svgSource: svgProps }} secondaryContent="SecondaryContent" size="medium" style={commonTestStyles.vmargin}>
-            Content
+          <CompoundButton secondaryContent="Medium compound button" size="medium" style={commonTestStyles.vmargin}>
+            Compound Button
           </CompoundButton>
-          <CompoundButton icon={{ svgSource: svgProps }} secondaryContent="SecondaryContent" size="large" style={commonTestStyles.vmargin}>
-            Content
+          <CompoundButton secondaryContent="Large compound button" size="large" style={commonTestStyles.vmargin}>
+            Compound Button
           </CompoundButton>
+          {svgIconsEnabled && (
+            <>
+              <CompoundButton icon={iconProps} secondaryContent="SecondaryContent" size="small" style={commonTestStyles.vmargin}>
+                Content
+              </CompoundButton>
+              <CompoundButton icon={iconProps} secondaryContent="SecondaryContent" size="medium" style={commonTestStyles.vmargin}>
+                Content
+              </CompoundButton>
+              <CompoundButton icon={iconProps} secondaryContent="SecondaryContent" size="large" style={commonTestStyles.vmargin}>
+                Content
+              </CompoundButton>
+            </>
+          )}
         </>
       )}
     </View>

package/src/TestComponents/Button/ButtonTest.tsx

@@ -19,20 +19,22 @@ const buttonSections: TestSection[] = [
     testID: BUTTON_TESTPAGE,
     component: ButtonVariantTest,
   },
-  {
-    name: 'Button Shape',
-    component: ButtonShapeTest,
-  },
   {
     name: 'Icon Button',
     component: ButtonIconTest,
   },
-  Platform.select({
-    android: null, //Toggle Button is not implemented for Android
-    default: {
-      name: 'Toggle Button',
-      component: ToggleButtonTest,
-    },
+  ...Platform.select({
+    android: [null], //Following sections are not supported from Fluent Android
+    default: [
+      {
+        name: 'Toggle Button',
+        component: ToggleButtonTest,
+      },
+      {
+        name: 'Button Shape',
+        component: ButtonShapeTest,
+      },
+    ],
   }),
   {
     name: 'Sizes',
@@ -66,7 +68,7 @@ export const ButtonTest: React.FunctionComponent = () => {
     uwpStatus: 'Experimental',
     iosStatus: 'Experimental',
     macosStatus: 'Beta',
-    androidStatus: 'Backlog',
+    androidStatus: 'Experimental',
   };
 
   const description =

package/src/TestComponents/Button/ButtonVariantTestSection.android.tsx

@@ -0,0 +1,45 @@
+import { Button, FAB } from '@fluentui-react-native/experimental-button';
+import * as React from 'react';
+import { View } from 'react-native';
+import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
+import { iconProps } from '../Common/iconExamples';
+
+export const ButtonVariantTest: React.FunctionComponent = () => {
+  const [showFABText, setShowFABText] = React.useState(true);
+  const flipFABcontent = React.useCallback(() => setShowFABText(!showFABText), [showFABText]);
+
+  return (
+    <View style={testContentRootViewStyle}>
+      <Button style={commonTestStyles.vmargin}>Default</Button>
+      <Button disabled style={commonTestStyles.vmargin}>
+        Default Disabled
+      </Button>
+      <Button appearance="accent" style={commonTestStyles.vmargin}>
+        Accent
+      </Button>
+      <Button disabled appearance="accent" style={commonTestStyles.vmargin}>
+        Accent Disabled
+      </Button>
+      <Button appearance="outline" style={commonTestStyles.vmargin}>
+        Outline
+      </Button>
+      <Button appearance="outline" disabled style={commonTestStyles.vmargin}>
+        Outline Disabled
+      </Button>
+      <Button appearance="subtle" style={commonTestStyles.vmargin}>
+        Subtle
+      </Button>
+      <Button appearance="subtle" disabled style={commonTestStyles.vmargin}>
+        Subtle Disabled
+      </Button>
+      <FAB icon={iconProps} iconOnly disabled style={commonTestStyles.vmargin} />
+      <FAB icon={iconProps} style={commonTestStyles.vmargin} showContent={showFABText} onClick={flipFABcontent}>
+        Click Me!
+      </FAB>
+      <FAB appearance="subtle" iconOnly disabled icon={iconProps} style={commonTestStyles.vmargin} />
+      <FAB appearance="subtle" icon={iconProps} style={commonTestStyles.vmargin} showContent={showFABText} onClick={flipFABcontent}>
+        Click Me!
+      </FAB>
+    </View>
+  );
+};

package/src/TestComponents/Button/ButtonVariantTestSection.tsx

@@ -1,21 +1,10 @@
-import { Button, CompoundButton, FAB } from '@fluentui-react-native/experimental-button';
+import { Button, CompoundButton } from '@fluentui-react-native/experimental-button';
 import * as React from 'react';
 import { View } from 'react-native';
 import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
-import { SvgIconProps } from '@fluentui-react-native/icon';
-import TestSvg from './test.svg';
 
 // Test also pulls button from deprecated package to ensure it's still working
 export const ButtonVariantTest: React.FunctionComponent = () => {
-  const svgProps: SvgIconProps = {
-    src: TestSvg,
-    viewBox: '0 0 500 500',
-  };
-  const iconProps = { svgSource: svgProps, width: 20, height: 20 };
-
-  const [showFABText, setShowFABText] = React.useState(true);
-  const flipFABcontent = React.useCallback(() => setShowFABText(!showFABText), [showFABText]);
-
   return (
     <View style={testContentRootViewStyle}>
       <Button style={commonTestStyles.vmargin}>Default</Button>
@@ -50,10 +39,6 @@ export const ButtonVariantTest: React.FunctionComponent = () => {
       <CompoundButton appearance="subtle" secondaryContent="Compound" style={commonTestStyles.vmargin}>
         Subtle
       </CompoundButton>
-      <FAB icon={iconProps} style={commonTestStyles.vmargin} />
-      <FAB icon={iconProps} style={commonTestStyles.vmargin} showContent={showFABText} onClick={flipFABcontent}>
-        FAB
-      </FAB>
     </View>
   );
 };

package/src/TestComponents/Button/deprecated/ButtonIconTest.tsx

@@ -4,8 +4,7 @@ import { Stack } from '@fluentui-react-native/stack';
 import * as React from 'react';
 import { Platform, View } from 'react-native';
 import { stackStyle } from '../../Common/styles';
-import { SvgIconProps } from '@fluentui-react-native/icon';
-import TestSvg from '../test.svg';
+import { testImage, svgProps } from '../../Common/iconExamples';
 
 const CustomizedIconButton = Button.customize({
   tokens: { iconColor: 'red' },
@@ -14,12 +13,6 @@ const CustomizedIconButton = Button.customize({
 
 export const ButtonIconTest_deprecated: React.FunctionComponent = () => {
   /* eslint-disable @typescript-eslint/no-var-requires */
-  const testImage = require('../../../../../assets/icon_24x24.png');
-
-  const svgProps: SvgIconProps = {
-    src: TestSvg,
-    viewBox: '0 0 500 500',
-  };
 
   // SVG-based icons are not available on all platforms yet
   const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);