@fluentui-react-native/tester 0.47.3 → 0.50.0

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

@@ -0,0 +1,108 @@
+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 { JSAvatarTokens } from '@fluentui-react-native/experimental-avatar';
+
+type WithUndefined<T> = T | typeof undefinedText;
+
+const allSizes: WithUndefined<AvatarSize>[] = [
+  undefinedText,
+  'size8',
+  'size24',
+  'size32',
+  'size40',
+  'size48',
+  'size56',
+  'size72',
+  'size100',
+  'size120',
+];
+
+const allColors: WithUndefined<AvatarColor>[] = [
+  undefinedText,
+  'cornflower',
+  'blue',
+  'royalBlue',
+  'teal',
+  'forest',
+  'darkGreen',
+  'berry',
+  'hotPink',
+  'grape',
+  'purple',
+  'pumpkin',
+  'red',
+  'burgundy',
+  'orchid',
+  'brass',
+  'darkRed',
+  'beige',
+  'platinum',
+  'steel',
+  'brown',
+];
+
+const allPresences: WithUndefined<AvatarPresence>[] = [undefinedText, 'none', 'online', 'offline', 'busy', 'dnd', 'blocked', 'away'];
+
+const StyledPicker = (props) => {
+  const { prompt, selected, onChange, collection } = props;
+  const theme = useTheme();
+  const pickerStyles = { color: theme.colors.inputText as ColorValue, ...commonStyles.header };
+  return (
+    <Picker prompt={prompt} style={pickerStyles} selectedValue={selected} onValueChange={onChange}>
+      {collection.map((value, index) => (
+        <Picker.Item label={value} key={index} value={value} />
+      ))}
+    </Picker>
+  );
+};
+
+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 = 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 };
+
+  tokens.backgroundColor = coinColor;
+
+  return (
+    <View style={commonStyles.root}>
+      <View style={commonStyles.settings}>
+        <View style={commonStyles.switch}>
+          <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>
+
+      <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}
+        coinColorFluent={coinColor === undefinedText ? undefined : coinColor}
+      />
+    </View>
+  );
+};

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

