Fancy crumbs and element action menus

[brandonkelly]

High level: this redesigns control panel breadcrumbs, and unifies element action menus across edit pages, slideouts, and selectable element chips & cards.

Overview

• Breadcrumbs have been redesigned to accommodate complex crumb UIs, including menus and chips.

• Entry and asset edit pages’ section and volume crumbs now include menus, making it possible to quickly navigate to another section or volume’s index source.

• Multi-site installs now include a site selector as the initial breadcrumb, on pages that need it.

• Page context menus have been moved into the global header beside the breadcrumbs.

• Elements can now define action menus, which will be displayed beside the breadcrumbs and context menu. These should include any actions that are unrelated to saving the content on the page.

• Element action menus also appear within element slideout headers, and selectable element chips & cards (with any destructive items omitted).

Technical Details

• Control panel screens can now include a site breadcrumb via CpScreenResponseBehavior::site(), and can make it a menu with additional selectable sites via CpScreenResponseBehavior::selectableSites().
• Control panel screens can now specify an action menu via CpScreenResponseBehavior::actionMenuItems().
• Control panel screens can now specify context menu items via CpScreenResponseBehavior::contextMenuItems(). contextMenuHtml() and contextMenuTemplate() have been removed in favor of that.
• Elements can define their action menu items via safeActionMenuItems() and destructiveActionMenuItems().
• Element action menu items can be customized via Element::EVENT_DEFINE_ACTION_MENU_ITEMS.
• Elements can now define breadcrumbs via crumbs() (rather than prepareEditScreen()).
• Menus can be added to any breadcrumb via a menu key, set to an array of menu options.
• Disclosure menus can now easily be created throughout the control panel via craft\helpers\Cp::disclosureMenu().

Related

• This iterates on the changes in Feature/dev 1165 edit element additional toolbar menu #13847, so user actions are now included in users’ action menus, rather than getting their own unique menu beside the “Status” meta value.
• Should resolve the need for Convert context menu on element edit page to disclosure menu #12946.
• Resolves ACC-7

[linear]

ACC-7 Convert context menus to disclosure-type menus

IMPORTANT: This should only happen on the element pages, not on index pages/tables. This is because they cause a change of context instead of just loading new page content.

However, this could also be accomplished by breaking this out into two separate select components and adding a "Go" button.

Accessibility Requirements:

• Create a disclosure menu so that it incorporates two separate select menus — one for site and one for version. (The current markup doesn't make sense from a screen reader user's perspective)
• A distinct action button to trigger navigation to the selected version. This is because lack of an action button is a violation of On Input, unless there is a visible warning that a page redirect will occur when a selection is made.
• The visible text of the disclosure trigger should be distinct from the selections, to ensure that the trigger text remains consistent across pages/versions/drafts (Consistent Identification).
• The user's context should be apparent from:
  • The page <title> element
  • An indicator somewhere near the entry title (?)

[theskyfloor]

This is beautiful, wanted this for years!

[alexanderloewe]

❤️