@fluentui-react-native/tester 0.76.0 → 0.77.0

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { BADGE_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { View, Platform, Text } from 'react-native';
-import { Badge, CompressibleBadge, PresenceBadge } from '@fluentui-react-native/badge';
+import { Badge, PresenceBadge } from '@fluentui-react-native/badge';
 import BadgeSvg from './oof.svg';
 
 import { SvgIconProps } from '@fluentui-react-native/icon';
@@ -38,18 +38,18 @@ export const BasicBadge: React.FunctionComponent = () => {
     <View>
       <Badge />
       <Text>Appearance</Text>
-      <Badge appearance="outline" text="Outline badge" />
+      <Badge appearance="outline">Outline badge</Badge>
       <Text>Shape</Text>
-      <Badge shape="circular" text="Circular badge" />
-      <Badge shape="rounded" text="rounded badge" />
-      <Badge shape="square" text="Square badge" />
+      <Badge shape="circular">Circular badge</Badge>
+      <Badge shape="rounded">Rounded badge</Badge>
+      <Badge shape="square">Square badge</Badge>
       <Text>Size</Text>
       <Badge size="smallest" shape="circular" />
       <Badge size="smaller" shape="circular" />
-      <Badge size="small" text="Small" />
-      <Badge size="medium" text="Medium" />
-      <Badge size="large" text="Large" />
-      <Badge size="largest" text="Largest" />
+      <Badge size="small">Small</Badge>
+      <Badge size="medium">Medium</Badge>
+      <Badge size="large">Large</Badge>
+      <Badge size="largest">Largest</Badge>
       {svgIconsEnabled && (
         <>
           <Text>Badge with icon</Text>
@@ -61,10 +61,7 @@ export const BasicBadge: React.FunctionComponent = () => {
           <BadgeNoBorder appearance="outline" icon={iconProps} />
         </>
       )}
-      <StyledBadge appearance="outline" text="styled badge" />
-      <Text>Compressible badge</Text>
-      <CompressibleBadge />
-      <CompressibleBadge text="Basic compressible" />
+      <StyledBadge appearance="outline">Styled badge</StyledBadge>
       {svgIconsEnabled && (
         <>
           <Text>Presence Badge</Text>

package/src/FluentTester/TestComponents/Callout/CalloutTest.tsx

@@ -173,12 +173,24 @@ const StandardCallout: React.FunctionComponent = () => {
 
   const colorDefault: string = 'default';
   const colorSelections: string[] = [colorDefault, 'red', 'green', 'blue'];
+  const menuPickerColorCollection = colorSelections.map((color) => {
+    return {
+      label: color,
+      value: color,
+    };
+  });
 
   const [selectedBackgroundColor, setSelectedBackgroundColor] = React.useState<string | undefined>(undefined);
   const [selectedBorderColor, setSelectedBorderColor] = React.useState<string | undefined>(undefined);
 
   const borderWidthDefault: string = '1';
   const borderWidthSelections: string[] = ['1', '2', '4', '10'];
+  const menuPickerBorderWidthCollection = borderWidthSelections.map((width) => {
+    return {
+      label: width,
+      value: width,
+    };
+  });
 
   const [selectedBorderWidth, setSelectedBorderWidth] = React.useState<string | undefined>(undefined);
 
@@ -238,19 +250,19 @@ const StandardCallout: React.FunctionComponent = () => {
             prompt="Background Color"
             selected={selectedBackgroundColor || colorDefault}
             onChange={(color) => setSelectedBackgroundColor(color === colorDefault ? undefined : color)}
-            collection={colorSelections}
+            collection={menuPickerColorCollection}
           />
           <MenuPicker
             prompt="Border Color"
             selected={selectedBorderColor || colorDefault}
             onChange={(color) => setSelectedBorderColor(color === colorDefault ? undefined : color)}
-            collection={colorSelections}
+            collection={menuPickerColorCollection}
           />
           <MenuPicker
             prompt="Border Width"
             selected={selectedBorderWidth || borderWidthDefault}
             onChange={(color) => setSelectedBorderWidth(color === colorDefault ? undefined : color)}
-            collection={borderWidthSelections}
+            collection={menuPickerBorderWidthCollection}
           />
         </View>
 

package/src/FluentTester/TestComponents/Common/AlignmentPicker.tsx

@@ -15,7 +15,12 @@ interface IAlignmentPickerProps {
 export const AlignmentPicker: React.FunctionComponent<IAlignmentPickerProps> = (props: IAlignmentPickerProps) => {
   const { label, onSelectionChange, style } = props;
   const [selectedValue, setSelectedValue] = React.useState<IconAlignment>();
-
+  const alignmentCollection = alignmentValues.map((value) => {
+    return {
+      label: value,
+      value: value,
+    };
+  });
   return (
     <MenuPicker
       style={style}
@@ -26,7 +31,7 @@ export const AlignmentPicker: React.FunctionComponent<IAlignmentPickerProps> = (
         onSelectionChange(alignmentValue);
         setSelectedValue(alignmentValue);
       }}
-      collection={alignmentValues}
+      collection={alignmentCollection}
     />
   );
 };

package/src/FluentTester/TestComponents/Common/MenuPicker.desktop.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Text, View, StyleSheet } from 'react-native';
 import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu';
+import { MenuPickerProps, collectionItem } from './MenuPicker';
 import { ButtonV1 as Button } from '@fluentui/react-native';
 import { SvgXml } from 'react-native-svg';
 
@@ -9,23 +10,23 @@ const chevronXml = `
   <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>`;
 
-interface MenuPickerProps {
-  prompt?: string;
-  selected?: any;
-  onChange?: (value: any, index?: number) => void;
-  collection?: any[];
-  style?: any;
-}
-
 export const MenuPicker: React.FunctionComponent<MenuPickerProps> = (props: MenuPickerProps) => {
   const { prompt, selected, onChange, collection } = props;
+
+  let label;
+  collection.forEach((item) => {
+    if (item.value == selected) {
+      label = item.label;
+    }
+  });
+
   return (
     <View style={menuPickerStyles.container}>
       <Text style={menuPickerStyles.prompt}>{prompt}</Text>
       <Menu>
         <MenuTrigger>
           <Button>
-            <Text>{selected}</Text>
+            <Text>{label}</Text>
             <View style={menuPickerStyles.chevronContainer}>
               <SvgXml xml={chevronXml} />
             </View>
@@ -33,9 +34,9 @@ export const MenuPicker: React.FunctionComponent<MenuPickerProps> = (props: Menu
         </MenuTrigger>
         <MenuPopover>
           <MenuList>
-            {collection.map((value, index) => (
-              <MenuItem onClick={() => onChange(value, index)} key={index}>
-                {value}
+            {collection.map((collectionItem: collectionItem, index: number) => (
+              <MenuItem onClick={() => onChange(collectionItem.value, index)} key={collectionItem.value ?? index}>
+                {collectionItem.label}
               </MenuItem>
             ))}
           </MenuList>

package/src/FluentTester/TestComponents/Common/MenuPicker.tsx

@@ -6,26 +6,38 @@ import { Picker } from '@react-native-picker/picker';
  * MenuPicker uses the community Picker package for iOS/Win32 and our own Picker for Win32/MacOS.
  */
 
-interface MenuPickerProps {
+export interface collectionItem {
+  label: string;
+  value?: string;
+}
+
+export interface MenuPickerProps {
   prompt?: string;
-  selected?: any;
+  selected?: string;
   onChange?: (value: any, index?: number) => void;
-  collection?: any[];
+  collection?: collectionItem[];
   style?: any;
 }
 
 export const MenuPicker: React.FunctionComponent<MenuPickerProps> = (props: MenuPickerProps) => {
   const { prompt, selected, onChange, collection, style } = props;
+  let selectedItemKey;
+
+  collection.forEach((item) => {
+    if (item.value == selected) {
+      selectedItemKey = item.value;
+    }
+  });
 
   return (
     <Picker
       prompt={prompt}
-      selectedValue={selected}
-      onValueChange={(itemValue: any, index: number) => onChange(itemValue, index)}
+      selectedValue={selectedItemKey}
+      onValueChange={(value: string, index: number) => onChange(value, index)}
       style={{ ...style }}
     >
-      {collection.map((value, index) => (
-        <Picker.Item label={value} key={index} value={value} />
+      {collection.map((item, index) => (
+        <Picker.Item label={item.label} key={index} value={item.value} />
       ))}
     </Picker>
   );

package/src/FluentTester/TestComponents/Common/MenuPicker.windows.tsx

@@ -1,22 +1,15 @@
 export * from './MenuPicker.desktop';
 import * as React from 'react';
 import { Button, Text, View, StyleSheet } from 'react-native';
-
-interface MenuPickerProps {
-  prompt?: string;
-  selected?: any;
-  onChange?: (value: any, index?: number) => void;
-  collection?: any[];
-  style?: any;
-}
+import { MenuPickerProps, collectionItem } from './MenuPicker';
 
 export const MenuPicker: React.FunctionComponent<MenuPickerProps> = (props: MenuPickerProps) => {
   const { prompt, onChange, collection } = props;
   return (
     <View style={menuPickerStyles.container}>
       <Text style={menuPickerStyles.prompt}>{prompt}</Text>
-      {collection.map((value, index) => (
-        <Button onPress={() => onChange(value, index)} key={index} title={value} />
+      {collection.map((item: collectionItem, index: number) => (
+        <Button onPress={() => onChange(item.value, index)} key={index} title={item.label} />
       ))}
     </View>
   );

package/src/FluentTester/TestComponents/Common/StyledPicker.tsx

@@ -8,5 +8,11 @@ export const StyledPicker = (props) => {
   const { prompt, selected, onChange, collection } = props;
   const theme = useTheme();
   const pickerStyles = { color: theme.colors.inputText as ColorValue, ...commonStyles.header };
-  return <MenuPicker prompt={prompt} style={pickerStyles} selected={selected} onChange={onChange} collection={collection} />;
+  const styleCollection = collection.map((value) => {
+    return {
+      label: value,
+      value: value,
+    };
+  });
+  return <MenuPicker prompt={prompt} style={pickerStyles} selected={selected} onChange={onChange} collection={styleCollection} />;
 };

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

@@ -21,6 +21,13 @@ const allSizes: WithUndefined<PersonaSize>[] = [
   'size120',
 ];
 
+const allSizesCollection = allSizes.map((size) => {
+  return {
+    label: size,
+    value: size,
+  };
+});
+
 interface ISwitchWithLabelProps {
   label: string;
   value: boolean;
@@ -59,7 +66,7 @@ export const StandardUsage: React.FunctionComponent = () => {
           style={commonStyles.header}
           selected={imageSize || undefinedText}
           onChange={(size: PersonaSize | typeof undefinedText) => setImageSize(size === undefinedText ? undefined : size)}
-          collection={allSizes}
+          collection={allSizesCollection}
         />
       </View>
 

package/src/FluentTester/theme/ThemePickers.tsx

@@ -35,18 +35,16 @@ type PartPickerProps = {
 
 export const PartPicker: React.FunctionComponent<PartPickerProps> = (props: PartPickerProps) => {
   const { initial, contents, onChange } = props;
-  const [value, setValue] = React.useState(initial);
+  const [selected, setSelected] = React.useState(initial);
   const onValueChange = React.useCallback(
-    (newValue: string) => {
-      setValue(newValue);
-      onChange(newValue);
+    (value: string) => {
+      setSelected(value);
+      onChange(value);
     },
-    [setValue, onChange],
+    [setSelected, onChange],
   );
-  const MenuPickerCollection = contents.map((entry: PartPickerEntry) => {
-    return entry.label;
-  });
-  return <MenuPicker selected={value} style={themePickerStyles.dropdown} onChange={onValueChange} collection={MenuPickerCollection} />;
+
+  return <MenuPicker selected={selected} style={themePickerStyles.dropdown} onChange={onValueChange} collection={contents} />;
 };
 
 const PickerLabel = Text.customize({ variant: 'bodySemibold' });