WordPress · gziolo · Apr 30, 2021 · Apr 28, 2021 · Apr 28, 2021 · Apr 28, 2021
@@ -1139,6 +1139,12 @@
 		"markdown_source": "../packages/components/src/tree-select/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "Truncate",
+		"slug": "truncate",
+		"markdown_source": "../packages/components/src/truncate/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "UnitControl",
 		"slug": "unit-control",

@@ -18,7 +18,7 @@ import { FlexItem, FlexBlock } from '../flex';
 import AllInputControl from './all-input-control';
 import InputControls from './input-controls';
 import BoxControlIcon from './icon';
-import Text from '../text';
+import { Text } from '../text';
 import LinkedButton from './linked-button';
 import Visualizer from './visualizer';
 import {

@@ -33,7 +33,12 @@ function Flex( props, forwardedRef ) {
  *
  * @example
  * ```jsx
- * import { Flex, FlexItem, FlexBlock, Text } from `@wordpress/components/ui`;
+ * import {
+ * 	__experimentalFlex as Flex,
+ * 	__experimentalFlexBlock as FlexBlock,
+ * 	__experimentalFlexItem as FlexItem,
+ * 	__experimentalText as Text
+ * } from `@wordpress/components`;
  *
  * function Example() {
  * 	return (

@@ -1,9 +1,8 @@
 /**
  * Internal dependencies
  */
-import Flex from '../flex';
-import FlexItem from '../flex-item';
-import { View } from '../../view';
+import { Flex, FlexItem } from '../';
+import { View } from '../../ui/view';
 
 export default {
 	component: Flex,

@@ -7,9 +7,7 @@ import { render } from '@testing-library/react';
  * Internal dependencies
  */
 import { View } from '../../ui/view';
-import Flex from '../flex';
-import FlexItem from '../flex-item';
-import FlexBlock from '../flex-block';
+import { Flex, FlexBlock, FlexItem } from '../';
 
 describe( 'props', () => {
 	let base;

@@ -102,7 +102,7 @@ export { default as Snackbar } from './snackbar';
 export { default as SnackbarList } from './snackbar/list';
 export { default as Spinner } from './spinner';
 export { default as TabPanel } from './tab-panel';
-export { default as __experimentalText } from './text';
+export { Text as __experimentalText } from './text';
 export { default as TextControl } from './text-control';
 export { default as TextareaControl } from './textarea-control';
 export { default as TextHighlight } from './text-highlight';
@@ -121,6 +121,7 @@ export {
 	TreeGridItem as __experimentalTreeGridItem,
 } from './tree-grid';
 export { default as TreeSelect } from './tree-select';
+export { Truncate as __experimentalTruncate } from './truncate';
 export { default as __experimentalUnitControl } from './unit-control';
 export { default as VisuallyHidden } from './visually-hidden';
 export { default as IsolatedEventContainer } from './isolated-event-container';

@@ -8,7 +8,7 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import { Flex, FlexItem } from '../../flex';
-import Text from '../../text';
+import { Text } from '../../text';
 import { color, rtl } from '../../utils/style-mixins';
 
 const rootFloatLabelStyles = () => {

@@ -13,7 +13,7 @@ import { isRTL } from '@wordpress/i18n';
  */
 import { G2, UI } from '../../utils/colors-values';
 import Button from '../../button';
-import Text from '../../text';
+import { Text } from '../../text';
 import { reduceMotion, space, rtl } from '../../utils';
 
 export const NavigationUI = styled.div`

@@ -6,8 +6,7 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import Text from '../../../text';
-import { text } from '../../../text/styles/text-mixins';
+import { Text } from '../../../text';
 import { color } from '../../../utils/style-mixins';
 
 export const Root = styled.div`
@@ -45,7 +44,7 @@ export const Tooltip = styled.div`
 
 export const LabelText = styled( Text )`
 	&&& {
-		${ text };
+		color: white;
 		display: block;
 		font-size: 13px;
 		line-height: 1.4;

@@ -1,54 +1,237 @@
-# Text
+# Text (Experimental)
 
-A component for rendering text.
+`Text` is a core component that renders text in the library, using the library's typography system.
 
 ## Usage
 
+`Text` can be used to render any text-content, like an HTML `p` or `span`.
+
 ```jsx
 import { __experimentalText as Text } from '@wordpress/components';
 
-const HeroPanel = () => (
-	<>
-		<Text variant="title.large" as="h1">
-			Hello World!
-		</Text>
-		<Text variant="body">Greetings to you!</Text>
-	</>
-);
+function Example() {
+	return <Text>Code is Poetry</Text>;
+}
 ```
 
 ## Props
 
-The component accepts the following props:
+### adjustLineHeightForInnerControls
+
+**Type**: `boolean`,`"large"`,`"medium"`,`"small"`,`"xSmall"`
+
+Automatically calculate the appropriate line-height value for contents that render text and Control elements (e.g. `TextInput`).
+
+```jsx
+import { __experimentalText as Text, TextInput } from '@wordpress/components';
+
+function Example() {
+	return (
+		<Text adjustLineHeightForInnerControls>
+			Lorem ipsum dolor sit amet, consectetur
+			<TextInput value="adipiscing elit..." />
+		</Text>
+	);
+}
+```
+
+### align
+
+**Type**: `CSSProperties['textAlign']`
+
+Adjusts the text alignment.
+
+```jsx
+import { __experimentalText as Text } from '@wordpress/components';
+
+function Example() {
+	return (
+		<Text align="center" isBlock>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit...
+		</Text>
+	);
+}
+```
+
+### color
+
+**Type**: `CSSProperties['color']`
+
+Adjusts the text color.
+
+### display
+
+**Type**: `CSSProperties['display']`
+
+Adjusts the CSS display.
 
-#### as
+### ellipsis
+
+**Type**: `string`
+
+The ellipsis string when `truncate` is set.
+
+### ellipsizeMode
+
+**Type**: `"auto"`,`"head"`,`"tail"`,`"middle"`
+
+Determines where to truncate. For example, we can truncate text right in the middle. To do this, we need to set `ellipsizeMode` to `middle` and a text `limit`.
+
+-   `auto`: Trims content at the end automatically without a `limit`.
+-   `head`: Trims content at the beginning. Requires a `limit`.
+-   `middle`: Trims content in the middle. Requires a `limit`.
+-   `tail`: Trims content at the end. Requires a `limit`.
+
+### highlightCaseSensitive
+
+**Type**: `boolean`
+
+Escape characters in `highlightWords` which are meaningful in regular expressions.
+
+### highlightEscape
+
+**Type**: `boolean`
+
+Determines if `highlightWords` should be case sensitive.
+
+### highlightSanitize
+
+**Type**: `boolean`
+
+Array of search words. String search terms are automatically cast to RegExps unless `highlightEscape` is true.
+
+### highlightWords
+
+**Type**: `any[]`
+
+Letters or words within `Text` can be highlighted using `highlightWords`.
+
+```jsx
+import { __experimentalText as Text } from '@wordpress/components';
+
+function Example() {
+	return (
+		<Text highlightWords={ [ 'pi' ] }>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex
+			neque, vulputate a diam et, luctus convallis lacus. Vestibulum ac
+			mollis mi. Morbi id elementum massa. Suspendisse interdum auctor
+			ligula eget cursus. In fermentum ultricies mauris, pharetra
+			fermentum erat pellentesque id.
+		</Text>
+	);
+}
+```
 
-Determines the HTML selector for the text.
+### isBlock
 
-For most use-cases you can use this component instead of a `h1`, `h2`, `h3`, `h4`, `h5`, `h6` or `p`.
+**Type**: `boolean`
 
--   Type: `String`
--   Required: No
--   Default: ''
+Sets `Text` to have `display: block`.
 
-#### variant
+### isDestructive
+
+**Type**: `boolean`
+
+Renders a destructive color.
+
+### limit
+
+**Type**: `number`
+
+Determines the max characters when `truncate` is set.
+
+### lineHeight
+
+**Type**: `CSSProperties['lineHeight']`
+
+Adjusts all text line-height based on the typography system.
+
+### numberOfLines
+
+**Type**: `number`
+
+Clamps the text content to the specifiec `numberOfLines`, adding the `ellipsis` at the end.
+
+### optimizeReadabilityFor
+
+**Type**: `CSSProperties['color']`
+
+The `Text` color can be adapted to a background color for optimal readability. `optimizeReadabilityFor` can accept CSS variables, in addition to standard CSS color values (e.g. Hex, RGB, HSL, etc...).
+
+```jsx
+import { __experimentalText as Text, View } from '@wordpress/components';
+
+function Example() {
+	const backgroundColor = 'blue';
+
+	return (
+		<View css={ { backgroundColor } }>
+			<Text optimizeReadabilityFor={ backgroundColor }>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+			</Text>
+		</View>
+	);
+}
+```
+
+### size
+
+**Type**: `CSSProperties['fontSize']`,`TextSize`
+
+Adjusts text size based on the typography system. `Text` can render a wide range of font sizes, which are automatically calculated and adapted to the typography system. The `size` value can be a system preset, a `number`, or a custom unit value (`string`) such as `30em`.
+
+```jsx
+import { __experimentalText as Text } from '@wordpress/components';
+
+function Example() {
+	return <Text size="largeTitle">Code is Poetry</Text>;
+}
+```
+
+### truncate
+
+**Type**: `boolean`
+
+Enables text truncation. When `truncate` is set,we are able to truncate the long text in a variety of ways.
+
+```jsx
+import { __experimentalText as Text } from '@wordpress/components';
+
+function Example() {
+	return (
+		<Text truncate>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex
+			neque, vulputate a diam et, luctus convallis lacus. Vestibulum ac
+			mollis mi. Morbi id elementum massa. Suspendisse interdum auctor
+			ligula eget cursus. In fermentum ultricies mauris, pharetra
+			fermentum erat pellentesque id.
+		</Text>
+	);
+}
+```
+
+### upperCase
+
+**Type**: `boolean`
+
+Uppercases the text content.
+
+### variant
+
+**Type**: `"muted"`
+
+Adjusts style variation of the text.
+
+```jsx
+import { __experimentalText as Text } from '@wordpress/components';
+
+function Example() {
+	return <Text variant="muted">Code is Poetry</Text>;
+}
+```
 
-Determines the style for the text. Available variants:
+### weight
 
--   `title`
--   `title.large`
--   `title.medium`
--   `title.small`
--   `subtitle`
--   `subtitle.large`
--   `subtitle.small`
--   `body`
--   `body.large`
--   `body.small`
--   `button`
--   `caption`
--   `label`
+**Type**: `CSSProperties['fontWeight']`,`TextWeight`
 
-*   Type: `String`
-*   Required: No
-*   Default: 'body'
+Adjusts font-weight of the text.