diff --git a/packages/commands/src/components/command-menu.js b/packages/commands/src/components/command-menu.js
index c0e6062d934dc..f2ea39d112da6 100644
--- a/packages/commands/src/components/command-menu.js
+++ b/packages/commands/src/components/command-menu.js
@@ -24,7 +24,7 @@ import {
store as keyboardShortcutsStore,
useShortcut,
} from '@wordpress/keyboard-shortcuts';
-import { Icon } from '@wordpress/icons';
+import { Icon, search as inputIcon } from '@wordpress/icons';
/**
* Internal dependencies
@@ -168,8 +168,9 @@ function CommandInput( { isOpen, search, setSearch } ) {
ref={ commandMenuInput }
value={ search }
onValueChange={ setSearch }
- placeholder={ __( 'Type a command or search' ) }
+ placeholder={ __( 'Search for commands' ) }
aria-activedescendant={ selectedItemId }
+ icon={ search }
/>
);
}
@@ -260,6 +261,7 @@ export function CommandMenu() {
onKeyDown={ onKeyDown }
>
+
[cmdk-list] {
- max-height: 400px;
+ max-height: 368px; // Specific to not have commands overflow oddly.
overflow: auto;
- & > [cmdk-list-sizer] :has([cmdk-group-items]:not(:empty)) {
- padding: $grid-unit;
+ & > [cmdk-list-sizer]:not(:empty) {
+ padding: 0 $grid-unit $grid-unit;
}
}
@@ -105,7 +105,7 @@
justify-content: center;
height: $grid-unit-80;
white-space: pre-wrap;
- color: $gray-800;
+ color: $gray-900;
}
[cmdk-loading] {
@@ -115,10 +115,14 @@
[cmdk-list-sizer] {
position: relative;
}
+}
- [cmdk-group]:has([cmdk-group-items]:not(:empty)):not([hidden]) + [cmdk-group]:has([cmdk-group-items]:not(:empty)) {
- border-top: $border-width solid $gray-200;
- }
+.commands-command-menu__item span {
+ // Ensure commands do not run off the edge (great for post titles).
+ display: inline-block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.commands-command-menu__item mark {