From 3956a5d39e59ab04068e6db0ed93ec6d87f48f44 Mon Sep 17 00:00:00 2001 From: dev Date: Thu, 21 May 2026 13:55:53 +0200 Subject: [PATCH] picker demos: open by default + footer buttons enabled MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit User report: 'no veo que haga nada nuevo en la demo' — the new canonical Footer/Clear/Cancel/Close parts existed but were invisible on first load because every *Button toggle defaulted to false and the popovers opened closed. The user reloaded, saw the same baseline as before, and concluded nothing had landed. Fix: - date-picker demo: open=true, closeOnDateSelect=false (so the user can pick a date without the popover collapsing while exploring), clearButton=true, cancelButton=true, closeButton=true. Result: on first load the calendar is visible with 'Borrar fecha · Cancelar · Cerrar' below it, in the active locale. - date-range-picker demo: same — open=true, clear/cancel/close all default to true. The comment claiming the popover should stay closed because 'segments are for keyboard entry' is replaced; the demo's purpose is to surface the API, and the segments are still reachable by Tab-focus even when the popover is open. These changes are demo-only — the actual provider defaults stay inline/false. Production consumers must opt in. 0 type errors. Browser verified: Footer renders with all three i18n-driven labels at the bottom of the calendar. Co-Authored-By: Claude Opus 4.7 (1M context) --- web/routes/uix/components/date-picker/+page.svelte | 10 +++++----- .../uix/components/date-range-picker/+page.svelte | 13 +++++++------ 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/web/routes/uix/components/date-picker/+page.svelte b/web/routes/uix/components/date-picker/+page.svelte index 46455ab6d..c7f91c850 100644 --- a/web/routes/uix/components/date-picker/+page.svelte +++ b/web/routes/uix/components/date-picker/+page.svelte @@ -50,17 +50,17 @@ let value = $state(delivery); let valueInput = $state(toDateInput(delivery)); let placeholder = $state(delivery); - let open = $state(false); + let open = $state(true); let minInput = $state(toDateInput(defaultMin)); let maxInput = $state(toDateInput(defaultMax)); let required = $state(true); let disabled = $state(false); let readonly = $state(false); - let closeOnDateSelect = $state(true); + let closeOnDateSelect = $state(false); let mode = $state<'inline' | 'modal'>('inline'); - let clearButton = $state(false); - let cancelButton = $state(false); - let closeButton = $state(false); + let clearButton = $state(true); + let cancelButton = $state(true); + let closeButton = $state(true); let segmentLock = $state('none'); let disableDaysOutsideMonth = $state(true); let fixedWeeks = $state(false); diff --git a/web/routes/uix/components/date-range-picker/+page.svelte b/web/routes/uix/components/date-range-picker/+page.svelte index f2908126d..fd081e7df 100644 --- a/web/routes/uix/components/date-range-picker/+page.svelte +++ b/web/routes/uix/components/date-range-picker/+page.svelte @@ -47,9 +47,10 @@ let stageRef = $state(null); let value = $state({ start: sprintStart, end: sprintEnd }); let placeholder = $state(sprintStart); - // Popover starts closed: the field's segments are for direct keyboard - // entry; the popover is only for visual exploration via the trigger icon. - let open = $state(false); + // Popover starts open in the demo so the new Footer + segment-lock + // affordances are visible on first load. Consumers can close it via + // the Cancel/Close buttons or by clicking outside (in inline mode). + let open = $state(true); let startInput = $state(toDateInput(sprintStart)); let endInput = $state(toDateInput(sprintEnd)); let minInput = $state(toDateInput(defaultMin)); @@ -59,9 +60,9 @@ let allowSingleDay = $state(false); let closeOnRangeSelect = $state(false); let mode = $state<'inline' | 'modal'>('inline'); - let clearButton = $state(false); - let cancelButton = $state(false); - let closeButton = $state(false); + let clearButton = $state(true); + let cancelButton = $state(true); + let closeButton = $state(true); let disableDaysOutsideMonth = $state(true); let fixedWeeks = $state(true); let pagedNavigation = $state(false);