Use Text component

Author: simison

packages/admin-ui/src/breadcrumbs/index.tsx

@@ -3,10 +3,8 @@
  */
 import { Link } from '@wordpress/route';
 import { __ } from '@wordpress/i18n';
-import {
-	__experimentalHeading as Heading,
-	__experimentalHStack as HStack,
-} from '@wordpress/components';
+import { Text } from '@wordpress/ui';
+import { __experimentalHStack as HStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -24,16 +22,23 @@ const BreadcrumbItem = ( {
 	if ( ! to ) {
 		return (
 			<li>
-				<Heading level={ 1 } truncate>
+				<Text
+					className="admin-ui-page__header-title"
+					// eslint-disable-next-line jsx-a11y/heading-has-content -- content provided via render prop
+					render={ <h1 /> }
+					variant="heading-lg"
+				>
 					{ label }
-				</Heading>
+				</Text>
 			</li>
 		);
 	}
 
 	return (
 		<li>
-			<Link to={ to }>{ label }</Link>
+			<Link to={ to }>
+				<Text variant="heading-lg">{ label }</Text>
+			</Link>
 		</li>
 	);
 };

packages/admin-ui/src/breadcrumbs/style.scss

@@ -6,10 +6,6 @@
 	margin: 0;
 	// gap prop don't seem to be working properly.
 	gap: 0;
-	font-family: var(--wpds-font-family-heading);
-	font-size: var(--wpds-font-size-lg);
-	font-weight: var(--wpds-font-weight-medium);
-	line-height: var(--wpds-font-line-height-lg);
 	min-height: 32px;
 
 	li:not(:last-child)::after {

packages/admin-ui/src/page/header.tsx

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Stack } from '@wordpress/ui';
+import { Stack, Text } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -38,9 +38,14 @@ export default function Header( {
 						/>
 					) }
 					{ title && (
-						<h2 className="admin-ui-page__header-title">
+						<Text
+							className="admin-ui-page__header-title"
+							// eslint-disable-next-line jsx-a11y/heading-has-content -- content provided via render prop
+							render={ <h2 /> }
+							variant="heading-lg"
+						>
 							{ title }
-						</h2>
+						</Text>
 					) }
 					{ breadcrumbs }
 					{ badges }

packages/admin-ui/src/page/style.scss

@@ -19,14 +19,8 @@
 }
 
 .admin-ui-page__header-title {
-	font-family: var(--wpds-font-family-heading);
-	font-size: var(--wpds-font-size-lg);
-	font-weight: var(--wpds-font-weight-medium);
-	line-height: var(--wpds-font-line-height-lg);
 	margin: 0;
 	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
 }
 
 .admin-ui-page__sidebar-toggle-slot:empty {