Andreas Reinhold / reiniandClaude Opus 5
8cb8727f75
Plan step 36 (actions). <x-rich-tooltip> renders data-md-rich-tooltip with the bubble's data-md-rich-tooltip-bubble and data-md-side, and data-md-rich-tooltip-title/-text/-actions on its plain text; no class list. rich-tooltip.css draws RichTooltipTokens' surface-container, medium corner, elevation 2, 312px bubble, its corner-to-corner anchor positioning and its fade, the same shape as tooltip.css. rich-tooltip.js's leave grace goes from 200ms to M3's 1.5s (ACT-25), matching tooltip.js. RichTooltipTest is rewritten on the hooks and ComponentStylesheet. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
63 lines
3.0 KiB
PHP
63 lines
3.0 KiB
PHP
<?php
|
|
|
|
use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
|
|
|
|
it('wraps its trigger with a surface bubble anchored to it', function () {
|
|
$html = (string) $this->blade(<<<'BLADE'
|
|
<x-rich-tooltip title="Expiry" text="Recipients lose access after this time.">
|
|
<button>?</button>
|
|
</x-rich-tooltip>
|
|
BLADE);
|
|
|
|
preg_match('/anchor-name: (--material-rich-tooltip-[a-z0-9]+)/', $html, $anchor);
|
|
|
|
expect($anchor)->not->toBeEmpty()
|
|
->and($html)
|
|
->toContain('data-md-rich-tooltip')
|
|
->toContain('<button>?</button>')
|
|
->toContain('x-data="materialRichTooltip(false)"')
|
|
->toContain('popover="manual"')
|
|
->toContain('role="tooltip"')
|
|
->toContain('data-md-rich-tooltip-bubble')
|
|
->toContain('data-md-side="bottom"')
|
|
->toContain("position-anchor: {$anchor[1]}")
|
|
->toContain('data-md-rich-tooltip-title')
|
|
->toContain('>Expiry')
|
|
->toContain('data-md-rich-tooltip-text')
|
|
->toContain('Recipients lose access after this time.')
|
|
->and(ComponentStylesheet::read('rich-tooltip')->declarations('[data-md-rich-tooltip-bubble]'))->toMatchArray([
|
|
'border-radius' => 'var(--md-sys-shape-corner-md)',
|
|
'background-color' => 'var(--md-sys-color-surface-container)',
|
|
'box-shadow' => 'var(--md-sys-elevation-2)',
|
|
'max-width' => '312px',
|
|
])
|
|
->and(ComponentStylesheet::read('rich-tooltip')->declarations('[data-md-rich-tooltip-title]'))->toMatchArray([
|
|
'font' => 'var(--md-sys-typescale-title-sm)',
|
|
'color' => 'var(--md-sys-color-on-surface-variant)',
|
|
]);
|
|
});
|
|
|
|
it('opens on press and stays when persistent', function () {
|
|
expect((string) $this->blade('<x-rich-tooltip text="Details" persistent><button>i</button><x-slot:actions><button>More</button></x-slot:actions></x-rich-tooltip>'))
|
|
->toContain('x-data="materialRichTooltip(true)"')
|
|
->toContain('popover="auto"')
|
|
->toContain('role="dialog"')
|
|
->toContain('data-md-rich-tooltip-actions')
|
|
->toContain('<button>More</button>');
|
|
});
|
|
|
|
it('places the bubble by the side asked for, on the anchor positioning fallback that suits it', function () {
|
|
$css = ComponentStylesheet::read('rich-tooltip');
|
|
|
|
expect((string) $this->blade('<x-rich-tooltip text="Details" side="left"><button>i</button></x-rich-tooltip>'))->toContain('data-md-side="left"')
|
|
->and($css->declarations("[data-md-rich-tooltip-bubble][data-md-side='left']"))->toBe(['position-area' => 'left span-bottom'])
|
|
->and($css->declarations("[data-md-rich-tooltip-bubble]:is([data-md-side='left'], [data-md-side='right'])"))->toMatchArray([
|
|
'position-try-fallbacks' => 'flip-inline, flip-block',
|
|
]);
|
|
});
|
|
|
|
it('falls back to bottom for an unknown side', function () {
|
|
expect((string) $this->blade('<x-rich-tooltip text="Details" side="diagonal"><button>i</button></x-rich-tooltip>'))
|
|
->toContain('data-md-side="bottom"');
|
|
});
|