@fluentui-react-native/tester 0.56.0 → 0.58.0

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

@@ -1,35 +1,51 @@
 import { ButtonV1 as Button } from '@fluentui-react-native/button';
 import { Text } from '@fluentui-react-native/experimental-text';
-import { Icon } from '@fluentui-react-native/icon';
+import { Icon, SvgIconProps } from '@fluentui-react-native/icon';
 import * as React from 'react';
-import { View } from 'react-native';
+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' });
+const CustomIconButton = Button.customize({ iconColor: 'yellow' });
+const ComposedButton = Button.compose({
+  slots: {
+    root: View,
+    icon: Icon,
+    content: CustomText,
+  },
+  slotProps: {
+    content: {
+      style: { marginTop: -1, marginBottom: 1, marginStart: 0, marginEnd: -2 },
+    },
+  },
+});
+const svgProps: SvgIconProps = {
+  src: TestSvg,
+  viewBox: '0 0 500 500',
+};
 
 export const ButtonHOCTest: React.FunctionComponent = () => {
   const buttonRef = React.useRef(null);
-  const CustomText = Text.customize({ fontSize: 'header', color: 'hotpink' });
-  const CustomButton = Button.customize({ backgroundColor: 'pink' });
-  const ComposedButton = Button.compose({
-    slots: {
-      root: View,
-      icon: Icon,
-      content: CustomText,
-    },
-    slotProps: {
-      content: {
-        style: { marginTop: -1, marginBottom: 1, marginStart: 0, marginEnd: -2 },
-      },
-    },
-  });
+  const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
 
   return (
     <View style={stackStyle}>
       <CustomButton style={commonTestStyles.vmargin} componentRef={buttonRef}>
         Customized Button with ref
       </CustomButton>
+      {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/Button/ButtonSizeTestSection.tsx

@@ -11,7 +11,6 @@ export const ButtonSizeTest: React.FunctionComponent = () => {
     viewBox: '0 0 500 500',
   };
   const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
-
   return (
     <View style={[stackStyle, commonTestStyles.view]}>
       {svgIconsEnabled && (

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);
 }
 
@@ -16,16 +17,23 @@ const basicCheckbox: React.FunctionComponent = () => {
     <View>
       <Checkbox label="Unchecked checkbox (undefined)" onChange={onChangeUncontrolled} />
       <Checkbox label="Unchecked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked={false} />
-      <Checkbox
-        label="Checked checkbox (uncontrolled)"
-        onChange={onChangeUncontrolled}
-        defaultChecked={true}
-        accessibilityLabel="Hello there"
-      />
-      <Checkbox label="Disabled checkbox" onChange={onChangeUncontrolled} defaultChecked={false} disabled={true} />
-      <Checkbox label="Disabled checked checkbox" onChange={onChangeUncontrolled} defaultChecked={true} disabled={true} />
-      <Checkbox label="Checkbox will display a tooltip" onChange={onChangeUncontrolled} tooltip="This is a tooltip" />
-      <Checkbox label="A circular checkbox" circular onChange={onChangeUncontrolled} defaultChecked={false} />
+      <Checkbox label="Checked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked accessibilityLabel="Hello there" />
+      <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" shape="circular" />
+      <Checkbox label="A checkbox with label placed before" labelPosition="before" />
+    </View>
+  );
+};
+
+const sizeCheckbox: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Checkbox tooltip="Medium checkbox" size="medium" />
+      <Checkbox tooltip="Large checkbox" size="large" />
+      <Checkbox label="Medium checkbox" size="medium" />
+      <Checkbox label="Large checkbox" size="large" />
     </View>
   );
 };
@@ -54,29 +62,29 @@ const otherCheckbox: React.FunctionComponent = () => {
   );
 };
 
-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');
 
@@ -99,7 +107,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}
@@ -134,6 +147,10 @@ const checkboxSections: TestSection[] = [
     testID: EXPERIMENTAL_CHECKBOX_TESTPAGE,
     component: basicCheckbox,
   },
+  {
+    name: 'Size Checkboxes',
+    component: sizeCheckbox,
+  },
   {
     name: 'Other Implementations',
     component: otherCheckbox,

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

@@ -7,10 +7,21 @@ import {
   EXPERIMENTAL_CHECKBOX_ACCESSIBILITY_LABEL,
   EXPERIMENTAL_CHECKBOX_NO_A11Y_LABEL_COMPONENT,
   EXPERIMENTAL_CHECKBOX_TEST_COMPONENT_LABEL,
+  EXPERIMENTAL_CHECKBOX_ON_PRESS,
 } from './consts';
 import { Stack } from '@fluentui-react-native/stack';
+import { Text } from '@fluentui/react-native';
 
 export const E2ECheckboxExperimentalTest: React.FunctionComponent = () => {
+  const [checkboxPressed, setCheckboxPressed] = React.useState(false);
+
+  const onClick = React.useCallback(
+    (_e, checked) => {
+      setCheckboxPressed(checked);
+    },
+    [setCheckboxPressed],
+  );
+
   return (
     <View>
       <Stack style={stackStyle}>
@@ -19,8 +30,10 @@ export const E2ECheckboxExperimentalTest: React.FunctionComponent = () => {
           disabled={false}
           label="Testing accessibilityLabel"
           testID={EXPERIMENTAL_CHECKBOX_TEST_COMPONENT}
+          onChange={onClick}
         />
         <Checkbox label={EXPERIMENTAL_CHECKBOX_TEST_COMPONENT_LABEL} testID={EXPERIMENTAL_CHECKBOX_NO_A11Y_LABEL_COMPONENT} />
+        {checkboxPressed ? <Text testID={EXPERIMENTAL_CHECKBOX_ON_PRESS}>Checkbox Selected</Text> : null}
       </Stack>
     </View>
   );

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

@@ -8,3 +8,5 @@ export const EXPERIMENTAL_CHECKBOX_ACCESSIBILITY_LABEL = 'E2E testing Experiment
 /* Test Experimental Checkbox 2 */
 export const EXPERIMENTAL_CHECKBOX_NO_A11Y_LABEL_COMPONENT = 'Experimental Checkbox_No_A11y_label_Component';
 export const EXPERIMENTAL_CHECKBOX_TEST_COMPONENT_LABEL = 'Test Experimental Checkbox2 - No Accessibility Label'; // A component on each specific test page
+
+export const EXPERIMENTAL_CHECKBOX_ON_PRESS = 'Experimental_Checkbox_On_Press'; // For testing the press functionality on a Checkbox

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');