Boost: Refactor ISA recommendation styles (#41375)

* Refactor ISA recomendation styles * changelog * Remove unused file
Automattic · Jan 31, 2025 · 3ab4b71 · 3ab4b71
1 parent 73ea5d1
commit 3ab4b71
Show file tree

Hide file tree

Showing 12 changed files with 204 additions and 179 deletions.
diff --git a/projects/plugins/boost/app/assets/src/css/admin-style.scss b/projects/plugins/boost/app/assets/src/css/admin-style.scss
@@ -8,8 +8,3 @@
 // Components
 @import 'components/button';
 @import 'components/snackbar';
-
-// React Migration CSS
-@import 'components/isa/recommendations-page.scss';
-@import 'components/isa/recommendations/table.scss';
-@import 'components/isa/recommendations/row-types/table-row.scss';
diff --git a/projects/plugins/boost/app/assets/src/css/components/isa/recommendations-page.scss b/projects/plugins/boost/app/assets/src/css/components/isa/recommendations-page.scss
diff --git a/projects/plugins/boost/app/assets/src/css/components/isa/recommendations/table.scss b/projects/plugins/boost/app/assets/src/css/components/isa/recommendations/table.scss
diff --git a/...eatures/image-size-analysis/recommendations/row-types/broken-data-row/broken-data-row.tsx b/...eatures/image-size-analysis/recommendations/row-types/broken-data-row/broken-data-row.tsx
@@ -1,10 +1,11 @@
 import { __ } from '@wordpress/i18n';
 import TableRow from '../table-row/table-row';
+import rowStyles from '../../row.module.scss';
 
 const BrokenDataRow: React.FC = () => {
 	return (
 		<TableRow>
-			<div className="jb-table-row-title">
+			<div className={ rowStyles[ 'table-row-title' ] }>
 				{ __( 'An error occurred while loading this entry.', 'jetpack-boost' ) }
 			</div>
 		</TableRow>

diff --git a/...res/image-size-analysis/recommendations/row-types/image-missing-row/image-missing-row.tsx b/...res/image-size-analysis/recommendations/row-types/image-missing-row/image-missing-row.tsx
@@ -6,7 +6,7 @@ import Pill from '$features/image-size-analysis/recommendations/ui/pill/pill';
 import RowTitle from '$features/image-size-analysis/recommendations/ui/row-title/row-title';
 import { removeGetParams } from '$lib/utils/remove-get-params';
 import TableRowHover from '../table-row-hover/table-row-hover';
-
+import rowStyles from '../../row.module.scss';
 interface ImageMissingRowProps {
 	enableTransition: boolean;
 	details: IsaImage;
@@ -17,23 +17,23 @@ const ImageMissingRow: React.FC< ImageMissingRowProps > = ( { details } ) => {
 
 	return (
 		<TableRow>
-			<div className="jb-thumbnail-image-missing">{ __( 'Image Missing', 'jetpack-boost' ) }</div>
+			<div>{ __( 'Image Missing', 'jetpack-boost' ) }</div>
 
-			<div className="jb-table-row-title">
+			<div className={ rowStyles[ 'table-row-title' ] }>
 				<RowTitle title={ removeGetParams( title ) } url={ details.page.url } />
 			</div>
 
-			<div className="jb-table-row-potential-size">
+			<div>
 				<Pill color="#facfd2">? KB</Pill>
 
-				<div className="jb-arrow">→</div>
+				<div>→</div>
 
 				<Pill color="#d0e6b8">? KB</Pill>
 			</div>
 
-			<div className="jb-table-row-hover-content">
+			<div>
 				<TableRowHover
-					edit_url={ details.page.edit_url }
+					edit_url={ details.page.edit_url || undefined }
 					device_type={ null }
 					instructions={ __(
 						'This image does not appear to load. Please check the URL in the relevant page.',
@@ -42,11 +42,11 @@ const ImageMissingRow: React.FC< ImageMissingRowProps > = ( { details } ) => {
 				/>
 			</div>
 
-			<div className="jb-table-row-device">
+			<div>
 				<Device device={ details.device_type } />
 			</div>
 
-			<div className="jb-table-row-page">
+			<div>
 				<a href={ details.page.url }>{ details.page.title }</a>
 			</div>
 		</TableRow>

diff --git a/.../features/image-size-analysis/recommendations/row-types/image-size-row/image-size-row.tsx b/.../features/image-size-analysis/recommendations/row-types/image-size-row/image-size-row.tsx
@@ -11,6 +11,7 @@ import TableRowHover from '../table-row-hover/table-row-hover';
 import { removeGetParams } from '$lib/utils/remove-get-params';
 import { recordBoostEventAndRedirect } from '$lib/utils/analytics';
 import styles from './image-size-row.module.scss';
+import rowStyles from '../../row.module.scss';
 import clsx from 'clsx';
 
 interface ImageSizeRowProps {
@@ -63,7 +64,7 @@ const TableRowContent: React.FC< ContentProps > = ( { title, details, toggleImag
 				<Thumbnail title={ title } url={ details.image.url } width={ 65 } height={ 65 } />
 			</div>
 
-			<div className="jb-table-row__title">
+			<div className={ rowStyles[ 'table-row-title' ] }>
 				<RowTitle
 					title={ title ? removeGetParams( title ) : __( 'Untitled', 'jetpack-boost' ) }
 					url={ details.page.url }
@@ -78,22 +79,22 @@ const TableRowContent: React.FC< ContentProps > = ( { title, details, toggleImag
 				<Pill color="#d0e6b8">{ potentialSize } KB</Pill>
 			</div>
 
-			<div className={ clsx( styles[ 'hover-content' ], 'jb-table-row__hover-content' ) }>
+			<div className={ clsx( styles[ 'hover-content' ], rowStyles[ 'hover-content' ] ) }>
 				<TableRowHover
 					device_type={ details.device_type }
-					edit_url={ details.page.edit_url }
+					edit_url={ details.page.edit_url || undefined }
 					instructions={ details.instructions }
 					imageId={ details.id }
 					isFixed={ details.image.fixed }
 					toggleImageFix={ toggleImageFix }
 				/>
 			</div>
 
-			<div className={ clsx( styles.device, 'jb-table-row__device' ) }>
+			<div className={ clsx( styles.device, rowStyles.device ) }>
 				<Device device={ details.device_type } />
 			</div>
 
-			<div className={ clsx( styles.page, 'jb-table-row__page' ) }>
+			<div className={ clsx( styles.page, rowStyles.page ) }>
 				<a href={ details.page.url } className={ styles.link }>
 					{ details.page.title }
 				</a>

diff --git a/.../recommendations/row-types/table-row.scss → ...row-types/table-row/table-row.module.scss b/.../recommendations/row-types/table-row.scss → ...row-types/table-row/table-row.module.scss
@@ -1,4 +1,16 @@
-.jb-table-row-container {
+@mixin bottom-border-radius {
+	border-bottom-right-radius: var(--border-radius);
+	border-bottom-left-radius: var(--border-radius);
+	border-bottom: var(--border);
+}
+
+@mixin top-border-radius {
+	border-top-right-radius: var(--border-radius);
+	border-top-left-radius: var(--border-radius);
+	border-top: var(--border);
+}
+
+.table-row-container {
 	background-color: #fff;
 	border-top: var(--border);
 	border-left: var(--border);
@@ -27,74 +39,32 @@
 	}
 
 	&:last-child {
-		border-bottom-right-radius: var(--border-radius);
-		border-bottom-left-radius: var(--border-radius);
-		border-bottom: var(--border);
+		@include bottom-border-radius;
 	}
 }
 
 // Expanded view, but not the one at the very top.
-:not(.jb-table-header) + .jb-table-row-container.expanded {
+.table-row-container + .table-row-container.expanded {
 	margin-top: var(--expanded-gap);
-	border-top-right-radius: var(--border-radius);
-	border-top-left-radius: var(--border-radius);
+	@include top-border-radius;
 }
 
 // The row after the expanded view.
-.expanded + .jb-table-row-container {
-	border-top-right-radius: var(--border-radius);
-	border-top-left-radius: var(--border-radius);
+.expanded + .table-row-container {
+	@include top-border-radius;
 }
 
 // The row before the expanded view.
-.jb-table-row-container:has(+ .expanded) {
-	border-bottom-right-radius: var(--border-radius);
-	border-bottom-left-radius: var(--border-radius);
-	border-bottom: var(--border);
+.table-row-container:has(+ .expanded) {
+	@include bottom-border-radius;
 }
 
-.jb-table-row-container.expanded {
+.table-row-container.expanded {
 	margin-bottom: var(--expanded-gap);
+	@include bottom-border-radius;
 }
 
-.jb-table-row {
-	min-height: 115px;
-	cursor: pointer;
-
-	.jb-table-row__hover-content {
-		display: none;
-	}
-
-	&:hover {
-		background-color: #f6f7f7;
-
-		// Can't use overflow because of the box-shadow workaround above.
-		// So instead, repeating the border radius.
-		.jb-table-row__expanded & {
-			border-top-right-radius: var(--border-radius);
-			border-top-left-radius: var(--border-radius);
-		}
-
-		.jb-table-row__hover-content {
-			display: block;
-
-			@media (max-width: 782px) {
-				display: none;
-			}
-		}
-
-		.jb-table-row__device,
-		.jb-table-row__page {
-			display: none;
-		}
-	}
-
-	.jb-table-row__page a {
-		text-decoration: none;
-	}
-}
-
-.jb-table-row__expand {
+.expand-indicator {
 	cursor: pointer;
 	text-align: center;
 	grid-column: expand;
@@ -105,25 +75,18 @@
 	}
 }
 
-.jb-table-row__expanded {
+.expanded-content-row {
 	display: flex;
 	justify-content: space-between;
 	padding: var(--gap);
 	padding-left: calc(var(--thumbnail-size) + var(--gap) * 2);
 
 	.expanded & {
-		border-bottom-right-radius: var(--border-radius);
-		border-bottom-left-radius: var(--border-radius);
-		border-bottom: var(--border);
+		@include bottom-border-radius;
 	}
 
-
 	@media (max-width: 782px) {
 		flex-direction: column;
 		padding-left: var(--gap);
 	}
 }
-
-.jb-table-row__title {
-	grid-column: title;
-}
diff --git a/...ets/src/js/features/image-size-analysis/recommendations/row-types/table-row/table-row.tsx b/...ets/src/js/features/image-size-analysis/recommendations/row-types/table-row/table-row.tsx
@@ -1,5 +1,8 @@
 import React, { useState, useCallback } from 'react';
 import clsx from 'clsx';
+import styles from './table-row.module.scss';
+import rowStyles from '../../row.module.scss';
+
 interface TableRowProps {
 	children: React.ReactNode;
 	expandedContent?: React.ReactNode;
@@ -26,15 +29,27 @@ const TableRow: React.FC< TableRowProps > = ( { children, expandedContent } ) =>
 	);
 
 	return (
-		<div className={ clsx( 'jb-table-row-container', { expanded } ) }>
+		<div
+			className={ clsx( styles[ 'table-row-container' ], {
+				[ styles.expanded ]: expanded,
+				[ rowStyles.expanded ]: expanded,
+			} ) }
+		>
 			{ /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ }
-			<div className="jb-table-row jb-recommendation-page-grid" onClick={ toggleExpand }>
+			<div
+				className={ clsx( rowStyles[ 'table-row' ], rowStyles[ 'row-grid' ] ) }
+				onClick={ toggleExpand }
+			>
 				{ children }
 
-				{ canExpand && <div className="jb-table-row__expand">{ expanded ? '↑' : '↓' }</div> }
+				{ canExpand && (
+					<div className={ styles[ 'expand-indicator' ] }>{ expanded ? '↑' : '↓' }</div>
+				) }
 			</div>
 
-			{ expanded && canExpand && <div className="jb-table-row__expanded">{ expandedContent }</div> }
+			{ expanded && canExpand && (
+				<div className={ styles[ 'expanded-content-row' ] }>{ expandedContent }</div>
+			) }
 		</div>
 	);
 };