Skip to content

feat(DateInput): Add calendar picker with width/size props and dark mode fixes#21

Merged
garrity-miepub merged 1 commit into
mainfrom
feature/date-input-update
Jan 28, 2026
Merged

feat(DateInput): Add calendar picker with width/size props and dark mode fixes#21
garrity-miepub merged 1 commit into
mainfrom
feature/date-input-update

Conversation

@garrity-miepub

@garrity-miepub garrity-miepub commented Jan 28, 2026

Copy link
Copy Markdown
Collaborator

Features:

  • Add showCalendar prop to display a calendar icon button
  • Calendar picker with month/year dropdown navigation
  • Click outside and Escape key to close calendar
  • Today button for quick date selection
  • Pre-filled dates highlight selected day

Props:

  • Add width prop with 'full', 'fit', 'fixed' options
  • Support size variants (sm, md, lg) for calendar version
  • Properly handle required asterisk and error states

Styling:

  • Calendar popup with proper dark mode support
  • Selected day and today highlighting
  • Responsive positioning relative to input

Fixes:

  • Fix calendar icon positioning with label/error/helper text
  • Fix size prop type handling (null/undefined fallback to 'md')
  • Use inline styles for error/required colors to avoid CSS specificity issues

Storybook:

  • Add width control dropdown
  • Add calendar-specific stories (WithCalendar, WithCalendarPreFilled, etc.)
  • Fix text-destructive color override in docs dark mode"
dateinput-update.mov

@garrity-miepub garrity-miepub marked this pull request as ready for review January 28, 2026 21:19
@garrity-miepub garrity-miepub force-pushed the feature/date-input-update branch from 7ca6769 to 5c74b6e Compare January 28, 2026 21:47
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Jan 28, 2026

Copy link
Copy Markdown

Deploying ui with  Cloudflare Pages  Cloudflare Pages

Latest commit: 543bcd7
Status: ✅  Deploy successful!
Preview URL: https://d1568de4.ui-6d0.pages.dev
Branch Preview URL: https://feature-date-input-update.ui-6d0.pages.dev

View logs

Features:
- Add showCalendar prop to display a calendar icon button
- Calendar picker with month/year dropdown navigation
- Click outside and Escape key to close calendar
- Today button for quick date selection
- Pre-filled dates highlight selected day

Props:
- Add width prop with full, fit, fixed options
- Support size variants (sm, md, lg) for calendar version
- Properly handle required asterisk and error states

Styling:
- Calendar popup with proper dark mode support
- Selected day and today highlighting
- Responsive positioning relative to input

Fixes:
- Fix calendar icon positioning with label/error/helper text
- Fix size prop type handling (null/undefined fallback to md)
- Use inline styles for error/required colors to avoid CSS specificity issues

Storybook:
- Add width control dropdown
- Add calendar-specific stories (WithCalendar, WithCalendarPreFilled, etc.)
- Fix text-destructive color override in docs dark mode using CSS variable
@garrity-miepub garrity-miepub force-pushed the feature/date-input-update branch from 5c74b6e to 543bcd7 Compare January 28, 2026 21:49
@garrity-miepub garrity-miepub merged commit fff2aa3 into main Jan 28, 2026
2 of 7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant