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 {