@fluentui-react-native/tester 0.48.0 → 0.50.1

package/src/E2E/common/{NavigateAppPage.ts → NavigateAppPage.macos.ts}

@@ -7,6 +7,7 @@ import { HOMEPAGE_FOCUSTRAPZONE_BUTTON } from '../../FluentTester/TestComponents
 import { HOMEPAGE_FOCUSZONE_BUTTON } from '../../FluentTester/TestComponents/FocusZone/consts';
 import { HOMEPAGE_ICON_BUTTON } from '../../FluentTester/TestComponents/Icon/consts';
 import { HOMEPAGE_LINK_BUTTON } from '../../FluentTester/TestComponents/Link/consts';
+import { HOMEPAGE_MENU_BUTTON } from '../../FluentTester/TestComponents/MenuButton/consts';
 import { HOMEPAGE_PERSONA_BUTTON } from '../../FluentTester/TestComponents/Persona/consts';
 import { HOMEPAGE_PERSONACOIN_BUTTON } from '../../FluentTester/TestComponents/PersonaCoin/consts';
 import { HOMEPAGE_PRESSABLE_BUTTON } from '../../FluentTester/TestComponents/Pressable/consts';
@@ -17,7 +18,7 @@ import { HOMEPAGE_TEXT_BUTTON } from '../../FluentTester/TestComponents/Text/con
 import { HOMEPAGE_TABS_BUTTON } from '../../FluentTester/TestComponents/Tabs/consts';
 import { HOMEPAGE_THEME_BUTTON } from '../../FluentTester/TestComponents/Theme/consts';
 import { BASE_TESTPAGE } from '../../FluentTester/TestComponents/Common/consts';
