[Win32] TextProps from rn-win32 should export win32 specific properties (#12835)

* TextProps from rn-win32 should export win32 specific properties

* Change files

* fix

* Remove TextWin32

* Replace TextWin32 usage in tests

* fix

Author: acoates-ms

change/@office-iss-react-native-win32-77fbace5-850a-4837-8b41-13cb49e58f69.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "TextProps from rn-win32 should export win32 specific properties",
+  "packageName": "@office-iss/react-native-win32",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/@office-iss/react-native-win32-tester/src/js/components/TextWin32Test.tsx

@@ -1,57 +1,57 @@
 'use strict';
 import React from 'react'
-import { Button, TextWin32, View, ViewWin32 } from 'react-native';
+import { Button, Text, View, ViewWin32 } from 'react-native';
 
 // Disabling no-jsx-lambda so functional components are more convenient to use
 
 const TextRunsTest: React.FC<{}> = () => {
   return (
     <View focusable>
-      <TextWin32>
-        <TextWin32>Text With </TextWin32>
-        <TextWin32>Multiple Text </TextWin32>
-        <TextWin32>Children [Runs]</TextWin32>
-      </TextWin32>
+      <Text>
+        <Text>Text With </Text>
+        <Text>Multiple Text </Text>
+        <Text>Children [Runs]</Text>
+      </Text>
     </View>
   );
 };
 
 const FocusableTextTest: React.FC<{}> = () => {
   return (
     <ViewWin32>
-      <TextWin32 focusable>This TextWin32 demonstrates focusable</TextWin32>
+      <Text focusable>This Text demonstrates focusable</Text>
     </ViewWin32>
   );
 };
 
 const SelectableTextTest: React.FC<{}> = () => {
   return (
     <ViewWin32>
-      <TextWin32 selectable>This TextWin32 demonstrates selectable</TextWin32>
+      <Text selectable>This Text demonstrates selectable</Text>
     </ViewWin32>
   );
 };
 
 const TextStyleTest: React.FC<{}> = () => {
   return (
     <ViewWin32>
-      <TextWin32 textStyle={'MediumBold'}>MediumBold TextStyle</TextWin32>
+      <Text textStyle={'MediumBold'}>MediumBold TextStyle</Text>
     </ViewWin32>
   );
 };
 
 const TextAcessibilityTest: React.FC<{}> = () => {
   return (
     <ViewWin32>
-      <TextWin32 accessibilityDescription="A11y description" >This TextWin32 text with accessibilityDescription</TextWin32>
+      <Text accessibilityDescription="A11y description" >This Text text with accessibilityDescription</Text>
     </ViewWin32>
   );
 };
 
 const TooltipTextTest: React.FC<{}> = () => {
   return (
     <ViewWin32>
-      <TextWin32 tooltip="Example Tooltip">This TextWin32 demonstrates a tooltip</TextWin32>
+      <Text tooltip="Example Tooltip">This Text demonstrates a tooltip</Text>
     </ViewWin32>
   );
 };
@@ -78,17 +78,17 @@ const TextPromotionTest: React.FC<{}> = () => {
             setFocusabilityState(FocusabilityState.Selectable);
           }
         }}  />
-      <TextWin32
+      <Text
         focusable={focusabilityState === FocusabilityState.Focusable}
         selectable={focusabilityState === FocusabilityState.Selectable}
       >
         This text is currently...
-      </TextWin32>
-      <TextWin32>
+      </Text>
+      <Text>
         {(focusabilityState === FocusabilityState.NoFocus) ? 'No Focusability' : 
          (focusabilityState === FocusabilityState.Focusable) ? 'Focusable' :
          'Selectable'}
-      </TextWin32>
+      </Text>
     </ViewWin32>
   );
 };
@@ -98,18 +98,18 @@ const BlurringAndFocusingTextTest: React.FC<{}> = () => {
   const [isSelectableFocused, setIsSelectableFocused] = React.useState(false);
   return (
     <View>
-      <TextWin32
+      <Text
         focusable
         onBlur={() => setIsFocusableFocused(false)}
-        onFocus={() => setIsFocusableFocused(true)}>Focusable text is focused:</TextWin32>
-        <TextWin32
-        textStyle={isFocusableFocused ? 'MediumBold' : 'MediumStandard'}>{isFocusableFocused ? 'true' : 'false'}</TextWin32>
-      <TextWin32
+        onFocus={() => setIsFocusableFocused(true)}>Focusable text is focused:</Text>
+        <Text
+        textStyle={isFocusableFocused ? 'MediumBold' : 'MediumStandard'}>{isFocusableFocused ? 'true' : 'false'}</Text>
+      <Text
         selectable
         onBlur={() => setIsSelectableFocused(false)}
-        onFocus={() => setIsSelectableFocused(true)}>Selectable text is focused:</TextWin32>
-        <TextWin32
-        textStyle={isSelectableFocused ? 'MediumBold' : 'MediumStandard'}>{isSelectableFocused ? 'true' : 'false'}</TextWin32>
+        onFocus={() => setIsSelectableFocused(true)}>Selectable text is focused:</Text>
+        <Text
+        textStyle={isSelectableFocused ? 'MediumBold' : 'MediumStandard'}>{isSelectableFocused ? 'true' : 'false'}</Text>
     </View>
   );
 };

