Use CSS naming schema for selectors

WordPress · Jan 9, 2024 · 537e399 · 537e399
1 parent 60a214b
commit 537e399
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
@@ -228,7 +228,7 @@
 	li {
 		margin: 0;
 
-		.dataviews-list-view__item-wrapper {
+		.dataviews-view-list__item-wrapper {
 			position: relative;
 			padding-right: $grid-unit-30;
 			border-radius: $grid-unit-05;
@@ -247,19 +247,19 @@
 		&:not(.is-selected):hover {
 			color: var(--wp-admin-theme-color);
 
-			.dataviews-list-view__fields {
+			.dataviews-view-list__fields {
 				color: var(--wp-admin-theme-color);
 			}
 		}
 	}
 
 	li.is-selected,
 	li.is-selected:focus-within {
-		.dataviews-list-view__item-wrapper {
+		.dataviews-view-list__item-wrapper {
 			background-color: var(--wp-admin-theme-color);
 			color: $white;
 
-			.dataviews-list-view__fields,
+			.dataviews-view-list__fields,
 			.components-button {
 				color: $white;
 			}
@@ -334,15 +334,15 @@
 		}
 	}
 
-	.dataviews-list-view__details-button {
+	.dataviews-view-list__details-button {
 		align-self: center;
 		opacity: 0;
 	}
 
 	li.is-selected,
 	li:hover,
 	li:focus-within {
-		.dataviews-list-view__details-button {
+		.dataviews-view-list__details-button {
 			opacity: 1;
 		}
 	}

diff --git a/packages/dataviews/src/view-list.js b/packages/dataviews/src/view-list.js
@@ -59,7 +59,7 @@ export default function ViewList( {
 							'is-selected': selection.includes( item.id ),
 						} ) }
 					>
-						<HStack className="dataviews-list-view__item-wrapper">
+						<HStack className="dataviews-view-list__item-wrapper">
 							<div
 								role="button"
 								tabIndex={ 0 }