-import { By, BasePage } from './BasePage';
+import { By, BasePage } from './BasePage.macos';
 
 class NavigateAppPage extends BasePage {
   clickAndGoToButtonPage() {
@@ -52,6 +53,10 @@ class NavigateAppPage extends BasePage {
     this.linkPage.click();
   }
 
+  clickAndGoToMenuButtonPage() {
+    this.menuButtonPage.click();
+  }
+
   clickAndGoToPersonaPage() {
     this.personaPage.click();
   }
@@ -132,6 +137,10 @@ class NavigateAppPage extends BasePage {
     return By(HOMEPAGE_LINK_BUTTON);
   }
 
+  private get menuButtonPage() {
+    return By(HOMEPAGE_MENU_BUTTON);
+  }
+
   private get personaPage() {
     return By(HOMEPAGE_PERSONA_BUTTON);
   }

package/src/E2E/common/NavigateAppPage.win.ts

@@ -0,0 +1,194 @@
+import { HOMEPAGE_CHECKBOX_BUTTON } from '../../FluentTester/TestComponents/Checkbox/consts';
+import { HOMEPAGE_BUTTON_BUTTON } from '../../FluentTester/TestComponents/Button/consts';
+import { HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL } from '../../FluentTester/TestComponents/ButtonExperimental/consts';
+import { HOMEPAGE_CALLOUT_BUTTON } from '../../FluentTester/TestComponents/Callout/consts';
+import { HOMEPAGE_CONTEXTUALMENU_BUTTON } from '../../FluentTester/TestComponents/ContextualMenu/consts';
+import { HOMEPAGE_EXPERIMENTAL_TABS_BUTTON } from '../../FluentTester/TestComponents/TabsExperimental/consts';
+import { HOMEPAGE_FOCUSTRAPZONE_BUTTON } from '../../FluentTester/TestComponents/FocusTrapZone/consts';
+import { HOMEPAGE_FOCUSZONE_BUTTON } from '../../FluentTester/TestComponents/FocusZone/consts';
+import { HOMEPAGE_ICON_BUTTON } from '../../FluentTester/TestComponents/Icon/consts';
+import { HOMEPAGE_LINK_BUTTON } from '../../FluentTester/TestComponents/Link/consts';
+import { HOMEPAGE_MENU_BUTTON } from '../../FluentTester/TestComponents/MenuButton/consts';
+import { HOMEPAGE_PERSONA_BUTTON } from '../../FluentTester/TestComponents/Persona/consts';
+import { HOMEPAGE_PERSONACOIN_BUTTON } from '../../FluentTester/TestComponents/PersonaCoin/consts';
+import { HOMEPAGE_PRESSABLE_BUTTON } from '../../FluentTester/TestComponents/Pressable/consts';
+import { HOMEPAGE_RADIOGROUP_BUTTON } from '../../FluentTester/TestComponents/RadioGroup/consts';
+import { HOMEPAGE_SEPARATOR_BUTTON } from '../../FluentTester/TestComponents/Separator/consts';
+import { HOMEPAGE_SVG_BUTTON } from '../../FluentTester/TestComponents/Svg/consts';
+import { HOMEPAGE_TEXT_BUTTON } from '../../FluentTester/TestComponents/Text/consts';
+import { HOMEPAGE_TABS_BUTTON } from '../../FluentTester/TestComponents/Tabs/consts';
+import { HOMEPAGE_THEME_BUTTON } from '../../FluentTester/TestComponents/Theme/consts';
+import { BASE_TESTPAGE } from '../../FluentTester/TestComponents/Common/consts';
+import { By, BasePage } from './BasePage.win';
+
+class NavigateAppPage extends BasePage {
+  clickAndGoToButtonPage() {
+    this.buttonPage.click();
+  }
+
+  clickAndGoToCalloutPage() {
+    this.calloutPage.click();
+  }
+
+  clickAndGoToCheckboxPage() {
+    this.checkboxPage.click();
+  }
+
+  clickAndGoToContextualMenuPage() {
+    this.contextualMenuPage.click();
+  }
+
+  clickAndGoToFocusTrapZonePage() {
+    this.focusTrapZonePage.click();
+  }
+
+  clickAndGoToFocusZonePage() {
+    this.focusZonePage.click();
+  }
+
+  clickAndGoToIconPage() {
+    this.iconPage.click();
+  }
+
+  clickAndGoToLinkPage() {
+    this.linkPage.click();
+  }
+
+  clickAndGoToMenuButtonPage() {
+    this.menuButtonPage.click();
+  }
+
+  clickAndGoToPersonaPage() {
+    this.personaPage.click();
+  }
+
+  clickAndGoToPersonaCoinPage() {
+    this.personaCoinPage.click();
+  }
+
+  clickAndGoToPressablePage() {
+    this.pressablePage.click();
+  }
+
+  clickAndGoToRadioGroupPage() {
+    this.radioGroupPage.click();
+  }
+
+  clickAndGoToSeparatorPage() {
+    this.separatorPage.click();
+  }
+
+  clickAndGoToSvgPage() {
+    this.svgPage.click();
+  }
+
+  clickAndGoToTextPage() {
+    this.textPage.click();
+  }
+
+  clickAndGoToTabsPage() {
+    this.tabsPage.click();
+  }
+
+  clickAndGoToThemePage() {
+    this.themePage.click();
+  }
+
+  clickAndGoToExperimentalButtonPage() {
+    this.experimentalButtonPage.click();
+  }
+
+  clickAndGoToExperimentalTabsPage() {
+    this.experimentalTabsPage.click();
+  }
+
+  /*
+   ** Returns the StealthButton element on the left-hand column that navigates to each page
+   */
+
+  get _testPage() {
+    return By(BASE_TESTPAGE);
+  }
+
+  private get buttonPage() {
+    return By(HOMEPAGE_BUTTON_BUTTON);
+  }
+
+  private get calloutPage() {
+    return By(HOMEPAGE_CALLOUT_BUTTON);
+  }
+
+  private get checkboxPage() {
+    return By(HOMEPAGE_CHECKBOX_BUTTON);
+  }
+
+  private get contextualMenuPage() {
+    return By(HOMEPAGE_CONTEXTUALMENU_BUTTON);
+  }
+
+  private get focusTrapZonePage() {
+    return By(HOMEPAGE_FOCUSTRAPZONE_BUTTON);
+  }
+
+  private get focusZonePage() {
+    return By(HOMEPAGE_FOCUSZONE_BUTTON);
+  }
+
+  private get iconPage() {
+    return By(HOMEPAGE_ICON_BUTTON);
+  }
+
+  private get linkPage() {
+    return By(HOMEPAGE_LINK_BUTTON);
+  }
+
+  private get menuButtonPage() {
+    return By(HOMEPAGE_MENU_BUTTON);
+  }
+
+  private get personaPage() {
+    return By(HOMEPAGE_PERSONA_BUTTON);
+  }
+
+  private get personaCoinPage() {
+    return By(HOMEPAGE_PERSONACOIN_BUTTON);
+  }
+
+  private get pressablePage() {
+    return By(HOMEPAGE_PRESSABLE_BUTTON);
+  }
+
+  private get radioGroupPage() {
+    return By(HOMEPAGE_RADIOGROUP_BUTTON);
+  }
+
+  private get separatorPage() {
+    return By(HOMEPAGE_SEPARATOR_BUTTON);
+  }
+
+  private get svgPage() {
+    return By(HOMEPAGE_SVG_BUTTON);
+  }
+
+  private get textPage() {
+    return By(HOMEPAGE_TEXT_BUTTON);
+  }
+
+  private get tabsPage() {
+    return By(HOMEPAGE_TABS_BUTTON);
+  }
+
+  private get themePage() {
+    return By(HOMEPAGE_THEME_BUTTON);
+  }
+
+  private get experimentalButtonPage() {
+    return By(HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL);
+  }
+
+  private get experimentalTabsPage() {
+    return By(HOMEPAGE_EXPERIMENTAL_TABS_BUTTON);
+  }
+}
+
+export default new NavigateAppPage();

package/src/FluentTester/FluentTester.tsx

@@ -116,11 +116,12 @@ export const FluentTester: React.FunctionComponent<FluentTesterProps> = (props:
           {/* on iOS, display a back Button */}
           <Button
             appearance="subtle"
-            content="‹ Back"
             style={{ alignSelf: 'flex-start', display: Platform.OS === 'ios' ? 'flex' : 'none' }}
             onClick={onBackPress}
             disabled={onTestListView}
-          />
+          >
+            ‹ Back
+          </Button>
           <ThemePickers />
         </View>
       </View>
@@ -140,11 +141,12 @@ export const FluentTester: React.FunctionComponent<FluentTesterProps> = (props:
                 appearance="subtle"
                 key={index}
                 disabled={index == selectedTestIndex}
-                content={description.name}
                 onClick={() => setSelectedTestIndex(index)}
                 style={fluentTesterStyles.testListItem}
                 testID={description.testPage}
-              />
+              >
+                {description.name}
+              </Button>
             );
           })}
         </ScrollView>

