DateField: replace "Pick" button with a trailing calendar icon #27

New Issue

2026-06-28T13:41:27Z

admin commented

2026-06-28 13:41:27 +00:00

Bug / UX

DateField currently exposes the date picker via a trailing TextButton with the literal label "Pick" (app/src/main/java/dev/achmad/ledgerr/ui/components/DateField.kt:40-44):

trailingIcon = {
    TextButton(onClick = { showPicker = true }) {
        Text(text = stringResource(R.string.action_pick))
    }
},

Expected behavior

The trailing slot should be a tappable calendar icon at the far right of the field, consistent with Material 3 outlined text fields elsewhere in the app. The entire field (including the icon) should open the picker on tap — but minimally the icon must be tappable.

Acceptance criteria

DateField's trailingIcon is an IconButton (or Icon wrapped in a clickable surface) using a Calendar / CalendarMonth / DateRange outlined icon from androidx.compose.material.icons.outlined.*.
The icon is positioned at the far right of the OutlinedTextField.
Tapping the icon (or the field itself) opens the DatePickerDialog.
The R.string.action_pick string and TextButton import in this file are removed if no longer used.
The dialog confirm / cancel flow is unchanged.

**Bug / UX** `DateField` currently exposes the date picker via a trailing `TextButton` with the literal label "Pick" (`app/src/main/java/dev/achmad/ledgerr/ui/components/DateField.kt:40-44`): ```kotlin trailingIcon = { TextButton(onClick = { showPicker = true }) { Text(text = stringResource(R.string.action_pick)) } }, ``` **Expected behavior** The trailing slot should be a tappable **calendar icon** at the far right of the field, consistent with Material 3 outlined text fields elsewhere in the app. The entire field (including the icon) should open the picker on tap — but minimally the icon must be tappable. **Acceptance criteria** - `DateField`'s `trailingIcon` is an `IconButton` (or `Icon` wrapped in a clickable surface) using a `Calendar` / `CalendarMonth` / `DateRange` outlined icon from `androidx.compose.material.icons.outlined.*`. - The icon is positioned at the far right of the `OutlinedTextField`. - Tapping the icon (or the field itself) opens the `DatePickerDialog`. - The `R.string.action_pick` string and `TextButton` import in this file are removed if no longer used. - The dialog confirm / cancel flow is unchanged.

admin referenced this issue from a commit

2026-06-28 14:31:07 +00:00

fix(#27): replace "Pick" TextButton with trailing calendar icon in DateField

admin referenced a pull request that will close this issue

2026-06-28 14:31:13 +00:00

fix(#23,#24,#27): theme preference wiring, dd MMM yyyy dates, calendar icon in DateField #38

admin closed this issue

2026-06-28 14:32:57 +00:00

admin referenced this issue

2026-06-28 14:47:41 +00:00

fix: DateField — make the whole input clickable, not just the calendar icon #42

Sign in to join this conversation.