@fluentui-react-native/tester 0.56.1 → 0.58.1

package/src/E2E/common/NativeTesting/pages/NativeTestingPageObject.win.ts

@@ -0,0 +1,56 @@
+import { BasePage, By } from '../../../common/BasePage.win';
+
+const ScrollViewTestId = 'SCROLLVIEW_TEST_ID';
+
+class NativeTestingPageObject extends BasePage {
+  waitForScrollViewDisplayed(timeout?: number): void {
+    browser.waitUntil(
+      () => {
+        return this.doesScrollViewParentExist();
+      },
+      {
+        timeout: timeout ?? this.waitForPageTimeout,
+        timeoutMsg:
+          'For testing purposes we require that the root view contains a non-empty, immutable ScrollView of buttons that navigate to test pages.',
+        interval: 1000,
+      },
+    );
+  }
+
+  doesScrollViewParentExist(): boolean {
+    return this._scrollViewParent.isExisting();
+  }
+
+  /* Validate the Children of the ScrollView stay intact. The children are the buttons that
+   * navigate to each test page. Also, validate these children exist with the proper testId format */
+  validateScrollViewChildren(): boolean {
+    // Gets all the children
+    const testChildren = this._scrollViewParent.$$('//*');
+    let foundValidButton = false;
+
+    // Ensure the testID (maps 1:1 to automationId) properties of the button children match the defined testing format
+    const reg = new RegExp('Homepage_[a-zA-Z]*_Button');
+
+    // Iterate through children. Validate at least one valid button exists as a child to the ScrollView.
+    // If automationId is found in the wrong format, return false.
+    for (const child of testChildren) {
+      const autoId = child.getAttribute('AutomationId');
+      if (autoId && autoId !== ScrollViewTestId) {
+        if (autoId.match(reg)) {
+          foundValidButton = true;
+        } else {
+          // The correct format for testId was not followed. Return a failure.
+          return false;
+        }
+      }
+    }
+
+    return foundValidButton;
+  }
+
+  get _scrollViewParent() {
+    return By(ScrollViewTestId);
+  }
+}
+
+export default new NativeTestingPageObject();

package/src/E2E/common/NativeTesting/specs/NativeTesting.spec.win.ts

@@ -0,0 +1,28 @@
+import NavigateAppPage from '../../../common/NavigateAppPage.win';
+import NativeTestingPageObject from '../pages/NativeTestingPageObject.win';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../../common/consts';
+
+describe('Native Safety Check Testing Initialization', () => {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy(NavigateAppPage.ERRORMESSAGE_APPLOAD);
+  });
+
+  // The ScrollView in testing is the one that contains all the buttons that navigate to each component's
+  // test page. This is vital for our native testing, as we grab this ScrollView on the native side and
+  // to climb down the UI tree and find all of FURN's testable components.
+  // We need to make sure this ScrollView:
+  //    1) Continues to parent all the test buttons
+  //    2) Keeps testID='SCROLLVIEW_TEST_ID'
+  it('Validate the ScrollView containing all the navigational buttons exists', () => {
+    NativeTestingPageObject.waitForScrollViewDisplayed(PAGE_TIMEOUT);
+    expect(NativeTestingPageObject.doesScrollViewParentExist()).toBeTruthy();
+  });
+
+  // In addition to existing, we want to ensure the Children of the ScrollView stay intact. The children are the buttons that
+  // navigate to each test page. Validate these children exist with the proper testId format.
+  it('Validate the children of ScrollView are the buttons that navigate to each test page with proper automationId', () => {
+    NativeTestingPageObject.waitForScrollViewDisplayed(PAGE_TIMEOUT);
+    expect(NativeTestingPageObject.validateScrollViewChildren()).toBeTruthy();
+  });
+});

package/src/FluentTester/FluentTester.tsx

@@ -44,6 +44,16 @@ const getThemedStyles = themedStyleSheet((t: Theme) => {
   };
 });
 
