@fluentui-react-native/tester 0.170.50 → 0.170.52

package/src/testPages.ts

@@ -1,342 +0,0 @@
-import * as Constants from '@fluentui-react-native/e2e-testing';
-
-import type { TestDescription } from './TestComponents';
-import { ActivityIndicatorTest } from './TestComponents/ActivityIndicator';
-import { AvatarTest, NativeAvatarTest } from './TestComponents/Avatar';
-import { BadgeTest } from './TestComponents/Badge';
-import { ButtonTest } from './TestComponents/Button';
-import { CalloutTest } from './TestComponents/Callout';
-import { CheckboxLegacyTest } from './TestComponents/CheckboxLegacy';
-import { CheckboxV1Test } from './TestComponents/CheckboxV1';
-import { ChipTest } from './TestComponents/Chip';
-import { ColorTokensTest } from './TestComponents/ColorTokens';
-import { ContextualMenuTest } from './TestComponents/ContextualMenu';
-import { CornerRadiusTokensTest } from './TestComponents/CornerRadius';
-import { DividerTest } from './TestComponents/Divider';
-import { DrawerTest } from './TestComponents/Drawer';
-// import { DropdownTest, HOMEPAGE_DROPDOWN_BUTTON } from './TestComponents/Dropdown';
-// import { ExpanderTest, Constants.HOMEPAGE_EXPANDER_BUTTON } from './TestComponents/Expander';
-import { FocusTrapTest } from './TestComponents/FocusTrapZone';
-import { FocusZoneTest } from './TestComponents/FocusZone';
-import { IconTest } from './TestComponents/Icon';
-import { InputTest } from './TestComponents/Input';
-import { LinkLegacyTest } from './TestComponents/LinkLegacy';
-import { LinkV1Test } from './TestComponents/LinkV1';
-import { MenuTest } from './TestComponents/Menu';
-import { MenuButtonLegacyTest } from './TestComponents/MenuButtonLegacy';
-import { MenuButtonV1Test } from './TestComponents/MenuButtonV1';
-import { HOMEPAGE_NATIVEDATEPICKER_BUTTON, NativeDatePickerTest } from './TestComponents/NativeDatePicker';
-import { HOMEPAGE_NOTIFICATION_BUTTON, NotificationTest } from './TestComponents/Notification';
-import { OverflowTest } from './TestComponents/Overflow/OverflowTest';
-import { PersonaTest } from './TestComponents/Persona';
-import { PersonaCoinTest } from './TestComponents/PersonaCoin';
-import { PressableTest } from './TestComponents/Pressable';
-import { RadioGroupLegacyTest } from './TestComponents/RadioGroupLegacy';
-import { RadioGroupV1Test } from './TestComponents/RadioGroupV1';
-import { SeparatorTest } from './TestComponents/Separator';
-import { ShadowTest } from './TestComponents/Shadow';
-import { ShimmerTest } from './TestComponents/Shimmer';
-import { SpacingTokensTest } from './TestComponents/Spacing';
-import { SpinnerTest } from './TestComponents/Spinner';
-import { StrokeWidthTest } from './TestComponents/StrokeWidth';
-import { RNSVGIconsTest, SvgTest } from './TestComponents/Svg';
-import { SwitchTest } from './TestComponents/Switch';
-import { TabListTest } from './TestComponents/TabList/TabListTest';
-import { TextLegacyTest } from './TestComponents/TextLegacy';
-import { TextV1Test } from './TestComponents/TextV1';
-import { ThemeTest } from './TestComponents/Theme';
-import { TooltipTest } from './TestComponents/Tooltip';
-import { VibrancyViewTest } from './TestComponents/VibrancyView';
-
-export const tests: TestDescription[] = [
-  {
-    name: 'ActivityIndicator',
-    component: ActivityIndicatorTest,
-    testPageButton: Constants.HOMEPAGE_ACTIVITY_INDICATOR_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
-  },
-  {
-    name: 'Avatar',
-    component: AvatarTest,
-    testPageButton: Constants.HOMEPAGE_AVATAR_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
-  },
-  {
-    name: 'Avatar (Native)',
-    component: NativeAvatarTest,
-    testPageButton: Constants.HOMEPAGE_NATIVE_AVATAR_BUTTON,
-    platforms: ['ios', 'macos'],
-  },
-  {
-    name: 'Badge',
-    component: BadgeTest,
-    testPageButton: Constants.HOMEPAGE_BADGE_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
-  },
-  {
-    name: 'Button',
-    component: ButtonTest,
-    testPageButton: Constants.HOMEPAGE_BUTTON_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
-  },
-  {
-    name: 'Callout',
-    component: CalloutTest,
-    testPageButton: Constants.HOMEPAGE_CALLOUT_BUTTON,
-    platforms: ['android', 'macos', 'win32'],
-  },
-  {
-    name: 'Checkbox Legacy',
-    component: CheckboxLegacyTest,
-    testPageButton: Constants.HOMEPAGE_CHECKBOX_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
-  },
-  {
-    name: 'Checkbox V1',
-    component: CheckboxV1Test,
-    testPageButton: Constants.HOMEPAGE_CHECKBOXV1_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'win32'], // 'windows': GH#935: Temporarily disabling while SVGs don't work in windows
-  },
-  {
-    name: 'Chip',
-    component: ChipTest,
-    testPageButton: Constants.HOMEPAGE_CHIP_BUTTON,
-    platforms: ['android', 'ios'],
-  },
-  {
-    name: 'Color Tokens',
-    component: ColorTokensTest,
-    testPageButton: Constants.HOMEPAGE_COLORTOKEN_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
-  },
-  {
-    name: 'ContextualMenu',
-    component: ContextualMenuTest,
-    testPageButton: Constants.HOMEPAGE_CONTEXTUALMENU_BUTTON,
-    platforms: ['android', 'macos', 'win32'],
-  },
-  {
-    name: 'Corner Radius Tokens',
-    component: CornerRadiusTokensTest,
-    testPageButton: Constants.HOMEPAGE_CORNERRADIUS_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
-  },
-  {
-    name: 'Date Picker (Native)',
-    component: NativeDatePickerTest,
-    testPageButton: HOMEPAGE_NATIVEDATEPICKER_BUTTON,
-    platforms: ['ios', 'android'],
-  },
-  {
-    name: 'Divider',
-    component: DividerTest,
-    testPageButton: Constants.HOMEPAGE_DIVIDER_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
-  },
-  // Temporarily disabling until Dropdown is fully implemented
-  // {
-  //   name: 'Dropdown',
-  //   component: DropdownTest,
-  //   testPageButton: HOMEPAGE_DROPDOWN_BUTTON,
-  //   platforms: ['macos', 'win32'],
-  // },
-  {
-    name: 'Drawer',
-    component: DrawerTest,
-    testPageButton: Constants.HOMEPAGE_Drawer_BUTTON,
-    platforms: ['android'],
-  },
-  // GH##1027 Temporarily disabling while the test doesn't load
-  // {
-  //   name: 'Expander',
-  //   component: ExpanderTest,
-  //   testPage: Constants.HOMEPAGE_EXPANDER_BUTTON,
-  //   platforms: ['windows'],
-  // },
-  {
-    name: 'Focus Trap Zone',
-    component: FocusTrapTest,
-    testPageButton: Constants.HOMEPAGE_FOCUSTRAPZONE_BUTTON,
-    platforms: ['win32'],
-  },
-  {
-    name: 'FocusZone',
-    component: FocusZoneTest,
-    testPageButton: Constants.HOMEPAGE_FOCUSZONE_BUTTON,
-    platforms: ['macos', 'win32'],
-  },
-  {
-    name: 'Icon',
-    component: IconTest,
-    testPageButton: Constants.HOMEPAGE_ICON_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'win32'],
-  },
-  {
-    name: 'Input',
-    component: InputTest,
-    testPageButton: Constants.HOMEPAGE_INPUT_BUTTON,
-    platforms: ['android', 'ios'],
-  },
-  {
-    name: 'Link Legacy',
-    component: LinkLegacyTest,
-    testPageButton: Constants.HOMEPAGE_LINK_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
-  },
-  {
-    name: 'Link V1',
-    component: LinkV1Test,
-    testPageButton: Constants.HOMEPAGE_LINKV1_BUTTON,
-    platforms: ['macos', 'win32', 'android', 'windows'],
-  },
-  {
-    name: 'Menu',
-    component: MenuTest,
-    testPageButton: Constants.HOMEPAGE_MENU_BUTTON,
-    platforms: ['macos', 'win32', 'android'],
-  },
-  {
-    name: 'MenuButton Legacy',
-    component: MenuButtonLegacyTest,
-    testPageButton: Constants.HOMEPAGE_MENUBUTTON_BUTTON,
-    platforms: ['macos', 'win32'],
-  },
-  {
-    name: 'MenuButton V1',
-    component: MenuButtonV1Test,
-    testPageButton: Constants.HOMEPAGE_MENUBUTTONV1_BUTTON,
-    platforms: ['macos', 'win32'],
-  },
-  {
-    name: 'Notification',
-    component: NotificationTest,
-    testPageButton: HOMEPAGE_NOTIFICATION_BUTTON,
-    platforms: ['android', 'ios'],
-  },
-  {
-    name: 'Overflow',
-    component: OverflowTest,
-    testPageButton: Constants.HOMEPAGE_OVERFLOW_BUTTON,
-    platforms: ['win32', 'macos'],
-  },
-  {
-    name: 'Persona',
-    component: PersonaTest,
-    testPageButton: Constants.HOMEPAGE_PERSONA_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
-  },
-  {
-    name: 'PersonaCoin',
-    component: PersonaCoinTest,
-    testPageButton: Constants.HOMEPAGE_PERSONACOIN_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
-  },
-  {
-    name: 'Pressable',
-    component: PressableTest,
-    testPageButton: Constants.HOMEPAGE_PRESSABLE_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
-  },
-  {
-    name: 'RadioGroup Legacy',
-    component: RadioGroupLegacyTest,
-    testPageButton: Constants.HOMEPAGE_RADIOGROUP_BUTTON,
-    platforms: ['macos', 'win32'],
-  },
-  {
-    name: 'RadioGroup V1',
-    component: RadioGroupV1Test,
-    testPageButton: Constants.HOMEPAGE_RADIOGROUPV1_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'win32'],
-  },
-  {
-    name: 'Separator',
-    component: SeparatorTest,
-    testPageButton: Constants.HOMEPAGE_SEPARATOR_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
-  },
-  {
-    name: 'Shadow',
-    component: ShadowTest,
-    testPageButton: Constants.HOMEPAGE_SHADOW_BUTTON,
-    platforms: ['ios', 'macos', 'win32'],
-  },
-  {
-    name: 'Shimmer',
-    component: ShimmerTest,
-    testPageButton: Constants.HOMEPAGE_SHIMMER_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'win32'],
-  },
-  {
-    name: 'Spacing Tokens',
-    component: SpacingTokensTest,
-    testPageButton: Constants.HOMEPAGE_SPACING_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
-  },
-  {
-    name: 'Spinner V1',
-    component: SpinnerTest,
-    testPageButton: Constants.HOMEPAGE_SPINNER_BUTTON,
-    platforms: ['android', 'win32'],
-  },
-  {
-    name: 'Stroke Width Tokens',
-    component: StrokeWidthTest,
-    testPageButton: Constants.HOMEPAGE_STROKEWIDTH_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
-  },
-  {
-    name: 'Svg rendering',
-    component: SvgTest,
-    testPageButton: Constants.HOMEPAGE_SVG_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'win32'],
-  },
-  {
-    name: 'Svg Icon packages',
-    component: RNSVGIconsTest,
-    testPageButton: Constants.HOMEPAGE_RNSVGIcons_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'win32'],
-  },
-  {
-    name: 'Switch',
-    component: SwitchTest,
-    testPageButton: Constants.HOMEPAGE_SWITCH_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
-  },
-  {
-    name: 'TabList',
-    component: TabListTest,
-    testPageButton: Constants.HOMEPAGE_TABLIST_BUTTON,
-    platforms: ['macos', 'win32', 'windows'],
-  },
-  {
-    name: 'Text Legacy',
-    component: TextLegacyTest,
-    testPageButton: Constants.HOMEPAGE_TEXT_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
-  },
-  {
-    name: 'Text V1',
-    component: TextV1Test,
-    testPageButton: Constants.HOMEPAGE_TEXTV1_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
-  },
-  {
-    name: 'Theme',
-    component: ThemeTest,
-    testPageButton: Constants.HOMEPAGE_THEME_BUTTON,
-    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
-  },
-  {
-    name: 'Tooltip',
-    component: TooltipTest,
-    testPageButton: Constants.HOMEPAGE_TOOLTIP_BUTTON,
-    platforms: ['win32'],
-  },
-  {
-    name: 'Vibrancy View',
-    component: VibrancyViewTest,
-    testPageButton: Constants.HOMEPAGE_VIBRANCYVIEW_BUTTON,
-    platforms: ['macos'],
-  },
-];

