Components: replace TabPanel with Tabs in the Font Library Modal (

#57181) * implement `Tabs` * update class names * simplify `name` vs `id` in variables and props * fix typing error * rename TabLayout to TabPanelLayout
WordPress · Jan 4, 2024 · d362529 · d362529
1 parent 5f8f12f
commit d362529
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 35 deletions.
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -21,7 +21,7 @@ import { search, closeSmall } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import TabLayout from './tab-layout';
+import TabPanelLayout from './tab-panel-layout';
 import { FontLibraryContext } from './context';
 import FontsGrid from './fonts-grid';
 import FontCard from './font-card';
@@ -156,7 +156,7 @@ function FontCollection( { id } ) {
 	};
 
 	return (
-		<TabLayout
+		<TabPanelLayout
 			title={
 				! selectedFont ? selectedCollection.name : selectedFont.name
 			}
@@ -270,7 +270,7 @@ function FontCollection( { id } ) {
 					) ) }
 				</FontsGrid>
 			) }
-		</TabLayout>
+		</TabPanelLayout>
 	);
 }
 

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/index.js
@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Modal, TabPanel } from '@wordpress/components';
+import {
+	Modal,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
 import { useContext } from '@wordpress/element';
 
 /**
@@ -12,33 +15,33 @@ import InstalledFonts from './installed-fonts';
 import FontCollection from './font-collection';
 import UploadFonts from './upload-fonts';
 import { FontLibraryContext } from './context';
+import { unlock } from '../../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
 
 const DEFAULT_TABS = [
 	{
-		name: 'installed-fonts',
+		id: 'installed-fonts',
 		title: __( 'Library' ),
-		className: 'installed-fonts',
 	},
 	{
-		name: 'upload-fonts',
+		id: 'upload-fonts',
 		title: __( 'Upload' ),
-		className: 'upload-fonts',
 	},
 ];
 
 const tabsFromCollections = ( collections ) =>
 	collections.map( ( { id, name } ) => ( {
-		name: id,
+		id,
 		title:
 			collections.length === 1 && id === 'default-font-collection'
 				? __( 'Install Fonts' )
 				: name,
-		className: 'collection',
 	} ) );
 
 function FontLibraryModal( {
 	onRequestClose,
-	initialTabName = 'installed-fonts',
+	initialTabId = 'installed-fonts',
 } ) {
 	const { collections } = useContext( FontLibraryContext );
 
@@ -54,22 +57,39 @@ function FontLibraryModal( {
 			isFullScreen
 			className="font-library-modal"
 		>
-			<TabPanel
-				className="font-library-modal__tab-panel"
-				initialTabName={ initialTabName }
-				tabs={ tabs }
-			>
-				{ ( tab ) => {
-					switch ( tab.name ) {
-						case 'upload-fonts':
-							return <UploadFonts />;
-						case 'installed-fonts':
-							return <InstalledFonts />;
-						default:
-							return <FontCollection id={ tab.name } />;
-					}
-				} }
-			</TabPanel>
+			<div className="font-library-modal__tabs">
+				<Tabs initialTabId={ initialTabId }>
+					<Tabs.TabList>
+						{ tabs.map( ( { id, title } ) => (
+							<Tabs.Tab key={ id } tabId={ id }>
+								{ title }
+							</Tabs.Tab>
+						) ) }
+					</Tabs.TabList>
+					{ tabs.map( ( { id } ) => {
+						let contents;
+						switch ( id ) {
+							case 'upload-fonts':
+								contents = <UploadFonts />;
+								break;
+							case 'installed-fonts':
+								contents = <InstalledFonts />;
+								break;
+							default:
+								contents = <FontCollection id={ id } />;
+						}
+						return (
+							<Tabs.TabPanel
+								key={ id }
+								tabId={ id }
+								focusable={ false }
+							>
+								{ contents }
+							</Tabs.TabPanel>
+						);
+					} ) }
+				</Tabs>
+			</div>
 		</Modal>
 	);
 }

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
@@ -16,7 +16,7 @@ import {
 /**
  * Internal dependencies
  */
-import TabLayout from './tab-layout';
+import TabPanelLayout from './tab-panel-layout';
 import { FontLibraryContext } from './context';
 import FontsGrid from './fonts-grid';
 import LibraryFontDetails from './library-font-details';
@@ -92,7 +92,7 @@ function InstalledFonts() {
 	}, [ notice ] );
 
 	return (
-		<TabLayout
+		<TabPanelLayout
 			title={ libraryFontSelected?.name || '' }
 			description={ tabDescription }
 			handleBack={ !! libraryFontSelected && handleUnselectFont }
@@ -173,7 +173,7 @@ function InstalledFonts() {
 					handleCancelUninstall={ handleCancelUninstall }
 				/>
 			) }
-		</TabLayout>
+		</TabPanelLayout>
 	);
 }
 

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
@@ -24,7 +24,7 @@
 	}
 }
 
-.font-library-modal__tab-layout {
+.font-library-modal__tabpanel-layout {
 
 	main {
 		padding-bottom: 4rem;
@@ -75,7 +75,7 @@
 	padding-bottom: 1rem;
 }
 
-.font-library-modal__tab-panel {
+.font-library-modal__tabs {
 	[role="tablist"] {
 		position: sticky;
 		top: 0;

diff --git a/...l-styles/font-library-modal/tab-layout.js → ...es/font-library-modal/tab-panel-layout.js b/...l-styles/font-library-modal/tab-layout.js → ...es/font-library-modal/tab-panel-layout.js
@@ -11,9 +11,15 @@ import {
 } from '@wordpress/components';
 import { chevronLeft } from '@wordpress/icons';
 
-function TabLayout( { title, description, handleBack, children, footer } ) {
+function TabPanelLayout( {
+	title,
+	description,
+	handleBack,
+	children,
+	footer,
+} ) {
 	return (
-		<div className="font-library-modal__tab-layout">
+		<div className="font-library-modal__tabpanel-layout">
 			<Spacer margin={ 4 } />
 			<VStack spacing={ 4 } justify="space-between">
 				<header>
@@ -47,4 +53,4 @@ function TabLayout( { title, description, handleBack, children, footer } ) {
 	);
 }
 
-export default TabLayout;
+export default TabPanelLayout;