The task: bring the Date Picker component up to date. The Figma component had drifted from what engineering had actually shipped and from what the documentation described — this update closed that gap, variant by variant.
Date picker: updates and enhancements.
The main focus was ensuring consistency with the existing Web Components codebase and documentation. Every variant the code supported needed a matching Figma variant - no more, no less - so designers could trust the component instead of second-guessing it against the docs.
Where the Figma component fell out of sync.
Comparing the Figma component side-by-side against the shipped code and the documentation surfaced eight concrete gaps — missing variants, mismatched labels, and leftover patterns that no longer matched guidelines.
| # | Problem | How to solve it |
|---|---|---|
| {{ f.n }} |
{{ f.problem }}
{{ f.description }}
|
{{ f.solution }} |
The rebuilt Date Picker is composed of a field, a calendar, and calendar rows — each with its own default, focus, hover, selected and today states, plus dedicated week-number and Arabic/RTL variants.
{{ s.states }}
Seven fixes later, the Figma Date Picker matches what ships: column-week layout, correct button-group footer, a Today state, range selection, Arabic/RTL support, and the right button labels — all as real, documented variants rather than one-off overrides.