package/src/theme/CustomThemes.ts

@@ -1,89 +0,0 @@
-import { Platform } from 'react-native';
-
-import { createAndroidTheme } from '@fluentui-react-native/android-theme';
-import { createAppleTheme } from '@fluentui-react-native/apple-theme';
-import { createDefaultTheme } from '@fluentui-react-native/default-theme';
-import { ThemeReference } from '@fluentui-react-native/theme';
-import type { ThemeOptions } from '@fluentui-react-native/theme-types';
-
-import type { OfficeBrand } from './applyBrand';
-import { applyBrand } from './applyBrand';
-import type { ThemeNames } from './applyTheme';
-import { applyTheme } from './applyTheme';
-
-const themeOptions: ThemeOptions = { paletteName: 'TaskPane', appearance: 'dynamic' };
-
-// Default applies to win32
-const baseTheme = Platform.select({
-  android: createAndroidTheme(themeOptions),
-  ios: createAppleTheme(),
-  macos: createAppleTheme(),
-  default: createDefaultTheme(themeOptions),
-});
-
-const supportsHighContrastTokens: boolean = Platform.select({
-  android: false,
-  ios: false,
-  macos: false,
-  default: true,
-});
-
-export const lightnessOptions = [
-  { label: 'Auto', value: 'dynamic' },
-  { label: 'Light', value: 'light' },
-  { label: 'Dark', value: 'dark' },
-  supportsHighContrastTokens && { label: 'High Contrast', value: 'highContrast' },
-];
-
-export class TesterThemeReference extends ThemeReference {
-  private _themeName: ThemeNames = Platform.OS === ('win32' as any) ? 'Office' : 'Default';
-  private _brand: OfficeBrand = 'Default';
-
-  private options: ThemeOptions;
-  private baseTheme: ThemeReference;
-
-  constructor() {
-    super(
-      baseTheme,
-      () => applyTheme(this._themeName, this.options.appearance),
-      (parent) => applyBrand(parent, this._brand),
-    );
-    this.baseTheme = baseTheme;
-    this.options = themeOptions;
-  }
-
-  /** get/set the currently active theme */
-  public get themeName(): ThemeNames {
-    return this._themeName;
-  }
-  public set themeName(newTheme: ThemeNames) {
-    if (newTheme !== this._themeName) {
-      this._themeName = newTheme;
-      this.invalidate();
-    }
-  }
-
-  /** get/set the theme appearance */
-  public get appearance(): ThemeOptions['appearance'] {
-    return this.options.appearance;
-  }
-  public set appearance(lightness: ThemeOptions['appearance']) {
-    if (lightness !== this.options.appearance) {
-      this.options.appearance = lightness;
-      this.baseTheme.invalidate();
-    }
-  }
-
-  /** get/set the applied brand */
-  public get brand(): OfficeBrand {
-    return this._brand;
-  }
-  public set brand(newBrand: OfficeBrand) {
-    if (newBrand !== this._brand) {
-      this._brand = newBrand;
-      this.invalidate();
-    }
-  }
-}
-
-export const testerTheme = new TesterThemeReference();

