@fluentui-react-native/tester 0.170.50 → 0.170.52

package/src/theme/ThemePickers.macos.tsx

@@ -1,109 +0,0 @@
-import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
-
-import { ButtonV1 as Button } from '@fluentui/react-native';
-import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu';
-import { TextV1 as Text } from '@fluentui-react-native/text';
-import { SvgXml } from 'react-native-svg';
-
-import type { ThemeNames } from './applyTheme';
-import { themeChoices } from './applyTheme';
-import { testerTheme } from './CustomThemes';
-
-export const themePickerStyles = StyleSheet.create({
-  pickerRoot: {
-    flexDirection: 'row',
-  },
-
-  picker: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 4,
-  },
-
-  dropdown: {
-    height: 30,
-    width: 90,
-    fontSize: 12,
-  },
-});
-
-const themeMenuPickerStyles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    margin: 5,
-  },
-  svg: {
-    padding: 4,
-  },
-});
-
-type PartPickerEntry = { label: string; value: string };
-
-type PartPickerProps = {
-  initial: string;
-  contents: PartPickerEntry[];
-  onChange: (value: string) => void;
-};
-
-const ThemeMenuPicker = ({ selected, onChange, collection, style }) => {
-  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={{ ...themeMenuPickerStyles.container, ...style }}>
-      <Menu>
-        <MenuTrigger>
-          <Button>
-            <Text>{selected}</Text>
-            <View style={themeMenuPickerStyles.svg}>
-              <SvgXml xml={chevronXml} />
-            </View>
-          </Button>
-        </MenuTrigger>
-        <MenuPopover>
-          <MenuList>
-            {collection.map((entry: PartPickerEntry, index: number) => (
-              <MenuItem onClick={() => onChange(entry.value)} key={`entry${index}`}>
-                {entry.label}
-              </MenuItem>
-            ))}
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    </View>
-  );
-};
-
-export const PartPicker: React.FunctionComponent<PartPickerProps> = (props: PartPickerProps) => {
-  const { initial, contents, onChange } = props;
-  const [value, setValue] = React.useState(initial);
-  const onValueChange = React.useCallback(
-    (newValue: string) => {
-      setValue(newValue);
-      onChange(newValue);
-    },
-    [setValue, onChange],
-  );
-  return <ThemeMenuPicker selected={value} style={themePickerStyles.dropdown} onChange={onValueChange} collection={contents} />;
-};
-
-const PickerLabel = Text.customize({ variant: 'bodySemibold' });
-
-export const ThemePickers: React.FunctionComponent = () => {
-  const onThemeSelected = React.useCallback((newTheme: string) => {
-    testerTheme.themeName = newTheme as ThemeNames;
-  }, []);
-
-  return (
-    <View style={themePickerStyles.pickerRoot}>
-      <View style={themePickerStyles.picker}>
-        <PickerLabel>Theme: </PickerLabel>
-        <PartPicker initial={testerTheme.themeName} onChange={onThemeSelected} contents={themeChoices} />
-      </View>
-    </View>
-  );
-};

package/src/theme/ThemePickers.tsx

@@ -1,76 +0,0 @@
-import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
-
-import { TextV1 as Text } from '@fluentui-react-native/text';
-import type { ThemeOptions } from '@fluentui-react-native/theme-types';
-
-import { themeChoices } from './applyTheme';
-import type { ThemeNames } from './applyTheme';
-import { lightnessOptions, testerTheme } from './CustomThemes';
-import { MenuPicker } from '../TestComponents/Common/MenuPicker';
-
-export const themePickerStyles = StyleSheet.create({
-  pickerRoot: {
-    flexDirection: 'row',
-  },
-
-  picker: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 4,
-  },
-
-  dropdown: {
-    height: 30,
-    width: 120,
-    fontSize: 12,
-  },
-});
-
-type PartPickerEntry = { label: string; value: string };
-
-type PartPickerProps = {
-  initial: string;
-  contents: PartPickerEntry[];
-  onChange: (value: string) => void;
-};
-
-export const PartPicker: React.FunctionComponent<PartPickerProps> = (props: PartPickerProps) => {
-  const { initial, contents, onChange } = props;
-  const [selected, setSelected] = React.useState(initial);
-  const onValueChange = React.useCallback(
-    (value: string) => {
-      setSelected(value);
-      onChange(value);
-    },
-    [setSelected, onChange],
-  );
-
-  return <MenuPicker selected={selected} style={themePickerStyles.dropdown} onChange={onValueChange} collection={contents} />;
-};
-
-const PickerLabel = Text.customize({ variant: 'bodySemibold' });
-
-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 ThemeOptions['appearance'];
-  }, []);
-
-  return (
-    <View style={themePickerStyles.pickerRoot}>
-      <View style={themePickerStyles.picker}>
-        <PickerLabel>Theme: </PickerLabel>
-        <PartPicker initial={testerTheme.themeName} onChange={onThemeSelected} contents={themeChoices} />
-      </View>
-
-      <View style={themePickerStyles.picker}>
-        <PickerLabel>Light/Dark: </PickerLabel>
-        <PartPicker initial={testerTheme.appearance} onChange={onAppearanceChange} contents={lightnessOptions} />
-      </View>
-    </View>
-  );
-};

