Pass a class name instead of using a wrapper element to set the progr…

…essbar width
WordPress · May 23, 2024 · bc95336 · bc95336
1 parent 324bb79
commit bc95336
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 15 deletions.
diff --git a/packages/edit-site/src/components/canvas-loader/index.js b/packages/edit-site/src/components/canvas-loader/index.js
@@ -34,9 +34,12 @@ export default function CanvasLoader( { id } ) {
 	return (
 		<div className="edit-site-canvas-loader">
 			<Theme accent={ indicatorColor } background={ backgroundColor }>
-				<div style={ { width: '160px' } }>
-					<ProgressBar id={ id } max={ total } value={ elapsed } />
-				</div>
+				<ProgressBar
+					id={ id }
+					max={ total }
+					value={ elapsed }
+					className="edit-site-canvas-loader__progressbar"
+				/>
 			</Theme>
 		</div>
 	);

diff --git a/packages/edit-site/src/components/canvas-loader/style.scss b/packages/edit-site/src/components/canvas-loader/style.scss
@@ -16,6 +16,10 @@
 	& > div {
 		width: 160px;
 	}
+
+	& > .edit-site-canvas-loader__progressbar {
+		width: 160px;
+	}
 }
 
 @keyframes edit-site-canvas-loader__fade-in-animation {

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
@@ -266,9 +266,7 @@ function FontCollection( { slug } ) {
 		<div className="font-library-modal__tabpanel-layout">
 			{ isLoading && (
 				<div className="font-library-modal__loading">
-					<div style={ { width: '160px' } }>
-						<ProgressBar />
-					</div>
+					<ProgressBar className="font-library-modal__progressbar" />
 				</div>
 			) }
 

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
@@ -114,9 +114,7 @@ function InstalledFonts() {
 		<div className="font-library-modal__tabpanel-layout">
 			{ isResolvingLibrary && (
 				<div className="font-library-modal__loading">
-					<div style={ { width: '160px' } }>
-						<ProgressBar />
-					</div>
+					<ProgressBar className="font-library-modal__progressbar" />
 				</div>
 			) }
 
@@ -286,9 +284,7 @@ function InstalledFonts() {
 						className="font-library-modal__tabpanel-layout__footer"
 					>
 						{ isInstalling && (
-							<div style={ { width: '160px' } }>
-								<ProgressBar />
-							</div>
+							<ProgressBar className="font-library-modal__progressbar" />
 						) }
 						{ shouldDisplayDeleteButton && (
 							<Button

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
@@ -48,6 +48,10 @@ $footer-height: 70px;
 		// Push down so that the progress bar is centered vertically.
 		// It should be 120px (72px modal header height + 48px tab height)
 		padding-top: $header-height + $grid-unit-15 + $grid-unit-60;
+
+		& > .font-library-modal__progressbar {
+			width: 160px;
+		}
 	}
 
 	.font-library-modal__tabpanel-layout__footer {

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
@@ -220,9 +220,7 @@ function UploadFonts() {
 				{ isUploading && (
 					<FlexItem>
 						<div className="font-library-modal__upload-area">
-							<div style={ { width: '160px' } }>
-								<ProgressBar />
-							</div>
+							<ProgressBar className="font-library-modal__progressbar" />
 						</div>
 					</FlexItem>
 				) }