package/src/theme/ThemePickers.android.tsx

@@ -1,105 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-
-import type { Theme } from '@fluentui-react-native/framework';
-import { useTheme } from '@fluentui-react-native/framework';
-import { TextV1 as Text } from '@fluentui-react-native/text';
-import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
-import type { PickerProps } from '@react-native-picker/picker';
-import { Picker } from '@react-native-picker/picker';
-
-import { themeChoices } from './applyTheme';
-import type { ThemeNames } from './applyTheme';
-import { lightnessOptions, testerTheme } from './CustomThemes';
-
-const getThemedDropdownStyles = themedStyleSheet((t: Theme) => {
-  return {
-    pickerRoot: {
-      flexDirection: 'row',
-      width: '100%',
-    },
-    picker: {
-      flexDirection: 'column',
-      alignItems: 'center',
-      width: '50%',
-      padding: 4,
-    },
-    dropdown: {
-      fontSize: 12,
-      color: t.colors.bodyText,
-    },
-    dropdownBorder: {
-      borderStyle: 'solid',
-      borderColor: t.colors.disabledBodyText,
-      borderWidth: 1,
-      width: '100%',
-    },
-  };
-});
-
-const PickerLabel = Text.customize({ variant: 'subheaderSemibold' });
-
-export const ThemePickers: React.FunctionComponent = () => {
-  const onThemeSelected = React.useCallback((newTheme: string) => {
-    testerTheme.themeName = newTheme as ThemeNames;
-  }, []);
-
-  const onAppearanceChange = React.useCallback((newAppearance: string) => {
-    testerTheme.appearance = newAppearance as 'light' | 'dark' | 'dynamic';
-  }, []);
-
-  const theme = useTheme();
-  const themedPickerStyles = getThemedDropdownStyles(theme);
-
-  type DropdownEntry = { label: string; value: string };
-
-  type DropdownProps = { initial: string; onValueChange: (value: string) => void; options: DropdownEntry[]; accessibilityLabel?: string };
-
-  const dropdownProps: Omit<PickerProps, 'onValueChange' | 'selectedValue'> = {
-    style: themedPickerStyles.dropdown,
-    mode: 'dropdown',
-  };
-
-  const Dropdown = (props: DropdownProps) => {
-    const { initial, onValueChange, options, accessibilityLabel } = props;
-    return (
-      <View style={themedPickerStyles.dropdownBorder}>
-        <Picker
-          selectedValue={initial}
-          onValueChange={onValueChange}
-          dropdownIconColor={theme.colors.defaultIcon}
-          {...dropdownProps}
-          accessibilityLabel={accessibilityLabel}
-        >
-          {options.map(
-            (entry: DropdownEntry, index: number) => entry && <Picker.Item label={entry.label} value={entry.value} key={`entry${index}`} />,
-          )}
-        </Picker>
-      </View>
-    );
-  };
-
-  return (
-    <View style={themedPickerStyles.pickerRoot}>
-      <View style={themedPickerStyles.picker}>
-        <PickerLabel>Theme: </PickerLabel>
-        <Dropdown
-          accessibilityLabel="Theme Selector"
-          initial={testerTheme.themeName}
-          onValueChange={onThemeSelected}
-          options={themeChoices}
-        />
-      </View>
-
-      <View style={themedPickerStyles.picker}>
-        <PickerLabel>Light/Dark: </PickerLabel>
-        <Dropdown
-          accessibilityLabel="Light/Dark Selector"
-          initial={testerTheme.appearance}
-          onValueChange={onAppearanceChange}
-          options={lightnessOptions}
-        />
-      </View>
-    </View>
-  );
-};

