@fluentui-react-native/tester 0.61.9 → 0.62.1

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

@@ -47,6 +47,39 @@ const Helvetica = Text.customize({ variant: 'heroLargeStandard', fontFamily: 'He
 const Arial = Text.customize({ variant: 'heroLargeStandard', fontFamily: 'arial' });
 
 export const CustomizeUsage: React.FunctionComponent = () => {
+  const BlockText = () => {
+    return (
+      <>
+        <Text style={{ textTransform: 'uppercase' }} font="base" weight="medium">
+          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.
+        </Text>
+        <Text font="monospace" weight="semibold" wrap={false}>
+          I am not going to be wrapped 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.
+        </Text>
+        <Text underline>Since text components are inside a View</Text>
+        <Text>every block of text</Text>
+        <Text underline strikethrough align="end">
+          gets its own line. This line has been underlined, striked through, and right aligned.
+        </Text>
+      </>
+    );
+  };
+
+  const NonBlockText = () => {
+    return (
+      <Text>
+        <Text italic>I am italisized inline text.</Text>
+        <Text weight="medium">Since text components are inside a Text, (medium) </Text>
+        <Text weight="bold">every block of text (bolded) </Text>
+        <Text size={600}>gets placed inline.</Text>
+      </Text>
+    );
+  };
+
   const CustomUsageStack = () => {
     return (
       <Stack style={stackStyle} gap={5}>
@@ -73,6 +106,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
       </Stack>
     );
   };
+
   const CustomFontStackAndroid = () => {
     return (
       <Stack style={stackStyle} gap={5}>
@@ -116,6 +150,10 @@ export const CustomizeUsage: React.FunctionComponent = () => {
     default:
       return (
         <View>
+          <BlockText />
+          <Text>{'\n'}</Text>
+          <NonBlockText />
+          <Text>{'\n'}</Text>
           <CustomUsageStack />
           <CustomFontStack />
         </View>

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

@@ -1,30 +1,83 @@
 import * as React from 'react';
-import { View } from 'react-native';
-import { Text } from '@fluentui-react-native/experimental-text';
+import { Platform, View } from 'react-native';
+import {
+  Text,
+  Caption1,
+  Body1,
+  Body1Strong,
+  Body2,
+  Body2Strong,
+  Subtitle1,
+  Subtitle1Strong,
+  Subtitle2,
+  Subtitle2Strong,
+  Title1,
+  Title1Strong,
+  LargeTitle,
+  Display,
+} from '@fluentui-react-native/experimental-text';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from '../Common/styles';
 import { HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON } from './consts';
 
 export const StandardUsage: React.FunctionComponent = () => {
-  return (
-    <View>
-      <Stack style={stackStyle} gap={5}>
-        <Text variant="captionStandard" testID={HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON}>
-          CaptionStandard
-        </Text>
-        <Text variant="secondaryStandard">SecondaryStandard</Text>
-        <Text variant="secondarySemibold">SecondarySemibold</Text>
-        <Text variant="bodyStandard">BodyStandard</Text>
-        <Text variant="bodySemibold">BodySemibold</Text>
-        <Text variant="subheaderStandard">SubheaderStandard</Text>
-        <Text variant="subheaderSemibold">SubheaderSemibold</Text>
-        <Text variant="headerStandard">HeaderStandard</Text>
-        <Text variant="headerSemibold">HeaderSemibold</Text>
-        <Text variant="heroStandard">HeroStandard</Text>
-        <Text variant="heroSemibold">HeroSemibold</Text>
-        <Text variant="heroLargeStandard">HeroLargeStandard</Text>
-        <Text variant="heroLargeSemibold">HeroLargeSemibold</Text>
-      </Stack>
-    </View>
-  );
+  const V1Usage: React.FunctionComponent = () => {
+    return (
+      <View>
+        <Stack style={stackStyle} gap={5}>
+          <Text variant="captionStandard" testID={HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON}>
+            CaptionStandard
+          </Text>
+          <Text variant="secondaryStandard">SecondaryStandard</Text>
+          <Text variant="secondarySemibold">SecondarySemibold</Text>
+          <Text variant="bodyStandard">BodyStandard</Text>
+          <Text variant="bodySemibold">BodySemibold</Text>
+          <Text variant="subheaderStandard">SubheaderStandard</Text>
+          <Text variant="subheaderSemibold">SubheaderSemibold</Text>
+          <Text variant="headerStandard">HeaderStandard</Text>
+          <Text variant="headerSemibold">HeaderSemibold</Text>
+          <Text variant="heroStandard">HeroStandard</Text>
+          <Text variant="heroSemibold">HeroSemibold</Text>
+          <Text variant="heroLargeStandard">HeroLargeStandard</Text>
+          <Text variant="heroLargeSemibold">HeroLargeSemibold</Text>
+        </Stack>
+      </View>
+    );
+  };
+
+  const V2Usage: React.FunctionComponent = () => {
+    return (
+      <View>
+        <Stack style={stackStyle} gap={5}>
+          <Caption1>Caption1</Caption1>
+          <Body1>Body1</Body1>
+          <Body1Strong>Body1Strong</Body1Strong>
+          <Body2>Body2</Body2>
+          <Body2Strong>Body2Strong</Body2Strong>
+          <Subtitle2>Subtitle2</Subtitle2>
+          <Subtitle2Strong>Subtitle2Strong</Subtitle2Strong>
+          <Subtitle1>Subtitle1</Subtitle1>
+          <Subtitle1Strong>Subtitle1Strong</Subtitle1Strong>
+          <Title1>Title1</Title1>
+          <Title1Strong>Title1Strong</Title1Strong>
+          <LargeTitle>LargeTitle</LargeTitle>
+          <Display>Display</Display>
+        </Stack>
+      </View>
+    );
+  };
+
+  switch (Platform.OS) {
+    case 'android':
+    case 'ios':
+    case 'macos':
+      return <V1Usage />;
+    default:
+      return (
+        <View>
+          <V1Usage />
+          <V2Usage />
+        </View>
+      );
+  }
 };