Write the showcase examples without showcase-only hooks
Plan step 38 review: the component sections' code samples, which an application copies, carried 60 data-md-showcase-* hooks that only showcase.css draws (a sized loading indicator, the plain badge's own colours, a bordered bar frame, the navigation demos' frames, a table's scroll wrapper...), so a copied sample did nothing in the application. They now write what an application has: <x-surface outlined corner> for a frame and a line, <x-row> for the FAB menu's corner, and an inline style from the tokens for a size, a scroll box or a colour, as the Containment batch already did. The side sheet demo takes align="stretch", which holds in both of <x-row stack-below>'s modes, instead of a hook that undid align="start" once stacked. The menu icon colours go through icon-class with two unlayered application-like classes, which the sample's comment names, and the fields' and date picker's widths are inline styles now that style reaches their roots. The radio hint said "from sm"; it is medium. showcase.css keeps only the frame and the foundation specimens; its header describes the file instead of the batches that wrote it. The tests reject a showcase hook or a class outside md-* and the named application classes in any example, a showcase.css selector outside its own hooks, and a hook no showcase view renders. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
co-authored by
Claude Opus 5
parent
cd47aa4b0f
commit
ebdcdb82b5
@@ -132,7 +132,19 @@ it('writes every example as an application writes it', function () {
|
||||
foreach ($examples as [$file, $code]) {
|
||||
// The example component rewrites unprefixed tags to a configured prefix; a namespaced tag
|
||||
// would show an application a form it does not write, and escape that rewrite.
|
||||
expect($code)->not->toContain('x-livewire-material::', "{$file} writes a namespaced tag in an example");
|
||||
expect(str_contains($code, 'x-livewire-material::'))->toBeFalse("{$file} writes a namespaced tag in an example");
|
||||
|
||||
// Nor a hook only showcase.css draws, which would do nothing in the application's page.
|
||||
expect(str_contains($code, 'data-md-showcase'))->toBeFalse("{$file} writes a showcase hook in an example");
|
||||
|
||||
// A class is a text or interaction class, or one of the application's own that
|
||||
// showcase.css stands in for, each named in its header.
|
||||
preg_match_all('/class="([^"]*)"/', $code, $classes);
|
||||
|
||||
foreach (preg_split('/\s+/', implode(' ', $classes[1]), -1, PREG_SPLIT_NO_EMPTY) as $class) {
|
||||
expect(str_starts_with($class, 'md-') || in_array($class, ['showcase-w-narrow', 'showcase-ink-tertiary', 'showcase-ink-secondary'], true))
|
||||
->toBeTrue("{$file} writes the class `{$class}` in an example");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user