DataViews: consolidate CSS selectors naming schema (#57651)

WordPress · Jan 9, 2024 · 08f704e · 08f704e
1 parent 8f4f011
commit 08f704e
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 31 deletions.
diff --git a/packages/dataviews/src/dataviews.js b/packages/dataviews/src/dataviews.js
@@ -57,7 +57,7 @@ export default function DataViews( {
 			<VStack spacing={ 0 } justify="flex-start">
 				<HStack
 					alignment="flex-start"
-					className="dataviews__filters-view-actions"
+					className="dataviews-filters__view-actions"
 				>
 					<HStack justify="start" wrap>
 						{ search && (

diff --git a/packages/dataviews/src/dropdown-menu-helper.js b/packages/dataviews/src/dropdown-menu-helper.js
@@ -48,7 +48,7 @@ export const DropdownMenuRadioItemCustom = forwardRef(
 						<Icon icon={ radioCheck } />
 					) : (
 						<span
-							className="dataviews__filters-custom-menu-radio-item-prefix"
+							className="dataviews-filters__custom-menu-radio-item-prefix"
 							aria-hidden="true"
 						></span>
 					)

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
@@ -10,7 +10,7 @@
 	}
 }
 
-.dataviews__filters-view-actions {
+.dataviews-filters__view-actions {
 	padding: $grid-unit-15 $grid-unit-40;
 	.components-search-control {
 		flex-grow: 1;
@@ -55,7 +55,7 @@
 	margin: $grid-unit-40 0 $grid-unit-20;
 }
 
-.dataviews-table-view {
+.dataviews-view-table {
 	width: 100%;
 	text-indent: 0;
 	border-color: inherit;
@@ -89,8 +89,8 @@
 		th:first-child {
 			padding-left: $grid-unit-40;
 
-			.dataviews-table-header-button,
-			.dataviews-table-header {
+			.dataviews-view-table-header-button,
+			.dataviews-view-table-header {
 				margin-left: - #{$grid-unit-10};
 			}
 		}
@@ -129,7 +129,7 @@
 		}
 	}
 
-	.dataviews-table-header-button {
+	.dataviews-view-table-header-button {
 		padding: $grid-unit-05 $grid-unit-10;
 		font-size: 11px;
 		text-transform: uppercase;
@@ -148,12 +148,12 @@
 		}
 	}
 
-	.dataviews-table-header {
+	.dataviews-view-table-header {
 		padding-left: $grid-unit-05;
 	}
 }
 
-.dataviews-grid-view {
+.dataviews-view-grid {
 	margin-bottom: $grid-unit-30;
 	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 	padding: 0 $grid-unit-40;
@@ -221,7 +221,7 @@
 	}
 }
 
-.dataviews-list-view {
+.dataviews-view-list {
 	margin: 0;
 
 	li {
@@ -235,7 +235,7 @@
 		}
 	}
 
-	.dataviews-list-view__item {
+	.dataviews-view-list__item {
 		padding: $grid-unit-15 $grid-unit-40;
 		cursor: default;
 		&:focus,
@@ -252,16 +252,16 @@
 		}
 	}
 
-	.dataviews-list-view__item-selected,
-	.dataviews-list-view__item-selected:hover {
+	.dataviews-view-list__item-selected,
+	.dataviews-view-list__item-selected:hover {
 		background-color: $gray-100;
 
 		&:focus {
 			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		}
 	}
 
-	.dataviews-list-view__media-wrapper {
+	.dataviews-view-list__media-wrapper {
 		min-width: $grid-unit-40;
 		height: $grid-unit-40;
 		border-radius: $grid-unit-05;
@@ -281,19 +281,19 @@
 		}
 	}
 
-	.dataviews-list-view__media-placeholder {
+	.dataviews-view-list__media-placeholder {
 		min-width: $grid-unit-40;
 		height: $grid-unit-40;
 		background-color: $gray-200;
 	}
 
-	.dataviews-list-view__fields {
+	.dataviews-view-list__fields {
 		color: $gray-700;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 
-		.dataviews-list-view__field {
+		.dataviews-view-list__field {
 			margin-right: $grid-unit-15;
 
 			&:last-child {
@@ -312,7 +312,7 @@
 	padding: 0 $grid-unit-40;
 }
 
-.dataviews__filters-custom-menu-radio-item-prefix {
+.dataviews-filters__custom-menu-radio-item-prefix {
 	display: block;
 	width: 24px;
 }
diff --git a/packages/dataviews/src/view-grid.js b/packages/dataviews/src/view-grid.js
@@ -42,7 +42,7 @@ export default function ViewGrid( {
 			gap={ 8 }
 			columns={ 2 }
 			alignment="top"
-			className="dataviews-grid-view"
+			className="dataviews-view-grid"
 		>
 			{ usedData.map( ( item ) => (
 				<VStack

diff --git a/packages/dataviews/src/view-list.js b/packages/dataviews/src/view-list.js
@@ -46,7 +46,7 @@ export default function ViewList( {
 	};
 
 	return (
-		<ul className="dataviews-list-view">
+		<ul className="dataviews-view-list">
 			{ usedData.map( ( item ) => {
 				return (
 					<li key={ getItemId( item ) }>
@@ -56,29 +56,29 @@ export default function ViewList( {
 							aria-pressed={ selection.includes( item.id ) }
 							onKeyDown={ onEnter( item ) }
 							className={ classNames(
-								'dataviews-list-view__item',
+								'dataviews-view-list__item',
 								{
-									'dataviews-list-view__item-selected':
+									'dataviews-view-list__item-selected':
 										selection.includes( item.id ),
 								}
 							) }
 							onClick={ () => onSelectionChange( [ item ] ) }
 						>
 							<HStack spacing={ 3 } alignment="flex-start">
-								<div className="dataviews-list-view__media-wrapper">
+								<div className="dataviews-view-list__media-wrapper">
 									{ mediaField?.render( { item } ) || (
-										<div className="dataviews-list-view__media-placeholder"></div>
+										<div className="dataviews-view-list__media-placeholder"></div>
 									) }
 								</div>
 								<HStack>
 									<VStack spacing={ 1 }>
 										{ primaryField?.render( { item } ) }
-										<div className="dataviews-list-view__fields">
+										<div className="dataviews-view-list__fields">
 											{ visibleFields.map( ( field ) => {
 												return (
 													<span
 														key={ field.id }
-														className="dataviews-list-view__field"
+														className="dataviews-view-list__field"
 													>
 														{ field.render( {
 															item,

diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js
@@ -90,7 +90,7 @@ const HeaderMenu = forwardRef( function HeaderMenu(
 			trigger={
 				<Button
 					size="compact"
-					className="dataviews-table-header-button"
+					className="dataviews-view-table-header-button"
 					ref={ ref }
 					variant="tertiary"
 				>
@@ -357,9 +357,9 @@ function ViewTable( {
 	const sortValues = { asc: 'ascending', desc: 'descending' };
 
 	return (
-		<div className="dataviews-table-view-wrapper">
+		<div>
 			<table
-				className="dataviews-table-view"
+				className="dataviews-view-table"
 				aria-busy={ isLoading }
 				aria-describedby={ tableNoticeId }
 			>
@@ -410,7 +410,7 @@ function ViewTable( {
 						) ) }
 						{ !! actions?.length && (
 							<th data-field-id="actions">
-								<span className="dataviews-table-header">
+								<span className="dataviews-view-table-header">
 									{ __( 'Actions' ) }
 								</span>
 							</th>
@@ -450,7 +450,7 @@ function ViewTable( {
 				</tbody>
 			</table>
 			<div
-				className={ classNames( 'dataviews-table-status', {
+				className={ classNames( {
 					'dataviews-loading': isLoading,
 					'dataviews-no-results': ! hasData && ! isLoading,
 				} ) }