@fluentui-react-native/tester 0.48.1 → 0.49.0

package/src/E2E/Separator/pages/SeparatorPageObject.win.ts

@@ -0,0 +1,29 @@
+import {
+  SEPARATOR_TESTPAGE,
+  SEPARATOR_TEST_COMPONENT,
+  HOMEPAGE_SEPARATOR_BUTTON,
+} from '../../../FluentTester/TestComponents/Separator/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class SeparatorPageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(SEPARATOR_TESTPAGE);
+  }
+
+  get _pageName() {
+    return SEPARATOR_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(SEPARATOR_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_SEPARATOR_BUTTON);
+  }
+}
+
+export default new SeparatorPageObject();

package/src/E2E/Separator/specs/Separator.spec.win.ts

@@ -0,0 +1,23 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import SeparatorPageObject from '../pages/SeparatorPageObject.win';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Separator Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to Separator test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    SeparatorPageObject.scrollToComponentButton();
+    SeparatorPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToSeparatorPage();
+    SeparatorPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(SeparatorPageObject.isPageLoaded()).toBeTruthy();
+  });
+});

package/src/E2E/Svg/pages/SvgPageObject.win.ts

@@ -0,0 +1,25 @@
+import { SVG_TESTPAGE, SVG_TEST_COMPONENT, HOMEPAGE_SVG_BUTTON } from '../../../FluentTester/TestComponents/Svg/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class SvgPageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(SVG_TESTPAGE);
+  }
+
+  get _pageName() {
+    return SVG_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(SVG_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_SVG_BUTTON);
+  }
+}
+
+export default new SvgPageObject();

package/src/E2E/Svg/specs/Svg.spec.win.ts

@@ -0,0 +1,23 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import SvgPageObject from '../pages/SvgPageObject.win';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Svg Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to Svg test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    SvgPageObject.scrollToComponentButton();
+    SvgPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToSvgPage();
+    SvgPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(SvgPageObject.isPageLoaded()).toBeTruthy();
+  });
+});

package/src/E2E/Theme/pages/ThemePageObject.win.ts

@@ -0,0 +1,25 @@
+import { THEME_TESTPAGE, THEME_TEST_COMPONENT, HOMEPAGE_THEME_BUTTON } from '../../../FluentTester/TestComponents/Theme/consts';
+import { BasePage, By } from '../../common/BasePage';
+
+class ThemePageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(THEME_TESTPAGE);
+  }
+
+  get _pageName() {
+    return THEME_TESTPAGE;
+  }
+
+  get _primaryComponent() {
+    return By(THEME_TEST_COMPONENT);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_THEME_BUTTON);
+  }
+}
+
+export default new ThemePageObject();

package/src/E2E/Theme/specs/Theme.spec.win.ts

@@ -0,0 +1,23 @@
+import NavigateAppPage from '../../common/NavigateAppPage';
+import ThemePageObject from '../pages/ThemePageObject.win';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Theme Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy();
+  });
+
+  it('Click and navigate to Theme test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    ThemePageObject.scrollToComponentButton();
+    ThemePageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToThemePage();
+    ThemePageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(ThemePageObject.isPageLoaded()).toBeTruthy();
+  });
+});

package/src/E2E/common/NavigateAppPage.ts

@@ -1,5 +1,6 @@
 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';
@@ -7,6 +8,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';
@@ -52,6 +54,10 @@ class NavigateAppPage extends BasePage {
     this.linkPage.click();
   }
 
+  clickAndGoToMenuButtonPage() {
+    this.menuButtonPage.click();
+  }
+
   clickAndGoToPersonaPage() {
     this.personaPage.click();
   }
@@ -88,6 +94,10 @@ class NavigateAppPage extends BasePage {
     this.themePage.click();
   }
 
+  clickAndGoToExperimentalButtonPage() {
+    this.experimentalButtonPage.click();
+  }
+
   clickAndGoToExperimentalTabsPage() {
     this.experimentalTabsPage.click();
   }
@@ -132,6 +142,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);
   }
@@ -168,6 +182,10 @@ class NavigateAppPage extends BasePage {
     return By(HOMEPAGE_THEME_BUTTON);
   }
 
+  private get experimentalButtonPage() {
+    return By(HOMEPAGE_BUTTON_BUTTONEXPERIMENTAL);
+  }
+
   private get experimentalTabsPage() {
     return By(HOMEPAGE_EXPERIMENTAL_TABS_BUTTON);
   }

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/BasicAvatar.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+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';
@@ -60,16 +60,17 @@ const StyledPicker = (props) => {
   );
 };
 
