refactor(TestRun): add vrts prefix for data atts

bleech · Sep 19, 2024 · 753c266 · 753c266
1 parent 57a1a84
commit 753c266
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 15 deletions.
diff --git a/components/alert-actions/script.js b/components/alert-actions/script.js
@@ -74,14 +74,14 @@ class VrtsAlertActions extends window.HTMLElement {
 				if ( $alert ) {
 					if ( 'false-positive' === action ) {
 						$alert.setAttribute(
-							'data-false-positive',
+							'data-vrts-false-positiv',
 							shouldSetAction ? 'true' : 'false'
 						);
 					}
 
 					if ( 'read-status' === action ) {
 						$alert.setAttribute(
-							'data-state',
+							'data-vrts-state',
 							shouldSetAction ? 'read' : 'unread'
 						);
 					}

diff --git a/components/test-run-alerts/_style.scss b/components/test-run-alerts/_style.scss
@@ -83,12 +83,12 @@
 			width: 100%;
 		}
 
-		&[data-state="read"] {
+		&[data-vrts-state="read"] {
 			background: #f6f7f9;
 		}
 
 		&:hover,
-		&[data-current="true"] {
+		&[data-vrts-current="true"] {
 			border-color: var(--wp-admin-theme-color);
 			box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
 		}
@@ -111,7 +111,7 @@
 			left: 10px;
 			visibility: hidden;
 
-			[data-false-positive="true"] & {
+			[data-vrts-false-positiv="true"] & {
 				visibility: visible;
 			}
 		}
@@ -139,11 +139,11 @@
 			margin-bottom: 4px;
 			text-decoration: none;
 
-			[data-state="read"] & {
+			[data-vrts-state="read"] & {
 				font-weight: 400;
 			}
 
-			[data-state="unread"] &::after {
+			[data-vrts-state="unread"] &::after {
 				content: "";
 				width: 8px;
 				height: 8px;

diff --git a/components/test-run-alerts/index.php b/components/test-run-alerts/index.php
@@ -42,9 +42,9 @@
 					href="<?php echo esc_url( $alert_link ); ?>"
 					class="vrts-test-run-alerts__card"
 					data-vrts-alert
-					data-current="<?php echo esc_attr( $data['alert']->id === $alert->id ? 'true' : 'false' ); ?>"
-					data-state="<?php echo esc_attr( intval( $alert->alert_state ) === 0 ? 'unread' : 'read' ); ?>"
-					data-false-positive="<?php echo esc_attr( $alert->is_false_positive ? 'true' : 'false' ); ?>">
+					data-vrts-current="<?php echo esc_attr( $data['alert']->id === $alert->id ? 'true' : 'false' ); ?>"
+					data-vrts-state="<?php echo esc_attr( intval( $alert->alert_state ) === 0 ? 'unread' : 'read' ); ?>"
+					data-vrts-false-positiv="<?php echo esc_attr( $alert->is_false_positive ? 'true' : 'false' ); ?>">
 					<figure class="vrts-test-run-alerts__card-figure">
 						<img class="vrts-test-run-alerts__card-image" src="<?php echo esc_url( $alert->comparison_screenshot_url ); ?>" alt="<?php esc_attr_e( 'Comparison Screenshot', 'visual-regression-tests' ); ?>">
 						<span class="vrts-test-run-alerts__card-flag"><?php vrts()->icon( 'flag' ); ?></span>

diff --git a/components/test-run-alerts/script.js b/components/test-run-alerts/script.js
@@ -42,7 +42,7 @@ class VrtsTestRunAlerts extends window.HTMLElement {
 			);
 
 			setTimeout( () => {
-				$alert.setAttribute( 'data-state', 'read' );
+				$alert.setAttribute( 'data-vrts-state', 'read' );
 			}, 1000 );
 		}
 	}
@@ -71,10 +71,10 @@ class VrtsTestRunAlerts extends window.HTMLElement {
 		);
 
 		this.$alerts.forEach( ( item ) => {
-			item.setAttribute( 'data-current', 'false' );
+			item.setAttribute( 'data-vrts-current', 'false' );
 		} );
 
-		$el.setAttribute( 'data-current', 'true' );
+		$el.setAttribute( 'data-vrts-current', 'true' );
 		$comparisons.setAttribute( 'data-vrts-loading', 'true' );
 
 		fetch( href )
@@ -98,7 +98,7 @@ class VrtsTestRunAlerts extends window.HTMLElement {
 					behavior: 'smooth',
 				} );
 
-				$el.setAttribute( 'data-state', 'read' );
+				$el.setAttribute( 'data-vrts-state', 'read' );
 
 				if ( $newComparisons ) {
 					$comparisons.replaceWith( $newComparisons );
@@ -156,7 +156,7 @@ class VrtsTestRunAlerts extends window.HTMLElement {
 
 				$alert.forEach( ( item ) => {
 					item.setAttribute(
-						'data-state',
+						'data-vrts-state',
 						shouldSetAction ? 'read' : 'unread'
 					);
 				} );