@fluentui-react-native/text 0.12.0 → 0.14.0

package/CHANGELOG.json

@@ -2,7 +2,52 @@
   "name": "@fluentui-react-native/text",
   "entries": [
     {
-      "date": "Thu, 14 Jul 2022 18:07:20 GMT",
+      "date": "Fri, 05 Aug 2022 23:21:34 GMT",
+      "tag": "@fluentui-react-native/text_v0.14.0",
+      "version": "0.14.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "email not defined",
+            "package": "@fluentui-react-native/text",
+            "commit": "4716cf81c971eed5f609a861c128dcfc4b2f0b46",
+            "comment": "Update out of date documentation (#1964)"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 29 Jul 2022 21:04:39 GMT",
+      "tag": "@fluentui-react-native/text_v0.13.0",
+      "version": "0.13.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "email not defined",
+            "package": "@fluentui-react-native/text",
+            "commit": "bee467a2f783a35346bcb76687c200bd372a6086",
+            "comment": "move text from experimental to components dir"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 26 Jul 2022 19:30:23 GMT",
+      "tag": "@fluentui-react-native/text_v0.12.1",
+      "version": "0.12.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/text",
+            "comment": "Bump @uifabricshared/foundation-compose to v1.12.1",
+            "commit": "138a3ae19c80f405dd69525b808c627ef83ee0a0"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 14 Jul 2022 18:09:49 GMT",
       "tag": "@fluentui-react-native/text_v0.12.0",
       "version": "0.12.0",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @fluentui-react-native/text
 
-This log was last generated on Thu, 14 Jul 2022 18:07:20 GMT and should not be manually modified.
+This log was last generated on Fri, 05 Aug 2022 23:21:34 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 0.14.0
+
+Fri, 05 Aug 2022 23:21:34 GMT
+
+### Minor changes
+
+- Update out of date documentation (#1964) (email not defined)
+
+## 0.13.0
+
+Fri, 29 Jul 2022 21:04:39 GMT
+
+### Minor changes
+
+- move text from experimental to components dir (email not defined)
+
+## 0.12.1
+
+Tue, 26 Jul 2022 19:30:23 GMT
+
+### Patches
+
+- Bump @uifabricshared/foundation-compose to v1.12.1
+
 ## 0.12.0
 
-Thu, 14 Jul 2022 18:07:20 GMT
+Thu, 14 Jul 2022 18:09:49 GMT
 
 ### Minor changes
 

package/MIGRATION.md

@@ -0,0 +1,98 @@
+# Text Migration
+
+## Migration from v0 Text
+
+In the short term, the new `Text` control is named `TextV1` while it clashes with the existing older control. Once we deprecate the old control, it will be renamed to `Text`. It may be useful to rename the control to `Text` using the import syntax to simplify the rename:
+
+```ts
+import { TextV1 as Text } from '@fluentui-react-native/text';
+```
+
+### Component renames
+
+| v0 `Text`                   | v1 `Text`                   |
+| --------------------------- | --------------------------- |
+| `<Text>Hello, World</Text>` | `<Text>Hello, World</Text>` |
+
+### Props unchanged
+
+- Any props that are part of `ViewProps` and `TextProps` from `react-native`
+- `color`
+
+### Props changed
+
+- `variant` => Prop name remains identical, but will support a different collection of named font variants. Newly defined v1 variants can be found in [Typography.types](../../theming/theme-types/src/Typography.types.ts) under theme-types.
+
+### Props added
+
+- `align`
+- `block`
+- `font`
+- `italic`
+- `strikethrough`
+- `size`
+- `truncate`
+- `underline`
+- `weight`
+- `wrap`
+
+### Props removed
+
+- `disabled` is not supported in the v1 Text
+
+### Tokens unchanged
+
+- Any props that are part of `FontTokens`, `IForegroundColorTokens`
+
+### Tokens changed
+
+- Global font tokens have been editted according to design token redlines
+
+| Token       | Win32         |
+| ----------- | ------------- |
+| Family      |               |
+| `Base`      | `SegoeUI`     |
+| `Monospace` | `Consolas`    |
+| `Numeric`   | `Bahnschrift` |
+| Size        |               |
+| `100`       | `10px`/`14px` |
+| `200`       | `12px`/`16px` |
+| `300`       | `14px`/`20px` |
+| `400`       | `16px`/`22px` |
+| `500`       | `20px`/`26px` |
+| `600`       | `24px`/`32px` |
+| `700`       | `28px`/`36px` |
+| `800`       | `32px`/`40px` |
+| `900`       | `40px`/`52px` |
+| `1000`      | `68px`/`92px` |
+| Weight      |               |
+| `Regular`   | `400`         |
+| `Medium`    | `500`         |
+| `Semibold`  | `600`         |
+| `Bold`      | `700`         |
+
+### Tokens not supported natively on win32
+
+- `lineHeight`
+- `letterSpacing`
+- `textDecorationColor`
+- `textShadowColor`
+- `textShadowOffset`
+- `textShadowRadius`
+- `textTransform`
+
+### Updating ThemeProvider
+
+If you are using the older theme provider `ThemeProvider` from `@uifabricshared/theming-react-native`, you will need to update the `ThemeProvider` to pull from `@fluentui-react-native/theme` to have the control work properly with themes. Please see [this page](../../../docs/pages/Guides/UpdateThemeProvider.md) for guidance.
+
+### Migrating customized Text
+
+Please see [this page](../../../docs/pages/Guides/UpdatingCustomize.md) for guidance on how to move from the old `customize` API to the new one.
+
+### Other Prop differences
+
+- `block` => On win32, instead of setting it as a boolean prop, block display is applied by default, and is overridden as inline when `<Text>` is wrapped by a parent `<Text>`.
+
+### Slot differences
+
+There are no slot differences for FURN `Text`

package/README.md

@@ -0,0 +1,5 @@
+# Text
+
+A cross-platform Text component using the Fluent Design System.
+
+Text V1 supported platforms: win32

package/SPEC.md

@@ -0,0 +1,235 @@
+# Text
+
+In the short term, the new `Text` control is named `TextV1` while it clashes with the existing older control. Once we deprecate the old control, it will be renamed to `Text`. It may be useful to rename the control to `Text` using the import syntax to simplify the rename:
+
+```ts
+import { TextV1 as Text } from '@fluentui-react-native/text';
+```
+
+FURN components that have imported from experimental-text now use the above syntax to use `TextV1`.
+
+## Background
+
+The `Text` component is for displaying text, and supports nesting, styling, and touch handling.
+
+## Requirements
+
+If using FURN's theming, the `Text` requires use of the `ThemeProvider` from `@fluentui-react-native/theme` to work properly with themes. Please see [this page](../../../docs/pages/Guides/UpdateThemeProvider.md) for information on updating your `ThemeProvider` if using the version from `@uifabricshared/theming-react-native`.
+
+## Sample Code
+
+Basic example:
+
+```jsx
+<Text>Hello World</Text>
+```
+More examples on the [Test pages for Text](../../../apps/fluent-tester/src/TestComponents/TextExperimental). Instructions on running the tester app can be found [here](../../../apps/fluent-tester/README.md).
+
+## Visual Examples
+
+Win32:
+
+![Underlined Text on win32 example](./assets/Text_example_underlined_win32.png)
+
+```jsx
+<Text underline>This line has been underlined and striked through</Text>
+```
+
+![Block Text on win32 example](./assets/Text_example_block_win32.png)
+
+```jsx
+<>
+  <Text>Every block of text gets its own line.</Text>
+  <Text>This is a new block</Text>
+</>
+```
+
+![Inline Text on win32 example](./assets/Text_example_inline_win32.png)
+
+```jsx
+<Text>
+  <Text>Text components inside a parent text component is inline text</Text>
+  <Text>This entire block is a RichLabel.</Text>
+</Text>
+```
+
+![Customized Text on win32 example](./assets/Text_example_customized_win32.png)
+
+```jsx
+const RedCaptionBold = Text.customize({ variant: 'captionStandard', fontWeight: '700', color: '#ff0000' });
+<RedCaptionBold>RedCaptionBold</RedCaptionBold>
+```
+
+![Text Variants on win32 example](./assets/Text_example_variants_win32.png)
+V1 `Text` component supports variant types that have preset font family, size, and weight values.
+
+```jsx
+<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>
+```
+
+![Pressable Text on win32 example](./assets/Text_example_pressable_win32.png)
+
+```jsx
+<Text variant={'bodyStandard'}>
+  Press{' '}
+  <Text
+  variant={'bodyStandard'}
+  color="blue"
+  keyDownEvents={handledNativeKeyboardEvents}
+  onPress={_onPress2}
+  onKeyDown={_onKeyDown2}
+  >
+  here
+  </Text>{' '}
+  to view an alert.
+  </Text>
+```
+
+## API
+
+The `Text` control is rendered as a `react-native` Text(`RNText`). However, `RNText`and `Text` do not align in their set of props entirely.
+
+### Props
+
+Below is the set of props the Text supports:
+
+```ts
+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;
+
+    /**
+     * Wraps the text content on white spaces.
+     *
+     * @defaultValue true
+     */
+    wrap?: boolean;
+  };
+
+8/1/22 Notes:
+
+- `block` => On win32, instead of setting it as a boolean prop, block display is applied by default, and is overridden as inline when `<Text>` is wrapped by a parent `<Text>`.
+
+- `font` => According to design token redlines, `font` prop is given a giant string with a delimiter of font families for each enum type (`base`/`numeric`/`monospace`), We currently don't have a way to deal with this fontFamily format. We only support a single font family for each font type.
+```
+
+### Styling Tokens
+
+Tokens can be used to customize the styling of the control by using the `customize` function on the `Text`. For more information on using the `customize` API, please see [this page](../../framework/composition/README.md). The `Text` has the following tokens:
+
+```ts
+export type TextTokens = FontTokens & IForegroundColorTokens & TextStyle;
+```
+
+## Behaviors
+
+### Pressable Text
+
+`Text` can be rendered as pressable.
+
+### Interaction
+
+#### Keyboard interaction
+
+The following is a set of keys that interact with the `Text` component:
+
+| Key     | Description                                                     |
+| ------- | --------------------------------------------------------------- |
+| `Tab`   | If `onPress` or `focusable` is set, component will gain focus.  |
+| `Space` | Executes the function passed into the `onPress` prop.           |
+
+#### Cursor interaction for Pressable Text
+
+- Cursor moves onto pressable text: Should immediately change the styling of the `Text` so that it appears to be hovered.
+- Cursor moves out of pressable text: Should immediately remove the hovered styling of the `Text`.
+- Mouse click: Should handle `onPress` event of `Text` and move focus to its target.
+
+#### Touch interaction
+
+The same behavior as above translated for touch events. This means that there is no equivalent for `onHoverIn` and `onHoverOut`, which makes it so that the hovered state cannot be accessed.
+
+## Accessibility
+
+### Expected behavior
+
+- Should mix in the accessibility props expected for a `Text` component.
+- Should be keyboard tabbable and focusable.
+- onAccessibilityTap defaults to onPress unless set otherwise

package/lib/Text.d.ts

@@ -1,5 +1,4 @@
-export declare const Text: import("@uifabricshared/foundation-compose").IComposeReturnType<import("./Text.types").ITextProps<import("@fluentui-react-native/adapters").ITextProps>, {
-    root: import("@fluentui-react-native/adapters").ITextProps;
-}, import("@fluentui-react-native/tokens").FontStyleTokens & import("@fluentui-react-native/tokens").FontVariantTokens & import("@fluentui-react-native/tokens").IForegroundColorTokens & import("@fluentui-react-native/tokens").IBackgroundColorTokens, object, object>;
+import { TextProps, TextTokens } from './Text.types';
+export declare const Text: import("@fluentui-react-native/use-tokens").CustomizableComponent<TextProps<import("@fluentui-react-native/adapters").ITextProps>, TextTokens, import("@fluentui-react-native/framework").Theme>;
 export default Text;
 //# sourceMappingURL=Text.d.ts.map

package/lib/Text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,IAAI;;yQASf,CAAC;AAEH,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAY,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI/D,eAAO,MAAM,IAAI,kMAwFA,CAAC;AAGlB,eAAe,IAAI,CAAC"}

package/lib/Text.js

@@ -1,18 +1,82 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+/** @jsx withSlots */
+import { fontStyles, withSlots, useFluentTheme, mergeStyles, compressible, patchTokens, } from '@fluentui-react-native/framework';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import { I18nManager, Platform, Text as RNText } from 'react-native';
 import { textName } 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 var Text = compose({
-    displayName: textName,
-    settings: settings,
-    slots: {
-        root: { slotType: RNText, filter: filterTextProps },
-    },
-    styles: {
-        root: [textTokens, foregroundColorTokens],
-    },
-});
+import { useTextTokens } from './TextTokens';
+import React from 'react';
+export var Text = compressible(function (props, useTokens) {
+    var _a;
+    // split out color and variant from props
+    var align = props.align, block = props.block, color = props.color, font = props.font, italic = props.italic, onAccessibilityTap = props.onAccessibilityTap, onKeyDown = props.onKeyDown, onPress = props.onPress, size = props.size, strikethrough = props.strikethrough, style = props.style, _b = props.truncate, truncate = _b === void 0 ? false : _b, underline = props.underline, variant = props.variant, weight = props.weight, _c = props.wrap, wrap = _c === void 0 ? true : _c, rest = __rest(props, ["align", "block", "color", "font", "italic", "onAccessibilityTap", "onKeyDown", "onPress", "size", "strikethrough", "style", "truncate", "underline", "variant", "weight", "wrap"]);
+    var theme = useFluentTheme();
+    // get the tokens from the theme
+    var _d = useTokens(theme), tokens = _d[0], cache = _d[1];
+    var textAlign = I18nManager.isRTL
+        ? align === 'start'
+            ? 'right'
+            : align === 'end'
+                ? 'left'
+                : align
+        : align === 'start'
+            ? 'left'
+            : align === 'end'
+                ? 'right'
+                : align;
+    var onAccTap = React.useCallback(function (event) {
+        onAccessibilityTap ? onAccessibilityTap() : onPress(event);
+    }, [onPress, onAccessibilityTap]);
+    // override tokens from props
+    _a = patchTokens(tokens, cache, {
+        color: color,
+        variant: variant,
+        fontFamily: font == 'base' ? 'primary' : font,
+        fontSize: globalTokens.font.size[size],
+        fontWeight: globalTokens.font.weight[weight],
+        // 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,
+    }), tokens = _a[0], cache = _a[1];
+    // now build the text style from tokens that can be shared between different Text instances
+    var tokenStyle = cache(function () { return (__assign({ margin: 0, color: tokens.color, fontStyle: tokens.fontStyle, textAlign: tokens.textAlign, textDecorationLine: tokens.textDecorationLine }, fontStyles.from(tokens, theme))); }, __spreadArray(['color', 'fontStyle', 'textAlign', 'textDecorationLine'], fontStyles.keys, true))[0];
+    // return a continuation function that allows this text to be compressed
+    return function (extra, children) {
+        var mergedProps = __assign(__assign(__assign(__assign(__assign({ numberOfLines: truncate || !wrap ? 1 : 0, onKeyDown: Platform.OS === ('win32' || 'windows') ? onKeyDown : undefined }, (Platform.OS === ('win32' || 'windows') && { onAccessibilityTap: onAccTap })), { onPress: onPress }), rest), extra), { style: mergeStyles(tokenStyle, props.style, extra === null || extra === void 0 ? void 0 : extra.style) });
+        return (withSlots(RNText, __assign({ ellipsizeMode: !wrap && !truncate ? 'clip' : 'tail' }, mergedProps), children));
+    };
+}, useTextTokens);
+Text.displayName = textName;
 export default Text;
 //# sourceMappingURL=Text.js.map

package/lib/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAa,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,oCAAoC,CAAC;AAC7D,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAClF,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,MAAM,CAAC,IAAM,IAAI,GAAG,OAAO,CAAY;IACrC,WAAW,EAAE,QAAQ;IACrB,QAAQ,UAAA;IACR,KAAK,EAAE;QACL,IAAI,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE;KACpD;IACD,MAAM,EAAE;QACN,IAAI,EAAE,CAAC,UAAU,EAAE,qBAAqB,CAAC;KAC1C;CACF,CAAC,CAAC;AAEH,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"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"}

package/lib/Text.types.d.ts

@@ -1,17 +1,83 @@
-import { FontTokens, FontVariantTokens, IForegroundColorTokens, IColorTokens } from '@fluentui-react-native/tokens';
-import { ITextProps as INativeTextProps } from '@fluentui-react-native/adapters';
-export declare const textName = "RNFText";
+import { FontTokens, FontVariantTokens, IForegroundColorTokens } from '@fluentui-react-native/framework';
+import { ITextProps } from '@fluentui-react-native/adapters';
+import { ColorValue, TextStyle } from 'react-native';
+export declare 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 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;
-    };
+export declare type TextTokens = Omit<FontTokens, 'fontFamily'> & IForegroundColorTokens & Omit<TextStyle, 'fontSize' | 'fontWeight' | 'color'>;
+export declare type TextAlign = 'start' | 'center' | 'end' | 'justify';
+export declare type TextFont = 'base' | 'monospace' | 'numeric';
+export declare type TextSize = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;
+export declare type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold';
+/**
+ * Text props, based off of the standard react-native TextProps with some new extensions
+ */
+export declare 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;
+    /**
+     * Wraps the text content on white spaces.
+     *
+     * @defaultValue true
+     */
+    wrap?: boolean;
 };
 //# sourceMappingURL=Text.types.d.ts.map