Style adjustments

WordPress · Jan 11, 2024 · b0647cd · b0647cd
1 parent 0cf861c
commit b0647cd
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 12 deletions.
diff --git a/packages/dataviews/src/bulk-actions.js b/packages/dataviews/src/bulk-actions.js
@@ -124,12 +124,14 @@ export default function BulkActions( {
 			<DropdownMenu
 				open={ isMenuOpen }
 				onOpenChange={ onMenuOpenChange }
-				label={ __( 'Filters' ) }
+				label={ __( 'Bulk actions' ) }
+				style={ { minWidth: '240px' } }
 				trigger={
 					<Button
 						className="dataviews-bulk-edit-button"
 						__next40pxDefaultSize
-						variant="secondary"
+						variant="tertiary"
+						size="compact"
 					>
 						{ selection.length
 							? sprintf(

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
@@ -85,6 +85,14 @@
 		&[data-field-id="actions"] {
 			text-align: right;
 		}
+
+		&.dataviews-view-table__checkbox-column {
+			padding-right: 0;
+		}
+
+		.components-checkbox-control__input-container {
+			margin: $grid-unit-05;
+		}
 	}
 	tr {
 		border-bottom: 1px solid $gray-100;
@@ -113,12 +121,33 @@
 		}
 
 		&:hover {
-			td {
-				background-color: #f8f8f8;
+			background-color: #f8f8f8;
+		}
+
+		.components-checkbox-control__input {
+			opacity: 0;
+
+			&:checked,
+			&:indeterminate,
+			&:focus {
+				opacity: 1;
 			}
 		}
+
+		&:focus-within,
+		&:hover {
+			.components-checkbox-control__input {
+				opacity: 1;
+			}
+		}
+
 		&.is-selected {
-			background-color: #f7f8fe;
+			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+			color: $gray-700;
+
+			&:hover {
+				background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+			}
 		}
 	}
 	thead {
@@ -397,6 +426,6 @@
 	width: 24px;
 }
 
-.dataviews-bulk-edit-button.components-button.is-secondary {
+.dataviews-bulk-edit-button.components-button {
 	flex-shrink: 0;
 }
diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js
@@ -444,9 +444,10 @@ function ViewTable( {
 				aria-describedby={ tableNoticeId }
 			>
 				<thead>
-					<tr>
+					<tr className="dataviews-view-table__row">
 						{ hasBulkActions && (
 							<th
+								className="dataviews-view-table__checkbox-column"
 								style={ {
 									width: 20,
 									minWidth: 20,
@@ -518,14 +519,18 @@ function ViewTable( {
 						usedData.map( ( item, index ) => (
 							<tr
 								key={ getItemId( item ) }
-								className={ classnames( {
-									'is-selected': selection.includes(
-										getItemId( item ) || index
-									),
-								} ) }
+								className={ classnames(
+									'dataviews-view-table__row',
+									{
+										'is-selected': selection.includes(
+											getItemId( item ) || index
+										),
+									}
+								) }
 							>
 								{ hasBulkActions && (
 									<td
+										className="dataviews-view-table__checkbox-column"
 										style={ {
 											width: 20,
 											minWidth: 20,