@fluentui-react-native/tester 0.56.1 → 0.58.1

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View, Text, Switch, TextInput, TextStyle } from 'react-native';
-import { IPersonaTokens, Persona } from '@fluentui/react-native';
+import { Persona } from '@fluentui/react-native';
 import { michaelImageUrl } from './styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import { useTheme } from '@fluentui-react-native/theme-types';
@@ -19,38 +19,25 @@ export const CustomizeUsage: React.FunctionComponent = () => {
   const [horizontalGap, setHorizontalGap] = React.useState<number>();
   const [verticalGap, setVerticalGap] = React.useState<number>();
 
-  const tokens: Partial<IPersonaTokens> = {};
-  if (coinColor) {
-    tokens.coinBackgroundColor = coinColor;
-  }
-  if (textColor) {
-    tokens.color = textColor;
-  }
-  if (textSize) {
-    tokens.textFont = { fontSize: textSize };
-  }
-  if (secondarySize) {
-    tokens.secondaryFont = { fontSize: secondarySize };
-  }
-  if (tertiarySize) {
-    tokens.tertiaryFont = { fontSize: tertiarySize };
-  }
-  if (optionalSize) {
-    tokens.optionalFont = { fontSize: optionalSize };
-  }
-  if (horizontalGap !== undefined) {
-    tokens.horizontalGap = horizontalGap;
-  }
-  if (verticalGap !== undefined) {
-    tokens.verticalGap = verticalGap;
-  }
-
   const theme = useTheme();
   const textBoxBorderStyle: TextStyle = {
     borderColor: theme.colors.inputBorder,
   };
 
-  const CustomizedPersona = Persona.customize({ tokens });
+  const CustomizedPersona = React.useMemo(() => {
+    const tokens = {
+      backgroundColor: coinColor,
+      color: textColor,
+      textFont: { fontSize: textSize },
+      secondaryFont: { fontSize: secondarySize },
+      tertiaryFont: { fontSize: tertiarySize },
+      optionalFont: { fontSize: optionalSize },
+      horizontalGap: horizontalGap,
+      verticalGap: verticalGap,
+    };
+    return Persona.customize({ tokens });
+  }, [coinColor, textColor, textSize, secondarySize, tertiarySize, optionalSize, horizontalGap, verticalGap]);
+
   return (
     <View style={commonStyles.root}>
       {/* settings */}

package/src/FluentTester/TestComponents/PersonaCoin/CustomizeUsage.mobile.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PersonaCoin, IPersonaCoinTokens } from '@fluentui/react-native';
+import { PersonaCoin } from '@fluentui/react-native';
 import { Switch, View, Text, TextInput } from 'react-native';
 import Slider from '@react-native-community/slider';
 import { steveBallmerPhotoUrl, undefinedText } from './styles';
@@ -63,27 +63,17 @@ export const CustomizeUsage: React.FunctionComponent = () => {
   const [ringColor, setRingColor] = React.useState<string>('green');
   const [ringBackgroundColor, setRingBackgroundColor] = React.useState<string>(undefined);
 
-  const tokens: Partial<IPersonaCoinTokens> = {};
-  const CustomizedPersonaCoin = PersonaCoin.customize({ tokens });
-
-  if (coinColor) {
-    tokens.backgroundColor = coinColor;
-  }
-  if (textColor) {
-    tokens.color = textColor;
-  }
-  if (showRings) {
-    tokens.ring = { ringColor: 'red' };
-  }
-  if (coinSize) {
-    tokens.coinSize = coinSize;
-  }
-  if (iconSize) {
-    tokens.iconSize = iconSize;
-  }
-  if (iconStrokeWidth) {
-    tokens.iconStrokeWidth = iconStrokeWidth;
-  }
+  const CustomizedPersonaCoin = React.useMemo(() => {
+    const tokens = {
+      backgroundColor: coinColor,
+      color: textColor,
+      ring: { ringColor: 'red' },
+      coinSize: coinSize,
+      iconSize: iconSize,
+      iconStrokeWidth: iconStrokeWidth,
+    };
+    return PersonaCoin.customize({ tokens });
+  }, [coinColor, textColor, showRings, coinSize, iconSize, iconStrokeWidth]);
 
   return (
     <View style={{ flexDirection: 'column', padding: 10, backgroundColor: showColoredBackground ? 'gray' : 'transparent' }}>

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PersonaCoin, IconAlignment, IPersonaCoinTokens } from '@fluentui/react-native';
+import { PersonaCoin, IconAlignment } from '@fluentui/react-native';
 import { Switch, View, Text, TextInput, TextStyle } from 'react-native';
 import { Slider } from '../Common/Slider';
 import { steveBallmerPhotoUrl } from './styles';
@@ -29,36 +29,30 @@ export const CustomizeUsage: React.FunctionComponent = () => {
     borderColor: theme.colors.inputBorder,
   };
 
-  const tokens: Partial<IPersonaCoinTokens> = {};
-  if (coinColor) {
-    tokens.backgroundColor = coinColor;
-  }
-  if (textColor) {
-    tokens.color = textColor;
-  }
-  if (horizontalAlignment) {
-    tokens.horizontalIconAlignment = horizontalAlignment;
-  }
-  if (verticalAlignment) {
-    tokens.verticalIconAlignment = verticalAlignment;
-  }
-  if (iconSize) {
-    tokens.iconSize = iconSize;
-  }
-  if (iconStrokeWidth) {
-    tokens.iconStrokeWidth = iconStrokeWidth;
-  }
-  if (iconStrokeColor) {
-    tokens.iconStrokeColor = iconStrokeColor;
-  }
-  if (initialsSize) {
-    tokens.initialsSize = initialsSize;
-  }
-  if (physicalSize) {
-    tokens.coinSize = physicalSize;
-  }
-
-  const CustomizedPersonaCoin = PersonaCoin.customize({ tokens });
+  const CustomizedPersonaCoin = React.useMemo(() => {
+    const tokens = {
+      backgroundColor: coinColor,
+      color: textColor,
+      horizontalIconAlignment: horizontalAlignment,
+      verticalIconAlignment: verticalAlignment,
+      iconSize: iconSize,
+      iconStrokeWidth: iconStrokeWidth,
+      iconStrokeColor: iconStrokeColor,
+      initialsSize: initialsSize,
+      coinSize: physicalSize,
+    };
+    return PersonaCoin.customize({ tokens });
+  }, [
+    coinColor,
+    textColor,
+    horizontalAlignment,
+    verticalAlignment,
+    iconSize,
+    iconStrokeWidth,
+    iconStrokeColor,
+    initialsSize,
+    physicalSize,
+  ]);
 
   return (
     <View style={commonStyles.root}>

package/src/FluentTester/TestComponents/Shimmer/ShimmerTest.tsx

@@ -7,6 +7,49 @@ import { stackStyle } from '../Common/styles';
 import { shimmerBorderRadiusTests, shimmerRectsAndRect, shimmerRectsAndCircle } from './ShimmerTestElementSets';
 import { E2ETestingShimmer } from './ShimmerE2ETest';
 
+const TestCompareCustomizeShimmer = Shimmer.customize({
+  shimmerWaveColor: 'blue',
+  shimmerColor: 'orange',
+  backgroundColor: 'red',
+});
+
+export const CustomizeAndTokenPropsShimmers: React.FunctionComponent = () => {
+  return (
+    <Stack style={{ margin: 4 }}>
+      <TestCompareCustomizeShimmer
+        elements={shimmerRectsAndCircle()}
+        duration={2000}
+        delay={1000}
+        style={{ height: 100, width: '50%', borderWidth: 2, borderColor: 'black' }}
+      />
+
+      <Shimmer
+        elements={shimmerRectsAndCircle()}
+        duration={2000}
+        delay={1000}
+        style={{ height: 100, width: '50%', borderWidth: 2, borderColor: 'black' }}
+        shimmerWaveColor="blue"
+        shimmerColor="orange"
+        backgroundColor="red"
+      />
+    </Stack>
+  );
+};
+
+export const RoundedCornerClipCheckShimmer: React.FunctionComponent = () => {
+  return (
+    <Stack style={{ margin: 4 }}>
+      <Shimmer
+        elements={shimmerRectsAndCircle()}
+        duration={2000}
+        delay={1000}
+        style={{ height: 100, width: 150, borderRadius: 16, borderWidth: 2, borderColor: 'black' }}
+        backgroundColor="teal"
+      />
+    </Stack>
+  );
+};
+
 const RectShimmers: React.FunctionComponent<Record<string, never>> = () => {
   return (
     <Stack style={stackStyle}>
@@ -24,13 +67,10 @@ const RectCircleShimmers: React.FunctionComponent<Record<string, never>> = () =>
 };
 
 const CustomizedShimmer: React.FunctionComponent<Record<string, never>> = () => {
-  const PinkShimmer = Shimmer.customize({
-    shimmerWaveColor: 'pink',
-  });
-
   return (
     <Stack style={stackStyle}>
-      <PinkShimmer elements={shimmerRectsAndCircle()} duration={1500} delay={500} style={{ height: 100, maxWidth: '50%' }} />
+      <CustomizeAndTokenPropsShimmers />
+      <RoundedCornerClipCheckShimmer />
     </Stack>
   );
 };
@@ -44,11 +84,6 @@ const ShimmerBorderRadii: React.FunctionComponent<Record<string, never>> = () =>
 };
 
 const shimmerSections: TestSection[] = [
-  {
-    name: 'Customized Shimmer',
-    testID: SHIMMER_TESTPAGE,
-    component: CustomizedShimmer,
-  },
   {
     name: 'Shimmer Rects',
     testID: SHIMMER_TESTPAGE,
@@ -64,6 +99,11 @@ const shimmerSections: TestSection[] = [
     testID: SHIMMER_TESTPAGE,
     component: ShimmerBorderRadii,
   },
+  {
+    name: 'Customized Shimmer',
+    testID: SHIMMER_TESTPAGE,
+    component: CustomizedShimmer,
+  },
   {
     name: 'Shimmer for E2E Testing',
     component: E2ETestingShimmer,

package/src/FluentTester/TestComponents/Text/CustomizeUsage.tsx

@@ -4,15 +4,49 @@ import { Stack } from '@fluentui-react-native/stack';
 import { Text } from '@fluentui/react-native';
 import { stackStyle } from '../Common/styles';
 
-export const CustomizeUsage: React.FunctionComponent = () => {
-  const RedCaptionBold = Text.customize({ tokens: { variant: 'captionStandard', fontWeight: '700', color: '#ff0000' } });
-  const OrangeSecondaryBold = Text.customize({ tokens: { variant: 'secondaryStandard', fontWeight: '700', color: '#ff9900' } });
-  const YellowBodyBold = Text.customize({ tokens: { variant: 'bodyStandard', fontWeight: '700', color: '#f3ce00' } });
-  const GreenSubheaderBold = Text.customize({ tokens: { variant: 'subheaderStandard', fontWeight: '700', color: '#02c440' } });
-  const BlueHeaderBold = Text.customize({ tokens: { variant: 'headerStandard', fontWeight: '700', color: '#0229c4' } });
-  const IndigoHeroBold = Text.customize({ tokens: { variant: 'heroStandard', fontWeight: '700', color: '#4b0082' } });
-  const PurpleHeroLargeBold = Text.customize({ tokens: { variant: 'heroLargeStandard', fontWeight: '700', color: '#8402c4' } });
+const RedCaptionBold = Text.customize({ tokens: { variant: 'captionStandard', fontWeight: '700', color: '#ff0000' } });
+const OrangeSecondaryBold = Text.customize({ tokens: { variant: 'secondaryStandard', fontWeight: '700', color: '#ff9900' } });
+const YellowBodyBold = Text.customize({ tokens: { variant: 'bodyStandard', fontWeight: '700', color: '#f3ce00' } });
+const GreenSubheaderBold = Text.customize({ tokens: { variant: 'subheaderStandard', fontWeight: '700', color: '#02c440' } });
+const BlueHeaderBold = Text.customize({ tokens: { variant: 'headerStandard', fontWeight: '700', color: '#0229c4' } });
+const IndigoHeroBold = Text.customize({ tokens: { variant: 'heroStandard', fontWeight: '700', color: '#4b0082' } });
+const PurpleHeroLargeBold = Text.customize({ tokens: { variant: 'heroLargeStandard', fontWeight: '700', color: '#8402c4' } });
+
+// Android has a limited fontFamily support and unknown fonts fallback to sans-serif (Roboto).
+// Custom fonts (ttf, otf) are supported but need to be linked using 'react-native link'
+// The supported font families can be found as <aliases> at https://android.googlesource.com/platform/frameworks/base/+/master/data/fonts/fonts.xml
+const CustomFontNames = {
+  ...Platform.select({
+    android: {
+      CourierNew: 'courier new',
+      Georgia: 'georgia',
+      TimesNewRoman: 'times new roman',
+    },
+    default: {
+      CourierNew: 'Courier New',
+      Georgia: 'Georgia',
+      TimesNewRoman: 'Times New Roman',
+    },
+  }),
+};
+
+const ArialBlack = Text.customize({ tokens: { variant: 'heroLargeStandard', fontFamily: 'Arial Black' } });
+const BrushScriptMT = Text.customize({ tokens: { variant: 'heroStandard', fontFamily: 'Brush Script MT' } });
+const CourierNew = Text.customize({ tokens: { variant: 'headerStandard', fontFamily: CustomFontNames.CourierNew } });
+const Georgia = Text.customize({ tokens: { variant: 'subheaderStandard', fontFamily: CustomFontNames.Georgia } });
+const TimesNewRoman = Text.customize({ tokens: { variant: 'secondaryStandard', fontFamily: CustomFontNames.TimesNewRoman } });
+const Wingdings = Text.customize({ tokens: { variant: 'captionStandard', fontFamily: 'Wingdings' } });
+
+// Examples of supported Android fonts.
+const Casual = Text.customize({ tokens: { variant: 'heroStandard', fontFamily: 'casual' } });
+const Cursive = Text.customize({ tokens: { variant: 'heroStandard', fontFamily: 'cursive' } });
+// Examples of iOS fonts.
+const Papyrus = Text.customize({ tokens: { variant: 'heroLargeStandard', fontFamily: 'Papyrus' } });
+const Helvetica = Text.customize({ tokens: { variant: 'heroLargeStandard', fontFamily: 'Helvetica' } });
+// Fonts supported on Android and iOS
+const Arial = Text.customize({ tokens: { variant: 'heroLargeStandard', fontFamily: 'arial' } });
 
+export const CustomizeUsage: React.FunctionComponent = () => {
   const CustomUsageStack = () => {
     return (
       <Stack style={stackStyle} gap={5}>
@@ -27,40 +61,6 @@ export const CustomizeUsage: React.FunctionComponent = () => {
     );
   };
 
-  // Android has a limited fontFamily support and unknown fonts fallback to sans-serif (Roboto).
-  // Custom fonts (ttf, otf) are supported but need to be linked using 'react-native link'
-  // The supported font families can be found as <aliases> at https://android.googlesource.com/platform/frameworks/base/+/master/data/fonts/fonts.xml
-  const CustomFontNames = {
-    ...Platform.select({
-      android: {
-        CourierNew: 'courier new',
-        Georgia: 'georgia',
-        TimesNewRoman: 'times new roman',
-      },
-      default: {
-        CourierNew: 'Courier New',
-        Georgia: 'Georgia',
-        TimesNewRoman: 'Times New Roman',
-      },
-    }),
-  };
-
-  const ArialBlack = Text.customize({ tokens: { variant: 'heroLargeStandard', fontFamily: 'Arial Black' } });
-  const BrushScriptMT = Text.customize({ tokens: { variant: 'heroStandard', fontFamily: 'Brush Script MT' } });
-  const CourierNew = Text.customize({ tokens: { variant: 'headerStandard', fontFamily: CustomFontNames.CourierNew } });
-  const Georgia = Text.customize({ tokens: { variant: 'subheaderStandard', fontFamily: CustomFontNames.Georgia } });
-  const TimesNewRoman = Text.customize({ tokens: { variant: 'secondaryStandard', fontFamily: CustomFontNames.TimesNewRoman } });
-  const Wingdings = Text.customize({ tokens: { variant: 'captionStandard', fontFamily: 'Wingdings' } });
-
-  // Examples of supported Android fonts.
-  const Casual = Text.customize({ tokens: { variant: 'heroStandard', fontFamily: 'casual' } });
-  const Cursive = Text.customize({ tokens: { variant: 'heroStandard', fontFamily: 'cursive' } });
-  // Examples of iOS fonts.
-  const Papyrus = Text.customize({ tokens: { variant: 'heroLargeStandard', fontFamily: 'Papyrus' } });
-  const Helvetica = Text.customize({ tokens: { variant: 'heroLargeStandard', fontFamily: 'Helvetica' } });
-  // Fonts supported on Android and iOS
-  const Arial = Text.customize({ tokens: { variant: 'heroLargeStandard', fontFamily: 'arial' } });
-
   const CustomFontStack = () => {
     return (
       <Stack style={stackStyle} gap={5}>

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

@@ -4,15 +4,49 @@ import { Stack } from '@fluentui-react-native/stack';
 import { Text } from '@fluentui-react-native/experimental-text';
 import { stackStyle } from '../Common/styles';
 
-export const CustomizeUsage: React.FunctionComponent = () => {
-  const RedCaptionBold = Text.customize({ variant: 'captionStandard', fontWeight: '700', color: '#ff0000' });
-  const OrangeSecondaryBold = Text.customize({ variant: 'secondaryStandard', fontWeight: '700', color: '#ff9900' });
-  const YellowBodyBold = Text.customize({ variant: 'bodyStandard', fontWeight: '700', color: '#f3ce00' });
-  const GreenSubheaderBold = Text.customize({ variant: 'subheaderStandard', fontWeight: '700', color: '#02c440' });
-  const BlueHeaderBold = Text.customize({ variant: 'headerStandard', fontWeight: '700', color: '#0229c4' });
-  const IndigoHeroBold = Text.customize({ variant: 'heroStandard', fontWeight: '700', color: '#4b0082' });
-  const PurpleHeroLargeBold = Text.customize({ variant: 'heroLargeStandard', fontWeight: '700', color: '#8402c4' });
+const RedCaptionBold = Text.customize({ variant: 'captionStandard', fontWeight: '700', color: '#ff0000' });
+const OrangeSecondaryBold = Text.customize({ variant: 'secondaryStandard', fontWeight: '700', color: '#ff9900' });
+const YellowBodyBold = Text.customize({ variant: 'bodyStandard', fontWeight: '700', color: '#f3ce00' });
+const GreenSubheaderBold = Text.customize({ variant: 'subheaderStandard', fontWeight: '700', color: '#02c440' });
+const BlueHeaderBold = Text.customize({ variant: 'headerStandard', fontWeight: '700', color: '#0229c4' });
+const IndigoHeroBold = Text.customize({ variant: 'heroStandard', fontWeight: '700', color: '#4b0082' });
+const PurpleHeroLargeBold = Text.customize({ variant: 'heroLargeStandard', fontWeight: '700', color: '#8402c4' });
+
+// Android has a limited fontFamily support and unknown fonts fallback to sans-serif (Roboto).
+// Custom fonts (ttf, otf) are supported but need to be linked using 'react-native link'
+// The supported font families can be found as <aliases> at https://android.googlesource.com/platform/frameworks/base/+/master/data/fonts/fonts.xml
+const CustomFontNames = {
+  ...Platform.select({
+    android: {
+      CourierNew: 'courier new',
+      Georgia: 'georgia',
+      TimesNewRoman: 'times new roman',
+    },
+    default: {
+      CourierNew: 'Courier New',
+      Georgia: 'Georgia',
+      TimesNewRoman: 'Times New Roman',
+    },
+  }),
+};
+
+const ArialBlack = Text.customize({ variant: 'heroLargeStandard', fontFamily: 'Arial Black' });
+const BrushScriptMT = Text.customize({ variant: 'heroStandard', fontFamily: 'Brush Script MT' });
+const CourierNew = Text.customize({ variant: 'headerStandard', fontFamily: CustomFontNames.CourierNew });
+const Georgia = Text.customize({ variant: 'subheaderStandard', fontFamily: CustomFontNames.Georgia });
+const TimesNewRoman = Text.customize({ variant: 'secondaryStandard', fontFamily: CustomFontNames.TimesNewRoman });
+const Wingdings = Text.customize({ variant: 'captionStandard', fontFamily: 'Wingdings' });
+
+// Examples of supported Android fonts.
+const Casual = Text.customize({ variant: 'heroStandard', fontFamily: 'casual' });
+const Cursive = Text.customize({ variant: 'heroStandard', fontFamily: 'cursive' });
+// Examples of iOS fonts.
+const Papyrus = Text.customize({ variant: 'heroLargeStandard', fontFamily: 'Papyrus' });
+const Helvetica = Text.customize({ variant: 'heroLargeStandard', fontFamily: 'Helvetica' });
+// Fonts supported on Android and iOS
+const Arial = Text.customize({ variant: 'heroLargeStandard', fontFamily: 'arial' });
 
+export const CustomizeUsage: React.FunctionComponent = () => {
   const CustomUsageStack = () => {
     return (
       <Stack style={stackStyle} gap={5}>
@@ -27,40 +61,6 @@ export const CustomizeUsage: React.FunctionComponent = () => {
     );
   };
 
-  // Android has a limited fontFamily support and unknown fonts fallback to sans-serif (Roboto).
-  // Custom fonts (ttf, otf) are supported but need to be linked using 'react-native link'
-  // The supported font families can be found as <aliases> at https://android.googlesource.com/platform/frameworks/base/+/master/data/fonts/fonts.xml
-  const CustomFontNames = {
-    ...Platform.select({
-      android: {
-        CourierNew: 'courier new',
-        Georgia: 'georgia',
-        TimesNewRoman: 'times new roman',
-      },
-      default: {
-        CourierNew: 'Courier New',
-        Georgia: 'Georgia',
-        TimesNewRoman: 'Times New Roman',
-      },
-    }),
-  };
-
-  const ArialBlack = Text.customize({ variant: 'heroLargeStandard', fontFamily: 'Arial Black' });
-  const BrushScriptMT = Text.customize({ variant: 'heroStandard', fontFamily: 'Brush Script MT' });
-  const CourierNew = Text.customize({ variant: 'headerStandard', fontFamily: CustomFontNames.CourierNew });
-  const Georgia = Text.customize({ variant: 'subheaderStandard', fontFamily: CustomFontNames.Georgia });
-  const TimesNewRoman = Text.customize({ variant: 'secondaryStandard', fontFamily: CustomFontNames.TimesNewRoman });
-  const Wingdings = Text.customize({ variant: 'captionStandard', fontFamily: 'Wingdings' });
-
-  // Examples of supported Android fonts.
-  const Casual = Text.customize({ variant: 'heroStandard', fontFamily: 'casual' });
-  const Cursive = Text.customize({ variant: 'heroStandard', fontFamily: 'cursive' });
-  // Examples of iOS fonts.
-  const Papyrus = Text.customize({ variant: 'heroLargeStandard', fontFamily: 'Papyrus' });
-  const Helvetica = Text.customize({ variant: 'heroLargeStandard', fontFamily: 'Helvetica' });
-  // Fonts supported on Android and iOS
-  const Arial = Text.customize({ variant: 'heroLargeStandard', fontFamily: 'arial' });
-
   const CustomFontStack = () => {
     return (
       <Stack style={stackStyle} gap={5}>