@fluentui-react-native/text 0.12.1 → 0.13.0

package/lib-commonjs/deprecated/Text.types.d.ts

@@ -0,0 +1,17 @@
+import { FontTokens, FontVariantTokens, IForegroundColorTokens, IColorTokens } from '@fluentui-react-native/tokens';
+import { ITextProps as INativeTextProps } from '@fluentui-react-native/adapters';
+export declare const textName = "RNFText";
+/**
+ * Properties for fabric native text field, these extend the default props for text
+ */
+export declare type ITextProps<TBase = INativeTextProps> = TBase & FontVariantTokens & IForegroundColorTokens & {
+    disabled?: boolean;
+};
+export declare type ITextType<TBase = INativeTextProps> = {
+    props: ITextProps<TBase>;
+    tokens: FontTokens & IColorTokens;
+    slotProps: {
+        root: TBase;
+    };
+};
+//# sourceMappingURL=Text.types.d.ts.map

package/lib-commonjs/deprecated/Text.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.types.d.ts","sourceRoot":"","sources":["../../src/deprecated/Text.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACpH,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAEjF,eAAO,MAAM,QAAQ,YAAY,CAAC;AAElC;;GAEG;AACH,oBAAY,UAAU,CAAC,KAAK,GAAG,gBAAgB,IAAI,KAAK,GACtD,iBAAiB,GACjB,sBAAsB,GAAG;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEJ,oBAAY,SAAS,CAAC,KAAK,GAAG,gBAAgB,IAAI;IAChD,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IACzB,MAAM,EAAE,UAAU,GAAG,YAAY,CAAC;IAClC,SAAS,EAAE;QACT,IAAI,EAAE,KAAK,CAAC;KACb,CAAC;CACH,CAAC"}

package/lib-commonjs/deprecated/Text.types.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.textName = void 0;
+exports.textName = 'RNFText';
+//# sourceMappingURL=Text.types.js.map

package/lib-commonjs/deprecated/Text.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.types.js","sourceRoot":"","sources":["../../src/deprecated/Text.types.ts"],"names":[],"mappings":";;;AAGa,QAAA,QAAQ,GAAG,SAAS,CAAC"}

package/lib-commonjs/index.d.ts

@@ -1,4 +1,7 @@
-export { textName } from './Text.types';
-export type { ITextProps, ITextType } from './Text.types';
-export { Text } from './Text';
+export { Text as TextV1 } from './Text';
+export type { textName as textNameV1, TextProps, TextTokens } from './Text.types';
+export { Caption1, Body1, Body1Strong, Body2, Body2Strong, Subtitle1, Subtitle1Strong, Subtitle2, Subtitle2Strong, Title1, Title1Strong, LargeTitle, Display, } from './Variants';
+export { textName } from './deprecated/Text.types';
+export type { ITextProps, ITextType } from './deprecated/Text.types';
+export { Text } from './deprecated/Text';
 //# sourceMappingURL=index.d.ts.map

package/lib-commonjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,MAAM,QAAQ,CAAC;AACxC,YAAY,EAAE,QAAQ,IAAI,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAClF,OAAO,EACL,QAAQ,EACR,KAAK,EACL,WAAW,EACX,KAAK,EACL,WAAW,EACX,SAAS,EACT,eAAe,EACf,SAAS,EACT,eAAe,EACf,MAAM,EACN,YAAY,EACZ,UAAU,EACV,OAAO,GACR,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC"}

package/lib-commonjs/index.js

@@ -1,8 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Text = exports.textName = void 0;
-var Text_types_1 = require("./Text.types");
-Object.defineProperty(exports, "textName", { enumerable: true, get: function () { return Text_types_1.textName; } });
+exports.Text = exports.textName = exports.Display = exports.LargeTitle = exports.Title1Strong = exports.Title1 = exports.Subtitle2Strong = exports.Subtitle2 = exports.Subtitle1Strong = exports.Subtitle1 = exports.Body2Strong = exports.Body2 = exports.Body1Strong = exports.Body1 = exports.Caption1 = exports.TextV1 = void 0;
 var Text_1 = require("./Text");
-Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });
+Object.defineProperty(exports, "TextV1", { enumerable: true, get: function () { return Text_1.Text; } });
+var Variants_1 = require("./Variants");
+Object.defineProperty(exports, "Caption1", { enumerable: true, get: function () { return Variants_1.Caption1; } });
+Object.defineProperty(exports, "Body1", { enumerable: true, get: function () { return Variants_1.Body1; } });
+Object.defineProperty(exports, "Body1Strong", { enumerable: true, get: function () { return Variants_1.Body1Strong; } });
+Object.defineProperty(exports, "Body2", { enumerable: true, get: function () { return Variants_1.Body2; } });
+Object.defineProperty(exports, "Body2Strong", { enumerable: true, get: function () { return Variants_1.Body2Strong; } });
+Object.defineProperty(exports, "Subtitle1", { enumerable: true, get: function () { return Variants_1.Subtitle1; } });
+Object.defineProperty(exports, "Subtitle1Strong", { enumerable: true, get: function () { return Variants_1.Subtitle1Strong; } });
+Object.defineProperty(exports, "Subtitle2", { enumerable: true, get: function () { return Variants_1.Subtitle2; } });
+Object.defineProperty(exports, "Subtitle2Strong", { enumerable: true, get: function () { return Variants_1.Subtitle2Strong; } });
+Object.defineProperty(exports, "Title1", { enumerable: true, get: function () { return Variants_1.Title1; } });
+Object.defineProperty(exports, "Title1Strong", { enumerable: true, get: function () { return Variants_1.Title1Strong; } });
+Object.defineProperty(exports, "LargeTitle", { enumerable: true, get: function () { return Variants_1.LargeTitle; } });
+Object.defineProperty(exports, "Display", { enumerable: true, get: function () { return Variants_1.Display; } });
+/* deprecated */
+var Text_types_1 = require("./deprecated/Text.types");
+Object.defineProperty(exports, "textName", { enumerable: true, get: function () { return Text_types_1.textName; } });
+var Text_2 = require("./deprecated/Text");
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_2.Text; } });
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,2CAAwC;AAA/B,sGAAA,QAAQ,OAAA;AAEjB,+BAA8B;AAArB,4FAAA,IAAI,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,+BAAwC;AAA/B,8FAAA,IAAI,OAAU;AAEvB,uCAcoB;AAblB,oGAAA,QAAQ,OAAA;AACR,iGAAA,KAAK,OAAA;AACL,uGAAA,WAAW,OAAA;AACX,iGAAA,KAAK,OAAA;AACL,uGAAA,WAAW,OAAA;AACX,qGAAA,SAAS,OAAA;AACT,2GAAA,eAAe,OAAA;AACf,qGAAA,SAAS,OAAA;AACT,2GAAA,eAAe,OAAA;AACf,kGAAA,MAAM,OAAA;AACN,wGAAA,YAAY,OAAA;AACZ,sGAAA,UAAU,OAAA;AACV,mGAAA,OAAO,OAAA;AAGT,gBAAgB;AAChB,sDAAmD;AAA1C,sGAAA,QAAQ,OAAA;AAEjB,0CAAyC;AAAhC,4FAAA,IAAI,OAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/text",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "description": "A cross-platform Text component using the Fluent Design System",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -24,7 +24,10 @@
   "dependencies": {
     "@uifabricshared/foundation-compose": "^1.12.1",
     "@fluentui-react-native/adapters": ">=0.9.0 <1.0.0",
-    "@fluentui-react-native/tokens": ">=0.16.0 <1.0.0"
+    "@fluentui-react-native/framework": "0.8.0",
+    "@fluentui-react-native/theme-tokens": ">=0.19.0 <1.0.0",
+    "@fluentui-react-native/tokens": ">=0.16.0 <1.0.0",
+    "tslib": "^2.3.1"
   },
   "devDependencies": {
     "@fluentui-react-native/eslint-config-rules": "^0.1.1",

package/src/Text.tsx

@@ -1,19 +1,109 @@
-import { textName, ITextType } from './Text.types';
-import { compose } from '@uifabricshared/foundation-compose';
-import { Text as RNText } from 'react-native';
-import { filterTextProps } from '@fluentui-react-native/adapters';
-import { foregroundColorTokens, textTokens } from '@fluentui-react-native/tokens';
-import { settings } from './Text.settings';
+/** @jsx withSlots */
+import {
+  fontStyles,
+  withSlots,
+  UseTokens,
+  useFluentTheme,
+  mergeStyles,
+  compressible,
+  patchTokens,
+  FontWeightValue,
+} from '@fluentui-react-native/framework';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import { I18nManager, Platform, Text as RNText } from 'react-native';
+import { textName, TextProps, TextTokens } from './Text.types';
+import { useTextTokens } from './TextTokens';
+import React from 'react';
 
-export const Text = compose<ITextType>({
-  displayName: textName,
-  settings,
-  slots: {
-    root: { slotType: RNText, filter: filterTextProps },
-  },
-  styles: {
-    root: [textTokens, foregroundColorTokens],
-  },
-});
+export const Text = compressible<TextProps, TextTokens>((props: TextProps, useTokens: UseTokens<TextTokens>) => {
+  // split out color and variant from props
+  const {
+    align,
+    block,
+    color,
+    font,
+    italic,
+    onAccessibilityTap,
+    onKeyDown,
+    onPress,
+    size,
+    strikethrough,
+    style,
+    truncate = false,
+    underline,
+    variant,
+    weight,
+    wrap = true,
+    ...rest
+  } = props;
+  const theme = useFluentTheme();
+  // get the tokens from the theme
+  let [tokens, cache] = useTokens(theme);
+
+  const textAlign = I18nManager.isRTL
+    ? align === 'start'
+      ? 'right'
+      : align === 'end'
+      ? 'left'
+      : align
+    : align === 'start'
+    ? 'left'
+    : align === 'end'
+    ? 'right'
+    : align;
+
+  const onAccTap = React.useCallback(
+    (event?) => {
+      onAccessibilityTap ? onAccessibilityTap() : onPress(event);
+    },
+    [onPress, onAccessibilityTap],
+  );
+
+  // override tokens from props
+  [tokens, cache] = patchTokens(tokens, cache, {
+    color,
+    variant,
+    fontFamily: font == 'base' ? 'primary' : font,
+    fontSize: globalTokens.font.size[size],
+    fontWeight: globalTokens.font.weight[weight] as FontWeightValue,
+    // leave it undefined for tokens to be set by user
+    fontStyle: italic ? 'italic' : undefined,
+    textAlign: textAlign,
+    textDecorationLine:
+      underline && strikethrough ? 'underline line-through' : underline ? 'underline' : strikethrough ? 'line-through' : undefined,
+  });
+
+  // now build the text style from tokens that can be shared between different Text instances
+  const [tokenStyle] = cache(
+    () => ({
+      margin: 0,
+      color: tokens.color,
+      fontStyle: tokens.fontStyle,
+      textAlign: tokens.textAlign,
+      textDecorationLine: tokens.textDecorationLine,
+      ...fontStyles.from(tokens, theme),
+    }),
+    ['color', 'fontStyle', 'textAlign', 'textDecorationLine', ...fontStyles.keys],
+  );
+
+  // return a continuation function that allows this text to be compressed
+  return (extra: TextProps, children: React.ReactNode) => {
+    const mergedProps = {
+      numberOfLines: truncate || !wrap ? 1 : 0,
+      onKeyDown: Platform.OS === (('win32' as any) || 'windows') ? onKeyDown : undefined,
+      ...(Platform.OS === (('win32' as any) || 'windows') && { onAccessibilityTap: onAccTap }),
+      onPress,
+      ...rest,
+      ...extra,
+      style: mergeStyles(tokenStyle, props.style, extra?.style),
+    };
+    return (
+      <RNText ellipsizeMode={!wrap && !truncate ? 'clip' : 'tail'} {...mergedProps}>
+        {children}
+      </RNText>
+    );
+  };
+}, useTextTokens);
+Text.displayName = textName;
 
 export default Text;

package/src/Text.types.ts

@@ -1,21 +1,97 @@
-import { FontTokens, FontVariantTokens, IForegroundColorTokens, IColorTokens } from '@fluentui-react-native/tokens';
-import { ITextProps as INativeTextProps } from '@fluentui-react-native/adapters';
+import { FontTokens, FontVariantTokens, IForegroundColorTokens } from '@fluentui-react-native/framework';
+import { ITextProps } from '@fluentui-react-native/adapters';
+import { ColorValue, TextStyle } from 'react-native';
 
-export const textName = 'RNFText';
+export const textName = 'Text';
 
 /**
- * Properties for fabric native text field, these extend the default props for text
+ * Text tokens, these are the internally configurable values for Text elements. In particular these
+ * drive decisions on how to build the styles
  */
-export type ITextProps<TBase = INativeTextProps> = TBase &
-  FontVariantTokens &
-  IForegroundColorTokens & {
-    disabled?: boolean;
-  };
+export type TextTokens = Omit<FontTokens, 'fontFamily'> & IForegroundColorTokens & Omit<TextStyle, 'fontSize' | 'fontWeight' | 'color'>;
+
+export type TextAlign = 'start' | 'center' | 'end' | 'justify';
+export type TextFont = 'base' | 'monospace' | 'numeric';
+export type TextSize = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;
+export type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold';
+
+/**
+ * Text props, based off of the standard react-native TextProps with some new extensions
+ */
+export type TextProps<TBase = ITextProps> = TBase &
+  FontVariantTokens & {
+    /**
+     * foreground text color
+     */
+    color?: ColorValue;
+
+    /**
+     * Aligns text based on the parent container.
+     *
+     * @defaultValue start
+     */
+    align?: TextAlign;
+
+    /**
+     * Applies a block display for the content.
+     *
+     * @defaultValue false
+     */
+    block?: boolean;
+
+    /**
+     * Applies the font family to the content.
+     *
+     * @defaultValue base
+     */
+    font?: TextFont;
+
+    /**
+     * Applies the italic font style to the content.
+     *
+     * @defaultValue false
+     */
+    italic?: boolean;
+
+    /**
+     * Applies the strikethrough text decoration to the content.
+     *
+     * @defaultValue false
+     */
+    strikethrough?: boolean;
+
+    /**
+     * Applies font size and line height based on the theme tokens.
+     *
+     * @defaultValue 300
+     */
+    size?: TextSize;
+
+    /**
+     * Truncate overflowing text for block displays.
+     *
+     * @defaultValue false
+     */
+    truncate?: boolean;
+
+    /**
+     * Applies the underline text decoration to the content.
+     *
+     * @defaultValue false
+     */
+    underline?: boolean;
+
+    /**
+     * Applies font weight to the content.
+     *
+     * @defaultValue regular
+     */
+    weight?: TextWeight;
 
-export type ITextType<TBase = INativeTextProps> = {
-  props: ITextProps<TBase>;
-  tokens: FontTokens & IColorTokens;
-  slotProps: {
-    root: TBase;
+    /**
+     * Wraps the text content on white spaces.
+     *
+     * @defaultValue true
+     */
+    wrap?: boolean;
   };
-};

package/src/TextTokens.ts

@@ -0,0 +1,10 @@
+import { buildUseTokens } from '@fluentui-react-native/framework';
+import { textName, TextTokens } from './Text.types';
+
+export const useTextTokens = buildUseTokens<TextTokens>(
+  (t) => ({
+    variant: 'secondaryStandard',
+    color: t.colors.bodyText,
+  }),
+  textName,
+);

package/src/Variants.ts

@@ -0,0 +1,16 @@
+import { Text } from './Text';
+
+// stubbed out for other platforms for which variant alias tokens aren't defined
+export const Caption1 = Text;
+export const Body1 = Text;
+export const Body1Strong = Text;
+export const Body2 = Text;
+export const Body2Strong = Text;
+export const Subtitle1 = Text;
+export const Subtitle1Strong = Text;
+export const Subtitle2 = Text;
+export const Subtitle2Strong = Text;
+export const Title1 = Text;
+export const Title1Strong = Text;
+export const LargeTitle = Text;
+export const Display = Text;

package/src/Variants.win32.ts

@@ -0,0 +1,41 @@
+import { Text } from './Text';
+
+export const Caption1 = Text.customize({
+  variant: 'caption1',
+});
+export const Body1 = Text.customize({
+  variant: 'body1',
+});
+export const Body1Strong = Text.customize({
+  variant: 'body1Strong',
+});
+export const Body2 = Text.customize({
+  variant: 'body2',
+});
+export const Body2Strong = Text.customize({
+  variant: 'body2Strong',
+});
+export const Subtitle1 = Text.customize({
+  variant: 'subtitle1',
+});
+export const Subtitle1Strong = Text.customize({
+  variant: 'subtitle1Strong',
+});
+export const Subtitle2 = Text.customize({
+  variant: 'subtitle2',
+});
+export const Subtitle2Strong = Text.customize({
+  variant: 'subtitle2Strong',
+});
+export const Title1 = Text.customize({
+  variant: 'title1',
+});
+export const Title1Strong = Text.customize({
+  variant: 'title1Strong',
+});
+export const LargeTitle = Text.customize({
+  variant: 'largeTitle',
+});
+export const Display = Text.customize({
+  variant: 'display',
+});

package/src/__tests__/Text.test.tsx

@@ -1,74 +1,69 @@
 import * as React from 'react';
-import { Text } from '..';
+import { Text } from '../Text';
 import * as renderer from 'react-test-renderer';
-import { checkReRender, checkRenderConsistency } from '@fluentui-react-native/test-tools';
+import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
 
-it('Text default', () => {
-  const tree = renderer.create(<Text>Text default</Text>).toJSON();
-  expect(tree).toMatchSnapshot();
-});
+describe('Text component tests', () => {
+  it('Text default', () => {
+    const tree = renderer.create(<Text>Text default</Text>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 
-it('Text all props', () => {
-  const tree = renderer
-    .create(
-      <Text disabled variant="bodyStandard">
-        All props
-      </Text>,
-    )
-    .toJSON();
-  expect(tree).toMatchSnapshot();
-});
+  it('Text all props', () => {
+    const tree = renderer.create(<Text variant="bodyStandard">All props</Text>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 
-it('Text all tokens', () => {
-  const BoldText = Text.customize({
-    tokens: {
+  it('Text all tokens', () => {
+    const BoldText = Text.customize({
       fontFamily: 'Wingdings',
       fontWeight: '900',
       fontSize: 20,
-    },
+    });
+    const tree = renderer.create(<BoldText>All tokens</BoldText>).toJSON();
+    expect(tree).toMatchSnapshot();
   });
-  const tree = renderer.create(<BoldText>All tokens</BoldText>).toJSON();
-  expect(tree).toMatchSnapshot();
-});
 
-it('Text simple rendering does not invalidate styling', () => {
-  checkRenderConsistency(() => <Text>Default</Text>);
-  checkRenderConsistency(() => <Text disabled>Default</Text>);
-  checkRenderConsistency(() => <Text variant="headerStandard">Default</Text>);
-});
+  it('Text simple rendering does not invalidate styling', () => {
+    checkRenderConsistency(() => <Text>Default</Text>);
+    checkRenderConsistency(() => <Text variant="headerStandard">Default</Text>);
+  });
 
-it('Text re-renders correctly', () => {
-  checkReRender(() => <Text>Default</Text>);
-  checkReRender(() => <Text disabled>Default</Text>);
-  checkReRender(() => <Text variant="headerStandard">Default</Text>);
-});
+  it('Text re-renders correctly', () => {
+    checkReRender(() => <Text>Default</Text>);
+    checkReRender(() => <Text variant="headerStandard">Default</Text>);
+  });
 
-it('Text shares produced styles across multiple renders', () => {
-  const style = { color: 'black' };
-  checkRenderConsistency(() => <Text style={style}>Default</Text>);
-  checkRenderConsistency(() => (
-    <Text style={style} disabled>
-      Default
-    </Text>
-  ));
-  checkRenderConsistency(() => (
-    <Text style={style} variant="headerStandard">
-      Default
-    </Text>
-  ));
-});
+  it('Text shares produced styles across multiple renders', () => {
+    const style = { color: 'black' };
+    checkRenderConsistency(() => <Text style={style}>Default</Text>);
+    checkRenderConsistency(() => (
+      <Text style={style} variant="headerStandard">
+        Default
+      </Text>
+    ));
+  });
 
-it('Text re-renders correctly with style', () => {
-  const style = { color: 'blue' };
-  checkReRender(() => <Text style={style}>Default</Text>);
-  checkReRender(() => (
-    <Text style={style} disabled>
-      Default
-    </Text>
-  ));
-  checkReRender(() => (
-    <Text style={style} variant="headerStandard">
-      Default
-    </Text>
-  ));
+  it('Text re-renders correctly with style', () => {
+    const style = { color: 'blue' };
+    checkReRender(() => <Text style={style}>Default</Text>);
+    checkReRender(() => (
+      <Text style={style} variant="headerStandard">
+        Default
+      </Text>
+    ));
+  });
+
+  it('Text variants render correctly with style', () => {
+    const style = {
+      marginBottom: 8,
+      marginTop: 4,
+    };
+    const tree = renderer.create(
+      <Text variant="heroLargeSemibold" color="blue" style={style}>
+        Header Text
+      </Text>,
+    );
+    expect(tree).toMatchSnapshot();
+  });
 });

package/src/__tests__/__snapshots__/Text.test.tsx.snap

@@ -1,14 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Text all props 1`] = `
+exports[`Text component tests Text all props 1`] = `
 <Text
+  ellipsizeMode="tail"
+  numberOfLines={0}
   style={
     Object {
-      "color": "#a19f9d",
+      "color": "#323130",
       "fontFamily": "Segoe UI",
       "fontSize": 14,
+      "fontStyle": undefined,
       "fontWeight": "400",
       "margin": 0,
+      "textAlign": undefined,
+      "textDecorationLine": undefined,
     }
   }
 >
@@ -16,15 +21,20 @@ exports[`Text all props 1`] = `
 </Text>
 `;
 
-exports[`Text all tokens 1`] = `
+exports[`Text component tests Text all tokens 1`] = `
 <Text
+  ellipsizeMode="tail"
+  numberOfLines={0}
   style={
     Object {
       "color": "#323130",
       "fontFamily": "Wingdings",
       "fontSize": 20,
+      "fontStyle": undefined,
       "fontWeight": "900",
       "margin": 0,
+      "textAlign": undefined,
+      "textDecorationLine": undefined,
     }
   }
 >
@@ -32,18 +42,43 @@ exports[`Text all tokens 1`] = `
 </Text>
 `;
 
-exports[`Text default 1`] = `
+exports[`Text component tests Text default 1`] = `
 <Text
+  ellipsizeMode="tail"
+  numberOfLines={0}
   style={
     Object {
       "color": "#323130",
       "fontFamily": "Segoe UI",
       "fontSize": 12,
+      "fontStyle": undefined,
       "fontWeight": "400",
       "margin": 0,
+      "textAlign": undefined,
+      "textDecorationLine": undefined,
     }
   }
 >
   Text default
 </Text>
 `;
+
+exports[`Text component tests Text variants render correctly with style 1`] = `
+<Text
+  ellipsizeMode="tail"
+  numberOfLines={0}
+  style={
+    Object {
+      "color": "blue",
+      "fontFamily": "Segoe UI",
+      "fontSize": 40,
+      "fontWeight": "600",
+      "margin": 0,
+      "marginBottom": 8,
+      "marginTop": 4,
+    }
+  }
+>
+  Header Text
+</Text>
+`;

package/src/deprecated/Text.tsx

@@ -0,0 +1,19 @@
+import { textName, ITextType } from './Text.types';
+import { compose } from '@uifabricshared/foundation-compose';
+import { Text as RNText } from 'react-native';
+import { filterTextProps } from '@fluentui-react-native/adapters';
+import { foregroundColorTokens, textTokens } from '@fluentui-react-native/tokens';
+import { settings } from './Text.settings';
+
+export const Text = compose<ITextType>({
+  displayName: textName,
+  settings,
+  slots: {
+    root: { slotType: RNText, filter: filterTextProps },
+  },
+  styles: {
+    root: [textTokens, foregroundColorTokens],
+  },
+});
+
+export default Text;