-export const StandardUsage: React.FunctionComponent = () => {
+export const StandardUsage: FunctionComponent = () => {
   const tokens: JSAvatarTokens = {};
-  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');
+  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,6 +84,10 @@ 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} />
@@ -92,6 +97,7 @@ export const StandardUsage: React.FunctionComponent = () => {
       <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/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>
   );
 };

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

@@ -0,0 +1,37 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import { Text } from '@fluentui/react-native';
+import { Button } from '@fluentui-react-native/experimental-button';
+import { Stack } from '@fluentui-react-native/stack';
+import * as React from 'react';
+import { View } from 'react-native';
+import { stackStyle } from '../Common/styles';
+import {
+  BUTTONEXPERIMENTAL_TEST_COMPONENT,
+  BUTTONEXPERIMENTAL_ON_PRESS,
+  BUTTONEXPERIMENTAL_NO_A11Y_LABEL_COMPONENT,
+  BUTTONEXPERIMENTAL_ACCESSIBILITY_LABEL,
+  BUTTONEXPERIMENTAL_TEST_COMPONENT_LABEL,
+} from './consts';
+
+export const E2EButtonExperimentalTest: React.FunctionComponent = () => {
+  const [buttonPressed, setButtonPressed] = React.useState(false);
+
+  const onClick = React.useCallback(() => {
+    setButtonPressed(!buttonPressed);
+  }, [buttonPressed]);
+
+  return (
+    <View>
+      <Stack style={stackStyle}>
+        <Button
+          content="This is a button for E2E testing"
+          testID={BUTTONEXPERIMENTAL_TEST_COMPONENT}
+          onClick={onClick}
+          accessibilityLabel={BUTTONEXPERIMENTAL_ACCESSIBILITY_LABEL}
+        />
+        <Button content={BUTTONEXPERIMENTAL_TEST_COMPONENT_LABEL} testID={BUTTONEXPERIMENTAL_NO_A11Y_LABEL_COMPONENT} onClick={onClick} />
+        {buttonPressed ? <Text testID={BUTTONEXPERIMENTAL_ON_PRESS}>Button Pressed</Text> : null}
+      </Stack>
+    </View>
+  );
+};

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

@@ -22,24 +22,35 @@ export const ToggleButtonTest: React.FunctionComponent = () => {
   return (
     <View style={[stackStyle, commonTestStyles.view]}>
       <View style={styles.row}>
-        <ToggleButton onClick={onDefaultClicked} checked={defaultChecked} content="Default Toggle" style={commonTestStyles.vmargin} />
+        <ToggleButton onClick={onDefaultClicked} checked={defaultChecked} style={commonTestStyles.vmargin}>
+          Default Toggle
+        </ToggleButton>
         <Checkbox checked={defaultChecked} label="Default Toggle is Checked" style={[commonTestStyles.vmargin, styles.hmargin]} />
       </View>
-      <ToggleButton checked content="Checked Default Toggle" style={commonTestStyles.vmargin} />
-      <ToggleButton checked={false} content="Unchecked Default Toggle" style={commonTestStyles.vmargin} />
-      {/* <ToggleButton primary content="Primary Toggle" /> */}
+      <ToggleButton checked style={commonTestStyles.vmargin}>
+        Checked Default Toggle
+      </ToggleButton>
+      <ToggleButton checked={false} style={commonTestStyles.vmargin}>
+        Unchecked Default Toggle
+      </ToggleButton>
+      <ToggleButton appearance="primary" style={commonTestStyles.vmargin}>
+        Primary Toggle
+      </ToggleButton>
+      <ToggleButton defaultChecked appearance="primary" style={commonTestStyles.vmargin}>
+        Primary Toggle
+      </ToggleButton>
       <View style={styles.row}>
-        <ToggleButton
-          appearance="subtle"
-          onClick={onGhostClicked}
-          checked={subtleChecked}
-          content="Subtle Toggle"
-          style={commonTestStyles.vmargin}
-        />
+        <ToggleButton appearance="subtle" onClick={onGhostClicked} checked={subtleChecked} style={commonTestStyles.vmargin}>
+          Subtle Toggle
+        </ToggleButton>
         <Checkbox checked={subtleChecked} label="Subtle Toggle is Checked" style={[commonTestStyles.vmargin, styles.hmargin]} />
       </View>
-      <ToggleButton appearance="subtle" checked content="Checked Subtle Toggle" style={commonTestStyles.vmargin} />
-      <ToggleButton appearance="subtle" checked={false} content="Unchecked Subtle Toggle" style={commonTestStyles.vmargin} />
+      <ToggleButton appearance="subtle" checked style={commonTestStyles.vmargin}>
+        Checked Subtle Toggle
+      </ToggleButton>
+      <ToggleButton appearance="subtle" checked={false} style={commonTestStyles.vmargin}>
+        Unchecked Subtle Toggle
+      </ToggleButton>
     </View>
   );
 };