update tab-panel component with tabs component

WordPress · Nov 7, 2023 · f5dfaa2 · f5dfaa2
1 parent ce3ef3e
commit f5dfaa2
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 19 deletions.
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,6 +15,9 @@ 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 = [
 	{
@@ -54,22 +60,26 @@ 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>
+			<Tabs initialTabId={ initialTabName }>
+				<Tabs.TabList className="font-library-modal__tab-list">
+					{ tabs.map( ( tab ) => (
+						<Tabs.Tab key={ tab.name } id={ tab.name }>
+							{ tab.title }
+						</Tabs.Tab>
+					) ) }
+				</Tabs.TabList>
+				<Tabs.TabPanel id={ 'installed-fonts' }>
+					<InstalledFonts />
+				</Tabs.TabPanel>
+				<Tabs.TabPanel id={ 'upload-fonts' }>
+					<UploadFonts />
+				</Tabs.TabPanel>
+				{ tabsFromCollections( collections || [] ).map( ( tab ) => (
+					<Tabs.TabPanel key={ tab.name } id={ tab.name }>
+						<FontCollection id={ tab.name } />
+					</Tabs.TabPanel>
+				) ) }
+			</Tabs>
 		</Modal>
 	);
 }

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
@@ -75,8 +75,8 @@
 	padding-bottom: 1rem;
 }
 
-.font-library-modal__tab-panel {
-	[role="tablist"] {
+.font-library-modal__tab-list {
+	&[role="tablist"] {
 		position: sticky;
 		top: 0;
 		width: calc(100% + 64px);