🐞 - [v4] `InputDateRange` period selector size

[hakimio]

Code Example URL

https://taiga-ui.dev/components/input-date-range#custom-period

Description

In v4 date range period selector data list grew from medium to large size by default. Now you have much less space for custom periods and if you add few too many options it extends the date range picker considerably. The only option to change the size seems to be using the provider:

providers: [{
        provide: TUI_DATA_LIST_HOST,
        useValue: {
            size: 'm'
        }
    }]

If the new bigger size follows internal design guidelines and you are not willing to change it back to medium size, it would be nice to be able to easily change the data list size from the date range input properties:

<tui-input-date-range
    [formControl]="dateRangeControl"
    [items]="dateRangePeriods()"
    [dateRangeListSize]="m"
>
    Date Range
</tui-input-date-range>

Having to use TUI_DATA_LIST_HOST provider to change the size is not a very good DX.

Taiga UI version

4.7.0

Browser Used

Chrome

OS Used

Windows

[waterplea]

Problem here is that data list is built into the dropdown, unlike with other components such as select or combo-box where it is exposed. When we refactor data inputs to the new textfield, we hope to have something like this:

<tui-textfield>
  <input tuiInputDateRange />
  <tui-calendar *tuiTextfieldDropdown />
</tui-textfield>

So that people will have complete control over what they want to show there, a single calendar, double calendar, dropdown with presets or any combination of content that make sense for their particular case.

[hakimio]

How about changing it back to medium size until then?

[waterplea]

In v3 it has the same size as the control, I'll return this behavior in v4