@@ -0,0 +1,159 @@
+import * as React from 'react';
+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';
+import { useTheme } from '@fluentui-react-native/theme-types';
+import { AlignmentPicker } from '../Common/AlignmentPicker';
+import { commonTestStyles as commonStyles } from '../Common/styles';
+
+export const CustomizeUsage: React.FunctionComponent = () => {
+  const [showImage, setShowImage] = React.useState(true);
+  const [coinColor, setCoinColor] = React.useState<string>();
+  const [textColor, setTextColor] = React.useState<string>();
+  const [physicalSize, setPhysicalSize] = React.useState<number>(80);
+  const [iconSize, setIconSize] = React.useState<number>(24);
+  const [iconStrokeWidth, setIconStrokeWidth] = React.useState<number>(2);
+  const [iconStrokeColor, setIconStrokeColor] = React.useState<string>(undefined);
+  const [initialsSize, setInitialsSize] = React.useState<number>(14);
+  const [horizontalAlignment, setHorizontalAlignment] = React.useState<IconAlignment>();
+  const [verticalAlignment, setVerticalAlignment] = React.useState<IconAlignment>();
+
+  const [ringColor, setRingColor] = React.useState<string>('red');
+  const [ringBackgroundColor, setRingBackgroundColor] = React.useState<string>(undefined);
+  const [showRing, setShowRing] = React.useState<boolean>(true);
+  const [transparent, setTransparent] = React.useState<boolean>(false);
+
+  const theme = useTheme();
+  const textBoxBorderStyle: TextStyle = {
+    borderColor: theme.colors.inputBorder,
+  };
+
+  const tokens: JSAvatarTokens = {};
+  if (coinColor) {
+    tokens.backgroundColor = coinColor;
+  }
+  if (textColor) {
+    tokens.color = textColor;
+  }
+  if (horizontalAlignment) {
+    tokens.horizontalIconAlignment = horizontalAlignment;
+  }
+  if (verticalAlignment) {
+    tokens.verticalIconAlignment = verticalAlignment;
+  }
+  if (iconSize) {
+    tokens.iconSize = iconSize;
+  }
+  if (iconStrokeWidth) {
+    tokens.iconStrokeWidth = iconStrokeWidth;
+  }
+  if (iconStrokeColor) {
+    tokens.iconStrokeColor = iconStrokeColor;
+  }
+  if (initialsSize) {
+    tokens.initialsSize = initialsSize;
+  }
+  if (physicalSize) {
+    tokens.avatarSize = physicalSize;
+  }
+
+  const CustomizedAvatar = JSAvatar.customize(tokens);
+
+  return (
+    <View style={commonStyles.root}>
+      <View style={commonStyles.settings}>
+        <View style={commonStyles.switch}>
+          <Text>Show image</Text>
+          <Switch value={showImage} onValueChange={setShowImage} />
+        </View>
+
+        <View style={commonStyles.switch}>
+          <Text>Show rings</Text>
+          <Switch value={showRing} onValueChange={setShowRing} />
+        </View>
+
+        <View style={commonStyles.switch}>
+          <Text>Transparent Ring</Text>
+          <Switch value={transparent} onValueChange={setTransparent} />
+        </View>
+
+        <TextInput
+          style={[commonStyles.textBox, textBoxBorderStyle]}
+          placeholder="Background color"
+          blurOnSubmit={true}
+          onSubmitEditing={(e) => {
+            setCoinColor(e.nativeEvent.text);
+          }}
+        />
+        <TextInput
+          style={[commonStyles.textBox, textBoxBorderStyle]}
+          placeholder="Initials text color"
+          blurOnSubmit={true}
+          onSubmitEditing={(e) => {
+            setTextColor(e.nativeEvent.text);
+          }}
+        />
+        <TextInput
+          style={[commonStyles.textBox, textBoxBorderStyle]}
+          placeholder="Icon stroke color"
+          blurOnSubmit={true}
+          onSubmitEditing={(e) => {
+            setIconStrokeColor(e.nativeEvent.text);
+          }}
+        />
+
+        <TextInput
+          style={[commonStyles.textBox, textBoxBorderStyle]}
+          placeholder="Ring color"
+          blurOnSubmit={true}
+          onSubmitEditing={(e) => {
+            setRingColor(e.nativeEvent.text);
+          }}
+        />
+
+        <TextInput
+          style={[commonStyles.textBox, textBoxBorderStyle]}
+          placeholder="Ring background color"
+          blurOnSubmit={true}
+          onSubmitEditing={(e) => {
+            setRingBackgroundColor(e.nativeEvent.text);
+          }}
+        />
+
+        <AlignmentPicker style={commonStyles.header} label="Horizontal icon alignment" onSelectionChange={setHorizontalAlignment} />
+        <AlignmentPicker style={commonStyles.header} label="Vertical icon alignment" onSelectionChange={setVerticalAlignment} />
+
+        <Text>Coin size</Text>
+        <Slider minimum={8} maximum={200} initialValue={80} style={commonStyles.vmargin} onChange={setPhysicalSize} />
+
+        <Text>Icon size</Text>
+        <Slider minimum={8} maximum={100} initialValue={24} style={commonStyles.vmargin} onChange={setIconSize} />
+
+        <Text>Icon stroke width</Text>
+        <Slider minimum={0} maximum={8} initialValue={2} style={commonStyles.vmargin} onChange={setIconStrokeWidth} />
+
+        <Text>Font size</Text>
+        <Slider minimum={5} maximum={50} initialValue={14} style={commonStyles.vmargin} onChange={setInitialsSize} />
+      </View>
+
+      <CustomizedAvatar
+        initials="SB"
+        imageDescription="Former CEO of Microsoft"
+        presence="blocked"
+        imageUrl={showImage ? steveBallmerPhotoUrl : undefined}
+        ring={
+          showRing
+            ? {
+                ringColor,
+                ringBackgroundColor,
+                ringThickness: 4,
+                innerGap: 4,
+                transparent,
+              }
+            : undefined
+        }
+      />
+    </View>
+  );
+};

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { JSAVATAR_TESTPAGE } from './consts';
+import { Test, TestSection, PlatformStatus } from '../Test';
+import { StandardUsage } from './BasicAvatar';
+import { CustomizeUsage } from './CustomizedAvatar';
+
+const avatarSections: TestSection[] = [
+  {
+    name: 'Standard Usage',
+    testID: JSAVATAR_TESTPAGE,
+    component: StandardUsage,
+  },
+  {
+    name: 'Customize Usage',
+    component: CustomizeUsage,
+  },
+];
+
+export const JSAvatarTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Experimental',
+    uwpStatus: 'Backlog',
+    iosStatus: 'Beta',
+    macosStatus: 'Experimental',
+    androidStatus: 'Backlog',
+  };
+
+  const description =
+    'AvatarView is a visual representation of a user, entity, or group. If an image is supplied, it is cropped to a circle of the requested size. If an image is not supplied, initials are extracted from the given name and email address provided and displayed on a colorful background.';
+
+  return <Test name="Avatar Test" description={description} sections={avatarSections} status={status} />;
+};

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

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

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

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

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { ButtonFocusTest } from './ButtonFocusTest';
 import { ButtonIconTest } from './ButtonIconTest';
 import { BUTTON_TESTPAGE } from './consts';
