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:
co-authored by
Claude Sonnet 5
parent
067626c52e
commit
d15312023b
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user