Repository navigation
[6.x] Custom sidebar tabs - #20005
Merged
Merged
Conversation
Field layout tabs get an `icon` setting, chosen from their settings slideout, which is shown before the tab's name in field layout designers and on edit forms' tabs. - Adds a `prefix` slot to `<craft-tab>`. - Adds `Ui\Nodes\Tab::icon()` and an `$icon` argument to `Ui::addTab()`. - Adds `Cp\Components\Tab::icon()`. `UiHtmlRenderer::tabMenu()` includes tabs' icons, which `LegacyTabsShim` shows. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The MCP's field layout tools already pass tab icons through; the layout schema's description (including the nullable variant used by update tools) now mentions them, with a test that they're set, returned, and stored. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Field layout tabs now have a type: `content` (the default) or `sidebar`. Sidebar tabs always come after content tabs. In field layout designers: - Content and sidebar tabs sit in separate "Content Tabs" and "Sidebar Tabs" panes, each with a New Tab button. The panes stack when the designer is narrow. - Tabs can be dragged between the panes, or moved with the new "Move to the sidebar" / "Move to content" actions, to change their type. - Sidebar tabs protrude an icon-only tab from their content, with the name in a tooltip. Tabs without an icon show their name's first letter. - Fields in sidebar tabs don't have width pickers. - The workspace drops its surface for a grid of dots, with solid tab outlines and a ring keeping the dots clear of them. Drop placeholders are now translucent blobs in the dragged item's shape. Also fixes applying a sidebar tab's settings, which returned its type as a serialized enum that couldn't be saved. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Sidebar tabs now render as panels in element edit forms' details sidebar, between Info and Activity, using the tab's icon (or its name's first letter) and name. Their fields stay part of the main form, so values, validation errors, conditional fields, and autosave work as before. Renderers without a sidebar, such as nested element blocks, show them as ordinary tabs. - Adds `Ui\Nodes\Tab::sidebar()` and a `$sidebar` argument to `Ui::addTab()`. - `UiRenderer` accepts `sidebarTabOutlets` to render sidebar tabs into. - `DetailsPanels` panels can show their label's initial instead of an icon, via `initialIcon`. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…signer The Display tab's preview drops its surface for the field layout designer's dot grid, with hairlines separating it from the settings beside it and along the bottom. The sample chip and card get a ring keeping the dots clear of them, and the chip's outline now matches the card's. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
HUD tips were white images, which stood out in dark mode. They're now drawn in the HUD's own colors, and in dark mode HUDs (tips included) get a light hairline outline, like other surfaces. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
📚 Storybook previews@craftcms/ui — open Storybook Changed components: resources/js — open Storybook No changed components detected in this Storybook. |
- Tabs' and New Tab buttons' outlines are darker in light mode. - They now use the small drop shadow. - The ring keeping the dots clear of them is white in light mode. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Contributor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Adds custom sidebar tabs to field layouts, plus icons for field layout tabs, and reworks the field layout designer around them.
Tab icons
Ui\Nodes\Tab::icon(), an$iconargument toUi::addTab(),Cp\Components\Tab::icon(), and aprefixslot to<craft-tab>.icon.Sidebar tabs
CraftCms\Cms\FieldLayout\Enums\TabType):content(the default) orsidebar. Sidebar tabs always come after content tabs. The MCP server's field layout config documents tabs'type.Ui\Nodes\Tab::sidebar()and a$sidebarargument toUi::addTab().UiRendereracceptssidebarTabOutletsto render sidebar tabs into, andDetailsPanelspanels can show their label's initial instead of an icon.Field layout designer
HUDs
🤖 Generated with Claude Code