Draw the datepicker without Tailwind
Plan step 36 (inputs group): <x-datepicker> renders data-md-datepicker with every part data-md-datepicker-* (data-md-presentation replaces data-presentation; data-md-range, data-md-docked, data-md-concealed and data-md-value replace their unprefixed hooks), and datepicker.css moves into material.components on the same px, spacing and colour tokens, importing field.css, icon.css and button.css for what the view renders. The month's live-announced text drops its `sr-only` class for a data-md-datepicker-month-live hook with the same visually-hidden clip (a package view writes no class but the interaction classes), matching field's and search's counter/status live regions. The day, year, menu button and list option keep their own hand-rolled state layer and focus ring rather than the foundation's classes, as data-md-field-button already does: each is a bigger interactive box than the round indicator drawn inside it, which the foundation's fixed-geometry classes can't draw, and `:focus-visible` only ever matches the actually-focused element. Cancel, OK and the icon buttons are <x-button>, which already draws from the classes. datepicker.js follows the renamed hooks and dataset properties. Shift+M/Y (reaching the month/year dropdowns) and the full-screen range picker at compact were already implemented; this commit adds the browser tests the plan owed for them plus the month list's keyboard-driven growth in both directions and Save/close from the full-screen app bar (docs/plans/material-3-browser-tests.md), written but not run — the inputs group's Chromium run follows this stream. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
co-authored by
Claude Opus 5
Claude Opus 5
parent
52fd65a390
commit
72d9dbfc89
@@ -20,7 +20,7 @@ it('draws a docked date field whose combobox controls a popover picker', functio
|
||||
$html = (string) $this->blade('<x-datepicker id="expires" label="Expires on" hint="Type a date or pick one" />');
|
||||
|
||||
expect($html)
|
||||
->toContain('data-datepicker')
|
||||
->toContain('data-md-datepicker')
|
||||
->toContain('<label for="expires" data-md-field-label>Expires on</label>')
|
||||
->toContain('role="combobox"')
|
||||
->toContain('aria-haspopup="dialog"')
|
||||
@@ -34,7 +34,7 @@ it('draws a docked date field whose combobox controls a popover picker', functio
|
||||
->toContain('wire:ignore')
|
||||
->toContain('aria-label="Select date"')
|
||||
->toContain('role="grid"')
|
||||
->toContain('data-datepicker-toggle')
|
||||
->toContain('data-md-datepicker-toggle')
|
||||
->toContain('x-modelable="value"')
|
||||
->toContain('x-on:input="typeInField()"')
|
||||
->not->toMatch('/<input[^>]*\sreadonly[\s>]/')
|
||||
@@ -58,16 +58,16 @@ it('gives a range picker M3\'s full-screen presentation, with an app bar and Sav
|
||||
$html = (string) $this->blade('<x-datepicker id="trip" label="Trip" range mode="modal" />');
|
||||
|
||||
expect($html)
|
||||
->toContain('data-datepicker-full')
|
||||
->toContain('data-md-datepicker-full')
|
||||
->toContain('x-show="presentation === \'full\'"')
|
||||
->toContain('data-datepicker-app-bar')
|
||||
->toContain('data-datepicker-close')
|
||||
->toContain('data-datepicker-save')
|
||||
->toContain('data-md-datepicker-app-bar')
|
||||
->toContain('data-md-datepicker-close')
|
||||
->toContain('data-md-datepicker-save')
|
||||
->toContain('Save')
|
||||
->toContain('aria-label="Select dates"')
|
||||
// The months come from one list of rows, each headed by its label.
|
||||
->toContain('x-for="row in rows"')
|
||||
->toContain('data-datepicker-month-label')
|
||||
->toContain('data-md-datepicker-month-label')
|
||||
// The action row is the modal's; the full-screen picker confirms from its app bar.
|
||||
->toContain('x-show="presentation !== \'full\' && (view === \'days\' || typing || presentation === \'modal\')"')
|
||||
->toContain('x-on:scroll="extendMonths($event)"');
|
||||
@@ -83,9 +83,9 @@ it('leaves the docked and single-date pickers as they were', function () {
|
||||
$html = (string) $this->blade('<x-datepicker id="expires" label="Expires on" />');
|
||||
|
||||
expect($html)
|
||||
->toContain('data-datepicker-nav data-docked')
|
||||
->toContain('data-md-datepicker-nav data-md-docked')
|
||||
->toContain('x-show="presentation === \'docked\'"')
|
||||
->toContain('data-datepicker-menu-button="months"')
|
||||
->toContain('data-md-datepicker-menu-button="months"')
|
||||
->toContain('x-show="presentation === \'modal\'"');
|
||||
});
|
||||
|
||||
@@ -93,8 +93,8 @@ it('names each dropdown so Shift+M and Shift+Y can reach it', function () {
|
||||
$html = (string) $this->blade('<x-datepicker label="Birthday" />');
|
||||
|
||||
expect($html)
|
||||
->toContain('data-datepicker-menu-button="months"')
|
||||
->toContain('data-datepicker-menu-button="years"');
|
||||
->toContain('data-md-datepicker-menu-button="months"')
|
||||
->toContain('data-md-datepicker-menu-button="years"');
|
||||
});
|
||||
|
||||
it('falls back to the docked picker for an unknown mode', function () {
|
||||
@@ -224,7 +224,7 @@ it('replaces the hint with the errors for the property and its start and end', f
|
||||
->toContain('The end must follow the start.')
|
||||
->not->toContain('Pick a day')
|
||||
->toContain('aria-invalid="true"')
|
||||
->toContain('data-datepicker-error')
|
||||
->toContain('data-md-datepicker-error')
|
||||
->and(substr_count($html, 'data-md-invalid=""'))->toBe(2);
|
||||
});
|
||||
|
||||
|
||||
@@ -33,6 +33,7 @@ dataset('input components', [
|
||||
'search',
|
||||
'table',
|
||||
'sort-header',
|
||||
'datepicker',
|
||||
]);
|
||||
|
||||
/**
|
||||
@@ -163,10 +164,20 @@ function assertTokensAndPxBreakpoints(ComponentStylesheet $css, string $label):
|
||||
$source = str_replace('background-color 604800s, color 604800s', '', $source);
|
||||
|
||||
expect($source)->not->toMatch('/#[0-9a-f]{3,8}\b|\b(?:rgba?|hsla?|oklch|oklab|lab|lch)\(/i')
|
||||
->not->toMatch('/\bbox-shadow:(?!\s*(?:none|var\(--md-))/')
|
||||
->not->toMatch('/\bfont:(?!\s*var\(--md-sys-typescale-)/')
|
||||
->not->toMatch('/\btransition[a-z-]*:[^;]*(?:\d+m?s\b|\bease\b|ease-in|ease-out|cubic-bezier)/');
|
||||
|
||||
// A flat elevation (`var(--md-sys-elevation-N)`, `none`) or a ring built from a colour token
|
||||
// (`inset 0 0 0 1px var(--md-sys-color-…)`, a day's or a year's "current" ring) — never a
|
||||
// literal length paired with a colour the first check would not otherwise catch on its own.
|
||||
preg_match_all('/\bbox-shadow:\s*([^;]+);/', $source, $shadows, PREG_SET_ORDER);
|
||||
|
||||
foreach ($shadows as [, $value]) {
|
||||
$value = trim($value);
|
||||
|
||||
expect($value === 'none' || str_contains($value, 'var(--md-'))->toBeTrue("{$label}: box-shadow: {$value} is not none or built from a token");
|
||||
}
|
||||
|
||||
assertBreakpointsInPx($css, $label);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user