Land a caller's class and style on the scaffold and tooltip roots
Plan step 39 (part 0): the step 38 review found <x-scaffold> and <x-tooltip> never referencing $attributes, so a caller's class and style were silently dropped. The scaffold's root is its single data-md-scaffold div; the tooltip's root, documented in its header, is the standalone wrapper it draws around a trigger (data-md-tooltip-anchor, merged with its own anchor-name) — passed an anchor instead, it renders only a popover fragment beside another component's root and takes nothing of the caller's. 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
783f7902cc
commit
cfc57a9867
@@ -48,6 +48,12 @@ it('puts every destination in the rail and only those marked for the bar in the
|
||||
->and(substr_count($html, 'aria-current="page"'))->toBe(2);
|
||||
});
|
||||
|
||||
it('takes the caller\'s class and style on its own root', function () {
|
||||
$root = layoutRoot((string) $this->blade('<x-scaffold class="app-shell" style="--material-banner: 4rem" :destinations="$destinations" />', ['destinations' => scaffoldDestinations()]));
|
||||
|
||||
expect($root)->toMatchArray(['<' => 'div', 'data-md-scaffold' => '', 'class' => 'app-shell', 'style' => '--material-banner: 4rem']);
|
||||
});
|
||||
|
||||
it('speaks a destination\'s badge in its own words when it has them', function () {
|
||||
$html = (string) $this->blade('<x-scaffold :destinations="$destinations" />', ['destinations' => [
|
||||
['title' => 'Get started', 'icon' => 'rocket_launch', 'url' => '/start', 'badge' => '0/3', 'badgeLabel' => '0 of 3 done'],
|
||||
@@ -247,7 +253,7 @@ it('marks the scaffold, and draws the FAB after the page\'s bar and before the p
|
||||
BLADE, ['destinations' => scaffoldDestinations()]);
|
||||
|
||||
// M3 puts a FAB early in the focus order: after the bar, before the content.
|
||||
expect($html)->toMatch('/^\s*<div\s+data-md-scaffold>/')
|
||||
expect($html)->toMatch('/^\s*<div\s+data-md-scaffold\s*>/')
|
||||
->not->toContain('data-app-shell')
|
||||
->toMatch('/APP BAR.*<div data-md-scaffold-fab><button>NEW<\/button><\/div>\s*<main id="content".*PAGE/s')
|
||||
->and(substr_count($html, 'NEW'))->toBe(1)
|
||||
|
||||
@@ -52,6 +52,13 @@ it('draws M3\'s plain tooltip in the inverse surface, and fades on the effects s
|
||||
->and($css->declarations('[data-md-tooltip]:popover-open', ['@starting-style']))->toBe(['opacity' => '0']);
|
||||
});
|
||||
|
||||
it('takes the caller\'s class and style on the standalone wrapper, its root', function () {
|
||||
$root = layoutRoot((string) $this->blade('<x-tooltip text="Copy link" class="inline-flex" style="gap: 4px"><button>Copy</button></x-tooltip>'));
|
||||
|
||||
expect($root)->toMatchArray(['<' => 'span', 'data-md-tooltip-anchor' => '', 'class' => 'inline-flex'])
|
||||
->and($root['style'])->toStartWith('anchor-name: --material-tooltip-')->toEndWith('; gap: 4px;');
|
||||
});
|
||||
|
||||
it('escapes its text', function () {
|
||||
$this->blade('<x-tooltip text="<b>bold</b>"><span>x</span></x-tooltip>')
|
||||
->assertSee('<b>bold</b>', false);
|
||||
|
||||
Reference in New Issue
Block a user