package/src/theme/ThemePickers.win32.tsx

@@ -1,87 +0,0 @@
-import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
-
-import { TextV1 as Text } from '@fluentui-react-native/text';
-import type { ThemeOptions } from '@fluentui-react-native/theme-types';
-
-import type { OfficeBrand } from './applyBrand';
-import { brandOptions } from './applyBrand';
-import type { ThemeNames } from './applyTheme';
-import { themeChoices } from './applyTheme';
-import { lightnessOptions, testerTheme } from './CustomThemes';
-import { MenuPicker } from '../TestComponents/Common/MenuPicker';
-
-export const themePickerStyles = StyleSheet.create({
-  pickerRoot: {
-    flexDirection: 'row',
-  },
-
-  picker: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 4,
-  },
-
-  dropdown: {
-    height: 30,
-    width: 120,
-    fontSize: 12,
-  },
-});
-
-type PartPickerEntry = { label: string; value: string };
-
-type PartPickerProps = {
-  initial: string;
-  contents: PartPickerEntry[];
-  onChange: (value: string) => void;
-};
-
-export const PartPicker: React.FunctionComponent<PartPickerProps> = (props: PartPickerProps) => {
-  const { initial, contents, onChange } = props;
-  const [selected, setSelected] = React.useState(initial);
-  const onValueChange = React.useCallback(
-    (value: string) => {
-      setSelected(value);
-      onChange(value);
-    },
-    [setSelected, onChange],
-  );
-
-  return <MenuPicker selected={selected} style={themePickerStyles.dropdown} onChange={onValueChange} collection={contents} />;
-};
-
-const PickerLabel = Text.customize({ variant: 'bodySemibold' });
-
-export const ThemePickers: React.FunctionComponent = () => {
-  const onBrandChange = React.useCallback((newBrand: string) => {
-    testerTheme.brand = newBrand as OfficeBrand;
-  }, []);
-
-  const onThemeSelected = React.useCallback((newTheme: string) => {
-    testerTheme.themeName = newTheme as ThemeNames;
-  }, []);
-
-  const onAppearanceChange = React.useCallback((newAppearance: string) => {
-    testerTheme.appearance = newAppearance as ThemeOptions['appearance'];
-  }, []);
-
-  return (
-    <View style={themePickerStyles.pickerRoot}>
-      <View style={themePickerStyles.picker}>
-        <PickerLabel>Theme: </PickerLabel>
-        <PartPicker initial={testerTheme.themeName} onChange={onThemeSelected} contents={themeChoices} />
-      </View>
-
-      <View style={themePickerStyles.picker}>
-        <PickerLabel>Light/Dark: </PickerLabel>
-        <PartPicker initial={testerTheme.appearance} onChange={onAppearanceChange} contents={lightnessOptions} />
-      </View>
-
-      <View style={themePickerStyles.picker}>
-        <PickerLabel>Brand: </PickerLabel>
-        <PartPicker initial={testerTheme.brand} onChange={onBrandChange} contents={brandOptions} />
-      </View>
-    </View>
-  );
-};

package/src/theme/applyBrand.ts

