@fluentui-react-native/text 0.12.0 → 0.14.0

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;

package/src/deprecated/Text.types.ts

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

package/src/index.ts

@@ -1,3 +1,22 @@
-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';
+
+/* deprecated */
+export { textName } from './deprecated/Text.types';
+export type { ITextProps, ITextType } from './deprecated/Text.types';
+export { Text } from './deprecated/Text';

package/lib/Text.settings.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Text.settings.d.ts","sourceRoot":"","sources":["../src/Text.settings.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,SAAS,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAEtE,eAAO,MAAM,QAAQ,EAAE,gBAAgB,CAAC,SAAS,CAqBhD,CAAC"}

package/lib/Text.settings.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Text.settings.js","sourceRoot":"","sources":["../src/Text.settings.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAa,MAAM,cAAc,CAAC;AAInD,MAAM,CAAC,IAAM,QAAQ,GAAgC;IACnD;QACE,MAAM,EAAE;YACN,OAAO,EAAE,mBAAmB;YAC5B,KAAK,EAAE,UAAU;SAClB;QACD,IAAI,EAAE;YACJ,KAAK,EAAE;gBACL,MAAM,EAAE,CAAC;aACG;SACf;QACD,UAAU,EAAE;YACV,QAAQ,EAAE;gBACR,MAAM,EAAE;oBACN,KAAK,EAAE,cAAc;iBACtB;aACF;SACF;QACD,WAAW,EAAE,CAAC,UAAU,CAAC;KAC1B;IACD,QAAQ;CACT,CAAC"}

package/lib-commonjs/Text.settings.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Text.settings.d.ts","sourceRoot":"","sources":["../src/Text.settings.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,SAAS,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAEtE,eAAO,MAAM,QAAQ,EAAE,gBAAgB,CAAC,SAAS,CAqBhD,CAAC"}

package/lib-commonjs/Text.settings.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Text.settings.js","sourceRoot":"","sources":["../src/Text.settings.ts"],"names":[],"mappings":";;;AAAA,2CAAmD;AAItC,QAAA,QAAQ,GAAgC;IACnD;QACE,MAAM,EAAE;YACN,OAAO,EAAE,mBAAmB;YAC5B,KAAK,EAAE,UAAU;SAClB;QACD,IAAI,EAAE;YACJ,KAAK,EAAE;gBACL,MAAM,EAAE,CAAC;aACG;SACf;QACD,UAAU,EAAE;YACV,QAAQ,EAAE;gBACR,MAAM,EAAE;oBACN,KAAK,EAAE,cAAc;iBACtB;aACF;SACF;QACD,WAAW,EAAE,CAAC,UAAU,CAAC;KAC1B;IACD,qBAAQ;CACT,CAAC"}