packages/@office-iss/react-native-win32-tester/src/js/examples-win32/Accessibility/AccessibilityExampleWin32.tsx

@@ -10,7 +10,7 @@ import {
   ListRenderItemInfo,
 } from 'react-native';
 import { ViewWin32 } from '@office-iss/react-native-win32';
-import { IHandledKeyboardEvent, Pressable, TextWin32 } from '@office-iss/react-native-win32';
+import { IHandledKeyboardEvent, Pressable } from '@office-iss/react-native-win32';
 
 const styles = StyleSheet.create({
   border: {
@@ -135,14 +135,14 @@ class ButtonExample extends React.Component<{}, IFocusableComponentState & IExpa
 const HeadingLevelExample: React.FunctionComponent = () => {
   return (
     <ViewWin32>
-      <TextWin32 accessible accessibilityRole="header" accessibilityLevel={1} style={styles.heading}>Paragraph Title</TextWin32>
-      <TextWin32>The above heading level should be heading level 1.</TextWin32>
-      <TextWin32 accessible accessibilityRole="header" style={styles.heading}>Second Paragraph Title</TextWin32>
-      <TextWin32>The above heading has no level set. It should default to heading level 2.</TextWin32>
-      <TextWin32 accessible accessibilityLevel={1} style={styles.heading}>Third Paragraph Title</TextWin32>
-      <TextWin32>The above heading does not use the "header" role but has a level set. Since the "header" role 
+      <Text accessible accessibilityRole="header" accessibilityLevel={1} style={styles.heading}>Paragraph Title</Text>
+      <Text>The above heading level should be heading level 1.</Text>
+      <Text accessible accessibilityRole="header" style={styles.heading}>Second Paragraph Title</Text>
+      <Text>The above heading has no level set. It should default to heading level 2.</Text>
+      <Text accessible accessibilityLevel={1} style={styles.heading}>Third Paragraph Title</Text>
+      <Text>The above heading does not use the "header" role but has a level set. Since the "header" role 
         is not set, the heading level should be set to none and it will not be read as a header.
-      </TextWin32>
+      </Text>
     </ViewWin32>
   );
 };
@@ -244,7 +244,7 @@ const SelectionItemComponent: React.FunctionComponent<ISelectionItemComponentPro
         onAccessibilityAction={_onAccessibilityAction}
         onAccessibilityTap={_onPress}
       >
-        <TextWin32>{props.value.toString()}</TextWin32>
+        <Text>{props.value.toString()}</Text>
       </ViewWin32>
     </Pressable>
   );
@@ -372,7 +372,7 @@ const SingleSelectionItemComponent: React.FunctionComponent<ISelectionItemCompon
           (props.isSelected) ? {backgroundColor: props.color} : {},
           (hasFocus) ? styles.border : {}]}
       >
-        <TextWin32>{props.value.toString()}</TextWin32>
+        <Text>{props.value.toString()}</Text>
       </ViewWin32>
   );
 

packages/@office-iss/react-native-win32/overrides.json

@@ -114,14 +114,6 @@
       "baseFile": "packages/react-native/Libraries/Components/ScrollView/ScrollView.js",
       "baseHash": "a842009ee0d0d9ee5ee16e88ff25b9a45f38b667"
     },
-    {
-      "type": "platform",
-      "file": "src-win/Libraries/Components/Text/TextWin32.Props.ts"
-    },
-    {
-      "type": "platform",
-      "file": "src-win/Libraries/Components/Text/TextWin32.tsx"
-    },
     {
       "type": "platform",
       "file": "src-win/Libraries/Components/TextInput/Tests/TextInputTest.tsx"
@@ -436,6 +428,12 @@
       "baseFile": "packages/react-native/Libraries/StyleSheet/StyleSheet.js",
       "baseHash": "7c42da708bc5cf4e3135ae81a45dddae48e0bfec"
     },
+    {
+      "type": "derived",
+      "file": "src-win/Libraries/Text/Text.d.ts",
+      "baseFile": "packages/react-native/Libraries/Text/Text.d.ts",
+      "baseHash": "4b523469a5c8dcfe53749d1739ccf77c0106375e"
+    },
     {
       "type": "derived",
       "file": "src-win/Libraries/Text/Text.win32.js",

packages/@office-iss/react-native-win32/src-win/Libraries/Components/Button/ButtonWin32.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import RN = require('react-native');
 import type { IViewWin32Props } from '../View/ViewPropTypes';
-import type { ITextWin32Props } from '../Text/TextWin32.Props';
+import type { TextProps } from '../../Text/Text';
 import type { IButtonWin32Props } from './ButtonWin32.Props';
 
 const enum SelectState {
@@ -39,7 +39,7 @@ export class ButtonWin32 extends React.Component<IButtonWin32Props, IButtonWin32
       style: this.props.style as RN.StyleProp<RN.ViewStyle>,
     };
 
-    const textProps: ITextWin32Props = {
+    const textProps: TextProps = {
       textStyle: 'None',
     };
     if (this.props.color) {
@@ -48,7 +48,7 @@ export class ButtonWin32 extends React.Component<IButtonWin32Props, IButtonWin32
 
     return (
       <RN.ViewWin32 {...viewProps}>
-        <RN.TextWin32 {...textProps}>{this.props.title}</RN.TextWin32>
+        <RN.Text {...textProps}>{this.props.title}</RN.Text>
       </RN.ViewWin32>
     );
   }