@fluentui-react-native/tester 0.95.5 → 0.96.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.95.5",
+  "version": "0.96.0",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -36,40 +36,40 @@
     "directory": "apps/fluent-tester"
   },
   "dependencies": {
-    "@fluentui-react-native/android-theme": ">=0.12.1 <1.0.0",
-    "@fluentui-react-native/apple-theme": ">=0.14.1 <1.0.0",
-    "@fluentui-react-native/avatar": "^1.2.9",
-    "@fluentui-react-native/badge": ">=0.1.32 <1.0.0",
-    "@fluentui-react-native/button": ">=0.24.25 <1.0.0",
-    "@fluentui-react-native/default-theme": ">=0.15.1 <1.0.0",
-    "@fluentui-react-native/dropdown": ">=0.4.0 <1.0.0",
-    "@fluentui-react-native/experimental-activity-indicator": ">=0.6.3 <1.0.0",
-    "@fluentui-react-native/experimental-avatar": ">=0.16.4 <1.0.0",
-    "@fluentui-react-native/experimental-button": "0.16.25",
-    "@fluentui-react-native/experimental-checkbox": "0.12.16",
-    "@fluentui-react-native/experimental-expander": "0.4.3",
-    "@fluentui-react-native/experimental-menu-button": ">=0.4.29 <1.0.0",
-    "@fluentui-react-native/experimental-native-date-picker": ">=0.7.0 <1.0.0",
-    "@fluentui-react-native/experimental-radio-group": "^0.3.3",
-    "@fluentui-react-native/experimental-shadow": "0.2.19",
-    "@fluentui-react-native/experimental-shimmer": "0.7.3",
-    "@fluentui-react-native/experimental-tabs": "0.5.14",
-    "@fluentui-react-native/experimental-text": ">=0.11.5 <1.0.0",
-    "@fluentui-react-native/framework": ">=0.8.3 <1.0.0",
-    "@fluentui-react-native/icon": "0.13.8",
-    "@fluentui-react-native/interactive-hooks": ">=0.18.5 <1.0.0",
-    "@fluentui-react-native/menu": "^1.0.35",
+    "@fluentui-react-native/android-theme": ">=0.12.2 <1.0.0",
+    "@fluentui-react-native/apple-theme": ">=0.15.0 <1.0.0",
+    "@fluentui-react-native/avatar": "^1.2.10",
+    "@fluentui-react-native/badge": ">=0.1.33 <1.0.0",
+    "@fluentui-react-native/button": ">=0.24.26 <1.0.0",
+    "@fluentui-react-native/default-theme": ">=0.15.2 <1.0.0",
+    "@fluentui-react-native/dropdown": ">=0.4.1 <1.0.0",
+    "@fluentui-react-native/experimental-activity-indicator": ">=0.6.4 <1.0.0",
+    "@fluentui-react-native/experimental-avatar": ">=0.16.6 <1.0.0",
+    "@fluentui-react-native/experimental-button": "0.16.26",
+    "@fluentui-react-native/experimental-checkbox": "0.12.17",
+    "@fluentui-react-native/experimental-expander": "0.4.4",
+    "@fluentui-react-native/experimental-menu-button": ">=0.4.30 <1.0.0",
+    "@fluentui-react-native/experimental-native-date-picker": ">=0.7.1 <1.0.0",
+    "@fluentui-react-native/experimental-radio-group": "^0.3.4",
+    "@fluentui-react-native/experimental-shadow": "0.2.20",
+    "@fluentui-react-native/experimental-shimmer": "0.7.4",
+    "@fluentui-react-native/experimental-tabs": "0.5.15",
+    "@fluentui-react-native/experimental-text": ">=0.11.6 <1.0.0",
+    "@fluentui-react-native/framework": ">=0.8.4 <1.0.0",
+    "@fluentui-react-native/icon": "0.13.9",
+    "@fluentui-react-native/interactive-hooks": ">=0.18.6 <1.0.0",
+    "@fluentui-react-native/menu": "^1.0.36",
     "@fluentui-react-native/merge-props": ">=0.5.0 <1.0.0",
-    "@fluentui-react-native/notification": "0.17.8",
-    "@fluentui-react-native/stack": ">=0.7.7 <1.0.0",
-    "@fluentui-react-native/switch": "^0.6.7",
-    "@fluentui-react-native/text": ">=0.14.4 <1.0.0",
-    "@fluentui-react-native/theme": ">=0.7.1 <1.0.0",
-    "@fluentui-react-native/theme-types": ">=0.19.0 <1.0.0",
+    "@fluentui-react-native/notification": "0.17.9",
+    "@fluentui-react-native/stack": ">=0.7.8 <1.0.0",
+    "@fluentui-react-native/switch": "^0.6.8",
+    "@fluentui-react-native/text": ">=0.15.0 <1.0.0",
+    "@fluentui-react-native/theme": ">=0.7.2 <1.0.0",
+    "@fluentui-react-native/theme-types": ">=0.19.1 <1.0.0",
     "@fluentui-react-native/themed-stylesheet": "^1.4.0",
-    "@fluentui-react-native/theming-utils": ">=0.15.1 <1.0.0",
-    "@fluentui-react-native/win32-theme": ">=0.21.1 <1.0.0",
-    "@fluentui/react-native": ">=0.32.19 <1.0.0",
+    "@fluentui-react-native/theming-utils": ">=0.15.2 <1.0.0",
+    "@fluentui-react-native/win32-theme": ">=0.21.2 <1.0.0",
+    "@fluentui/react-native": ">=0.32.20 <1.0.0",
     "@react-native-community/slider": "^4.2.0",
     "@react-native-menu/menu": "^0.1.2",
     "@react-native-picker/picker": "^2.2.1",

package/src/TestComponents/TextExperimental/StandardUsage.tsx

@@ -1,83 +1,30 @@
 import * as React from 'react';
-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 { View } from 'react-native';
+import { Text } 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 = () => {
-  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>
-      );
-  }
+  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>
+  );
 };

