Date Picker - Header — GCash DS Assessment

KeepReady

The weekday label above each column of the calendar grid. One component, no versions — it only ever displays text.

Keep — small, static, and doing exactly one job

All four DS Health traits pass. Seven instances sit in the first row of Date Picker - Calendar's Day mode. It shares the day cell's 32×32 footprint so the columns line up, and it is deliberately heavier — Bold against the cells' SemiBold — so the weekday strip reads as a header rather than as another row of dates.

In Context

Sits in the top row of the day grid, one per column. It replaced the old pattern of instance-swapping a day cell into the weekday row, which meant the header inherited states and selection behaviour it could never use.

Live Preview

Properties

Label

DS Health

Reusable

Pass

One component covers all seven columns; only the text changes.

Self-contained

Pass

Carries its own footprint and type style. Nothing about which weekday it shows is baked in.

Consistent

Pass

Same Container → #text anatomy and same 32×32 footprint as Date Picker - Cell, which is what keeps the columns aligned.

Composable

Pass

Instanced seven times in the first Row of the calendar's Day mode.

Behavior

State	iOS	Android	Figma Property	Notes
Static	N/A	N/A	Text	No states. The weekday strip is not interactive.
#text	N/A	N/A	String	Su · M · T · W · Th · F · Sa. Mixed lengths are deliberate, to save width on small screens.

Issues

The invisible white fill is gone. The component frame carried a #FFFFFF fill switched off. Nothing drew it — the Container beneath paints the real surface — but it read as a second surface to anyone inspecting the layers, and it was the same leftover found on Date Picker - Cell. Cleared in Figma during this run and confirmed on the node. C1 · Layer Structure & Naming
The weekday row has its own component. It used to be a Date Picker - Item instance with its number swapped for a weekday, which meant the header carried selection, today and disabled states it could never use. This component has none of them. C1 · Layer Structure & Naming
The name no longer implies versions it doesn't have. It was called Picker Header/Default. Figma reads the slash as nesting, so the assets panel showed a variant group around a component that has no variants. It is now a plain name. C2 · Variant & Property Naming
The wrapper matches the rest of the family. The inner frame was container, lowercase — a third spelling alongside the cell's Container and the trigger's Label Container. All three now read Container. C1 · Layer Structure & Naming

Anatomy

Header

Properties

Label

Properties

Label Su

Versions 1

Colors

#text #0A2757

Container surface #FFFFFF

Typography

#text Primary/Label/Small

Layout

Height 32px

Width 32px

Radius 24px

Padding H 6px (derived)

Padding V 10px top · 8px bottom (derived)

Alignment Center

EBDatePickerHeader(label: "Su")

Colors

Two roles and no states — the weekday label is never pressed, selected or disabled. Both tokens match the rest of the family: the same pair carries Date Picker - Cell's default day.

Role	Token	Value
Container surface	bg/color-bg-primary-inverse	#FFFFFF
#text	text/color-text	#0A2757

Installation Planned API

iOS — Swift Package Manager

.package(url: "https://github.com/AY-Org/eb-ds-ios", from: "1.0.0")

Android — Gradle (Kotlin DSL)

implementation("com.eastblue.ds:date-picker:1.0.0")

Import

import EastBlueDS
import com.eastblue.ds.datepicker.*

Planned API — the native library does not exist yet. The artifact is the Date Picker family, not this component: Cell, Header, Header Trigger, Calendar and the picker itself all ship in <code>com.eastblue.ds:date-picker</code> and import <code>com.eastblue.ds.datepicker.*</code>. On both platforms the weekday strip is normally supplied by the calendar view rather than assembled by hand.

Property Mapping

One property. Everything else about this component is fixed — a 32 × 32 slot that carries a weekday abbreviation.

Figma Property	SwiftUI	Compose
Label (text)	`label: String`	`label: String`

Usage Snippets Planned API

Header — one weekday column

EBDatePickerHeader(label: "Su")

EBDatePickerHeader(label = "Su")

Requirement	iOS	Android
Label	`.accessibilityLabel("Sunday")` — the abbreviation spelled out	`contentDescription = "Sunday"`
Role / trait	No trait — it is static text, never a control	`Modifier.semantics { }` — no role, it is not clickable
Dynamic type	Supported, scales to AX5 — the 32pt slot is fixed, so very large sizes truncate before the grid reflows	`sp` units; the 32dp column is fixed for the same reason
Labels come from the locale	`Calendar.current.veryShortWeekdaySymbols`	`DayOfWeek.getDisplayName(TextStyle.NARROW, locale)`
The strip is decorative	`.accessibilityHidden(true)` on the row	`Modifier.clearAndSetSemantics {}` on the row
Weekday still reaches the user	Each day cell's label includes the weekday	Same, via the cell's `contentDescription`

Usage Guidelines

Do

