Hold the navigation bar item to its own label and state-layer tokens
NavigationBarTokens names one label font for both icon positions, label-medium; the horizontal layout had taken label-large from the rail's item, a different component with a token of its own. And the item's state layer washed in on-surface over a secondary-container pill, where the only state-layer tokens M3 states for a navigation item — the rail's, which the rail already follows — are on-secondary-container for all six states. Plan: docs/plans/material-3-alignment.md, step 21 (navigation N-08, N-19). 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
59ca88a0cf
commit
c3bed743aa
@@ -1,5 +1,7 @@
|
||||
<?php
|
||||
|
||||
use Illuminate\Support\Str;
|
||||
|
||||
it('draws a navigation landmark around its items', function () {
|
||||
expect((string) $this->blade('<x-navigation-bar><x-navigation-bar-item label="Inbox" icon="inbox" link="/inbox" /></x-navigation-bar>'))
|
||||
->toContain('<nav aria-label="Main" data-navigation-bar')
|
||||
@@ -46,3 +48,15 @@ it('badges the icon with a dot or a count that screen readers hear', function ()
|
||||
->and($dot)->toContain('size-1.5')->toContain('<span class="sr-only">, New mail</span>')
|
||||
->and((string) $this->blade('<x-navigation-bar-item label="Inbox" icon="inbox" link="/inbox" />'))->not->toContain('sr-only');
|
||||
});
|
||||
|
||||
it('keeps the bar item on the label and state-layer colours M3 tokens', function () {
|
||||
$css = file_get_contents(__DIR__.'/../../../resources/css/components/navigation.css');
|
||||
$horizontal = Str::of($css)->after('@container (width >= 37.5rem)')->before('/* ------')->toString();
|
||||
|
||||
expect($horizontal)
|
||||
// NavigationBarTokens names one label font for both icon positions: label-medium (N-08).
|
||||
->not->toContain('--md-sys-typescale-label-lg')
|
||||
->and($css)
|
||||
// The indicator and the pill wash in on-secondary-container, as the rail's do (N-19).
|
||||
->toContain('[data-navigation-bar-item] :is([data-navigation-indicator], [data-navigation-pill])::before {');
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user