Month and Year Picker - Item — GCash DS Assessment

RemoveNot Applicable

Month and Year Picker - Item Component link

The 100×32 selectable cell used inside the Month and Year views of Date Picker - Group.

Superseded by Date Picker - Cell

Superseded by Date Picker - Cell. This cell and Date Picker - Item folded into one component at node 5943:41825 as Kind=MonthYear. The Disabled version it never had now exists, the inner frame that was always called Month is now Container, and the Today ring matches the day cell exactly. Kept as a record of the assessment that drove the consolidation.

In Context

The cell is instance-swapped inside Date Picker - Group when the user switches to Month or Year view. 12 cells are rendered as a 4 × 3 month grid, or 20 cells as a 4 × 5 year grid. Same Figma component for both — only the text label changes.

Live Preview

March

Properties

Type

DS Health

Reusable

Warn

Used inside Date Picker - Group for both the Month and Year views — which is good. But because it is a separate sibling from the 32×32 day cell, the picker has to instance-swap between two near-identical components depending on the view. A single Picker Cell with a kind axis would be truly reusable.

Self-contained

Pass

Bg, label, border, radius, padding, and typography are all token-bound. No absolute-positioned overflow, no external dependencies — the cell is a clean self-contained pill.

Consistent

Warn

State axis is narrower than the sibling day cell (no Disabled, no Pressed, no Focused). The Today ring is also 1px here but 1.5px on the day cell — same visual pattern with drift. Cells in the same family should share state shape and stroke tokens.

Composable

Fail

Doesn't compose into a native picker — SwiftUI DatePicker(.graphical) and Material 3 DatePicker render their own month/year views. And as a DS primitive it duplicates Date Picker - Item at a different size instead of being one Picker Cell with a kind axis.

Behavior

State	iOS	Android	Figma Property	Notes
Default	Yes	Yes	Type=Default	Plain label on white. `#0A2757` primary label. No ring, no fill.
Today	Yes	Yes	Type=Today	1px blue border, blue label. Marks the current month or year. Border thickness differs from the sibling day cell's 1.5px ring.
Selected	Yes	Yes	Type=Selected	Solid blue fill (`#005CE5`), white bold label. Uses the shared `main/date-picker/day/color/selected/*` token scope.
Disabled	No	No	—	Not defined on any Type. Sibling day cell exposes State=Disabled for Default and Today — this cell has no equivalent, so a disabled month or year has no token-bound appearance.
Pressed / Focused / Hover	No	No	—	Not defined. Native pickers supply these automatically, but a custom wrapper has no tokens to apply.
Today + Selected	No	No	—	Not defined. Unclear which presentation wins when the current month/year is also the selected one.
Touch target	N/A	N/A	—	Height is 32px — below WCAG minimum 44×44 on the vertical axis. Native pickers enforce their own hit areas; any custom wrapper would need to pad the tap zone.

1.0.0 — April 2026Major

Initial Assessment · node 18414:5854

Component assessed — 3 variants on a single Type axis. 100×32 rounded-rect cell with token-bound colors, spacing, radius, and typography. Documented

Initial

Sibling duplication with Date Picker - Item — Same selectable-cell primitive at different sizes. Proposal: collapse both into Picker Cell with kind: day | month | year. Open

C1 Open

Inner frame named Month across all variants — Same component instance-swapped as both month and year cell; layer name is inaccurate for year instances. Open

C1 Open

State axis narrower than sibling day cell — Single Type axis only. No State dimension, so Disabled / Pressed / Focused are all missing. Cells in the same family should share state shape. Open

C2 Open

Tokens scoped main/date-picker/day/* used for non-day cell — Bg and label tokens are named day but style months and years. Rename to main/date-picker/cell/* or split per kind. Open

C3 Open

No native primitive for a month/year cell — Native DatePicker renders its own month/year cells on both platforms. Reference-only unless a custom grid is built. Open

C4 Open

Disabled / Pressed / Focused / Today+Selected missing — No State axis published at all. The common "today is also selected" combination is undefined. Open

C5 Open

Today ring thickness drifts from sibling day cell — 1px here vs 1.5px on Date Picker - Item. Align on one shared stroke token per Picker Cell kind. Open

C6 Open

Code Connect not registered — Blocked by the native-pickers-own-it direction and by the pending Picker Cell family unification. Open

C7 Open