package/src/FluentTester/TestComponents/Avatar/AvatarTest.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Avatar, Size } from '@fluentui-react-native/experimental-avatar/src/Avatar.macos';
+import { Avatar, Size } from '@fluentui-react-native/experimental-avatar/';
 import { Text } from '@fluentui/react-native';
 import { Stack } from '@fluentui-react-native/stack';
 import { AVATAR_TESTPAGE } from './consts';

package/src/FluentTester/TestComponents/Avatar/BasicAvatar.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react';
-import { AvatarSize, AvatarColor, Avatar, AvatarPresence } from '@fluentui-react-native/experimental-avatar';
+import React, { useState, useCallback, FunctionComponent } from 'react';
+import { AvatarSize, AvatarColor, JSAvatar, AvatarPresence } from '@fluentui-react-native/experimental-avatar';
 import { Switch, View, Text, Picker, ColorValue } from 'react-native';
 import { satyaPhotoUrl, undefinedText } from './../PersonaCoin/styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import { useTheme } from '@fluentui-react-native/theme-types';
-import { AvatarTokens } from '@fluentui-react-native/experimental-avatar';
+import { JSAvatarTokens } from '@fluentui-react-native/experimental-avatar';
 
 type WithUndefined<T> = T | typeof undefinedText;
 
@@ -60,16 +60,17 @@ const StyledPicker = (props) => {
   );
 };
 