package/src/TestComponents/TextExperimental/TextExperimentalTest.tsx

@@ -5,6 +5,7 @@ import { PressableUsage } from './PressableUsage';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { E2EExperimentalTextTest } from './ExperimentalTextE2ETest';
 import { EXPERIMENTAL_TEXT_TESTPAGE } from './consts';
+import { V2Usage } from './V2Usage';
 
 const textSections: TestSection[] = [
   {
@@ -12,6 +13,10 @@ const textSections: TestSection[] = [
     testID: EXPERIMENTAL_TEXT_TESTPAGE,
     component: StandardUsage,
   },
+  {
+    name: 'V2 Usage',
+    component: V2Usage,
+  },
   {
     name: 'Customize Usage',
     component: CustomizeUsage,

package/src/TestComponents/TextExperimental/V2Usage.ios.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { Stack } from '@fluentui-react-native/stack';
+import { stackStyle } from '../Common/styles';
+import {
+  Body1,
+  Body1Strong,
+  Body2,
+  Body2Strong,
+  Caption1,
+  Caption1Strong,
+  Caption2,
+  Display,
+  LargeTitle,
+  Title1,
+  Title2,
+  Title3,
+} from '@fluentui-react-native/text';
+
+export const V2Usage: React.FunctionComponent = () => {
+  return (
+    <View>
+      <Stack style={stackStyle} gap={5}>
+        <Caption2>Caption2</Caption2>
+        <Caption1>Caption1</Caption1>
+        <Caption1Strong>Caption1Strong</Caption1Strong>
+        <Body2>Body2</Body2>
+        <Body2Strong>Body2Strong</Body2Strong>
+        <Body1>Body1</Body1>
+        <Body1Strong>Body1Strong</Body1Strong>
+        <Title3>Title3</Title3>
+        <Title2>Title2</Title2>
+        <Title1>Title1</Title1>
+        <LargeTitle>LargeTitle</LargeTitle>
+        <Display>Display</Display>
+      </Stack>
+    </View>
+  );
+};

package/src/TestComponents/TextExperimental/V2Usage.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Platform, Text } from 'react-native';
+
+export const V2Usage: React.FunctionComponent = () => {
+  return <Text>V2 usage is not yet supported for platform &quot;{Platform.OS}&quot;.</Text>;
+};

package/src/TestComponents/TextExperimental/V2Usage.win32.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { Stack } from '@fluentui-react-native/stack';
+import { stackStyle } from '../Common/styles';
+import {
+  Body1,
+  Body1Strong,
+  Body2,
+  Body2Strong,
+  Caption1,
+  Display,
+  LargeTitle,
+  Subtitle1,
+  Subtitle1Strong,
+  Subtitle2,
+  Subtitle2Strong,
+  Title1,
+  Title1Strong,
+} from '@fluentui-react-native/text';
+
+export 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>
+  );
+};