@@ -1,160 +0,0 @@
-import type { PartialTheme, Theme } from '@fluentui-react-native/theme-types';
-import { getCurrentBrandAliasTokens } from '@fluentui-react-native/win32-theme';
-
-export type OfficeBrand = 'Default' | 'Office' | 'Word' | 'Excel' | 'Powerpoint' | 'Outlook';
-type BrandRampKey =
-  | 'App1'
-  | 'App2'
-  | 'App3'
-  | 'App4'
-  | 'App5'
-  | 'App6'
-  | 'App7'
-  | 'App8'
-  | 'AppTint40'
-  | 'AppTint30'
-  | 'AppTint20'
-  | 'AppTint10'
-  | 'AppPrimary'
-  | 'AppShade10'
-  | 'AppShade20'
-  | 'AppShade30';
-type BrandRamps = { [K in OfficeBrand]: { [J in BrandRampKey]: string } };
-
-const brandColors: BrandRamps = {
-  /**
-   * default brand just passes through what is in the theme
-   * */
-  Default: undefined,
-  /**
-   * Office brands, applied via a small App color ramp
-   */
-  Office: {
-    App1: '#fff7f0',
-    App2: '#fbdfd0',
-    App3: '#f7bfa0',
-    App4: '#f29f71',
-    App5: '#ea6115',
-    App6: '#d83b01',
-    App7: '#a22c01',
-    App8: '#6c1e01',
-    AppTint40: '#f9dcd1',
-    AppTint30: '#f4beaa',
-    AppTint20: '#e8825d',
-    AppTint10: '#dd4f1b',
-    AppPrimary: '#d83b01',
-    AppShade10: '#c33400',
-    AppShade20: '#a52c00',
-    AppShade30: '#792000',
-  },
-  Word: {
-    App1: '#E3ECFA',
-    App2: '#A5B9D1',
-    App3: '#7DA3C6',
-    App4: '#4A78B0',
-    App5: '#3C65A4',
-    App6: '#2B579A',
-    App7: '#124078',
-    App8: '#002050',
-    AppTint40: '#D2E0F4',
-    AppTint30: '#AEC6EB',
-    AppTint20: '#6794D7',
-    AppTint10: '#2E6AC5',
-    AppPrimary: '#185ABD',
-    AppShade10: '#1651AA',
-    AppShade20: '#13458F',
-    AppShade30: '#0E336A',
-  },
-  Excel: {
-    App1: '#E9F5EE',
-    App2: '#9FCDB3',
-    App3: '#6EB38A',
-    App4: '#4E9668',
-    App5: '#3F8159',
-    App6: '#217346',
-    App7: '#0E5C2F',
-    App8: '#004B1C',
-    AppTint40: '#CAEAD8',
-    AppTint30: '#A0D8B9',
-    AppTint20: '#55B17E',
-    AppTint10: '#218D51',
-    AppPrimary: '#107C41',
-    AppShade10: '#0F703B',
-    AppShade20: '#0C5F32',
-    AppShade30: '#094624',
-  },
-  Powerpoint: {
-    App1: '#FCF0ED',
-    App2: '#FDC9B5',
-    App3: '#ED9583',
-    App4: '#E86E58',
-    App5: '#C75033',
-    App6: '#B7472A',
-    App7: '#A92B1A',
-    App8: '#740912',
-    AppTint40: '#F6DBD4',
-    AppTint30: '#EDBCB0',
-    AppTint20: '#DC816A',
-    AppTint10: '#CB5031',
-    AppPrimary: '#C43E1C',
-    AppShade10: '#B13719',
-    AppShade20: '#952F15',
-    AppShade30: '#6E220F',
-  },
-  Outlook: {
-    App1: '#CCE3F5',
-    App2: '#B3D6F2',
-    App3: '#69AFE5',
-    App4: '#2488D8',
-    App5: '#0078D7',
-    App6: '#106EBE',
-    App7: '#1664A7',
-    App8: '#135995',
-    AppTint40: '#C7E0F4',
-    AppTint30: '#6CB8F6',
-    AppTint20: '#3AA0F3',
-    AppTint10: '#2899F5',
-    AppPrimary: '#0078D7',
-    AppShade10: '#106EBE',
-    AppShade20: '#005A9E',
-    AppShade30: '#004C87',
-  },
-};
-
-export const brandOptions = Object.keys(brandColors).map((brand) => ({ label: brand, value: brand }));
-
-export const applyBrand = (parent: Theme, currentBrand: string): PartialTheme => {
-  if (parent.name === 'HighContrast') {
-    return {};
-  }
-
-  const ramp = brandColors[currentBrand];
-  return ramp
-    ? {
-        colors: {
-          inputFocusBorderAlt: ramp.App4,
-          buttonBackgroundHovered: ramp.App1,
-          buttonBackgroundPressed: ramp.App2,
-          buttonBorderFocused: ramp.App2,
-          primaryButtonBackground: ramp.App6,
-          primaryButtonBackgroundHovered: ramp.App7,
-          primaryButtonBackgroundPressed: ramp.App8,
-          primaryButtonBorder: ramp.App7,
-          primaryButtonBorderFocused: ramp.App7,
-          accentButtonBackground: ramp.App6,
-          link: ramp.App6,
-          linkHovered: ramp.App7,
-          linkPressed: ramp.App8,
-          defaultHoveredBackground: ramp.App1,
-          defaultHoveredBorder: ramp.App2,
-          defaultFocusedBackground: ramp.App1,
-          defaultFocusedBorder: ramp.App2,
-          defaultPressedBackground: ramp.App2,
-          defaultPressedBorder: ramp.App5,
-          brandedBackground: ramp.App6,
-          defaultCheckedHoveredBackground: ramp.App1,
-          ...getCurrentBrandAliasTokens(parent.name, ramp.AppPrimary),
-        },
-      }
-    : {};
-};

package/src/theme/applyTheme.ts

@@ -1,21 +0,0 @@
-import type { PartialTheme, ThemeOptions } from '@fluentui-react-native/framework';
-import { createOfficeTheme, getThemingModule } from '@fluentui-react-native/win32-theme';
-
-export type ThemeNames = 'Default' | 'Office' | 'Apple';
-
-export const themeChoices = [
-  { label: 'Default', value: 'Default' },
-  { label: 'Office', value: 'Office' },
-];
-
-const themingModule = getThemingModule()[0];
-
-/** apply the currently active theme layering */
-export function applyTheme(name: ThemeNames, appearance: ThemeOptions['appearance']): PartialTheme {
-  switch (name) {
-    case 'Office':
-      return themingModule ? createOfficeTheme({ appearance, paletteName: 'Dialogs_FluentSV' }).theme : {};
-    default:
-      return {};
-  }
-}

package/src/theme/index.ts

@@ -1,2 +0,0 @@
-export * from './CustomThemes';
-export * from './ThemePickers';