Take the labels from the platform's calendar symbols so they follow the user's locale and first-day-of-week.

Don't

Don't hardcode Su–Sa; not every locale starts the week on Sunday.

Do

Keep the 32×32 footprint so the header aligns with the day columns.

Don't

Don't let the header set its own width — the grid columns will drift.

Criteria Scorecard

ID	Criterion	Status	Notes
C1	Layer Structure & Naming	Ready	`Container` → `#text`, matching the rest of the family.
C2	Variant & Property Naming	Ready	No versions and one property, named `Label` after what it carries. The component is now `Date Picker - Header`, so it groups with the rest of the family in the assets panel.
C3	Token Coverage	Ready	One text colour and one surface, both standard tokens.
C4	Native Mappability	Ready	A text label in a row — trivially mappable on both platforms.
C5	Interaction State Coverage	Not Applicable	Not interactive.
C6	Asset & Icon Quality	Ready	No assets.

Variants Inventory (1 total)

One component, no versions. The seven columns differ only by their text.

Component	Size	Node
Date Picker - Header	32 × 32	6788:109823

1.1.0 — September 2026Minor

Renamed to the family, Style and Code tabs rebuilt — node 6788:109823

The component has its family name. It was Picker Header at the August assessment and is now Date Picker - Header, so Cell, Header, Header Trigger, Calendar and the picker sort together. This is what makes the release a minor rather than a patch.

C2 resolved

The invisible white fill is gone. The component frame carried a #FFFFFF fill switched off, over a Container that paints the real surface. Nothing drew it, but it read as a second surface when inspecting the layers — the same leftover cleared from Cell.

C1 resolved

The text property was documented as a layer. Both tabs called it #text; Figma names the property Label. Property Mapping, the spec card and the demo panel now use the property name, and the internal control key moved from day to label to match.

C2 resolved

The weekday picker offered seven values Figma does not have. The demo panel was a dropdown of Su through Sa, which documented a picklist that does not exist and hid that the label is free text. It is now a text input, as the guide requires for a text property.

Docs

The documented type style did not exist. Typography read Primary/Bold/Body — no such style in the database. The layer resolves to Primary/Label/Small. Two rows went with it: the font spec, and a "Weight vs cell" row comparing this component to the day cell, which was neither a style name nor accurate any more.

C3 resolved

Both colour tokens named the wrong steps. They read text/color-text-heading and bg/color-bg-main; the bindings are text/color-text and bg/color-bg-primary-inverse — the same pair the rest of the family uses. The hex values were right, which is what let the wrong token paths survive.

C3 resolved

Layout had none of the seven keys. It carried Dimensions, Corner radius and an Alignment whose value was "matches Date Picker - Cell" — a cross-reference rather than a value. Now Height · Width · Radius · Padding H · Padding V · Alignment, with the asymmetric 10px top / 8px bottom recorded as read: the brand's fonts sit high in their box, so that split is intentional.

Docs

The preview rendered in the wrong typeface. .eb-preview-dpwk declared no font and inherited the documentation font, BarkAda, while the component is Proxima Soft. It also painted no background, though the Container is white, and had no line-height against Figma's 14px.

Docs

The install block pointed at coordinates that will never exist. gcash/east-blue-ios and com.gcash.eastblue:components:1.0.0, with no Import line. Under the family rule the artifact is com.eastblue.ds:date-picker, imported as com.eastblue.ds.datepicker.*.

Docs

Usage Snippets documented the strip, not the component. They showed HStack and Row looping over the locale's weekday symbols — how to assemble a header row. One call now, EBDatePickerHeader(label:), built from the same definition as the spec card and the live preview, and renamed from EBPickerHeader to the family form.

Docs

Accessibility answered for the row, not the cell. All three rows described the strip. They are right and stayed; three more were added for this component — its label, its lack of a role, and how it behaves under Dynamic Type in a fixed 32pt column. Six rows, both platforms on every one.

Docs

The scorecard cited a rename two renames old. C2 read "the slash that implied a variant group is gone from the name" — true once, describing a name the component no longer has. It now records the current name and the single Label property.

Docs

Code Connect was populated on a component with nothing registered. Three rows claimed readiness against a native library that does not exist. The section is gone; C7 stays Not Mapped. A getSnippet was added so the DEV code block is live rather than frozen.

Docs

1.0.0 — August 2026Initial

First assessment · node 6788:109823

C1 — the weekday row got its own component. It was previously a Date Picker - Item instance carrying states a header can never use.

C1 resolved

C2 — name no longer contains a slash. Picker Header/Default read as a variant group in the assets panel around a component with no variants.

C2 resolved

C1 — wrapper renamed from container to Container, matching the cell and the header trigger.

C1 resolved

Bold 700 against the cell's SemiBold 600 confirmed as intentional header hierarchy.

Docs