Set pagination to bottom of modal

Signed-off-by: brookewp <brooke.kaminski@automattic.com>
Automattic · Dec 18, 2024 · 27ad14f · 27ad14f
1 parent a5f48d4
commit 27ad14f
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 4 deletions.
diff --git a/src/blocks/remote-data-container/components/item-list/ItemList.tsx b/src/blocks/remote-data-container/components/item-list/ItemList.tsx
@@ -51,7 +51,7 @@ export function ItemList( props: ItemListProps ) {
 
 	const [ view, setView ] = useState< View >( {
 		type: 'table' as const,
-		perPage: 10,
+		perPage: 8,
 		page: 1,
 		search: '',
 		fields: tableFields.filter(

diff --git a/src/blocks/remote-data-container/components/modals/BaseModal.tsx b/src/blocks/remote-data-container/components/modals/BaseModal.tsx
@@ -4,6 +4,7 @@ import { __ } from '@/utils/i18n';
 
 export interface BaseModalProps {
 	children: JSX.Element;
+	className?: string;
 	headerActions?: JSX.Element;
 	headerImage?: string;
 	onClose: () => void;
@@ -14,7 +15,7 @@ export interface BaseModalProps {
 export function BaseModal( props: BaseModalProps ) {
 	return (
 		<Modal
-			className="remote-data-blocks-modal"
+			className={ `${ props.className } remote-data-blocks-modal` }
 			headerActions={
 				<>
 					{ props.headerImage && (

diff --git a/src/blocks/remote-data-container/components/modals/DataViewsModal.tsx b/src/blocks/remote-data-container/components/modals/DataViewsModal.tsx
@@ -38,6 +38,7 @@ export function DataViewsModal( props: DataViewsModalProps ) {
 	return (
 		<ModalWithButtonTrigger
 			buttonText={ __( 'Choose' ) }
+			className="rdb-editor_data-views-modal"
 			isOpen={ isOpen }
 			onClose={ close }
 			onOpen={ open }
@@ -46,9 +47,7 @@ export function DataViewsModal( props: DataViewsModalProps ) {
 			<ItemList
 				blockName={ props.blockName }
 				loading={ loading }
-				noResultsText={ __( 'No items found' ) }
 				onSelect={ onSelectItem }
-				placeholderText={ __( 'Select an item' ) }
 				results={ results }
 				searchTerms={ searchTerms }
 				setSearchTerms={ setSearchTerms }

diff --git a/src/blocks/remote-data-container/editor.scss b/src/blocks/remote-data-container/editor.scss
@@ -114,3 +114,14 @@ remote-data-blocks-inline-field {
 	padding-left: 48px;
 }
 
+.rdb-editor_data-views-modal .components-modal__content {
+	padding: 0;
+
+	> :nth-child(2) {
+		height: 100%;
+	}
+
+	.dataviews-view-table {
+		padding: 4px 32px 32px;
+	}
+}