Andreas Reinhold / reiniandClaude Opus 5
147dbcf041
Plan step 36. <x-tooltip> renders data-md-tooltip and data-md-side on the bubble and data-md-tooltip-anchor on a standalone trigger's wrapper; tooltip.css draws PlainTooltipTokens' inverse-surface bubble, its anchor placement and flips per side, and the fade on the fast effects spring with @starting-style. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
59 lines
3.2 KiB
PHP
59 lines
3.2 KiB
PHP
<?php
|
|
|
|
use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
|
|
|
|
it('wraps a trigger and anchors the bubble to it', function () {
|
|
$html = (string) $this->blade('<x-tooltip text="Copy link"><button>Copy</button></x-tooltip>');
|
|
|
|
preg_match('/anchor-name: (--material-tooltip-[a-z0-9]+)/', $html, $anchor);
|
|
|
|
expect($anchor)->not->toBeEmpty()
|
|
->and($html)
|
|
->toMatch('/<span data-md-tooltip-anchor style="anchor-name: --material-tooltip-[a-z0-9]+">\s*<button>Copy<\/button>/')
|
|
->toMatch('/<span\s+popover="manual"\s+aria-hidden="true"\s+x-data="materialTooltip"\s+data-md-tooltip\s+data-md-side="top"\s+style="position-anchor: '.preg_quote($anchor[1], '/').'"\s*>Copy link<\/span>/')
|
|
->not->toContain('class=');
|
|
});
|
|
|
|
it('places the bubble on the side asked for, 4px out, flipping when there is no room', function (string $side, string $axis, string $margin, string $flip) {
|
|
$css = ComponentStylesheet::read('tooltip');
|
|
|
|
expect((string) $this->blade("<x-tooltip text=\"Hi\" side=\"{$side}\"><span>x</span></x-tooltip>"))->toContain("data-md-side=\"{$side}\"")
|
|
->and($css->declarations("[data-md-tooltip][data-md-side='{$side}']"))->toBe(['position-area' => $side])
|
|
->and($css->declarations("[data-md-tooltip]:is({$axis})"))->toBe([$margin => 'var(--md-sys-measurement-space50)', 'position-try-fallbacks' => $flip]);
|
|
})->with([
|
|
'top' => ['top', "[data-md-side='top'], [data-md-side='bottom']", 'margin-block', 'flip-block'],
|
|
'bottom' => ['bottom', "[data-md-side='top'], [data-md-side='bottom']", 'margin-block', 'flip-block'],
|
|
'left' => ['left', "[data-md-side='left'], [data-md-side='right']", 'margin-inline', 'flip-inline'],
|
|
'right' => ['right', "[data-md-side='left'], [data-md-side='right']", 'margin-inline', 'flip-inline'],
|
|
]);
|
|
|
|
it('falls back to the top for a side it does not know', function () {
|
|
expect((string) $this->blade('<x-tooltip text="Hi" side="middle"><span>x</span></x-tooltip>'))->toContain('data-md-side="top"');
|
|
});
|
|
|
|
it('draws M3\'s plain tooltip in the inverse surface, and fades on the effects spring', function () {
|
|
$css = ComponentStylesheet::read('tooltip');
|
|
|
|
expect($css->declarations('[data-md-tooltip]'))->toMatchArray([
|
|
'max-inline-size' => '200px',
|
|
'border-radius' => 'var(--md-sys-shape-corner-xs)',
|
|
'padding-block' => 'var(--md-sys-measurement-space50)',
|
|
'padding-inline' => 'var(--md-sys-measurement-space100)',
|
|
'background-color' => 'var(--md-sys-color-inverse-surface)',
|
|
'color' => 'var(--md-sys-color-inverse-on-surface)',
|
|
'font' => 'var(--md-sys-typescale-body-sm)',
|
|
'pointer-events' => 'none',
|
|
'opacity' => '0',
|
|
'transition-duration' => 'var(--md-sys-motion-effects-fast-duration)',
|
|
'transition-timing-function' => 'var(--md-sys-motion-effects-fast)',
|
|
'transition-behavior' => 'allow-discrete',
|
|
])
|
|
->and($css->declarations('[data-md-tooltip]:popover-open'))->toBe(['opacity' => '1'])
|
|
->and($css->declarations('[data-md-tooltip]:popover-open', ['@starting-style']))->toBe(['opacity' => '0']);
|
|
});
|
|
|
|
it('escapes its text', function () {
|
|
$this->blade('<x-tooltip text="<b>bold</b>"><span>x</span></x-tooltip>')
|
|
->assertSee('<b>bold</b>', false);
|
|
});
|