-export const StandardUsage: React.FunctionComponent = () => {
-  const tokens: AvatarTokens = {};
-  const [showImage, setShowImage] = React.useState(true);
-  const [imageSize, setImageSize] = React.useState<WithUndefined<AvatarSize>>('size72');
-  const [coinColor, setCoinColor] = React.useState<WithUndefined<AvatarColor>>('brass');
-  const [presence, setPresence] = React.useState<WithUndefined<AvatarPresence>>('online');
+export const StandardUsage: FunctionComponent = () => {
+  const tokens: JSAvatarTokens = {};
+  const [isSquare, setSquare] = useState(false);
+  const [showImage, setShowImage] = useState(true);
+  const [imageSize, setImageSize] = useState<WithUndefined<AvatarSize>>('size72');
+  const [coinColor, setCoinColor] = useState<WithUndefined<AvatarColor>>('brass');
+  const [presence, setPresence] = useState<WithUndefined<AvatarPresence>>('online');
 
-  const onSizeChange = React.useCallback((value) => setImageSize(value), []);
-  const onColorChange = React.useCallback((value) => setCoinColor(value), []);
-  const onPresenceChange = React.useCallback((value) => setPresence(value), []);
+  const onSizeChange = useCallback((value) => setImageSize(value), []);
+  const onColorChange = useCallback((value) => setCoinColor(value), []);
+  const onPresenceChange = useCallback((value) => setPresence(value), []);
 
   const theme = useTheme();
   const textStyles = { color: theme.colors.inputText as ColorValue };
@@ -83,15 +84,20 @@ export const StandardUsage: React.FunctionComponent = () => {
           <Text style={textStyles}>Show image</Text>
           <Switch value={showImage} onValueChange={setShowImage} />
         </View>
+        <View style={commonStyles.switch}>
+          <Text style={textStyles}>Set square Avatar</Text>
+          <Switch value={isSquare} onValueChange={() => setSquare(!isSquare)} />
+        </View>
 
         <StyledPicker prompt="Size" selected={imageSize} onChange={onSizeChange} collection={allSizes} />
         <StyledPicker prompt="Coin color" selected={coinColor} onChange={onColorChange} collection={allColors} />
         <StyledPicker prompt="Presence status" selected={presence} onChange={onPresenceChange} collection={allPresences} />
       </View>
 
-      <Avatar
+      <JSAvatar
         size={imageSize === undefinedText ? undefined : imageSize}
         initials="SN"
+        shape={isSquare ? 'square' : 'circular'}
         imageDescription="Photo of Satya Nadella"
         presence={presence === undefinedText ? undefined : presence}
         imageUrl={showImage ? satyaPhotoUrl : undefined}

package/src/FluentTester/TestComponents/Avatar/CustomizedAvatar.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Avatar, IconAlignment, AvatarTokens } from '@fluentui-react-native/experimental-avatar';
+import { JSAvatar, IconAlignment, JSAvatarTokens } from '@fluentui-react-native/experimental-avatar';
 import { Switch, View, Text, TextInput, TextStyle } from 'react-native';
 import { Slider } from '../Common/Slider';
 import { steveBallmerPhotoUrl } from './../PersonaCoin/styles';
@@ -29,7 +29,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
     borderColor: theme.colors.inputBorder,
   };
 
-  const tokens: AvatarTokens = {};
+  const tokens: JSAvatarTokens = {};
   if (coinColor) {
     tokens.backgroundColor = coinColor;
   }
@@ -58,7 +58,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
     tokens.avatarSize = physicalSize;
   }
 
