update design by using InputControl

WordPress · Nov 6, 2023 · f2089ab · f2089ab
1 parent 78e28e2
commit f2089ab
Showing 1 changed file with 9 additions and 2 deletions.
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-slug.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-slug.js
@@ -11,7 +11,8 @@ import { useState, useMemo } from '@wordpress/element';
 import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import {
-	TextControl,
+	__experimentalInputControl as InputControl,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	__experimentalText as Text,
@@ -108,10 +109,16 @@ export default function PageSlug( { postType, postId } ) {
 								onClose={ onClose }
 							/>
 							<VStack spacing={ 5 }>
-								<TextControl
+								<InputControl
 									__nextHasNoMarginBottom
+									__next40pxDefaultSize
 									label={ __( 'Permalink' ) }
 									hideLabelFromVision
+									prefix={
+										<InputControlPrefixWrapper>
+											/
+										</InputControlPrefixWrapper>
+									}
 									value={ forceEmptyField ? '' : recordSlug }
 									autoComplete="off"
 									spellCheck="false"