noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Size the timepicker in px, as its landscape queries already are

Browse Source 
Plan step 36 review of d46b07c1. The landscape queries moved from rem
to px (560/364/346, equal at the default 16px) while every size they
make room for stayed in rem, so with a larger browser text size the
dial grew past a threshold that no longer moved with it. The sizes are
px now, as M3 gives them in dp, spacing the measurement tokens, the
selected period corner corner-md, and disabled the 38% and 12% state
tokens; the supporting text's two-line room stays in rem, being text.
The header's arithmetic is in px, and its note on targets says why the
period halves render no md-touch-target instead of claiming nothing
here reaches 48px.

The landscape browser test expected the display and the dial to share a
top edge, but the display is centred in the dial's 256px row, 61px
lower; it now checks the display sits inside that row with the dial
36px after it. Feature tests pin the classes and the three queries.

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
2026-09-14 19:37:05 +02:00
co-authored by Claude Opus 5
parent 22c141d380
commit 459678c341
3 changed files with 93 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components/timepicker.css
+60 -54
View File
@@ -36,18 +36,23 @@
* The switch is orientation and viewport *height*, never a width breakpoint: M3 says the picker
* "swaps orientation/variant based on device orientation and viewport height"
* (docs/reference/m3/components-navigation-selection-inputs.md § Time pickers/Behaviour), and no
* window size class applies — so the two landscape media queries below are the one place in this
* file a length is not one of M3's four breakpoints. 560px is what the upright dial needs — 528px of
* surface (3 padding, 2.25 title, 7.25 display, 17.5 dial, 3 actions in rem, ×16) inside the
* dialog's `100dvh - 32px` — so a landscape phone lies the dial down and a landscape tablet or
* desktop, which has the height, leaves it standing.
* window size class applies — so the media queries below name a viewport height and never a width.
* 560px is what the upright dial needs — 528px of surface (48 padding, 36 title, 116 display, 280
* dial, 48 actions) inside the dialog's `100dvh - 32px` — so a landscape phone lies the dial down
* and a landscape tablet or desktop, which has the height, leaves it standing. The queries and the
* sizes they make room for are both px (M3 gives the sizes in dp), so a larger text size moves
* neither.
*
* The hour and minute boxes and the period buttons render the foundation's `md-state-layer` and
* `md-focus-ring` (foundation/interaction.css) — each is its own interactive box with nothing drawn
* smaller inside it, so the classes need no refinement. The dial renders `md-focus-ring` alone (it
* draws no state layer of its own); nothing here copies its outline rule. Cancel, OK and the mode
* toggle are <x-button>, which draws from the classes already. No element here reaches a 48px target
* of its own accord, so `md-touch-target` is never rendered.
* toggle are <x-button>, which draws from the classes already. `md-touch-target` is not rendered:
* the boxes, the dial and the inputs are well over 48px, and the period buttons are the two halves
* of M3's 52×80 (72 in the input variant, 216×38 lying down) selector, where a 48px target on each
* would reach over its neighbour.
*
* Disabled is on-surface at M3's 38% content and 12% container opacities (tokens/state.css).
*
* The selector's angle is a registered property, so a single transition turns the line, carries the
* handle round and moves the clip that inks the number under it, on the default spatial spring. The
@@ -74,8 +79,8 @@
/* The dialog: M3's spatial-fast pop, a 32%-scrim backdrop, no default border or padding. */
[data-md-timepicker-dialog] {
max-width: calc(100vw - 2rem);
max-height: calc(100dvh - 2rem);
max-width: calc(100vw - var(--md-sys-measurement-space400));
max-height: calc(100dvh - var(--md-sys-measurement-space400));
margin: auto;
padding: 0;
overflow: visible;
@@ -104,7 +109,7 @@
display: grid;
grid-template-columns: max-content;
justify-content: center;
padding: 1.5rem;
padding: var(--md-sys-measurement-space300);
border-radius: var(--md-sys-shape-corner-xl);
background-color: var(--md-sys-color-surface-container-high);
box-shadow: var(--md-sys-elevation-3);
@@ -112,7 +117,7 @@
}
[data-md-timepicker-title] {
padding-bottom: 1.25rem;
padding-bottom: 20px;
color: var(--md-sys-color-on-surface-variant);
font: var(--md-sys-typescale-label-md);
letter-spacing: var(--md-sys-typescale-label-md-tracking);
@@ -139,7 +144,7 @@
[data-md-timepicker-display] {
display: flex;
margin-bottom: 2.25rem;
margin-bottom: 36px;
}
[data-md-timepicker-numbers],
@@ -152,8 +157,8 @@
[data-md-timepicker-box] {
display: grid;
place-items: center;
width: 6rem;
height: 5rem;
width: 96px;
height: 80px;
border-radius: var(--md-sys-shape-corner-sm);
background-color: var(--md-sys-color-surface-container-highest);
color: var(--md-sys-color-on-surface);
@@ -175,27 +180,27 @@
(TimePickerTokens.TimeSelector24HVerticalContainerWidth = 114dp). Landscape keeps 96px: the
display is a 216px column there. */
[data-md-timepicker-display][data-md-cycle='24'] [data-md-timepicker-box] {
width: 7.125rem;
width: 114px;
}
[data-md-timepicker-separator] {
display: grid;
place-items: center;
width: 1.5rem;
height: 5rem;
width: 24px;
height: 80px;
color: var(--md-sys-color-on-surface);
font: var(--md-sys-typescale-display-lg);
translate: 0 -0.25rem;
translate: 0 -4px;
user-select: none;
}
[data-md-timepicker-period] {
display: flex;
flex-direction: column;
gap: 0.25rem;
width: 3.25rem;
height: 5rem;
margin-inline-start: 0.25rem;
gap: var(--md-sys-measurement-space50);
width: 52px;
height: 80px;
margin-inline-start: var(--md-sys-measurement-space50);
}
[data-md-timepicker-period] > button {
@@ -214,7 +219,7 @@
[data-md-timepicker-period] > button:active,
[data-md-timepicker-period] > button[aria-checked='true'] {
border-radius: 0.75rem;
border-radius: var(--md-sys-shape-corner-md);
}
/* Tertiary, not the primary the hour and minute boxes take: M3 gives the two selectors different
@@ -227,14 +232,14 @@
[data-md-timepicker-period] > button:disabled {
cursor: default;
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent);
}
/* ---- The dial ----------------------------------------------------------------------------- */
[data-md-timepicker-dial] {
--dial: 16rem;
--dial: 256px;
--unit: calc(var(--dial) / 256);
--outer: calc(101 * var(--unit));
--inner: calc(69 * var(--unit));
@@ -245,7 +250,7 @@
flex: none;
width: var(--dial);
height: var(--dial);
margin-bottom: 1.5rem;
margin-bottom: var(--md-sys-measurement-space300);
border-radius: var(--md-sys-shape-corner-full);
background-color: var(--md-sys-color-surface-container-highest);
color: var(--md-sys-color-on-surface);
@@ -301,8 +306,8 @@
top: calc(50% + var(--y) * var(--ring));
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
width: 48px;
height: 48px;
translate: -50% -50%;
border-radius: var(--md-sys-shape-corner-full);
font-variant-numeric: tabular-nums;
@@ -313,7 +318,7 @@
}
[data-md-timepicker-set] > span[data-md-disabled] {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);
}
/* The selector: the line from the centre to the handle's edge, the centre dot, the handle. */
@@ -345,8 +350,8 @@
[data-md-timepicker-centre] {
left: 50%;
top: 50%;
width: 0.5rem;
height: 0.5rem;
width: 8px;
height: 8px;
}
[data-md-timepicker-handle] {
@@ -370,21 +375,21 @@
/* ---- The input variant -------------------------------------------------------------------- */
[data-md-timepicker-inputs] [data-md-timepicker-separator] {
height: 4.5rem;
height: 72px;
}
[data-md-timepicker-inputs] [data-md-timepicker-period] {
height: 4.5rem;
height: 72px;
}
[data-md-timepicker-column] {
width: 6rem;
width: 96px;
}
[data-md-timepicker-input] {
display: block;
width: 6rem;
height: 4.5rem;
width: 96px;
height: 72px;
padding: 0;
border: 0;
border-radius: var(--md-sys-shape-corner-sm);
@@ -418,10 +423,11 @@
box-shadow: inset 0 0 0 2px var(--md-sys-color-error);
}
/* SupportingText: two lines' room, 7px under the field; the error in its place. */
/* SupportingText: two lines' room, 7px under the field; the error in its place. The room is two
body-small lines (1rem each), so it stays in rem and grows with the text. */
[data-md-timepicker-support] {
min-height: 2rem;
padding-top: 0.4375rem;
padding-top: 7px;
color: var(--md-sys-color-on-surface-variant);
font: var(--md-sys-typescale-body-sm);
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
@@ -433,8 +439,8 @@
}
[data-md-timepicker-range-error] {
max-width: 17rem;
padding-bottom: 0.5rem;
max-width: 272px;
padding-bottom: var(--md-sys-measurement-space100);
font: var(--md-sys-typescale-body-sm);
letter-spacing: var(--md-sys-typescale-body-sm-tracking);
}
@@ -442,8 +448,8 @@
[data-md-timepicker-actions] {
display: flex;
align-items: center;
gap: 0.5rem;
min-height: 3rem;
gap: var(--md-sys-measurement-space100);
min-height: 48px;
}
[data-md-timepicker-actions] > [data-md-timepicker-spacer] {
@@ -454,18 +460,18 @@
@media (orientation: landscape) and (height < 560px) {
[data-md-timepicker-surface][data-md-mode='dial'] {
grid-template-columns: 13.5rem auto;
grid-template-columns: 216px auto;
grid-template-areas:
'display dial'
'actions actions';
column-gap: 2.25rem;
padding: 1rem 1.5rem 0.5rem;
column-gap: 36px;
padding: var(--md-sys-measurement-space200) var(--md-sys-measurement-space300) var(--md-sys-measurement-space100);
}
[data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-title] {
grid-area: display;
align-self: start;
margin-top: 0.5rem;
margin-top: var(--md-sys-measurement-space100);
padding: 0;
}
@@ -481,14 +487,14 @@
}
[data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-display][data-md-cycle='24'] [data-md-timepicker-box] {
width: 6rem;
width: 96px;
}
[data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-display] [data-md-timepicker-period] {
flex-direction: row;
width: 13.5rem;
height: 2.375rem;
margin: 1rem 0 0;
width: 216px;
height: 38px;
margin: var(--md-sys-measurement-space200) 0 0;
}
[data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-dial] {
@@ -498,19 +504,19 @@
[data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-actions] {
grid-area: actions;
margin-top: 0.25rem;
margin-top: var(--md-sys-measurement-space50);
}
}
@media (orientation: landscape) and (height <= 364px) {
[data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-dial] {
--dial: 14.875rem;
--dial: 238px;
}
}
@media (orientation: landscape) and (height <= 346px) {
[data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-dial] {
--dial: 12.5rem;
--dial: 200px;
}
}
}
tests/Browser/TimepickerTest.php
+4 -3
View File
@@ -370,14 +370,15 @@ it('lies the dial on its side in a short landscape window', function () {
->click('#meeting')
->assertScript("document.querySelector('#meeting-dialog').open");
// Side by side rather than stacked: the display and the dial share a top edge, the dial to
// the display's end, and the picker's own layout (flex column) gives way to the grid areas.
// Side by side rather than stacked: the display (216px wide) sits centred in the dial's row,
// inside its height, with the dial 36px after it, and the picker's own layout (flex column)
// gives way to the grid areas.
$page->assertScript(<<<'JS'
(() => {
const display = document.querySelector('#meeting-dialog [data-md-timepicker-display]').getBoundingClientRect();
const dial = document.querySelector('#meeting-dialog [data-md-timepicker-dial]').getBoundingClientRect();
return Math.abs(display.top - dial.top) < 4 && dial.left >= display.right;
return display.top > dial.top && display.bottom < dial.bottom && Math.abs(dial.left - display.right - 36) < 1 && Math.round(display.width) === 216;
})()
JS)
->assertScript("getComputedStyle(document.querySelector('#meeting-dialog [data-md-timepicker-picker]')).display === 'contents'");
tests/Feature/Components/TimepickerTest.php
+29
View File
@@ -2,6 +2,7 @@
use Livewire\Component;
use Livewire\Livewire;
use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
/**
* The JSON the component hands its Alpine data as its second argument.
@@ -87,6 +88,34 @@ it('offers the input variant, the period selector and the actions', function ()
->toContain('>OK</span>');
});
it('draws the boxes, the period and the dial from the interaction classes', function () {
$html = (string) $this->blade('<x-timepicker id="pickup" label="Pickup" />');
$css = ComponentStylesheet::read('timepicker');
// Two boxes and two period selectors of two radios each; the dial takes the ring alone.
expect(substr_count($html, 'class="md-state-layer md-focus-ring"'))->toBe(6)
->and($html)->toMatch('/class="md-focus-ring"\s+data-md-timepicker-dial/')
->and($css->declarations('[data-md-timepicker-dial]'))->not->toHaveKey('outline')
->and($css->declarations('[data-md-timepicker-box]'))->not->toHaveKeys(['outline', 'position', 'isolation'])
->and($css->declarations('[data-md-timepicker-period] > button:disabled'))->toMatchArray([
'color' => 'color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent)',
'background-color' => 'color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity) * 100%), transparent)',
]);
});
it('lies the dial down by orientation and viewport height alone, at the px the upright dial needs', function () {
$css = ComponentStylesheet::read('timepicker');
expect($css->mediaQueries())->toBe([
'(orientation: landscape) and (height < 560px)',
'(orientation: landscape) and (height <= 364px)',
'(orientation: landscape) and (height <= 346px)',
])
->and($css->declarations('[data-md-timepicker-dial]'))->toMatchArray(['--dial' => '256px'])
->and($css->declarations("[data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-dial]", ['@media (orientation: landscape) and (height <= 364px)']))->toBe(['--dial' => '238px'])
->and($css->declarations("[data-md-timepicker-surface][data-md-mode='dial'] [data-md-timepicker-dial]", ['@media (orientation: landscape) and (height <= 346px)']))->toBe(['--dial' => '200px']);
});
it('passes the format, locale, limits and step to the picker, and drops what it cannot use', function () {
app()->setLocale('de_CH');