-  const CustomizedAvatar = Avatar.customize(tokens);
+  const CustomizedAvatar = JSAvatar.customize(tokens);
 
   return (
     <View style={commonStyles.root}>

package/src/FluentTester/TestComponents/Avatar/{AvatarTestWin32.tsx → JSAvatarTest.tsx}

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AVATAR_WIN32_TESTPAGE } from './consts';
+import { JSAVATAR_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { StandardUsage } from './BasicAvatar';
 import { CustomizeUsage } from './CustomizedAvatar';
@@ -7,7 +7,7 @@ import { CustomizeUsage } from './CustomizedAvatar';
 const avatarSections: TestSection[] = [
   {
     name: 'Standard Usage',
-    testID: AVATAR_WIN32_TESTPAGE,
+    testID: JSAVATAR_TESTPAGE,
     component: StandardUsage,
   },
   {
@@ -16,7 +16,7 @@ const avatarSections: TestSection[] = [
   },
 ];
 
-export const AvatarTestWin32: React.FunctionComponent = () => {
+export const JSAvatarTest: React.FunctionComponent = () => {
   const status: PlatformStatus = {
     win32Status: 'Experimental',
     uwpStatus: 'Backlog',

package/src/FluentTester/TestComponents/Avatar/consts.ts

@@ -1,3 +1,3 @@
 export const HOMEPAGE_AVATAR_BUTTON = 'Homepage_Avatar_Button';
 export const AVATAR_TESTPAGE = 'Avatar_TestPage';
-export const AVATAR_WIN32_TESTPAGE = 'Avatar_Win32_TestPage';
+export const JSAVATAR_TESTPAGE = 'Avatar_Win32_TestPage';

package/src/FluentTester/TestComponents/Avatar/index.ts

@@ -1,3 +1,3 @@
 export * from './AvatarTest';
-export * from './AvatarTestWin32';
+export * from './JSAvatarTest';
 export * from './consts';

package/src/FluentTester/TestComponents/ButtonExperimental/ButtonIconTestSection.tsx

@@ -4,6 +4,7 @@ import { Platform, View } from 'react-native';
 import { commonTestStyles, stackStyle } from '../Common/styles';
 import { SvgIconProps } from '@fluentui-react-native/icon';
 import TestSvg from './test.svg';
+import { SvgXml } from 'react-native-svg';
 
 export const ButtonIconTest: React.FunctionComponent = () => {
   const fontBuiltInProps = {
@@ -21,23 +22,51 @@ export const ButtonIconTest: React.FunctionComponent = () => {
   };
   const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
 
+  const chevronXml = `
+          <svg width="12" height="16" viewBox="0 0 11 6" color="#000">
+            <path fill='currentColor' d='M0.646447 0.646447C0.841709 0.451184 1.15829 0.451184 1.35355 0.646447L5.5 4.79289L9.64645 0.646447C9.84171 0.451185 10.1583 0.451185 10.3536 0.646447C10.5488 0.841709 10.5488 1.15829 10.3536 1.35355L5.85355 5.85355C5.65829 6.04882 5.34171 6.04882 5.14645 5.85355L0.646447 1.35355C0.451184 1.15829 0.451184 0.841709 0.646447 0.646447Z' />
+          </svg>`;
+
   return (
     <View style={[stackStyle, commonTestStyles.view]}>
+      <Button icon={{ fontSource: { ...fontBuiltInProps, fontSize: 32 }, color: '#060' }} style={commonTestStyles.vmargin}>
+        Font icon
+      </Button>
       <Button
         icon={{ fontSource: { ...fontBuiltInProps, fontSize: 32 }, color: '#060' }}
-        content="Font icon"
         style={commonTestStyles.vmargin}
-      />
-      <Button icon={{ fontSource: fontBuiltInProps }} content="Font icon" style={commonTestStyles.vmargin} />
-      <Button appearance="primary" icon={{ fontSource: fontBuiltInProps }} content="Font icon" style={commonTestStyles.vmargin} />
+        iconPosition="after"
+      >
+        Icon after
+      </Button>
+      {svgIconsEnabled && (
+        <Button style={commonTestStyles.vmargin} icon={{ svgSource: svgProps }}>
+          Icon Button and Chevron
+          <SvgXml xml={chevronXml} />
+        </Button>
+      )}
+      <Button icon={{ fontSource: fontBuiltInProps }} style={commonTestStyles.vmargin}>
+        Font icon
+      </Button>
+      <Button appearance="primary" icon={{ fontSource: fontBuiltInProps }} style={commonTestStyles.vmargin}>
+        Font icon
+      </Button>
       {svgIconsEnabled && (
         <>
-          <Button appearance="primary" icon={{ svgSource: svgProps, color: 'red' }} content="SVG" style={commonTestStyles.vmargin} />
-          <Button icon={{ svgSource: svgProps }} content="SVG" style={commonTestStyles.vmargin} />
+          <Button appearance="primary" icon={{ svgSource: svgProps, color: 'red' }} style={commonTestStyles.vmargin}>
+            SVG
+          </Button>
+          <Button icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin}>
+            SVG
+          </Button>
         </>
       )}
-      <Button appearance="primary" icon={testImage} content="PNG" style={commonTestStyles.vmargin} />
-      <Button icon={testImage} content="PNG" style={commonTestStyles.vmargin} />
+      <Button appearance="primary" icon={testImage} style={commonTestStyles.vmargin}>
+        PNG
+      </Button>
+      <Button icon={testImage} style={commonTestStyles.vmargin}>
+        PNG
+      </Button>
     </View>
   );
 };

package/src/FluentTester/TestComponents/ButtonExperimental/ButtonShapeTestSection.tsx

@@ -0,0 +1,38 @@
+import { Button, CompoundButton } from '@fluentui-react-native/experimental-button';
+import * as React from 'react';
+import { View } from 'react-native';
+import { commonTestStyles, stackStyle } from '../Common/styles';
+
+export const ButtonShapeTest: React.FunctionComponent = () => {
+  return (
+    <View style={[stackStyle, commonTestStyles.view]}>
+      <Button shape="rounded" style={commonTestStyles.vmargin}>
+        Default Rounded Button
+      </Button>
+      <Button shape="square" style={commonTestStyles.vmargin}>
+        Square Button
+      </Button>
+      <Button shape="circular" style={commonTestStyles.vmargin}>
+        Circular Button
+      </Button>
+      <Button appearance="primary" shape="rounded" style={commonTestStyles.vmargin}>
+        Primary Rounded Button
+      </Button>
+      <Button appearance="primary" shape="square" style={commonTestStyles.vmargin}>
+        Square Button
+      </Button>
+      <Button appearance="primary" shape="circular" style={commonTestStyles.vmargin}>
+        Circular Button
+      </Button>
+      <CompoundButton secondaryContent="rounded" shape="rounded" style={commonTestStyles.vmargin}>
+        Compound Button
+      </CompoundButton>
+      <CompoundButton secondaryContent="square" shape="square" style={commonTestStyles.vmargin}>
+        Compound Button
+      </CompoundButton>
+      <CompoundButton secondaryContent="circular" shape="circular" style={commonTestStyles.vmargin}>
+        Compound Button
+      </CompoundButton>
+    </View>
+  );
+};

package/src/FluentTester/TestComponents/ButtonExperimental/ButtonSizeTestSection.tsx

@@ -16,17 +16,47 @@ export const ButtonSizeTest: React.FunctionComponent = () => {
     <View style={[stackStyle, commonTestStyles.view]}>
       {svgIconsEnabled && (
         <>
-          <Button size="small" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin} />
-          <Button size="medium" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin} />
-          <Button size="large" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin} />
+          <Button iconOnly size="small" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin} />
+          <Button iconOnly size="medium" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin} />
+          <Button iconOnly size="large" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin} />
+          <Button size="small" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin}>
+            Small Button with icon
+          </Button>
+          <Button size="medium" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin}>
+            Medium Button with icon
+          </Button>
+          <Button size="large" icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin}>
+            Large Button with icon
+          </Button>
         </>
       )}
-      <Button size="small" content="Small" style={commonTestStyles.vmargin} />
-      <Button size="medium" content="Medium" style={commonTestStyles.vmargin} />
-      <Button size="large" content="Large" style={commonTestStyles.vmargin} />
-      <CompoundButton size="small" content="Small" secondaryContent="Compound" style={commonTestStyles.vmargin} />
-      <CompoundButton size="medium" content="Medium" secondaryContent="Compound" style={commonTestStyles.vmargin} />
-      <CompoundButton size="large" content="Large" secondaryContent="Compound" style={commonTestStyles.vmargin} />
+      <Button size="small" style={commonTestStyles.vmargin}>
+        Small
+      </Button>
+      <Button size="medium" style={commonTestStyles.vmargin}>
+        Medium
+      </Button>
+      <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="rounded" shape="rounded" style={commonTestStyles.vmargin}>
+        Compound Button
+      </CompoundButton>
+      <CompoundButton secondaryContent="square" shape="square" style={commonTestStyles.vmargin}>
+        Compound Button
+      </CompoundButton>
+      <CompoundButton secondaryContent="circular" shape="circular" style={commonTestStyles.vmargin}>
+        Compound Button
+      </CompoundButton>
     </View>
   );
 };

package/src/FluentTester/TestComponents/ButtonExperimental/ButtonTest.tsx

@@ -1,17 +1,23 @@
 import * as React from 'react';
 import { ButtonVariantTest } from './ButtonVariantTestSection';
 import { ToggleButtonTest } from './ToggleButtonTestSection';
