diff --git a/resources/css/components/toast.css b/resources/css/components/toast.css index 48033952..02ba794c 100644 --- a/resources/css/components/toast.css +++ b/resources/css/components/toast.css @@ -17,10 +17,11 @@ * Below `medium` it is full width; from there it hugs its line length, which an application's own * class can still bound. * - * The action and the close button are both drawn at 40px but reach M3's 48px target (ACT-18) with - * the same `::after` touch target the shared classes use (foundation/interaction.css); they draw - * their own state layer and focus ring instead of those classes because the action's ink is - * inverse-primary, not the button's inherited inverse-on-surface. + * The action and the close button are both drawn at 40px and reach M3's 48px target (ACT-18) + * through an `::after`. Their state layer, focus ring and target are the declarations of the + * foundation's `md-state-layer`, `md-focus-ring` and `md-touch-target` + * (foundation/interaction.css), keyed on the buttons themselves as button.css does, because the + * view writes no class list. * * It enters on a translate and a fade on the fast spatial spring, `@starting-style` giving both a * start. No state icon: M3 says to avoid one in a snackbar (ACT-20). The live region is the host @@ -94,7 +95,7 @@ [data-md-toast-content] { min-width: 0; - flex: 1 1 auto; + flex: 1; padding-block: 6px; } diff --git a/tests/Feature/Components/ToastTest.php b/tests/Feature/Components/ToastTest.php index efcb7712..cdbf2316 100644 --- a/tests/Feature/Components/ToastTest.php +++ b/tests/Feature/Components/ToastTest.php @@ -47,6 +47,9 @@ it('grows to M3\'s two-line height, and wraps the action below on a compact wind ->toContain('x-bind:data-md-toast-wrap="current.description && current.action ? \'\' : null"') ->and($css->declarations('[data-md-toast-snackbar]'))->toHaveKey('min-height', 'var(--md-sys-measurement-space600)') ->and($css->declarations('[data-md-toast-snackbar][data-md-two-line]'))->toBe(['min-height' => '68px']) + // The text grows from a zero basis, so a long title shrinks beside the action rather than + // wrapping it onto a line of its own where there is room for both. + ->and($css->declarations('[data-md-toast-content]'))->toHaveKey('flex', '1') ->and($css->declarations('[data-md-toast-content][data-md-toast-wrap]', ['@media (width < 600px)']))->toBe(['flex-basis' => '100%']) ->and($css->declarations('[data-md-toast-action]'))->toHaveKey('height', 'var(--md-sys-measurement-space500)'); });