package/src/theme/ThemePickers.ios.tsx

@@ -1,64 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-
-import { ButtonV1 as Button } from '@fluentui-react-native/button';
-import type { Theme } from '@fluentui-react-native/framework';
-import { useTheme } from '@fluentui-react-native/framework';
-import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
-import { MenuView } from '@react-native-menu/menu';
-import type { MenuAction } from '@react-native-menu/menu';
-
-import { themeChoices } from './applyTheme';
-import type { ThemeNames } from './applyTheme';
-import { testerTheme } from './CustomThemes';
-
-export const themePickerStyles = themedStyleSheet((t: Theme) => {
-  // picker, pickerItem, dropdown used in iOS dark mode
-  return {
-    pickerRoot: {
-      flexDirection: 'row',
-    },
-    picker: {
-      flexDirection: 'column',
-      alignItems: 'center',
-      padding: 4,
-      flexShrink: 0,
-    },
-    pickerItem: {
-      color: t.colors.bodyText,
-    },
-    dropdown: {
-      height: 200,
-      width: 90,
-      fontSize: 12,
-    },
-  };
-});
-
-export const ThemePickers: React.FunctionComponent = () => {
-  const themedStyles = themePickerStyles(useTheme());
-
-  const onThemeSelected = React.useCallback((newTheme: string) => {
-    testerTheme.themeName = newTheme as ThemeNames;
-  }, []);
-
-  const themeMenuOptions: MenuAction[] = themeChoices.map((themeChoice) => ({
-    id: themeChoice.value,
-    title: themeChoice.label,
-    state: testerTheme.themeName === themeChoice.value ? 'on' : 'off',
-  }));
-
-  return (
-    <View style={themedStyles.pickerRoot}>
-      <MenuView
-        title="Theme"
-        onPressAction={({ nativeEvent }) => {
-          onThemeSelected(nativeEvent.event);
-        }}
-        actions={themeMenuOptions}
-      >
-        <Button appearance="subtle">Theme</Button>
-      </MenuView>
-    </View>
-  );
-};