svelte-kit-vice

Commit Graph

Author	SHA1	Message	Date
dev	383e2ff7f7	date-range-picker: mode prop + footer button props + revert group chrome User feedback batch from incidencia 2026-05-20: 1. Modal vs inline mode - New `mode: 'inline' \| 'modal'` prop on the soma `DateRangePicker.Provider`. - Modal wires the popover `modal: true` → outside-click and Escape are ignored; user must commit via the footer Close button (or revert via Cancel). - Provider exposes helpers `clear()`, `cancel()`, `commit()` for the footer. `cancel()` restores the value snapshot taken on the OPEN edge (captured via a `watch` on `opts.open` true-edge transition). 2. Footer buttons as boolean props - `clearButton`, `cancelButton`, `closeButton` props on the picker. The footer renders only if at least one is true. In `mode='modal'` the closeButton is forced on (the user always needs an exit). - `picker-actions.svelte` in the demo reads the picker context via `DateRangePickerProvider.require()` and renders the enabled buttons against `provider.clear/cancel/commit`. 3. Range field shape (revert to Chakra-style two boxes) - Removed the `data-date-range-field-group` wrapper from the demo so the start and end inputs are rendered as two separate boxed fields with the icon embedded in the end box, matching Chakra's layout. - The recipe CSS rules for `data-date-range-field-group` stay available as an opt-in for consumers who prefer the unified pill. 4. Demo defaults - `open` starts at `false` so the picker exercises the real open/close flow when the user clicks the trigger — the segments are for direct keyboard entry, the popover is for visual exploration. - Mode toggle (inline / modal) + footer button switches surfaced as controls in the demo. 5. Plumbing - DateRangePickerOpts gains `mode`, `clearButton`, `cancelButton`, `closeButton` (StateProps for mode, ActiveProps for the booleans). - `DateRangePickerProvider` and `DateRangePickerMode` are now re- exported from the soma barrel for consumers that wire footer actions in the calendar tree. - Test factory updated to seed the new opts. Verified in browser: trigger opens; click-outside in modal mode is ignored; Close commits & closes; Cancel reverts to snapshot & closes; Clear empties the range & keeps open. Heading "May – June 2026" (year collapse) and centered per-calendar titles still working from the previous commit. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago

Author

SHA1

Message

Date

dev

383e2ff7f7

date-range-picker: mode prop + footer button props + revert group chrome

User feedback batch from incidencia 2026-05-20:

1. Modal vs inline mode
   - New `mode: 'inline' | 'modal'` prop on the soma `DateRangePicker.Provider`.
   - Modal wires the popover `modal: true` → outside-click and Escape are
     ignored; user must commit via the footer Close button (or revert via
     Cancel).
   - Provider exposes helpers `clear()`, `cancel()`, `commit()` for the
     footer. `cancel()` restores the value snapshot taken on the OPEN edge
     (captured via a `watch` on `opts.open` true-edge transition).

2. Footer buttons as boolean props
   - `clearButton`, `cancelButton`, `closeButton` props on the picker.
     The footer renders only if at least one is true. In `mode='modal'`
     the closeButton is forced on (the user always needs an exit).
   - `picker-actions.svelte` in the demo reads the picker context via
     `DateRangePickerProvider.require()` and renders the enabled buttons
     against `provider.clear/cancel/commit`.

3. Range field shape (revert to Chakra-style two boxes)
   - Removed the `data-date-range-field-group` wrapper from the demo so
     the start and end inputs are rendered as two separate boxed fields
     with the icon embedded in the end box, matching Chakra's layout.
   - The recipe CSS rules for `data-date-range-field-group` stay
     available as an opt-in for consumers who prefer the unified pill.

4. Demo defaults
   - `open` starts at `false` so the picker exercises the real
     open/close flow when the user clicks the trigger — the segments are
     for direct keyboard entry, the popover is for visual exploration.
   - Mode toggle (inline / modal) + footer button switches surfaced as
     controls in the demo.

5. Plumbing
   - DateRangePickerOpts gains `mode`, `clearButton`, `cancelButton`,
     `closeButton` (StateProps for mode, ActiveProps for the booleans).
   - `DateRangePickerProvider` and `DateRangePickerMode` are now re-
     exported from the soma barrel for consumers that wire footer
     actions in the calendar tree.
   - Test factory updated to seed the new opts.

Verified in browser: trigger opens; click-outside in modal mode is
ignored; Close commits & closes; Cancel reverts to snapshot & closes;
Clear empties the range & keeps open. Heading "May – June 2026" (year
collapse) and centered per-calendar titles still working from the
previous commit.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

1 Commits (9bd9db408de16ec37153f74eccc1e0a3cdaee46e)