@fluentui-react-native/tester 0.48.1 → 0.50.2

package/src/E2E/common/BasePage.macos.ts

@@ -0,0 +1,172 @@
+const DUMMY_CHAR = '';
+export const COMPONENT_SCROLL_COORDINATES = { x: -0, y: -100 }; // These are the offsets. Y is negative because we want the touch to move up (and thus it scrolls down)
+
+/* Mac-Specific Selector. We use this to get elements on the test page */
+export function By(identifier: string): WebdriverIO.Element {
+  return $('//*[@identifier="' + identifier + '"]');
+}
+
+/* The values in this enum map to the UI components we want to test in our app. We use this to
+make the communication from our spec document to our page object easier. Please read below to
+see why we have Primary/Secondary components. */
+export const enum ComponentSelector {
+  Primary = 0, // this._primaryComponent
+  Secondary, // this._secondaryComponent
+}
+
+/****************************** IMPORTANT! PLEASE READ! **************************************************
+ * Every component's page object extends this. We can assume each test page will interact with at least
+ * two UI elements, so we'll add integration for two UI elements in this file (See *Getters* section below).
+ * Every additional UI element that a test page wants to interact with should be handled in that respective
+ * component's page object.
+ *********************************************************************************************************/
+
+export class BasePage {
+  /******************************************************************/
+  /**************** UI Element Interaction Methods ******************/
+  /******************************************************************/
+  getAccessibilityRole(): string {
+    return this._primaryComponent.getAttribute('ControlType');
+  }
+
+  /* Gets the accessibility label of an UI element given the selector */
+  getAccessibilityLabel(componentSelector: ComponentSelector): string {
+    switch (componentSelector) {
+      case ComponentSelector.Primary:
+        return this._primaryComponent.getAttribute('Name');
+
+      case ComponentSelector.Secondary:
+        return this._secondaryComponent.getAttribute('Name');
+    }
+  }
+
+  /* Returns true if the test page has loaded. To determine if it's loaded, each test page has a specific UI element we attempt to locate.
+   * If this UI element is located, we know the page as loaded correctly. The UI element we look for is a Text component that contains
+   * the title of the page (this._testPage returns that UI element)  */
+  isPageLoaded(): boolean {
+    return this._testPage.isDisplayed();
+  }
+
+  /* Returns true if the test page's button is displayed (the button that navigates to each test page) */
+  isButtonInView(): boolean {
+    return this._pageButton.isDisplayed();
+  }
+
+  /* Scrolls until the desired test page's button is displayed. We use the scroll viewer UI element as the point to start scrolling.
+   * We use a negative number as the Y-coordinate because that enables us to scroll downwards */
+  scrollToComponentButton(): void {
+    if (!this.isButtonInView()) {
+      const scrollViewElement = $('~SCROLLVIEW_TEST_ID');
+      driver.touchScroll(COMPONENT_SCROLL_COORDINATES.x, COMPONENT_SCROLL_COORDINATES.y, scrollViewElement.elementId);
+    }
+  }
+
+  /* Waits for the test page to load. If the test page doesn't load before the timeout, it causes the test to fail. */
+  waitForPageDisplayed(timeout?: number): void {
+    browser.waitUntil(
+      () => {
+        return this.isPageLoaded();
+      },
+      {
+        timeout: timeout ?? this.waitForPageTimeout,
+        timeoutMsg: this._pageName + ' did not render correctly. Please see /errorShots for more information.',
+        interval: 1000,
+      },
+    );
+  }
+
+  /* Waits for the test page's button to be displayed. If the button doesn't load before the timeout, it causes the test to fail. */
+  waitForButtonDisplayed(timeout?: number): void {
+    browser.waitUntil(
+      () => {
+        return this.isButtonInView();
+      },
+      {
+        timeout: timeout ?? this.waitForPageTimeout,
+        timeoutMsg: 'Could not find the button to navigate to ' + this._pageName + '. Please see /errorShots for more information.',
+        interval: 1000,
+      },
+    );
+  }
+
+  /* Waits for the primary UI test element to be displayed. If the element doesn't load before the timeout, it causes the test to fail. */
+  waitForPrimaryElementDisplayed(timeout?: number): void {
+    browser.waitUntil(
+      () => {
+        return this._primaryComponent.isDisplayed();
+      },
+      {
+        timeout: timeout ?? this.waitForPageTimeout,
+        timeoutMsg:
+          'The primary UI element for testing did not display correctly. Please see /errorShots of the first failed test for more information.',
+        interval: 1000,
+      },
+    );
+  }
+
+  /* Scrolls to the primary UI test element until it is displayed. It uses the ScrollView that encapsulates each test page. */
+  scrollToTestElement(): void {
+    while (!this._primaryComponent.isDisplayed()) {
+      driver.touchScroll(COMPONENT_SCROLL_COORDINATES.x, COMPONENT_SCROLL_COORDINATES.y, $('~ScrollViewAreaForComponents').elementId);
+    }
+  }
+
+  /* A method that allows the caller to pass in a condition. A wrapper for waitUntil(). Once testing becomes more extensive,
+   * this will allow cleaner code within all the Page Objects. */
+  waitForCondition(condition?: () => boolean, errorMsg?: string, timeout?: number): void {
+    browser.waitUntil(
+      () => {
+        return condition();
+      },
+      {
+        timeout: timeout ?? this.waitForPageTimeout,
+        timeoutMsg: errorMsg ?? 'Error. Please see /errorShots and logs for more information.',
+        interval: 1000,
+      },
+    );
+  }
+
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+
+  /*  IMPORTANT:
+   *  Each PageObject class that extends this class is expected to override these values.
+   *  This is necessary because each page will have different IDs for their respective UI elements.
+   *  DUMMY_CHAR is just a placeholder.
+   */
+
+  // Returns: UI Element
+  // The Text component on each test page containing the title of that page. We can use this to determine if a test page has loaded correctly.
+  get _testPage(): WebdriverIO.Element {
+    return By(DUMMY_CHAR);
+  }
+
+  // Returns: UI Element
+  // The primary UI element used for testing on the given test page.
+  get _primaryComponent(): WebdriverIO.Element {
+    return By(DUMMY_CHAR);
+  }
+
+  // Returns: UI Element
+  // The secondary UI element used for testing on the given test page. Often times, we'll want to set a
+  // prop on one component, and not set it on another to verify certain behaviors. This is why we have this secondary component.
+  get _secondaryComponent(): WebdriverIO.Element {
+    return By(DUMMY_CHAR);
+  }
+
+  // Returns: UI Element
+  // The button that navigates you to the component's test page.
+  get _pageButton(): WebdriverIO.Element {
+    return By(DUMMY_CHAR);
+  }
+
+  // Returns: String
+  // Returns the name of the test page. Useful for error messages (see above).
+  get _pageName(): string {
+    return DUMMY_CHAR;
+  }
+
+  // Default timeout to wait until page is displayed (10s)
+  waitForPageTimeout: number = 15000;
+}

