Move browser-test probes off Tailwind utility classes

Plan step 38 (last batch), plan step 42's target for tests/: every
Tailwind utility class in a tests/Browser/*.php probe's Blade string
or Livewire component render() (~60 class attributes across 14 files)
becomes an inline style built from --md-sys-color-*/--md-sys-shape-*/
--md-sys-measurement-* tokens or a literal px value for an arbitrary
demo size — PickingTest's clip box, every probe's <body
class="bg-surface">, the grid/stack/row wrapper divs, the carousel
item's coloured filler. No test's assertions, selectors or expected
text change; these are layout containers around the components under
test, not anything a test reads.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 05:34:20 +02:00
co-authored by Claude Sonnet 5
parent 067626c52e
commit d15312023b
14 changed files with 55 additions and 55 deletions
+10 -10
View File
@@ -19,7 +19,7 @@ class MenuAnchorProbe extends Component
public function render(): string
{
return <<<'BLADE'
<div class="grid justify-items-start gap-6 p-4">
<div style="display: grid; justify-items: start; gap: var(--md-sys-measurement-space300); padding: var(--md-sys-measurement-space200);">
<p>renders: <span id="renders">{{ $renders }}</span></p>
<x-menu label="Share actions">
@@ -74,7 +74,7 @@ class MenuMorphProbe extends Component
public function render(): string
{
return <<<'BLADE'
<div class="p-4">
<div style="padding: var(--md-sys-measurement-space200);">
<p id="outside">renders: <span id="renders">{{ $renders }}</span>, created: <span id="created">{{ $created }}</span></p>
<x-menu label="Sort">
@@ -115,7 +115,7 @@ function menuMorphProbe()
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:menu-morph-probe />
@livewireScripts
</body>
@@ -289,7 +289,7 @@ it('hangs a menu on its menu button, even when the button is fixed to a corner o
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:menu-anchor-probe />
@livewireScripts
</body>
@@ -335,7 +335,7 @@ it('paints a group\'s hint and a menu item\'s icon in the colour their classes n
<x-theme-script />
@vite(config('livewire-material.showcase.vite'))
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<span id="error-ink" class="md-ink-error">Reference</span>
<div id="terrain">
<x-group name="terrain" hint="No elevation data here" hint-class="md-ink-error" :options="[['id' => 'flat', 'name' => 'Flat']]" />
@@ -520,7 +520,7 @@ class GroupSizeProbe extends Component
public function render(): string
{
return <<<'BLADE'
<div class="grid gap-6 p-4">
<div style="display: grid; gap: var(--md-sys-measurement-space300); padding: var(--md-sys-measurement-space200);">
<x-group name="xs-group" size="xs" :options="[['id' => 'a', 'name' => 'A'], ['id' => 'b', 'name' => 'B']]" />
<x-group name="sm-group" size="sm" :options="[['id' => 'a', 'name' => 'A'], ['id' => 'b', 'name' => 'B']]" />
</div>
@@ -540,7 +540,7 @@ function groupSizeProbe()
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:group-size-probe />
@livewireScripts
</body>
@@ -680,7 +680,7 @@ function longMenuProbe()
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:long-menu-probe />
@livewireScripts
</body>
@@ -703,7 +703,7 @@ function sheetMenuProbe()
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:sheet-menu-probe />
@livewireScripts
</body>
@@ -897,7 +897,7 @@ function longFabMenuProbe()
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<body style="background-color: var(--md-sys-color-surface);">
<livewire:long-fab-menu-probe />
@livewireScripts
</body>