feat(Date Input): add appearance prop to DateInput, DateTimeInput, and DateRangeInput components

[ddouglasz]

Summary

Feat: add appearance prop to date input components for filter styling

Introduce a new appearance prop with a ‘filter’ option for DateInput, DateTimeInput, and DateRangeInput components. This allows for a cleaner, inline appearance suitable for filter components, removing borders and box shadows, and keeping the calendar always open. Update styles and documentation accordingly.

To use the date filters, there are some visual modifications that need to happen in the different date inputs to support the designs and ux of the filters pattern. Most of these changes are dependent on new props to set these options when the component is used in a filter component.

Add support for appearance: 'filter' to DateInput, DateTimeInput, and DateRangeInput components. When set to 'filter', the components:

• Remove borders and box shadows for a clean, inline appearance
• Keep the calendar always open (when not disabled or read-only)
• Maintain transparent backgrounds to blend seamlessly with filter UIs

This follows the same design pattern established in select input components and enables date inputs to be used effectively within filter components and search interfaces.

New Props:

• appearance?: 'default' | 'filter' - Controls the visual styling of the date input

Examples:

<DateInput appearance="filter" value="2024-01-15" />
<DateTimeInput appearance="filter" value="2024-01-15T10:30:00Z" />
<DateRangeInput appearance="filter" value={['2024-01-15', '2024-01-20']} />

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ui-kit	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 13, 2025 8:06am

[changeset-bot]

🦋 Changeset detected

Latest commit: c1e5e5a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 98 packages

Name	Type
@commercetools-uikit/date-range-input	Minor
@commercetools-uikit/date-time-input	Minor
@commercetools-uikit/date-input	Minor
@commercetools-uikit/calendar-utils	Minor
@commercetools-uikit/date-range-field	Minor
@commercetools-uikit/inputs	Minor
@commercetools-uikit/date-time-field	Minor
@commercetools-uikit/date-field	Minor
@commercetools-uikit/fields	Minor
@commercetools-frontend/ui-kit	Minor
@commercetools-uikit/design-system	Minor
@commercetools-uikit/calendar-time-utils	Minor
@commercetools-uikit/hooks	Minor
@commercetools-uikit/i18n	Minor
@commercetools-uikit/localized-utils	Minor
@commercetools-uikit/utils	Minor
@commercetools-uikit/accessible-hidden	Minor
@commercetools-uikit/avatar	Minor
@commercetools-uikit/card	Minor
@commercetools-uikit/collapsible-motion	Minor
@commercetools-uikit/collapsible-panel	Minor
@commercetools-uikit/collapsible	Minor
@commercetools-uikit/constraints	Minor
@commercetools-uikit/data-table-manager	Minor
@commercetools-uikit/data-table	Minor
@commercetools-uikit/field-errors	Minor
@commercetools-uikit/field-label	Minor
@commercetools-uikit/field-warnings	Minor
@commercetools-uikit/filters	Minor
@commercetools-uikit/grid	Minor
@commercetools-uikit/icons	Minor
@commercetools-uikit/label	Minor
@commercetools-uikit/link	Minor
@commercetools-uikit/loading-spinner	Minor
@commercetools-uikit/messages	Minor
@commercetools-uikit/notifications	Minor
@commercetools-uikit/pagination	Minor
@commercetools-uikit/primary-action-dropdown	Minor
@commercetools-uikit/progress-bar	Minor
@commercetools-uikit/quick-filters	Minor
@commercetools-uikit/stamp	Minor
@commercetools-uikit/tag	Minor
@commercetools-uikit/text	Minor
@commercetools-uikit/tooltip	Minor
@commercetools-uikit/view-switcher	Minor
@commercetools-uikit/accessible-button	Minor
@commercetools-uikit/flat-button	Minor
@commercetools-uikit/icon-button	Minor
@commercetools-uikit/link-button	Minor
@commercetools-uikit/primary-button	Minor
@commercetools-uikit/secondary-button	Minor
@commercetools-uikit/secondary-icon-button	Minor
@commercetools-uikit/dropdown-menu	Minor
@commercetools-uikit/async-creatable-select-field	Minor
@commercetools-uikit/async-select-field	Minor
@commercetools-uikit/creatable-select-field	Minor
@commercetools-uikit/localized-multiline-text-field	Minor
@commercetools-uikit/localized-text-field	Minor
@commercetools-uikit/money-field	Minor
@commercetools-uikit/multiline-text-field	Minor
@commercetools-uikit/number-field	Minor
@commercetools-uikit/password-field	Minor
@commercetools-uikit/radio-field	Minor
@commercetools-uikit/search-select-field	Minor
@commercetools-uikit/select-field	Minor
@commercetools-uikit/text-field	Minor
@commercetools-uikit/time-field	Minor
@commercetools-uikit/async-creatable-select-input	Minor
@commercetools-uikit/async-select-input	Minor
@commercetools-uikit/checkbox-input	Minor
@commercetools-uikit/creatable-select-input	Minor
@commercetools-uikit/input-utils	Minor
@commercetools-uikit/localized-money-input	Minor
@commercetools-uikit/localized-multiline-text-input	Minor
@commercetools-uikit/localized-rich-text-input	Minor
@commercetools-uikit/localized-text-input	Minor
@commercetools-uikit/money-input	Minor
@commercetools-uikit/multiline-text-input	Minor
@commercetools-uikit/number-input	Minor
@commercetools-uikit/password-input	Minor
@commercetools-uikit/radio-input	Minor
@commercetools-uikit/rich-text-input	Minor
@commercetools-uikit/rich-text-utils	Minor
@commercetools-uikit/search-select-input	Minor
@commercetools-uikit/search-text-input	Minor
@commercetools-uikit/select-input	Minor
@commercetools-uikit/select-utils	Minor
@commercetools-uikit/selectable-search-input	Minor
@commercetools-uikit/text-input	Minor
@commercetools-uikit/time-input	Minor
@commercetools-uikit/toggle-input	Minor
@commercetools-uikit/spacings-inline	Minor
@commercetools-uikit/spacings-inset-squish	Minor
@commercetools-uikit/spacings-inset	Minor
@commercetools-uikit/spacings-stack	Minor
@commercetools-uikit/buttons	Minor
@commercetools-uikit/spacings	Minor
visual-testing-app	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[FilPob]

@ddouglasz looks great so far, thanks! Just 2 wishes:

1. When appearance: filter, the calendar icon inside the input is not needed (as the calendar is always expanded anyways) so would be great to hide the icon in this case.
2. would it be possible to add an example into the filter story, that showcases a filter type: date. Currently you can choose between Select Text and Radio it would be great to add the possibility of Date

[ddouglasz]

@ddouglasz looks great so far, thanks! Just 2 wishes:

1. When appearance: filter, the calendar icon inside the input is not needed (as the calendar is always expanded anyways) so would be great to hide the icon in this case.
2. would it be possible to add an example into the filter story, that showcases a filter type: date. Currently you can choose between Select Text and Radio it would be great to add the possibility of Date

@FilPob Both requests updated: 18812b3

Please check the preview again.
Thank you

[FilPob]

Nice! Now my last wish would be to set the min.width of the date filter dropdown to horizontal constraint 8. Atm it looks a bit too squeezed.

[ddouglasz]

Updated after our conversation to horizontalConstraint={8} here

[FilPob]

Great! Looks good now

[tylermorrisford]

💪

[misama-ct]

💐