-import { ExperimentalButtonTestPageId } from './consts';
+import { EXPERIMENTAL_BUTTON_TEST_PAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { ButtonIconTest } from './ButtonIconTestSection';
 import { ButtonSizeTest } from './ButtonSizeTestSection';
+import { ButtonShapeTest } from './ButtonShapeTestSection';
+import { E2EButtonExperimentalTest } from './E2EButtonTest';
 
 const buttonSections: TestSection[] = [
   {
     name: 'Button Variants',
-    testID: ExperimentalButtonTestPageId,
+    testID: EXPERIMENTAL_BUTTON_TEST_PAGE,
     component: ButtonVariantTest,
   },
+  {
+    name: 'Button Shape',
+    component: ButtonShapeTest,
+  },
   {
     name: 'Icon Button',
     component: ButtonIconTest,
@@ -24,6 +30,10 @@ const buttonSections: TestSection[] = [
     name: 'Sizes',
     component: ButtonSizeTest,
   },
+  {
+    name: 'E2E Button Testing',
+    component: E2EButtonExperimentalTest,
+  },
 ];
 
 export const ExperimentalButtonTest: React.FunctionComponent = () => {

package/src/FluentTester/TestComponents/ButtonExperimental/ButtonVariantTestSection.tsx

@@ -1,6 +1,6 @@
-import { Button, CompoundButton } from '@fluentui-react-native/experimental-button';
+import { Button, CompoundButton, FAB } from '@fluentui-react-native/experimental-button';
 import * as React from 'react';
-import { View, Platform } from 'react-native';
+import { View } from 'react-native';
 import { commonTestStyles, stackStyle } from '../Common/styles';
 import { SvgIconProps } from '@fluentui-react-native/icon';
 import TestSvg from './test.svg';
@@ -13,21 +13,39 @@ export const ButtonVariantTest: React.FunctionComponent = () => {
 
   return (
     <View style={[stackStyle, commonTestStyles.view]}>
-      <Button content="Default" style={commonTestStyles.vmargin} />
-      <Button appearance="primary" content="Primary" style={commonTestStyles.vmargin} />
-      <Button appearance="subtle" content="Subtle" style={commonTestStyles.vmargin} />
-      <Button block content="Block" style={commonTestStyles.vmargin} />
-      <Button appearance="primary" block content="Block Primary" style={commonTestStyles.vmargin} />
-      <Button appearance="subtle" block content="Block Subtle" style={commonTestStyles.vmargin} />
-      <CompoundButton content="Default" secondaryContent="Compound" style={commonTestStyles.vmargin} />
-      <CompoundButton appearance="primary" content="Primary" secondaryContent="Compound" style={commonTestStyles.vmargin} />
-      <CompoundButton appearance="subtle" content="Subtle" secondaryContent="Compound" style={commonTestStyles.vmargin} />
-      {Platform.OS !== 'windows' && (
-        <>
-          <Button fab icon={{ svgSource: svgProps, width: 20, height: 20 }} style={commonTestStyles.vmargin} />
-          <Button fab icon={{ svgSource: svgProps, width: 20, height: 20 }} content="FAB" style={commonTestStyles.vmargin} />
-        </>
-      )}
+      <Button style={commonTestStyles.vmargin}>Default</Button>
+      <Button disabled style={commonTestStyles.vmargin}>
+        Disabled
+      </Button>
+      <Button appearance="primary" style={commonTestStyles.vmargin}>
+        Primary
+      </Button>
+      <Button appearance="subtle" style={commonTestStyles.vmargin}>
+        Subtle
+      </Button>
+      <Button loading>Loading Button</Button>
+      <Button block style={commonTestStyles.vmargin}>
+        Block
+      </Button>
+      <Button appearance="primary" block style={commonTestStyles.vmargin}>
+        Block Primary
+      </Button>
+      <Button appearance="subtle" block style={commonTestStyles.vmargin}>
+        Block Subtle
+      </Button>
+      <CompoundButton secondaryContent="Compound" style={commonTestStyles.vmargin}>
+        Default
+      </CompoundButton>
+      <CompoundButton appearance="primary" secondaryContent="Compound" style={commonTestStyles.vmargin}>
+        Primary
+      </CompoundButton>
+      <CompoundButton appearance="subtle" secondaryContent="Compound" style={commonTestStyles.vmargin}>
+        Subtle
+      </CompoundButton>
+      <FAB icon={{ svgSource: svgProps, width: 20, height: 20 }} style={commonTestStyles.vmargin} />
+      <FAB icon={{ svgSource: svgProps, width: 20, height: 20 }} style={commonTestStyles.vmargin}>
+        FAB
+      </FAB>
     </View>
   );
 };