Apply background to DataViews wrapper (#73390)

Co-authored-by: jameskoster <[email protected]>
Co-authored-by: oandregal <[email protected]>
Co-authored-by: andrewserong <[email protected]>
Co-authored-by: ntsekouras <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: t-hamano <[email protected]>

Author: 6 people

packages/dataviews/CHANGELOG.md

@@ -11,6 +11,7 @@
 - DataViews table layout: only apply hover styles when bulk actions are available. [#73248](https://github.com/WordPress/gutenberg/pull/73248)
 - DataViews: add support for activity layout. [#72780](https://github.com/WordPress/gutenberg/pull/72780)
 - DataViews: Add grid keyboard navigation. [#72997](https://github.com/WordPress/gutenberg/pull/72997)
+- DataViews: Introduce CSS var to enable users to apply a different background color to DataViews containers. [#73390](https://github.com/WordPress/gutenberg/pull/73390)
 - Field API: introduce the `format` prop to format the `date` field type. [#72999](https://github.com/WordPress/gutenberg/pull/72999)
 - Field API: fix display format for date. [#73538](https://github.com/WordPress/gutenberg/pull/73538)
 - Documentation: improve Edit component. [#73202](https://github.com/WordPress/gutenberg/pull/73202)

packages/dataviews/README.md

@@ -459,6 +459,12 @@ Optional. Pass an object with a list of `perPageSizes` to control the available
 
 An element to display when the `data` prop is empty. Defaults to `<p>No results</p>`.
 
+### Styling
+
+These are the CSS Custom Properties that can be used to tweak the appearance of the component:
+
+`--wp-dataviews-color-background`: sets the background color.
+
 ### Composition modes
 
 The `DataViews` component supports two composition modes:

packages/dataviews/src/components/dataviews/style.scss

@@ -14,7 +14,7 @@
 	flex-direction: column;
 	font-size: $default-font-size;
 	line-height: $default-line-height;
-	background-color: inherit;
+	background-color: var(--wp-dataviews-color-background, $white);
 }
 
 .dataviews__view-actions,

packages/dataviews/src/stories/dataviews.story.tsx

@@ -82,6 +82,11 @@ const defaultLayouts = {
 export const Default = ( {
 	perPageSizes = [ 10, 25, 50, 100 ],
 	hasClickableItems = true,
+	backgroundColor,
+}: {
+	perPageSizes?: number[];
+	hasClickableItems?: boolean;
+	backgroundColor?: string;
 } ) => {
 	const [ view, setView ] = useState< View >( {
 		...DEFAULT_VIEW,
@@ -94,28 +99,45 @@ export const Default = ( {
 		return filterSortAndPaginate( data, view, fields );
 	}, [ view ] );
 	return (
-		<DataViews
-			getItemId={ ( item ) => item.id.toString() }
-			paginationInfo={ paginationInfo }
-			data={ shownData }
-			view={ view }
-			fields={ fields }
-			onChangeView={ setView }
-			actions={ actions }
-			renderItemLink={ ( { item, ...props }: { item: SpaceObject } ) => (
-				<button
-					style={ { background: 'none', border: 'none', padding: 0 } }
-					onClick={ () => {
-						// eslint-disable-next-line no-alert
-						alert( 'Clicked: ' + item.name.title );
-					} }
-					{ ...props }
-				/>
-			) }
-			isItemClickable={ () => hasClickableItems }
-			defaultLayouts={ defaultLayouts }
-			config={ { perPageSizes } }
-		/>
+		<div
+			style={
+				{
+					'--wp-dataviews-color-background': backgroundColor,
+				} as React.CSSProperties
+			}
+		>
+			<DataViews
+				getItemId={ ( item ) => item.id.toString() }
+				paginationInfo={ paginationInfo }
+				data={ shownData }
+				view={ view }
+				fields={ fields }
+				onChangeView={ setView }
+				actions={ actions }
+				renderItemLink={ ( {
+					item,
+					...props
+				}: {
+					item: SpaceObject;
+				} ) => (
+					<button
+						style={ {
+							background: 'none',
+							border: 'none',
+							padding: 0,
+						} }
+						onClick={ () => {
+							// eslint-disable-next-line no-alert
+							alert( 'Clicked: ' + item.name.title );
+						} }
+						{ ...props }
+					/>
+				) }
+				isItemClickable={ () => hasClickableItems }
+				defaultLayouts={ defaultLayouts }
+				config={ { perPageSizes } }
+			/>
+		</div>
 	);
 };
 
@@ -133,6 +155,10 @@ Default.argTypes = {
 		control: 'boolean',
 		description: 'Are the items clickable',
 	},
+	backgroundColor: {
+		control: 'color',
+		description: 'Background color of the DataViews component',
+	},
 };
 
 export const Empty = () => {