Merge pull request #12683 from google/enhancement/12508-progress-snackbar-style-fixes

Align Progress snackbar styles with Figma per QA feedback

Author: tofumatt

assets/js/components/pdf-export/PDFReportProgressSnackbar.test.tsx

@@ -77,7 +77,7 @@ describe( 'PDFReportProgressSnackbar', () => {
 		expect( progressbar ).toBeInTheDocument();
 		expect(
 			progressbar.querySelector( '.mdc-linear-progress__primary-bar' )
-		).toHaveStyle( 'transform: scaleX(0.25)' );
+		).toHaveStyle( { width: '25%', transform: 'none' } );
 
 		rerender(
 			<PDFReportProgressSnackbar
@@ -88,7 +88,7 @@ describe( 'PDFReportProgressSnackbar', () => {
 
 		expect(
 			progressbar.querySelector( '.mdc-linear-progress__primary-bar' )
-		).toHaveStyle( 'transform: scaleX(0.75)' );
+		).toHaveStyle( { width: '75%', transform: 'none' } );
 	} );
 
 	it( 'calls onCancel when the Cancel button is clicked', () => {

assets/js/googlesitekit/components-gm2/ProgressBar.js

@@ -72,7 +72,18 @@ export default function ProgressBar( {
 				: Math.round( progressBarVerticalSpacing / 2 );
 	}
 
-	const transform = progress ? `scaleX(${ progress })` : undefined;
+	// Use width on the primary bar so the inner bar can be styled freely (e.g., border-radius).
+	// Clamp keeps the percentage valid. CSS rejects negative widths.
+	let primaryBarStyle;
+	if ( ! indeterminate ) {
+		const clamped = Math.max( 0, Math.min( 1, progress || 0 ) );
+		primaryBarStyle = {
+			transform: 'none',
+			width: `${ clamped * 100 }%`,
+		};
+	} else if ( progress ) {
+		primaryBarStyle = { transform: `scaleX(${ progress })` };
+	}
 
 	return (
 		<div
@@ -92,7 +103,7 @@ export default function ProgressBar( {
 			<div className="mdc-linear-progress__buffer" />
 			<div
 				className="mdc-linear-progress__bar mdc-linear-progress__primary-bar"
-				style={ { transform } }
+				style={ primaryBarStyle }
 			>
 				<span className="mdc-linear-progress__bar-inner" />
 			</div>

assets/sass/components/pdf-export/_googlesitekit-pdf-report-progress-snackbar.scss

@@ -25,6 +25,16 @@
 		@media (min-width: $bp-tablet) {
 			padding-top: 41px;
 		}
+
+		.mdc-button--tertiary:not(:disabled) {
+			color: $c-surfaces-inverse-on-surface;
+		}
+
+		.googlesitekit-notice__content p {
+			font-size: $fs-body-md;
+			letter-spacing: $ls-s;
+			line-height: $lh-body-md;
+		}
 	}
 
 	.googlesitekit-pdf-report-progress-snackbar__progress {
@@ -39,5 +49,9 @@
 		@media (min-width: $bp-tablet) {
 			top: 16.5px;
 		}
+
+		.mdc-linear-progress__bar-inner {
+			border-radius: $br-lg;
+		}
 	}
 }

assets/sass/vendor/_mdc-linear-progress.scss

@@ -17,4 +17,10 @@
 	.mdc-linear-progress--compress {
 		margin: 0;
 	}
+
+	// Animate width on the primary bar so determinate progress fills smoothly.
+	// Uses MDC's sharp curve (matches the 250ms transform/opacity transitions MDC already applies to .mdc-linear-progress).
+	.mdc-linear-progress:not(.mdc-linear-progress--indeterminate) .mdc-linear-progress__primary-bar {
+		transition: width 250ms cubic-bezier(0.4, 0, 0.6, 1);
+	}
 }