@wordpress/commands 0.10.0 → 0.11.0

package/src/components/command-menu.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { Command, useCommandState } from 'cmdk';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -24,7 +25,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
@@ -53,9 +54,14 @@ function CommandMenuLoader( { name, search, hook, setLoader, close } ) {
 					>
 						<HStack
 							alignment="left"
-							className="commands-command-menu__item"
+							className={ classnames(
+								'commands-command-menu__item',
+								{
+									'has-icon': command.icon,
+								}
+							) }
 						>
-							<Icon icon={ command.icon } />
+							{ command.icon && <Icon icon={ command.icon } /> }
 							<span>
 								<TextHighlight
 									text={ command.label }
@@ -123,9 +129,11 @@ export function CommandMenuGroup( { isContextual, search, setLoader, close } ) {
 				>
 					<HStack
 						alignment="left"
-						className="commands-command-menu__item"
+						className={ classnames( 'commands-command-menu__item', {
+							'has-icon': command.icon,
+						} ) }
 					>
-						<Icon icon={ command.icon } />
+						{ command.icon && <Icon icon={ command.icon } /> }
 						<span>
 							<TextHighlight
 								text={ command.label }
@@ -168,8 +176,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 }
 		/>
 	);
 }
@@ -188,7 +197,7 @@ export function CommandMenu() {
 		registerShortcut( {
 			name: 'core/commands',
 			category: 'global',
-			description: __( 'Open the command palette' ),
+			description: __( 'Open the command palette.' ),
 			keyCombination: {
 				modifier: 'primary',
 				character: 'k',
@@ -260,6 +269,7 @@ export function CommandMenu() {
 					onKeyDown={ onKeyDown }
 				>
 					<div className="commands-command-menu__header">
+						<Icon icon={ inputIcon } />
 						<CommandInput
 							search={ search }
 							setSearch={ setSearch }

package/src/components/style.scss

@@ -1,9 +1,15 @@
 // dirty hack to clean up modal
 .commands-command-menu {
-	width: 100%;
-	max-width: 480px;
+	border-radius: $grid-unit-05;
+	width: calc(100% - #{$grid-unit-40});
+	margin: auto;
+	max-width: 420px;
 	position: relative;
-	top: 15%;
+	top: calc(15% + #{$header-height});
+
+	@include break-small() {
+		top: 15%;
+	}
 
 	.components-modal__content {
 		margin: 0;
@@ -19,6 +25,7 @@
 .commands-command-menu__header {
 	display: flex;
 	align-items: center;
+	padding-left: $grid-unit-20;
 
 	.components-button {
 		height: $grid-unit-70;
@@ -42,33 +49,32 @@
 	[cmdk-input] {
 		border: none;
 		width: 100%;
-		padding: $grid-unit-20;
+		padding: $grid-unit-20 $grid-unit-20 $grid-unit-20 $grid-unit-10;
 		outline: none;
 		color: $gray-900;
 		margin: 0;
-		font-size: 20px;
+		font-size: 16px;
 		line-height: 28px;
-		border-bottom: 1px solid $gray-200;
 		border-radius: 0;
 
 		&::placeholder {
-			color: $gray-600;
+			color: $gray-700;
 		}
 
 		&:focus {
 			box-shadow: none;
 			outline: none;
-			border-bottom: 1px solid $gray-200;
 		}
 	}
 
 	[cmdk-item] {
-		border-radius: $grid-unit-05;
+		border-radius: $radius-block-ui;
 		cursor: pointer;
 		display: flex;
 		align-items: center;
-		padding: $grid-unit;
 		color: $gray-900;
+		font-size: $default-font-size;
+		min-height: $button-size-next-default-40px;
 
 		&[aria-selected="true"],
 		&:active {
@@ -86,16 +92,25 @@
 		}
 
 		svg {
-			fill: $gray-600;
+			fill: $gray-900;
+		}
+
+		> div {
+			padding: $grid-unit;
+			padding-left: $grid-unit-50; // Account for commands without icons.
+		}
+
+		> .has-icon {
+			padding-left: $grid-unit;
 		}
 	}
 
 	[cmdk-root] > [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] > [cmdk-group] > [cmdk-group-items]:not(:empty) {
+			padding: 0 $grid-unit $grid-unit;
 		}
 	}
 
@@ -103,9 +118,9 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		height: $grid-unit-80;
 		white-space: pre-wrap;
-		color: $gray-800;
+		color: $gray-900;
+		padding: $grid-unit-10 0 $grid-unit-40;
 	}
 
 	[cmdk-loading] {
@@ -115,10 +130,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 {

package/src/store/selectors.js

@@ -3,6 +3,14 @@
  */
 import createSelector from 'rememo';
 
+/**
+ * Returns the registered static commands.
+ *
+ * @param {Object}  state      State tree.
+ * @param {boolean} contextual Whether to return only contextual commands.
+ *
+ * @return {import('./actions').WPCommandConfig[]} The list of registered commands.
+ */
 export const getCommands = createSelector(
 	( state, contextual = false ) =>
 		Object.values( state.commands ).filter( ( command ) => {
@@ -13,6 +21,14 @@ export const getCommands = createSelector(
 	( state ) => [ state.commands, state.context ]
 );
 
+/**
+ * Returns the registered command loaders.
+ *
+ * @param {Object}  state      State tree.
+ * @param {boolean} contextual Whether to return only contextual command loaders.
+ *
+ * @return {import('./actions').WPCommandLoaderConfig[]} The list of registered command loaders.
+ */
 export const getCommandLoaders = createSelector(
 	( state, contextual = false ) =>
 		Object.values( state.commandLoaders ).filter( ( loader ) => {
@@ -23,10 +39,24 @@ export const getCommandLoaders = createSelector(
 	( state ) => [ state.commandLoaders, state.context ]
 );
 
+/**
+ * Returns whether the command palette is open.
+ *
+ * @param {Object} state State tree.
+ *
+ * @return {boolean} Returns whether the command palette is open.
+ */
 export function isOpen( state ) {
 	return state.isOpen;
 }
 
+/**
+ * Returns whether the active context.
+ *
+ * @param {Object} state State tree.
+ *
+ * @return {string} Context.
+ */
 export function getContext( state ) {
 	return state.context;
 }