Fix empty state

WordPress · May 11, 2023 · 30e14d2 · 30e14d2
1 parent 65eb8ab
commit 30e14d2
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/packages/commands/src/components/command-menu.js b/packages/commands/src/components/command-menu.js
@@ -111,6 +111,10 @@ export function CommandMenuGroup( { group, search, setLoader, close } ) {
 		[ group, hasSearch ]
 	);
 
+	if ( ! commands.length && ! loaders.length ) {
+		return null;
+	}
+
 	return (
 		<Command.Group>
 			{ commands.map( ( command ) => (
@@ -230,7 +234,7 @@ export function CommandMenu() {
 						/>
 					</div>
 					<Command.List>
-						{ ! isLoading && (
+						{ search && ! isLoading && (
 							<Command.Empty>
 								{ __( 'No results found.' ) }
 							</Command.Empty>

diff --git a/packages/commands/src/components/style.scss b/packages/commands/src/components/style.scss
@@ -93,7 +93,15 @@
 	[cmdk-root] > [cmdk-list] {
 		max-height: 400px;
 		overflow: auto;
-		padding: $grid-unit;
+
+		& > [cmdk-list-sizer] {
+			padding: $grid-unit;
+
+			// Hides the padding in empty contexts.
+			&:empty {
+				display: none;
+			}
+		}
 	}
 
 	[cmdk-empty] {