+import { E2EButtonTest } from './E2EButtonTest';
 import { Test, TestSection, PlatformStatus } from '../Test';
 
 const buttonSections: TestSection[] = [
@@ -14,6 +15,10 @@ const buttonSections: TestSection[] = [
     name: 'Icon Button',
     component: ButtonIconTest,
   },
+  {
+    name: 'E2E Button Testing',
+    component: E2EButtonTest,
+  },
 ];
 
 export const ButtonTest: React.FunctionComponent = () => {

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

@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import { Button, Text } from '@fluentui/react-native';
+import { Stack } from '@fluentui-react-native/stack';
+import * as React from 'react';
+import { View } from 'react-native';
+import { stackStyle } from '../Common/styles';
+import {
+  BUTTON_TEST_COMPONENT,
+  BUTTON_ON_PRESS,
+  BUTTON_NO_A11Y_LABEL_COMPONENT,
+  BUTTON_ACCESSIBILITY_LABEL,
+  BUTTON_TEST_COMPONENT_LABEL,
+} from './consts';
+
+export const E2EButtonTest: 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={BUTTON_TEST_COMPONENT}
+          onClick={onClick}
+          accessibilityLabel={BUTTON_ACCESSIBILITY_LABEL}
+        />
+        <Button content={BUTTON_TEST_COMPONENT_LABEL} testID={BUTTON_NO_A11Y_LABEL_COMPONENT} onClick={onClick} />
+        {buttonPressed ? <Text testID={BUTTON_ON_PRESS}>Button Pressed</Text> : null}
+      </Stack>
+    </View>
+  );
+};

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

@@ -1,2 +1,12 @@
 export const HOMEPAGE_BUTTON_BUTTON = 'Homepage_Button_Button'; // Button on the homepage that navigates to the selected test page
-export const BUTTON_TESTPAGE = 'Button_TestPage'; // A component on each specific test page.
+export const BUTTON_TESTPAGE = 'Button_TestPage'; // The title of each test page. This is displayed after navigating to the test page
+
+/* Test Button 1 */
+export const BUTTON_TEST_COMPONENT = 'Button_Test_Component'; // A component on each specific test page
+export const BUTTON_ACCESSIBILITY_LABEL = 'E2E testing Button accessibility label';
+
+/* Test Button 2 */
+export const BUTTON_NO_A11Y_LABEL_COMPONENT = 'Button_No_A11y_label_Component';
+export const BUTTON_TEST_COMPONENT_LABEL = 'Test Button2 - No Accessibility Label'; // A component on each specific test page
+
+export const BUTTON_ON_PRESS = 'Button_On_Press'; // For testing the press functionality on a button

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 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 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 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 primary content="Primary" style={commonTestStyles.vmargin} />
-      <Button subtle content="Subtle" style={commonTestStyles.vmargin} />
-      <Button fluid content="Fluid" style={commonTestStyles.vmargin} />
-      <Button primary fluid content="Fluid Primary" style={commonTestStyles.vmargin} />
-      <Button subtle fluid content="Fluid Subtle" style={commonTestStyles.vmargin} />
-      <CompoundButton content="Default" secondaryContent="Compound" style={commonTestStyles.vmargin} />
-      <CompoundButton primary content="Primary" secondaryContent="Compound" style={commonTestStyles.vmargin} />
-      <CompoundButton 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>
   );
 };