[brianjhanson]

Description

Three things a Craft 5 plugin screen got wrong when rendered through the v6 shell. Found while putting Feed Me through it; none of the fixes are plugin-specific.

 a bridged legacy screen
   header
-    tabs           the legacy strip — v6 has no `.pane-tabs` CSS, so it renders bare
+    tabs           craft-tabs            for in-page panes
+                   craft-nav-list        for page links (appearance="tabs")
-    actionButton   Craft 5's own Save, in the header
   content
-    table.data     centred headers, boxed grey thead, 2px of page between cells
+    table.data     start-aligned, flush, a rule per row — as `.cp-table`
   content-footer
-    Save           the shell's own, with nothing able to replace it
+    actionButton   the screen's own Save, teleported into `primary-action`

Tabs. LegacyTabsShim only upgraded anchor tabs, so a screen whose tabs are page links fell through to a strip v6 has no styling for. It now splits by what the tabs are: all-anchor becomes craft-tabs panes, all-url becomes a labelled <nav> around craft-nav-list, and a mixed set is left alone. The link case wanted a strip that is still a list — the APG tabs pattern describes in-page panels, so craft-nav-list gained an appearance rather than craft-tabs gaining an href mode. A test asserts the strip keeps role="listitem" and never claims tablist.

Save controls. Craft 5 puts a full-page form's Save in {% block actionButton %} and cp.twig still carried that default, while the shell independently draws save controls in the content footer — so every bridged form had two. cp.twig now skips the default when the render is being collected for the shell (craft.cp.collectsScreenFragments()), and a screen that brings its own buttons teleports them into the footer's primary-action slot, where LayoutSlotOutlet already drops its fallback when the slot is filled.

Tables. The table.data port had dropped two rules the legacy sheet carried — thead th { text-align: start } and th.thin — and kept the default border-spacing, which showed the page between cells as a grid.

Evidence

Tables — computed styles, Feed Me's feed list against the entries index:

	before	after	.cp-table (entries index)
thead th text-align	center	start	start
thead th background	rgb(233, 238, 243)	rgb(255, 255, 255)	rgb(255, 255, 255)
thead th height	29px	33px	33px
border-spacing	2px	0px	0px
row rule	none (1px transparent)	1px oklab(… / 0.24)	1px oklab(… / 0.24)
tbody th weight	700	600	600

The new browser case, run against the stylesheet as it stands on 6.x:

× lines a legacy table up with a modern one
  AssertionError: expected 'center' to be 'start'
  Tests  1 failed | 1 passed (2)

and on this branch:

  Tests  2 passed (2)

Save controls — before, /feed-me/feeds/new rendered Save / Save & Continue in the header and a shell Save in the footer. After, one set, in div.content-footer, and the relocated data-action buttons still submit: clicking Save POSTs to feed-me/feeds/new and comes back with field errors. A full-page form with no button override (Feed Me → Settings) renders exactly one Save, the shell's own.

Suites

tests/Unit/Cp/LegacyTabsShimTest.php                  9 passed (18 assertions)
resources/js/pages/cp/Screen.test.ts                 ┐
resources/js/pages/cp/legacyStyles.browser.test.ts   ┘ 10 passed
packages/craftcms-ui  nav-list.test.ts + nav-item.browser.test.ts
                                                     34 passed

Each new case was run against the branch point first and seen to fail there.

🤖 Generated with Claude Code

https://claude.ai/code/session_01NjeigCjRgjTJpnhbvyrxv8

[github-actions]

📚 Storybook previews

@craftcms/ui — open Storybook

Changed components:

• Components/Nav Item
• Components/Nav List

resources/js — open Storybook

No changed components detected in this Storybook.