@fluentui-react-native/tester 0.75.3 → 0.77.1

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/Notification/NotificationTest.tsx

@@ -28,8 +28,7 @@ const PrimaryTestWithTitleAndIcon: React.FunctionComponent = () => {
     <Notification
       variant={'primary'}
       icon={iconProps}
-      title="Kat's iPhone X"
-      action="X"
+      title="Kat's iPhoneX"
       onPress={() => {
         console.log('Notification tapped');
       }}
@@ -71,7 +70,6 @@ const WarningTest: React.FunctionComponent = () => {
   return (
     <Notification
       variant={'warning'}
-      action="X"
       onPress={() => {
         console.log('Notification tapped');
       }}

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/TestComponents/TextExperimental/CustomizeUsage.tsx

@@ -50,7 +50,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
   const BlockText = () => {
     return (
       <>
-        <Text style={{ textTransform: 'uppercase' }} font="base" weight="medium">
+        <Text style={{ textTransform: 'uppercase' }} font="base" weight="medium" truncate>
           I am going to be truncated since I am a very very very very very very very very very very very very very very very very very very
           very very very very very very very very very very very very very very very very very very very very very very very very very very
           very very very very very very very very very very very very very very very very long block text.

package/src/FluentTester/TestComponents/TextExperimental/PressableUsage.tsx

@@ -18,6 +18,10 @@ export const PressableUsage: React.FunctionComponent = () => {
     Alert.alert('Alert', 'Success!');
   };
 
+  const _onPress3 = (): void => {
+    Alert.alert('Alert', 'onAccessibilityTap invoked!');
+  };
+
   const _onKeyDown2 = (ev: IKeyboardEvent) => {
     if (ev.nativeEvent.key === 'Enter' || ev.nativeEvent.key == ' ') Alert.alert('Alert', 'Success!');
   };
@@ -29,7 +33,14 @@ export const PressableUsage: React.FunctionComponent = () => {
       <Stack style={stackStyle} gap={5}>
         <Text variant={'bodyStandard'}>
           To learn more about microsoft, visit this{' '}
-          <Text variant={'bodyStandard'} color="blue" keyDownEvents={handledNativeKeyboardEvents} onPress={_onPress} onKeyDown={_onKeyDown}>
+          <Text
+            focusable
+            variant={'bodyStandard'}
+            color="blue"
+            keyDownEvents={handledNativeKeyboardEvents}
+            onPress={_onPress}
+            onKeyDown={_onKeyDown}
+          >
             webpage
           </Text>{' '}
           for more details.
@@ -42,6 +53,7 @@ export const PressableUsage: React.FunctionComponent = () => {
             keyDownEvents={handledNativeKeyboardEvents}
             onPress={_onPress2}
             onKeyDown={_onKeyDown2}
+            onAccessibilityTap={_onPress3}
           >
             here
           </Text>{' '}

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