ConsolidateRequires Rework
Month and Year Picker - Item Component link

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

Consolidate into a unified Picker Cell
This cell and Date Picker - Item are the same selectable-cell primitive at different pixel sizes (100×32 vs 32×32) with identical state semantics (Default / Today / Selected). Collapse both into a single 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.
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.

Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
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.
Open Issues
  • 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 named Month in 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 single Type axis with no State at all. Cells in the same family should share the same state shape — even if specific values differ by kind. C2 · Variant & Property Naming
  • Tokens named main/date-picker/day/* are used for non-day cells. The cell's bg and label resolve to main/date-picker/day/color/selected/* and main/date-picker/day/color/unselected/* — but it's rendering a month or year, not a day. The token scope is misleadingly named. Either rename to main/date-picker/cell/* or split into main/picker-cell/{day|month|year}/*. C3 · Token Coverage
  • Cell has no 1:1 native primitive. Both SwiftUI DatePicker(.graphical) and Material 3 DatePicker render 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
Design Recommendations
  • 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 (plus range-middle | prev-next exposed only when kind=day). Collapses 10 sibling variants across two components into one component with two clean axes. A single native PickerCell composable renders the correct dimensions, radius, and typography per kind. Family
  • Property — Add a State axis to match the day cell. Even before consolidation, promote the single-axis Type schema into Type × State = Enabled | Disabled | Pressed | Focused to align with the day cell's shape. At minimum, publish Disabled variants 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 Month in all three variants, but the same component is instance-swapped as the year cell too. Rename to Cell or Label Container so it reads true for both Month and Year views. Rename
  • Token — Rename main/date-picker/day/* to main/date-picker/cell/*. The shared token scope is named day but also resolves for month and year cells. Rename (or split into main/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 on kind, and harmonise the Today ring stroke (1px here, 1.5px on the day cell) on a single border/picker-cell/today token. 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 _reference prefix once the Picker Cell family unification lands. Docs
Types
Default
DES DEV

100×32 cell rendered inside the Month and Year grids of Date Picker - Group. Flip Type between Default / Today / Selected.

Properties
Type
Properties
Type Default
Colors
Label #0A2757
Bg #FFFFFF
Border none
Layout
Cell size 100 × 32
Border radius 8
Padding H 12
Typography
Style Primary/Label/Light/Small
Font Proxima Soft Semibold · 14 / 14 · +0.25
Colors by Type

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 TokenVALUE
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
Property Mapping
Figma PropertySwiftUICompose
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
SwiftUI
ios/Components/DatePicker/EBPickerCell.swift · kind: month | year
Jetpack Compose
android/components/datepicker/EBPickerCell.kt · kind: Month | Year
Accessibility
RequirementiOSAndroid
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
Usage Guidelines

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.

Criteria Scorecard
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.
Code Connect
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.
Variants Inventory (3 total)

3 variants on a single Type axis. The sibling day cell has 7 variants on Type × State — this cell lacks the State dimension entirely.

TypeDimensionsEmphasisNode ID
Default100 × 32none18414:5851
Today100 × 321px blue border18414:5852
Selected100 × 32solid blue fill, white bold label18414:5853
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