Simplified and removed 'TabPanelLayout' component

WordPress · Feb 20, 2024 · c8778fe · c8778fe
1 parent fc075b9
commit c8778fe
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 99 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
@@ -33,7 +33,6 @@ import { search, closeSmall, chevronLeft } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import TabPanelLayout from './tab-panel-layout';
 import { FontLibraryContext } from './context';
 import FontCard from './font-card';
 import filterFonts from './utils/filter-fonts';
@@ -235,12 +234,7 @@ function FontCollection( { slug } ) {
 	};
 
 	if ( renderConfirmDialog ) {
-		return (
-			<TabPanelLayout notice={ notice }>
-				<Spacer margin={ 8 } />
-				<GoogleFontsConfirmDialog />
-			</TabPanelLayout>
-		);
+		return <GoogleFontsConfirmDialog />;
 	}
 
 	return (

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
@@ -123,14 +123,15 @@ button.font-library-modal__upload-area {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	margin-top: $grid-unit-80;
 
 	h3 {
 		font-size: 1.4rem;
 	}
 
 	.components-card {
 		width: 50%;
-		min-width: 250px;
-		max-width: 350px;
+		min-width: 350px;
+		max-width: 400px;
 	}
 }
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js b/packages/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js
@@ -3,11 +3,12 @@
  */
 import { __ } from '@wordpress/i18n';
 import {
-	Button,
-	DropZone,
 	__experimentalSpacer as Spacer,
 	__experimentalText as Text,
 	__experimentalVStack as VStack,
+	Button,
+	DropZone,
+	Notice,
 	FormFileUpload,
 	FlexItem,
 	privateApis as componentsPrivateApis,
@@ -22,7 +23,6 @@ import { FontLibraryContext } from './context';
 import { Font } from '../../../../lib/lib-font.browser';
 import makeFamiliesFromFaces from './utils/make-families-from-faces';
 import { loadFontFaceInBrowser } from './utils';
-import TabPanelLayout from './tab-panel-layout';
 import { unlock } from '../../../lock-unlock';
 
 const { ProgressBar } = unlock( componentsPrivateApis );
@@ -171,9 +171,17 @@ function UploadFonts() {
 	};
 
 	return (
-		<TabPanelLayout notice={ notice }>
+		<div className="font-library-modal__tabpanel-layout">
 			<DropZone onFilesDrop={ handleDropZone } />
 			<VStack className="font-library-modal__local-fonts">
+				{ notice && (
+					<Notice
+						status={ notice.type }
+						onRemove={ () => setNotice( null ) }
+					>
+						{ notice.message }
+					</Notice>
+				) }
 				{ isUploading && (
 					<FlexItem>
 						<div className="font-library-modal__upload-area">
@@ -205,7 +213,7 @@ function UploadFonts() {
 					) }
 				</Text>
 			</VStack>
-		</TabPanelLayout>
+		</div>
 	);
 }