@fluentui-react-native/tester 0.69.3 → 0.69.6

package/src/FluentTester/TestComponents/PersonaCoin/StandardUsage.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { PersonaSize, PersonaCoinFluentColor, PersonaCoin, PersonaPresence } from '@fluentui/react-native';
-import { Switch, View, Text, Picker, ColorValue } from 'react-native';
+import { StyledPicker } from '../Common/StyledPicker';
+import { Switch, View, Text, ColorValue } from 'react-native';
 import { satyaPhotoUrl, undefinedText } from './styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import { useTheme } from '@fluentui-react-native/theme-types';
@@ -46,19 +47,6 @@ const allColors: WithUndefined<PersonaCoinFluentColor>[] = [
 
 const allPresences: WithUndefined<PersonaPresence>[] = [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: React.FunctionComponent = () => {
   const [showImage, setShowImage] = React.useState(true);
   const [imageSize, setImageSize] = React.useState<WithUndefined<PersonaSize>>('size72');
@@ -75,26 +63,27 @@ export const StandardUsage: React.FunctionComponent = () => {
   return (
     <View style={commonStyles.root}>
       {/* settings */}
-      <View style={commonStyles.settings}>
+      <View style={commonStyles.settingsPicker}>
         <View style={commonStyles.switch}>
           <Text style={textStyles}>Show image</Text>
           <Switch value={showImage} onValueChange={setShowImage} />
         </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>
 
       {/* component under test */}
-      <PersonaCoin
-        size={imageSize === undefinedText ? undefined : imageSize}
-        initials="SN"
-        imageDescription="Photo of Satya Nadella"
-        presence={presence === undefinedText ? undefined : presence}
-        imageUrl={showImage ? satyaPhotoUrl : undefined}
-        coinColorFluent={coinColor === undefinedText ? undefined : coinColor}
-      />
+      <View style={commonStyles.pickerControlled}>
+        <PersonaCoin
+          size={imageSize === undefinedText ? undefined : imageSize}
+          initials="SN"
+          imageDescription="Photo of Satya Nadella"
+          presence={presence === undefinedText ? undefined : presence}
+          imageUrl={showImage ? satyaPhotoUrl : undefined}
+          coinColorFluent={coinColor === undefinedText ? undefined : coinColor}
+        />
+      </View>
     </View>
   );
 };

package/src/FluentTester/TestComponents/Test.tsx

@@ -10,7 +10,7 @@ export type TestSection = {
   component: React.FunctionComponent;
 };
 
-export type Status = 'Production' | 'Beta' | 'Experimental' | 'Backlog' | 'N/A';
+export type Status = 'Production' | 'Beta' | 'Experimental' | 'Backlog' | 'Deprecated' | 'N/A';
 export type PlatformStatus = {
   win32Status: Status;
   uwpStatus: Status;

package/src/FluentTester/theme/ThemePickers.android.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { View, PickerPropsAndroid } from 'react-native';
+import { View } from 'react-native';
 import { Text } from '@fluentui-react-native/experimental-text';
 import { lightnessOptions, testerTheme } from './CustomThemes';
 import { themeChoices, ThemeNames } from './applyTheme';
 import { brandOptions, OfficeBrand } from './applyBrand';
 import { Theme, useTheme } from '@fluentui-react-native/framework';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
-import { Picker } from '@react-native-picker/picker';
+import { Picker, PickerProps } from '@react-native-picker/picker';
 
 const getThemedDropdownStyles = themedStyleSheet((t: Theme) => {
   return {
@@ -52,13 +52,13 @@ export const ThemePickers: React.FunctionComponent = () => {
 
   type DropdownEntry = { label: string; value: string };
 
-  const dropdownProps: PickerPropsAndroid = {
+  type DropdownProps = { initial: string; onValueChange: (value: string) => void; options: DropdownEntry[] };
+
+  const dropdownProps: Omit<PickerProps, 'onValueChange' | 'selectedValue'> = {
     style: themedPickerStyles.dropdown,
     mode: 'dropdown',
   };
 
-  type DropdownProps = { initial: string; onValueChange: (value: string) => void; options: DropdownEntry[] };
-
   const Dropdown = (props: DropdownProps) => {
     const { initial, onValueChange, options } = props;
     return (

package/src/FluentTester/theme/ThemePickers.macos.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { Text } from '@fluentui-react-native/experimental-text';
-import { Picker } from '@react-native-picker/picker';
+import { SvgXml } from 'react-native-svg';
+import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu';
+import { ButtonV1 as Button } from '@fluentui/react-native';
 import { testerTheme } from './CustomThemes';
 import { themeChoices, ThemeNames } from './applyTheme';
 import { brandOptions, OfficeBrand } from './applyBrand';
@@ -24,6 +26,17 @@ export const themePickerStyles = StyleSheet.create({
   },
 });
 
+const themeMenuPickerStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    margin: 5,
+  },
+  svg: {
+    padding: 4,
+  },
+});
+
 type PartPickerEntry = { label: string; value: string };
 
 type PartPickerProps = {
@@ -32,6 +45,37 @@ type PartPickerProps = {
   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);
@@ -42,13 +86,7 @@ export const PartPicker: React.FunctionComponent<PartPickerProps> = (props: Part
     },
     [setValue, onChange],
   );
-  return (
-    <Picker selectedValue={value} style={themePickerStyles.dropdown} onValueChange={onValueChange}>
-      {contents.map((entry: PartPickerEntry, index: number) => (
-        <Picker.Item label={entry.label} value={entry.value} key={`entry${index}`} />
-      ))}
-    </Picker>
-  );
+  return <ThemeMenuPicker selected={value} style={themePickerStyles.dropdown} onChange={onValueChange} collection={contents} />;
 };
 
 const PickerLabel = Text.customize({ variant: 'bodySemibold' });

package/src/FluentTester/theme/ThemePickers.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { View, Picker, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { Text } from '@fluentui-react-native/experimental-text';
 import { lightnessOptions, testerTheme } from './CustomThemes';
 import { themeChoices, ThemeNames } from './applyTheme';
 import { brandOptions, OfficeBrand } from './applyBrand';
 import { ThemeOptions } from '@fluentui-react-native/theme-types';
+import { MenuPicker } from '../TestComponents/Common/MenuPicker';
 
 export const themePickerStyles = StyleSheet.create({
   pickerRoot: {
@@ -42,13 +43,10 @@ export const PartPicker: React.FunctionComponent<PartPickerProps> = (props: Part
     },
     [setValue, onChange],
   );
-  return (
-    <Picker selectedValue={value} style={themePickerStyles.dropdown} onValueChange={onValueChange}>
-      {contents.map((entry: PartPickerEntry, index: number) => (
-        <Picker.Item label={entry.label} value={entry.value} key={`entry${index}`} />
-      ))}
-    </Picker>
-  );
+  const MenuPickerCollection = contents.map((entry: PartPickerEntry) => {
+    return entry.label;
+  });
+  return <MenuPicker selected={value} style={themePickerStyles.dropdown} onChange={onValueChange} collection={MenuPickerCollection} />;
 };
 
 const PickerLabel = Text.customize({ variant: 'bodySemibold' });