package/src/E2E/common/{BasePage.ts → BasePage.win.ts}

@@ -1,8 +1,9 @@
 const DUMMY_CHAR = '';
 export const COMPONENT_SCROLL_COORDINATES = { x: -0, y: -100 }; // These are the offsets. Y is negative because we want the touch to move up (and thus it scrolls down)
 
-export function By(testId: string): WebdriverIO.Element {
-  return $('~' + testId);
+/* Win32/UWP-Specific Selector. We use this to get elements on the test page */
+export function By(identifier: string): WebdriverIO.Element {
+  return $('~' + identifier);
 }
 
 /* The values in this enum map to the UI components we want to test in our app. We use this to
@@ -66,9 +67,11 @@ export class BasePage {
       () => {
         return this.isPageLoaded();
       },
-      timeout ?? this.waitForPageTimeout,
-      this._pageName + ' did not render correctly. Please see /errorShots of the first failed test for more information.',
-      1000,
+      {
+        timeout: timeout ?? this.waitForPageTimeout,
+        timeoutMsg: this._pageName + ' did not render correctly. Please see /errorShots for more information.',
+        interval: 1000,
+      },
     );
   }
 
@@ -78,11 +81,11 @@ export class BasePage {
       () => {
         return this.isButtonInView();
       },
-      timeout ?? this.waitForPageTimeout,
-      'The button to navigate to the ' +
-        this._pageName +
-        ' was not displayed correctly. Please see /errorShots of the first failed test for more information.',
-      1000,
+      {
+        timeout: timeout ?? this.waitForPageTimeout,
+        timeoutMsg: 'Could not find the button to navigate to ' + this._pageName + '. Please see /errorShots for more information.',
+        interval: 1000,
+      },
     );
   }
 
@@ -92,9 +95,12 @@ export class BasePage {
       () => {
         return this._primaryComponent.isDisplayed();
       },
-      timeout ?? this.waitForPageTimeout,
-      'The primary UI element for testing did not display correctly. Please see /errorShots of the first failed test for more information.',
-      1000,
+      {
+        timeout: timeout ?? this.waitForPageTimeout,
+        timeoutMsg:
+          'The primary UI element for testing did not display correctly. Please see /errorShots of the first failed test for more information.',
+        interval: 1000,
+      },
     );
   }
 
@@ -112,9 +118,11 @@ export class BasePage {
       () => {
         return condition();
       },
-      timeout ?? this.waitForPageTimeout,
-      errorMsg ?? 'Error. Please see /errorShots and logs for more information.',
-      1000,
+      {
+        timeout: timeout ?? this.waitForPageTimeout,
+        timeoutMsg: errorMsg ?? 'Error. Please see /errorShots and logs for more information.',
+        interval: 1000,
+      },
     );
   }
 

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/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>
+  );
+};