Repository navigation
[6.x] Command palette - #20081
[6.x] Command palette#20081
Conversation
📚 Storybook previews@craftcms/ui — open Storybook Changed components:
resources/js — open Storybook No changed components detected in this Storybook. |
d8b14cf to
3fa855b
Compare
d9331d9 to
a86c7d5
Compare
3fa855b to
dca9dcb
Compare
a86c7d5 to
234625c
Compare
dca9dcb to
b82ac3c
Compare
A Cmd/Ctrl+K search over the control panel's pages, actions and content. It searches the current page first: its fields, headings, tabs, landmarks, Matrix blocks, sidebar panels and secondary nav. It also searches the page's own actions, settings pages, element search results and the Craft CMS glossary. Results can open views in the palette: confirmations, server-built forms, keyboard shortcuts and glossary terms. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Settings has a "Users" page too, and keying the results by label picked whichever came last. That passed only while both had the same icon. Where the solid icons aren't installed, as in CI, the Settings one keeps its light icon, so "All users" was compared against the wrong parent. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…tries Plugins added to the palette by listening for three resolving events. They now register with singleton registries instead, as with field and widget types: - PageRegistry and ActionRegistry take a handle and a provider closure, called with the user, which returns the items to add. - SearchProviderRegistry takes provider instances, or class names resolved from the container each time the palette asks, so a provider can depend on request-scoped services. Craft's own providers are its defaults. All three can remove what's registered, Craft's search providers included. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The palette reaches the slideouts module through element action menus, and the slideouts reach PageScreen, which imported the palette. That cycle deadlocked AdminTableData.browser.test.ts, whose slideouts mock awaits the real module: CI's browser tests hung until the job timed out. PageScreen now loads the palette as an async component. So that Cmd+K works before that component arrives, the shortcut is installed with the control panel rather than by the component, and a palette the shortcut opened early finishes opening once it mounts. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
A result's menu came after the wider of its label and hint, centered on both, so a long hint such as an asset's filename pushed it away from the label. Rows are now two-line grids: the menu follows the label on the first line, and the hint has the second to itself, where it can't push the menu. The hint and icon sit beside the result's link or button rather than in it, so the hint is read as a description, along with the category. The menus' focus rings now sit just inside their edges, and take the selected row's text color, as the accent color didn't stand out against it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
"Publish {release}" now opens a view with the release page's drafts
table, where drafts can be removed, rather than a confirmation. Publish
stays disabled while any draft is blocked, with a tooltip saying why.
The release page's Publish now and Schedule buttons take that reason
from the same place.
Server-built forms can now disable their submit button with a reason,
and tables within them reload the form when they change.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Tab and Shift+Tab now cycle between the search box, the focused result, and its menu button, rather than moving on to other results, which the arrow keys move between. Tabbing back to the search box focuses its input, so typing goes into the search again. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
"Esc Close", or "Esc Clear search" while there's a search. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Escape now does the same thing anywhere in the results: it clears the search and returns to the search box, or closes the palette once there's no search. An open result menu still closes first, and a view still goes back to the results. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
A "Search Craft CMS documentation" action, listed from the start, opens a view with its own search box. It searches the docs, Knowledge Base, and glossary on craftcms.com, through a new command-palette/docs endpoint, and opens results there in a new tab. Only this version of Craft's docs are included. What's typed there is the only thing sent to craftcms.com. Results show their titles' and summaries' inline formatting, such as code, through new labelHtml and hintHtml item properties. The glossary search provider and view are removed, as glossary terms now come through the docs search. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Releases were listed among the palette's pages, capped at the 50 most recent unpublished ones. A releases provider now searches them by name as the user types, published ones included, unpublished ones first, with their status and date as each result's hint. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
`Craft.commandPalette.registerActions()` now returns `{unregister}` rather
than the unregister function itself, so it can return more later.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
It only lists the provider's results before everyone else's, which the new name says, whether or not the results are about the page being viewed. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The book icon was centered in its box, and is narrower than it, so it sat a few pixels in from the "Results" heading. It's now flush with it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The book icon kept a 24px-wide box, leaving a wide gap before each result's title. It now takes only its own width, plus the small spacing. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
# Conflicts: # resources/js/modules/ui/FieldNode.vue
|
This PR had conflicts with Claude's response
|
…nstalled Uses the docs search API's product/version params instead of scopes and client-side URL filtering. When Commerce is installed, its major version's docs are searched in parallel and interleaved with Craft's results. Amp-Thread-ID: https://ampcode.com/threads/T-d94ab28e-8c9d-40a0-a21a-96acf03a6584 Co-authored-by: Amp <amp@ampcode.com>
Amp-Thread-ID: https://ampcode.com/threads/T-c27fac24-ac8b-4256-be4b-7c1306ada663 Co-authored-by: Amp <amp@ampcode.com>
…r-icons Match the header's search and notification triggers
Amp-Thread-ID: https://ampcode.com/threads/T-c27fac24-ac8b-4256-be4b-7c1306ada663 Co-authored-by: Amp <amp@ampcode.com>
# Conflicts: # CHANGELOG.md
|
This PR had conflicts with Claude's response
|
# Conflicts: # CHANGELOG.md
|
This PR had conflicts with Claude's response
|
The actions button followed the result under the pointer when it had actions, so Tab from the search box could reach another result's actions than the active option and the keyboard instructions said it would. Amp-Thread-ID: https://ampcode.com/threads/T-c27fac24-ac8b-4256-be4b-7c1306ada663 Co-authored-by: Amp <amp@ampcode.com>
[6.x] Command palette: Budugbox with a listbox of results, and result actions after the listbox
Amp-Thread-ID: https://ampcode.com/threads/T-c27fac24-ac8b-4256-be4b-7c1306ada663 Co-authored-by: Amp <amp@ampcode.com>
Amp-Thread-ID: https://ampcode.com/threads/T-c27fac24-ac8b-4256-be4b-7c1306ada663 Co-authored-by: Amp <amp@ampcode.com>
…/cms into feature/command-palette
Popovers set their invoker's start margin to the button group overlap, which is unset outside a group, so it computed to 0 and replaced a flush craft-button invoker's own margin. craft-button invokers now take the overlap themselves, alongside their flush margin, and the popover only sets it on other invokers. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PxhedKGW7eCLF4xLBVmh6o
Results with actions now show their button's icon until the actions menu sits over them, rather than only when hovered or selected. The selected row's button hovers in a tint of the row's own colors, so its icon stays visible, and the Tab hint follows the Esc hint. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PxhedKGW7eCLF4xLBVmh6o
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PxhedKGW7eCLF4xLBVmh6o
Description
Adds a command palette/global search to the control panel. Activated via a search button in the global header, or with a ⌘/Ctrl + K keyboard shortcut.
Overview
confirmmessage asks inside the palette. Destructive actions are styled as dangerous and sorted last.Commands in core
On this page: found in the page itself, and listed first
Content → Content Blocks → Exhibition Location.Page actions: depend on the page being viewed
Pages
Actions
allowAdminChanges):Everything is gated on the same permissions and edition checks as the screens it stands in for.
Search
Extending it from plugins
Server side. Every item is a
CommandPaletteItem:Add pages and actions for the current user, from a service provider's
boot():Each closure also gets any other dependencies it type-hints.
remove('handle')takes one back out.An
httpaction's response can carrymessagesto show and aredirectto follow, asasSuccess()provides.Add a search provider. The palette queries each available provider in parallel as the user types, then ranks everything together, so a provider only has to find matches:
Client side, through
Craft.commandPalette:A page's own action menu shows up as palette actions when it sits inside an element with
data-command-palette-actions.Client items take the same shape as server items, plus
run(), andconfirmto ask first.Screenshots
The palette’s default state on an entry: recent pages, then the page’s actions.
Searching “image”: fields on the page come first, with where each sits, then matching settings.
Searching “gallery”: a field, its settings, assets with thumbnails, an entry and a delete action.
A result’s menu, with the element’s own actions.
Searching “create”: actions from across the control panel, each labeled with where it belongs.
Searching “spring”: a release, with its status, and its actions.
Publishing a release: its drafts and whether each is ready. Drafts can be removed, and Publish is held while any is blocked.
Scheduling a release: a server-built form, shown in place of the results.
A destructive action confirming inside the palette.
Searching the Craft CMS docs, with inline formatting such as code.
Keyboard shortcuts.
The user’s notifications, with Mark all as read in the view’s header.