Text Component: Typescript'n

packages/components/CHANGELOG.md

@@ -32,6 +32,7 @@
 -   `SlotFill`: Migrate to TypeScript and Convert to Functional Component `<Slot bubblesVirtually />`. ([#51350](https://github.com/WordPress/gutenberg/pull/51350)).
 -   `Components`: move `ui/utils` to `utils` and remove `ui/` folder ([#54922](https://github.com/WordPress/gutenberg/pull/54922)).
 -   Ensure `@types/` dependencies used by final type files are included in the main dependency field ([#50231](https://github.com/WordPress/gutenberg/pull/50231)).
+-   `Text`: Migrate to TypeScript. ([#54953](https://github.com/WordPress/gutenberg/pull/54953)).
 
 ## 25.8.0 (2023-09-20)
 

packages/components/src/heading/stories/index.story.tsx

@@ -12,17 +12,15 @@ const meta: Meta< typeof Heading > = {
 	component: Heading,
 	title: 'Components (Experimental)/Heading',
 	argTypes: {
-		adjustLineHeightForInnerControls: { control: { type: 'text' } },
 		as: { control: { type: 'text' } },
 		color: { control: { type: 'color' } },
 		display: { control: { type: 'text' } },
 		letterSpacing: { control: { type: 'text' } },
 		lineHeight: { control: { type: 'text' } },
 		optimizeReadabilityFor: { control: { type: 'color' } },
 		variant: {
-			control: { type: 'radio' },
-			options: [ 'undefined', 'muted' ],
-			mapping: { undefined, muted: 'muted' },
+			control: { type: 'select' },
+			options: [ undefined, 'muted' ],
 		},
 		weight: { control: { type: 'text' } },
 	},

packages/components/src/text/README.md

@@ -22,7 +22,7 @@ function Example() {
 
 ### adjustLineHeightForInnerControls
 
-**Type**: `boolean`,`"large"`,`"medium"`,`"small"`,`"xSmall"`
+**Type**: `"large"`,`"medium"`,`"small"`,`"xSmall"`
 
 Automatically calculate the appropriate line-height value for contents that render text and Control elements (e.g. `TextInput`).
 
@@ -31,7 +31,7 @@ import { __experimentalText as Text, TextInput } from '@wordpress/components';
 
 function Example() {
 	return (
-		<Text adjustLineHeightForInnerControls>
+		<Text adjustLineHeightForInnerControls={"small"}>
 			Lorem ipsum dolor sit amet, consectetur
 			<TextInput value="adipiscing elit..." />
 		</Text>

packages/components/src/text/component.js → packages/components/src/text/component.tsx

@@ -1,15 +1,20 @@
 /**
  * Internal dependencies
  */
+import type { WordPressComponentProps } from '../context';
 import { contextConnect } from '../context';
 import { View } from '../view';
 import useText from './hook';
+import type { Props } from './types';
 
 /**
- * @param {import('../context').WordPressComponentProps<import('./types').Props, 'span'>} props
- * @param {import('react').ForwardedRef<any>}                                             forwardedRef
+ * @param props
+ * @param forwardedRef
  */
-function Text( props, forwardedRef ) {
+function UnconnectedText(
+	props: WordPressComponentProps< Props, 'span' >,
+	forwardedRef: React.ForwardedRef< any >
+) {
 	const textProps = useText( props );
 
 	return <View as="span" { ...textProps } ref={ forwardedRef } />;
@@ -31,6 +36,5 @@ function Text( props, forwardedRef ) {
  * }
  * ```
  */
-const ConnectedText = contextConnect( Text, 'Text' );
-
-export default ConnectedText;
+export const Text = contextConnect( UnconnectedText, 'Text' );
+export default Text;

packages/components/src/text/hook.js → packages/components/src/text/hook.ts

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
 
 /**
@@ -11,6 +12,7 @@ import { useMemo, Children, cloneElement } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import type { WordPressComponentProps } from '../context';
 import { hasConnectNamespace, useContextSystem } from '../context';
 import { useTruncate } from '../truncate';
 import { getOptimalTextShade } from '../utils/colors';
@@ -20,11 +22,15 @@ import { getFontSize } from '../utils/font-size';
 import { CONFIG, COLORS } from '../utils';
 import { getLineHeight } from './get-line-height';
 import { useCx } from '../utils/hooks/use-cx';
+import type { Props } from './types';
+import type React from 'react';
 
 /**
  * @param {import('../context').WordPressComponentProps<import('./types').Props, 'span'>} props
  */
-export default function useText( props ) {
+export default function useText(
+	props: WordPressComponentProps< Props, 'span' >
+) {
 	const {
 		adjustLineHeightForInnerControls,
 		align,
@@ -50,8 +56,7 @@ export default function useText( props ) {
 		...otherProps
 	} = useContextSystem( props, 'Text' );
 
-	/** @type {import('react').ReactNode} */
-	let content = children;
+	let content: React.ReactNode = children;
 	const isHighlighter = Array.isArray( highlightWords );
 	const isCaption = size === 'caption';
 
@@ -64,9 +69,7 @@ export default function useText( props ) {
 
 		content = createHighlighterText( {
 			autoEscape: highlightEscape,
-			// Disable reason: We need to disable this otherwise it erases the cast
-			// eslint-disable-next-line object-shorthand
-			children: /** @type {string} */ ( children ),
+			children,
 			caseSensitive: highlightCaseSensitive,
 			searchWords: highlightWords,
 			sanitize: highlightSanitize,
@@ -76,7 +79,7 @@ export default function useText( props ) {
 	const cx = useCx();
 
 	const classes = useMemo( () => {
-		const sx = {};
+		const sx: Record< string, SerializedStyles | null > = {};
 
 		const lineHeight = getLineHeight(
 			adjustLineHeightForInnerControls,
@@ -87,12 +90,7 @@ export default function useText( props ) {
 			color,
 			display,
 			fontSize: getFontSize( size ),
-			/* eslint-disable jsdoc/valid-types */
-			fontWeight:
-				/** @type {import('react').CSSProperties['fontWeight']} */ (
-					weight
-				),
-			/* eslint-enable jsdoc/valid-types */
+			fontWeight: weight,
 			lineHeight,
 			letterSpacing,
 			textAlign: align,
@@ -143,8 +141,7 @@ export default function useText( props ) {
 		weight,
 	] );
 
-	/** @type {undefined | 'auto' | 'none'} */
-	let finalEllipsizeMode;
+	let finalEllipsizeMode: undefined | 'auto' | 'none';
 	if ( truncate === true ) {
 		finalEllipsizeMode = 'auto';
 	}

packages/components/src/text/stories/index.story.tsx

@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Text } from '../component';
+
+const meta: Meta< typeof Text > = {
+	component: Text,
+	title: 'Components (Experimental)/Text',
+	argTypes: {
+		as: { control: { type: 'text' } },
+		color: { control: { type: 'color' } },
+		display: { control: { type: 'text' } },
+		lineHeight: { control: { type: 'text' } },
+		letterSpacing: { control: { type: 'text' } },
+		optimizeReadabilityFor: { control: { type: 'color' } },
+		size: { control: { type: 'text' } },
+		variant: {
+			options: [ undefined, 'muted' ],
+			control: { type: 'select' },
+		},
+		weight: { control: { type: 'text' } },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof Text > = ( props ) => {
+	return <Text { ...props } />;
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	children: 'Code is poetry',
+};
+
+export const Truncate = Template.bind( {} );
+Truncate.args = {
+	children: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
+facilisis dictum tortor, eu tincidunt justo scelerisque tincidunt.
+Duis semper dui id augue malesuada, ut feugiat nisi aliquam.
+Vestibulum venenatis diam sem, finibus dictum massa semper in. Nulla
+facilisi. Nunc vulputate faucibus diam, in lobortis arcu ornare vel.
+In dignissim nunc sed facilisis finibus. Etiam imperdiet mattis
+arcu, sed rutrum sapien blandit gravida. Aenean sollicitudin neque
+eget enim blandit, sit amet rutrum leo vehicula. Nunc malesuada
+ultricies eros ut faucibus. Aliquam erat volutpat. Nulla nec feugiat
+risus. Vivamus iaculis dui aliquet ante ultricies feugiat.
+Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+posuere cubilia curae; Vivamus nec pretium velit, sit amet
+consectetur ante. Praesent porttitor ex eget fermentum mattis.`,
+	numberOfLines: 2,
+	truncate: true,
+};
+
+export const Highlight = Template.bind( {} );
+Highlight.args = {
+	children: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
+facilisis dictum tortor, eu tincidunt justo scelerisque tincidunt.
+Duis semper dui id augue malesuada, ut feugiat nisi aliquam.
+Vestibulum venenatis diam sem, finibus dictum massa semper in. Nulla
+facilisi. Nunc vulputate faucibus diam, in lobortis arcu ornare vel.
+In dignissim nunc sed facilisis finibus. Etiam imperdiet mattis
+arcu, sed rutrum sapien blandit gravida. Aenean sollicitudin neque
+eget enim blandit, sit amet rutrum leo vehicula. Nunc malesuada
+ultricies eros ut faucibus. Aliquam erat volutpat. Nulla nec feugiat
+risus. Vivamus iaculis dui aliquet ante ultricies feugiat.
+Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+posuere cubilia curae; Vivamus nec pretium velit, sit amet
+consectetur ante. Praesent porttitor ex eget fermentum mattis.`,
+	highlightWords: [ 'con' ],
+};

packages/components/src/text/types.ts

@@ -29,12 +29,7 @@ export interface Props extends TruncateProps {
 	/**
 	 * Automatically calculate the appropriate line-height value for contents that render text and Control elements (e.g. `TextInput`).
 	 */
-	adjustLineHeightForInnerControls?:
-		| boolean
-		| 'large'
-		| 'medium'
-		| 'small'
-		| 'xSmall';
+	adjustLineHeightForInnerControls?: 'large' | 'medium' | 'small' | 'xSmall';
 	/**
 	 * Adjusts the text color.
 	 */