From 459678c3416c8897b03efee8ec7c03ddfe0bf3ee Mon Sep 17 00:00:00 2001 From: Andreas Reinhold / reini Date: Mon, 14 Sep 2026 19:37:05 +0200 Subject: [PATCH] Size the timepicker in px, as its landscape queries already are 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) Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9 --- resources/css/components/timepicker.css | 114 ++++++++++---------- tests/Browser/TimepickerTest.php | 7 +- tests/Feature/Components/TimepickerTest.php | 29 +++++ 3 files changed, 93 insertions(+), 57 deletions(-) diff --git a/resources/css/components/timepicker.css b/resources/css/components/timepicker.css index c74b6676..6d43c756 100644 --- a/resources/css/components/timepicker.css +++ b/resources/css/components/timepicker.css @@ -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 , 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 , 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; } } } diff --git a/tests/Browser/TimepickerTest.php b/tests/Browser/TimepickerTest.php index 56f6dfa4..2a752d11 100644 --- a/tests/Browser/TimepickerTest.php +++ b/tests/Browser/TimepickerTest.php @@ -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'"); diff --git a/tests/Feature/Components/TimepickerTest.php b/tests/Feature/Components/TimepickerTest.php index 4468dff4..d98562b2 100644 --- a/tests/Feature/Components/TimepickerTest.php +++ b/tests/Feature/Components/TimepickerTest.php @@ -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'); }); +it('draws the boxes, the period and the dial from the interaction classes', function () { + $html = (string) $this->blade(''); + $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');