+const HeaderSeparator = Separator.customize((t) => ({
+  color: t.colors.bodyFrameDivider,
+  separatorWidth: 2,
+}));
+
+const TestListSeparator = Separator.customize((t) => ({
+  color: t.colors.menuDivider,
+  separatorWidth: 2,
+}));
+
 export const FluentTester: React.FunctionComponent<FluentTesterProps> = (props: FluentTesterProps) => {
   // sort tests alphabetically by name
   const sortedTestComponents = props.enabledTests.sort((a, b) => a.name.localeCompare(b.name));
@@ -66,16 +76,6 @@ export const FluentTester: React.FunctionComponent<FluentTesterProps> = (props:
 
   const TestComponent = selectedTestIndex == -1 ? EmptyComponent : sortedTestComponents[selectedTestIndex].component;
 
-  const HeaderSeparator = Separator.customize((t) => ({
-    color: t.colors.bodyFrameDivider,
-    separatorWidth: 2,
-  }));
-
-  const TestListSeparator = Separator.customize((t) => ({
-    color: t.colors.menuDivider,
-    separatorWidth: 2,
-  }));
-
   const themedStyles = getThemedStyles(useTheme());
 
   const RootView = Platform.select({

package/src/FluentTester/TestComponents/ActivityIndicator/ActivityIndicatorTest.tsx

@@ -7,14 +7,30 @@ import { Test, TestSection, PlatformStatus } from '../Test';
 import { ACTIVITY_INDICATOR_TESTPAGE } from './consts';
 import { View, Switch } from 'react-native';
 
+const basicActivityIndicator: React.FunctionComponent = () => {
+  const [animating, setAnimating] = React.useState(true);
+  const [hidesWhenStopped, setHidesWhenStopped] = React.useState(true);
+
+  return (
+    <Stack style={stackStyle}>
+      <View style={commonStyles.root}>
+        <View style={commonStyles.settings}>
+          <View style={commonStyles.switch}>
+            <Text>Animating</Text>
+            <Switch value={animating} onValueChange={setAnimating} />
+          </View>
+          <View style={commonStyles.switch}>
+            <Text>HidesWhenStopped</Text>
+            <Switch value={hidesWhenStopped} onValueChange={setHidesWhenStopped} />
+          </View>
+        </View>
+        <ActivityIndicator animating={animating} hidesWhenStopped={hidesWhenStopped} />
+      </View>
+    </Stack>
+  );
+};
+
 const activityIndicatorTest: React.FunctionComponent = () => {
-  /** Customize doesn't do anything
-   * Tried having tokens not be props, but didn't work
-   * Not sure how to test/check where the tokens are passed through other than just looking at the final render
-   */
-  const CustomizedActivityIndicator = ActivityIndicator.customize({
-    activityIndicatorColor: 'orange',
-  });
   return (
     <Stack style={stackStyle}>
       <Text>Extra Small</Text>
@@ -32,38 +48,27 @@ const activityIndicatorTest: React.FunctionComponent = () => {
       <ActivityIndicator size="xLarge" lineThickness="large" />
       <Text>Color props</Text>
       <ActivityIndicator activityIndicatorColor="orange" accessibilityLabel="orange progressbar" />
-      <Text>Customized Activity Indicator (currently not working)</Text>
-      <CustomizedActivityIndicator />
     </Stack>
   );
 };
 
-const basicActivityIndicator: React.FunctionComponent = () => {
-  const [animating, setAnimating] = React.useState(true);
-  const [hidesWhenStopped, setHidesWhenStopped] = React.useState(true);
+const CustomizedActivityIndicator = ActivityIndicator.customize({
+  activityIndicatorColor: 'orange',
+  size: 'large',
+});
 
+const customizedActivityIndicatorTest: React.FunctionComponent = () => {
   return (
     <Stack style={stackStyle}>
-      <View style={commonStyles.root}>
-        <View style={commonStyles.settings}>
-          <View style={commonStyles.switch}>
-            <Text>Animating</Text>
-            <Switch value={animating} onValueChange={setAnimating} />
-          </View>
-          <View style={commonStyles.switch}>
-            <Text>HidesWhenStopped</Text>
-            <Switch value={hidesWhenStopped} onValueChange={setHidesWhenStopped} />
-          </View>
-        </View>
-        <ActivityIndicator animating={animating} hidesWhenStopped={hidesWhenStopped} />
-      </View>
+      <Text>Customized Activity Indicator</Text>
+      <CustomizedActivityIndicator />
     </Stack>
   );
 };
 
 const activityIndicatorSections: TestSection[] = [
   {
-    name: 'BaseActivityIndicator',
+    name: 'Base ActivityIndicator',
     testID: ACTIVITY_INDICATOR_TESTPAGE,
     component: basicActivityIndicator,
   },
@@ -72,6 +77,11 @@ const activityIndicatorSections: TestSection[] = [
     testID: ACTIVITY_INDICATOR_TESTPAGE,
     component: activityIndicatorTest,
   },
+  {
+    name: 'Customized ActivityIndicator',
+    testID: ACTIVITY_INDICATOR_TESTPAGE,
+    component: customizedActivityIndicatorTest,
+  },
 ];
 
 export const ActivityIndicatorTest: React.FunctionComponent = () => {

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { JSAvatar, IconAlignment, JSAvatarTokens } from '@fluentui-react-native/experimental-avatar';
+import { JSAvatar, IconAlignment } 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,36 +29,30 @@ export const CustomizeUsage: React.FunctionComponent = () => {
     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);
+  const CustomizedAvatar = React.useMemo(() => {
+    const tokens = {
+      backgroundColor: coinColor,
+      color: textColor,
+      horizontalIconAlignment: horizontalAlignment,
+      verticalIconAlignment: verticalAlignment,
+      iconSize: iconSize,
+      iconStrokeWidth: iconStrokeWidth,
+      iconStrokeColor: iconStrokeColor,
+      initialsSize: initialsSize,
+      avatarSize: physicalSize,
+    };
+    return JSAvatar.customize(tokens);
+  }, [
+    coinColor,
+    textColor,
+    horizontalAlignment,
+    verticalAlignment,
+    iconSize,
+    iconStrokeWidth,
+    iconStrokeColor,
+    initialsSize,
+    physicalSize,
+  ]);
 
   return (
     <View style={commonStyles.root}>

package/src/FluentTester/TestComponents/Badge/BadgeTest.tsx

@@ -8,6 +8,17 @@ import BadgeSvg from './oof.svg';
 
 import { SvgIconProps } from '@fluentui-react-native/icon';
 
+const BadgeNoBorder = Badge.customize({
+  borderColor: 'transparent',
+  borderWidth: 0,
+});
+
+const StyledBadge = Badge.customize({
+  backgroundColor: 'yellow',
+  borderColor: '#f09',
+  borderWidth: 4,
+});
+
 export const BasicBadge: React.FunctionComponent = () => {
   const svgProps: SvgIconProps = {
     src: BadgeSvg,
@@ -20,17 +31,6 @@ export const BasicBadge: React.FunctionComponent = () => {
     fontSize: 16,
   };
 
-  const BadgeNoBorder = Badge.customize({
-    borderColor: 'transparent',
-    borderWidth: 0,
-  });
-
-  const StyledBadge = Badge.customize({
-    backgroundColor: 'yellow',
-    borderColor: '#f09',
-    borderWidth: 4,
-  });
-
   const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
   const iconProps = { svgSource: svgProps, width: 20, height: 20 };
 

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

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { Platform, View } from 'react-native';
 import { commonTestStyles, stackStyle } from '../Common/styles';
 import TestSvg from './test.svg';
+import { InteractionEvent, isGestureResponderEvent } from '@fluentui-react-native/interactive-hooks';
 
 const CustomText = Text.customize({ fontSize: 'header', color: 'hotpink' });
 const CustomButton = Button.customize({ backgroundColor: 'pink' });
@@ -38,7 +39,13 @@ export const ButtonHOCTest: React.FunctionComponent = () => {
       {svgIconsEnabled && <CustomIconButton icon={{ svgSource: svgProps }}>Customized Icon Button</CustomIconButton>}
       <Button
         style={commonTestStyles.vmargin}
-        onClick={() => {
+        onClick={(e: InteractionEvent) => {
+          console.log(e.timeStamp);
+
+          if (isGestureResponderEvent(e)) {
+            console.log('I was clicked!');
+          }
+
           if (buttonRef.current) {
             buttonRef.current.focus();
           }

package/src/FluentTester/TestComponents/Checkbox/CheckboxTest.tsx

@@ -53,41 +53,41 @@ const otherCheckbox: React.FunctionComponent = () => {
   );
 };
 
-const tokenCheckbox: React.FunctionComponent = () => {
-  const CircularCheckbox = Checkbox.customize({ tokens: { borderRadius: 50 } });
-
-  const CircleColorCheckbox = Checkbox.customize({
-    tokens: { borderRadius: 50, checkboxBackgroundColor: 'white' },
-    _overrides: {
-      checked: {
-        tokens: {
-          checkboxBackgroundColor: 'green',
-          checkboxBorderColor: 'green',
-          checkmarkColor: 'white',
-        },
+const CircularCheckbox = Checkbox.customize({ tokens: { borderRadius: 50 } });
+
+const CircleColorCheckbox = Checkbox.customize({
+  tokens: { borderRadius: 50, checkboxBackgroundColor: 'white' },
+  _overrides: {
+    checked: {
+      tokens: {
+        checkboxBackgroundColor: 'green',
+        checkboxBorderColor: 'green',
+        checkmarkColor: 'white',
       },
-      focused: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
-      hovered: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
-      pressed: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundPressed' } },
     },
-  });
-
-  const HoverCheckbox = Checkbox.customize({
-    _overrides: {
-      checked: {
-        tokens: {
-          checkboxBackgroundColor: 'black',
-          checkmarkColor: 'white',
-        },
+    focused: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
+    hovered: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
+    pressed: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundPressed' } },
+  },
+});
+
+const HoverCheckbox = Checkbox.customize({
+  _overrides: {
+    checked: {
+      tokens: {
+        checkboxBackgroundColor: 'black',
+        checkmarkColor: 'white',
       },
-      hovered: {
-        tokens: {
-          checkmarkVisibility: 1,
-        },
+    },
+    hovered: {
+      tokens: {
+        checkmarkVisibility: 1,
       },
     },
-  });
+  },
+});
 
+const tokenCheckbox: React.FunctionComponent = () => {
   const [checkboxColor, setCheckboxColor] = React.useState('blue');
   const [checkmarkColor, setCheckmarkColor] = React.useState('white');
 

package/src/FluentTester/TestComponents/CheckboxExperimental/CheckboxTest.tsx

@@ -6,8 +6,9 @@ import { useTheme } from '@fluentui-react-native/theme-types';
 import { View, TextInput, TextStyle } from 'react-native';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import { E2ECheckboxExperimentalTest } from './E2ECheckboxExperimentalTest';
+import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
 
-function onChangeUncontrolled(isChecked: boolean) {
+function onChangeUncontrolled(_e: InteractionEvent, isChecked: boolean) {
   console.log(isChecked);
 }
 
@@ -20,8 +21,9 @@ const basicCheckbox: React.FunctionComponent = () => {
       <Checkbox label="Disabled checkbox" disabled />
       <Checkbox label="Disabled checked checkbox" defaultChecked disabled />
       <Checkbox label="Checkbox will display a tooltip" tooltip="This is a tooltip" />
-      <Checkbox label="A circular checkbox" circular />
-      <Checkbox label="A circular checkbox" labelPosition="before" />
+      <Checkbox label="A circular checkbox" shape="circular" />
+      <Checkbox label="A checkbox with label placed before" labelPosition="before" />
+      <Checkbox label="A required checkbox" required />
     </View>
   );
 };
@@ -57,33 +59,34 @@ const otherCheckbox: React.FunctionComponent = () => {
         labelPosition="before"
         checked={Boolean(isCheckedControlled2)}
       />
+      <Checkbox label="A required checkbox with other required text" required="**" />
     </View>
   );
 };
 
-const tokenCheckbox: React.FunctionComponent = () => {
-  const CircleColorCheckbox = Checkbox.customize({
-    checkboxBackgroundColor: 'white',
-    checked: {
-      checkboxBackgroundColor: 'green',
-      checkboxBorderColor: 'green',
-      checkmarkColor: 'white',
-    },
-    focused: { checkboxBackgroundColor: 'menuItemBackgroundHovered' },
-    hovered: { checkboxBackgroundColor: 'menuItemBackgroundHovered' },
-    pressed: { checkboxBackgroundColor: 'menuItemBackgroundPressed' },
-  });
-
-  const HoverCheckbox = Checkbox.customize({
-    checked: {
-      checkboxBackgroundColor: 'black',
-      checkmarkColor: 'white',
-    },
-    hovered: {
-      checkmarkOpacity: 1,
-    },
-  });
+const CircleColorCheckbox = Checkbox.customize({
+  checkboxBackgroundColor: 'white',
+  checked: {
+    checkboxBackgroundColor: 'green',
+    checkboxBorderColor: 'green',
+    checkmarkColor: 'white',
+  },
+  focused: { checkboxBackgroundColor: 'menuItemBackgroundHovered' },
+  hovered: { checkboxBackgroundColor: 'menuItemBackgroundHovered' },
+  pressed: { checkboxBackgroundColor: 'menuItemBackgroundPressed' },
+});
+
+const HoverCheckbox = Checkbox.customize({
+  checked: {
+    checkboxBackgroundColor: 'black',
+    checkmarkColor: 'white',
+  },
+  hovered: {
+    checkmarkOpacity: 1,
+  },
+});
 
+const tokenCheckbox: React.FunctionComponent = () => {
   const [checkboxColor, setCheckboxColor] = React.useState('blue');
   const [checkmarkColor, setCheckmarkColor] = React.useState('white');
 
@@ -106,7 +109,12 @@ const tokenCheckbox: React.FunctionComponent = () => {
   return (
     <View>
       <HoverCheckbox label="A checkbox with checkmark visible on hover" onChange={onChangeUncontrolled} defaultChecked={false} />
-      <CircleColorCheckbox label="A circular token-customized checkbox" circular onChange={onChangeUncontrolled} defaultChecked={true} />
+      <CircleColorCheckbox
+        label="A circular token-customized checkbox"
+        shape="circular"
+        onChange={onChangeUncontrolled}
+        defaultChecked={true}
+      />
       <BlueCheckbox
         label="Token-customized checkbox. Customizable below."
         onChange={onChangeUncontrolled}

package/src/FluentTester/TestComponents/CheckboxExperimental/E2ECheckboxExperimentalTest.tsx

@@ -16,7 +16,7 @@ export const E2ECheckboxExperimentalTest: React.FunctionComponent = () => {
   const [checkboxPressed, setCheckboxPressed] = React.useState(false);
 
   const onClick = React.useCallback(
-    (checked) => {
+    (_e, checked) => {
       setCheckboxPressed(checked);
     },
     [setCheckboxPressed],

package/src/FluentTester/TestComponents/ContextualMenu/ContextualMenuTest.tsx

@@ -232,6 +232,9 @@ const nestedContextualMenu: React.FunctionComponent = () => {
   );
 };
 
+// custom text
+const IndigoHeroBold = FURNText.customize({ tokens: { variant: 'heroStandard', fontWeight: '100', color: '#4b0082' } });
+
 const IconContextualMenu: React.FunctionComponent = () => {
   const stdBtnRef = React.useRef(null);
 
@@ -258,9 +261,6 @@ const IconContextualMenu: React.FunctionComponent = () => {
     setIsContextualMenuVisible(false);
   }, [setShowContextualMenu]);
 
-  // custom text
-  const IndigoHeroBold = FURNText.customize({ tokens: { variant: 'heroStandard', fontWeight: '100', color: '#4b0082' } });
-
   return (
     <View>
       <View style={{ flexDirection: 'row', paddingVertical: 5 }}>

package/src/FluentTester/TestComponents/Expander/ExpanderTest.tsx

@@ -7,33 +7,34 @@ import { Test, TestSection, PlatformStatus } from '../Test';
 import { EXPANDER_TESTPAGE } from './consts';
 import { View, Switch } from 'react-native';
 
+const CustomizedExpander = Expander.customize({
+  headerBackground: '#9c9c9c',
+  headerForeground: '#ffffff',
+  contentBackground: '#c3c3c3',
+  chevronBackground: '#ff7f7f',
+  chevronForeground: '#ffffff',
+  chevronPointerOverBackground: '#b5ffb2',
+  chevronPointerOverForeground: '#bfbdbd',
+  chevronPressedBackground: '#ffb2f4',
+  chevronPressedForeground: '#912a2a',
+  headerForegroundPointerOver: '#27f238',
+  headerForegroundPressed: '#f227eb',
+  headerBorderBrush: '#f22727',
+  headerBorderPointerOverBrush: '#27f238',
+  headerBorderPressedBrush: '#f227eb',
+  contentBorderBrush: '#f227eb',
+  headerBorderThickness: 2,
+  chevronBorderBrush: '#f22727',
+  chevronBorderPointerOverBrush: '#27f238',
+  chevronBorderPressedBrush: '#f227eb',
+  chevronBorderThickness: 2,
+});
+
 const expanderTest: React.FunctionComponent = () => {
   /** This test page has not yet been tested and does not currently build because
    * the react-native-test-app does not yet support WinUI 2.6
    * Filed issue in react-native-test-app: https://github.com/microsoft/react-native-test-app/issues/444
    */
-  const CustomizedExpander = Expander.customize({
-    headerBackground: '#9c9c9c',
-    headerForeground: '#ffffff',
-    contentBackground: '#c3c3c3',
-    chevronBackground: '#ff7f7f',
-    chevronForeground: '#ffffff',
-    chevronPointerOverBackground: '#b5ffb2',
-    chevronPointerOverForeground: '#bfbdbd',
-    chevronPressedBackground: '#ffb2f4',
-    chevronPressedForeground: '#912a2a',
-    headerForegroundPointerOver: '#27f238',
-    headerForegroundPressed: '#f227eb',
-    headerBorderBrush: '#f22727',
-    headerBorderPointerOverBrush: '#27f238',
-    headerBorderPressedBrush: '#f227eb',
-    contentBorderBrush: '#f227eb',
-    headerBorderThickness: 2,
-    chevronBorderBrush: '#f22727',
-    chevronBorderPointerOverBrush: '#27f238',
-    chevronBorderPressedBrush: '#f227eb',
-    chevronBorderThickness: 2,
-  });
 
   const [switchValue, setSwitchValue] = React.useState(false);
   const [expanderText, setExpanderText] = React.useState('Initial state');

package/src/FluentTester/TestComponents/MenuButton/CustomizedMenuButtonTest.tsx

@@ -4,18 +4,19 @@ import { MenuButton } from '@fluentui/react-native';
 import { menuItems } from './testData';
 import { viewWrapperStyle, columnStyle, rowStyle } from './MenuButtonTestStyles';
 
+const StyledMenuButton = MenuButton.customize({
+  button: {
+    borderRadius: 4,
+    backgroundColor: '#0095ff',
+    borderWidth: 0,
+    color: '#fff',
+    variant: 'heroSemibold',
+    fontFamily: 'Georgia',
+  },
+  contextualMenu: { backgroundColor: '#a9dbff' },
+});
+
 export const CustomizedMenuButton: React.FunctionComponent = () => {
-  const StyledMenuButton = MenuButton.customize({
-    button: {
-      borderRadius: 4,
-      backgroundColor: '#0095ff',
-      borderWidth: 0,
-      color: '#fff',
-      variant: 'heroSemibold',
-      fontFamily: 'Georgia',
-    },
-    contextualMenu: { backgroundColor: '#a9dbff' },
-  });
   return (
     <View>
       <View style={viewWrapperStyle}>

package/src/FluentTester/TestComponents/MenuButtonExperimental/CustomizedMenuButtonTest.tsx

@@ -4,18 +4,19 @@ import { MenuButton } from '@fluentui/react-native';
 import { menuItems } from './testData';
 import { viewWrapperStyle, columnStyle, rowStyle } from './MenuButtonTestStyles';
 
+const StyledMenuButton = MenuButton.customize({
+  button: {
+    borderRadius: 4,
+    backgroundColor: '#0095ff',
+    borderWidth: 0,
+    color: '#fff',
+    variant: 'heroSemibold',
+    fontFamily: 'Georgia',
+  },
+  contextualMenu: { backgroundColor: '#a9dbff' },
+});
+
 export const CustomizedMenuButton: React.FunctionComponent = () => {
-  const StyledMenuButton = MenuButton.customize({
-    button: {
-      borderRadius: 4,
-      backgroundColor: '#0095ff',
-      borderWidth: 0,
-      color: '#fff',
-      variant: 'heroSemibold',
-      fontFamily: 'Georgia',
-    },
-    contextualMenu: { backgroundColor: '#a9dbff' },
-  });
   return (
     <View>
       <View style={viewWrapperStyle}>