The 100×32 selectable cell used inside the Month and Year views of Date Picker - Group.
Picker Cell with kind: day | month | year + state: default | today | selected | disabled. This cell currently lacks Disabled, Pressed, and Focused entirely — the unification should rectangularize the state axis across all kinds.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.
Picker Cell with a kind axis would be truly reusable.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.| 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. |
- Sibling duplication with Date Picker - Item. The two components are the same selectable-cell primitive at different pixel sizes (100×32 vs 32×32) with overlapping state semantics (Default, Today, Selected). Maintaining them as siblings doubles the variant surface and forces the Group panel to instance-swap based on view. C1 · Layer Structure & Naming
- Inner frame is always named
Month— even when it's the year cell. The same Figma component is instance-swapped as both a month cell (Jan, Feb, Mar…) and a year cell (2024, 2025…), but the inner auto-layout frame is namedMonthin all three variants. The layer name lies for half the instances. C1 · Layer Structure & Naming - State axis is narrower than the sibling day cell. The day cell has
Type×State=Enabled|Disabled. This cell has a singleTypeaxis with no State at all. Cells in the same family should share the same state shape — even if specific values differ bykind. C2 · Variant & Property Naming - Tokens named
main/date-picker/day/*are used for non-day cells. The cell's bg and label resolve tomain/date-picker/day/color/selected/*andmain/date-picker/day/color/unselected/*— but it's rendering a month or year, not a day. The token scope is misleadingly named. Either rename tomain/date-picker/cell/*or split intomain/picker-cell/{day|month|year}/*. C3 · Token Coverage - Cell has no 1:1 native primitive. Both SwiftUI
DatePicker(.graphical)and Material 3DatePickerrender their own month/year views and don't accept a custom cell view. This Figma component is therefore a reference spec, not a mappable component — should be marked as such or merged into the Picker Cell family. C4 · Native Mappability - No Disabled variant. When a parent limits the pickable date range, disabled months or years have no token-bound appearance on this cell. The sibling day cell at least ships Disabled on Default and Today — this cell has no Disabled form for any Type. C5 · Interaction State Coverage
- No Pressed, Hover, or Focused variants. Tap feedback (iOS ripple / Android state layer) and keyboard focus ring are not defined. Native pickers supply these automatically, but any custom wrapper has no tokens to apply. C5 · Interaction State Coverage
- Today + Selected collision is unresolved. There is no variant for the common case of the current month/year being the selected one. The design team should decide which presentation wins (ring + fill, fill-only, or a hybrid) and publish a variant. C5 · Interaction State Coverage
- Today ring thickness drifts from the sibling day cell. This cell uses a 1px border; the sibling day cell uses a 1.5px ring. Same visual pattern, different stroke weight — selection/today emphasis should be one token shared across Picker Cell kinds, not per-component values. C6 · Asset & Icon Quality
- Code Connect mappings not registered. Blocked by the native-pickers-own-it direction (C4) and by the pending Picker Cell family unification (C1). Map only once the unified component exists and the wrapper surface is confirmed. C7 · Code Connect Linkability
- Family — Consolidate Date Picker - Item + Month and Year Picker - Item into ONE
Picker Cell. Both are selectable cells with identical state semantics (Default / Today / Selected); only pixel size (32×32 vs 100×32) and corner radius (30px pill vs 8px rounded-rect) differ. Proposed schema:kind = day | month | year+state = default | today | selected | disabled(plusrange-middle | prev-nextexposed only whenkind=day). Collapses 10 sibling variants across two components into one component with two clean axes. A single nativePickerCellcomposable renders the correct dimensions, radius, and typography perkind. Family - Property — Add a
Stateaxis to match the day cell. Even before consolidation, promote the single-axisTypeschema intoType × State = Enabled | Disabled | Pressed | Focusedto align with the day cell's shape. At minimum, publishDisabledvariants for Default, Today, and Selected so the cell is usable in a date-range-restricted picker. Property - Rename — Fix the inner frame name. The inner auto-layout frame is named
Monthin all three variants, but the same component is instance-swapped as the year cell too. Rename toCellorLabel Containerso it reads true for both Month and Year views. Rename - Token — Rename
main/date-picker/day/*tomain/date-picker/cell/*. The shared token scope is nameddaybut also resolves for month and year cells. Rename (or split intomain/picker-cell/{day|month|year}/*if treatments intentionally diverge) so the token name honestly describes what it styles. Token - Token — Share a selection-emphasis token across Picker Cell kinds. Create
main/picker-cell/selection/*tokens that resolve to either "fill" or "ring" based onkind, and harmonise the Today ring stroke (1px here, 1.5px on the day cell) on a singleborder/picker-cell/todaytoken. Token - State — Add Pressed, Focused, and Today+Selected variants. Extend the state coverage with Pressed and Focused (needed for any custom wrapper rendering tap / keyboard affordances), and publish a decision variant for the common "today is also selected" case. State
- A11y — Flag the 32px height as below minimum target. The 100×32 cell is below WCAG 2.5.5 minimum 44×44 on the vertical axis. If a custom wrapper is ever built, pad the tap zone vertically so the hit area meets 44px. Document on the component so consumers don't ship the tight target outside the native picker context. A11y
- Docs — Mark as reference, not a production component. Given that both platforms render their own month/year views inside the native
DatePicker, this cell is a visual reference for the token-styled wrapper, not a component developers rebuild. Add a description banner and a_referenceprefix once the Picker Cell family unification lands. Docs
100×32 cell rendered inside the Month and Year grids of Date Picker - Group. Flip Type between Default / Today / Selected.
All cell colors are bound to tokens — but the tokens live under the main/date-picker/day/* scope even though this cell renders months and years. Selected uses main/date-picker/day/color/selected/*; Default/Today use main/date-picker/day/color/unselected/* plus the shared primary text and border tokens for the ring and label. The scope name is a mismatch — flagged as C3.
| Role | Token | Token | VALUE |
|---|---|---|---|
| Default | bg | main/date-picker/day/color/unselected/bg | #FFFFFF |
| Default | label | main/date-picker/day/color/unselected/label | #0A2757 |
| Today | bg | main/date-picker/day/color/unselected/bg | #FFFFFF |
| Today | border | border/color-border-primary | #005CE5 (1px) |
| Today | label | text/color-text-primary | #005CE5 |
| Selected | bg | main/date-picker/day/color/selected/bg | #005CE5 |
| Selected | label | main/date-picker/day/color/selected/label | #FFFFFF |
| Figma Property | SwiftUI | Compose |
|---|---|---|
| Type=Default | (default rendering) | yearContentColor / monthContentColor |
| Type=Today | .accentColor / automatic current-year marker | currentYearContentColor |
| Type=Selected | .tint (via selection binding) | selectedYearContainerColor / selectedYearContentColor |
| (missing) Disabled | in: Date... range parameter | yearRange / selectableDates |
| (missing) Pressed / Focused | — | — |
| Requirement | iOS | Android |
|---|---|---|
| Touch target (44 × 44 min) | Figma cell is 100 × 32 — native picker extends vertical hit area | Figma cell is 100 × 32 — native picker extends vertical hit area |
| Screen reader label | VoiceOver: "March, Month" / "2026, Year" (from DatePicker) | TalkBack: "March" / "2026" with "selected" state |
| Selected announcement | "Selected" trait added automatically | "Selected" state added automatically |
| Focus ring | System focus ring on iPad / hw keyboard | System focus indicator on D-Pad / hw keyboard |
| Disabled announcement | "Dimmed" trait when outside in: range | "Disabled" state when outside selectableDates |
| Dynamic Type / font scaling | Automatic | Automatic |
Do
Treat this cell as a visual reference for how the native picker's month and year views should look in GCash theme — colors, ring thickness, radius, and label weight.
Don't
Don't ship a standalone EBMonthYearPickerItem composable. Native pickers render their own month/year cells; a custom cell composable has no slot to plug into.
Do
If you genuinely need a custom month/year grid, merge with Date Picker - Item into a unified PickerCell(kind:, state:) and compose it inside a custom grid.
Don't
Don't maintain Date Picker - Item and Month and Year Picker - Item as siblings — they're the same primitive at different sizes.
Do
Rely on the native picker for locale-aware month names, era handling, VoiceOver / TalkBack, and minDate/maxDate enforcement on both the month and year axes.
Don't
Don't draw disabled months/years manually. Pass an in: range (SwiftUI) or selectableDates (Compose) and let the platform dim them.
| ID | Criterion | Status | Notes |
|---|---|---|---|
| C1 | Layer Structure & Naming | Requires Rework | Sibling-duplication with Date Picker - Item. Inner frame named Month even when used as the year cell. |
| C2 | Variant & Property Naming | Requires Rework | Narrower state axis than the sibling day cell — single Type axis with no State. Cells in the same family should share state shape. |
| C3 | Token Coverage | Needs Refinement | All values are token-bound, but tokens are scoped main/date-picker/day/* on a cell that renders months and years. Rename to main/date-picker/cell/* or split per kind. |
| C4 | Native Mappability | Requires Rework | Native pickers own the month/year view and don't accept a custom cell view. Reference-only unless merged into a custom PickerCell. |
| C5 | Interaction State Coverage | Requires Rework | No Disabled, no Pressed, no Focused, no Today + Selected. Single-axis variant matrix with no State dimension. |
| C6 | Asset & Icon Quality | Needs Refinement | No raster assets. But Today ring is 1px here vs 1.5px on the sibling day cell — should be one shared token. |
| C7 | Code Connect Linkability | Not Mapped | Blocked by C4 (native owns it) and by the pending Picker Cell family unification. |
| Aspect | Status | Notes |
|---|---|---|
| Property naming | Requires Rework | Add a State axis; align with day cell shape or merge into PickerCell. |
| Family unification | Requires Rework | Merge with Date Picker - Item into PickerCell with kind: day | month | year. |
| Token scope | Requires Rework | Rename main/date-picker/day/* to main/date-picker/cell/* (or split per kind). |
| Native component file | Not Mapped | No standalone composable — native DatePicker renders month/year cells. Only materialize EBPickerCell if a custom grid is ever built. |
| Recommendation | Consolidate | Merge into PickerCell, mark as reference spec for the native picker's month/year view. |
3 variants on a single Type axis. The sibling day cell has 7 variants on Type × State — this cell lacks the State dimension entirely.
| Type | Dimensions | Emphasis | Node ID |
|---|---|---|---|
| Default | 100 × 32 | none | 18414:5851 |
| Today | 100 × 32 | 1px blue border | 18414:5852 |
| Selected | 100 × 32 | solid blue fill, white bold label | 18414:5853 |
Type axis. 100×32 rounded-rect cell with token-bound colors, spacing, radius, and typography.
DocumentedPicker Cell with kind: day | month | year.
OpenMonth across all variants — Same component instance-swapped as both month and year cell; layer name is inaccurate for year instances.
OpenType axis only. No State dimension, so Disabled / Pressed / Focused are all missing. Cells in the same family should share state shape.
Openmain/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.
OpenDatePicker renders its own month/year cells on both platforms. Reference-only unless a custom grid is built.
OpenState axis published at all. The common "today is also selected" combination is undefined.
Open