calcite-date-picker changes height depending on months

[janett-baresel]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

When flipping through the months the picker changes height due to how many rows a particular month needs. This is not ideal when the button for next/previous moves up and down in certain scenarios. It is even worse if the changing height triggers different position of the popover above or below the control. (see 2 gifs).
This also can happen when changing to the next year, where the months might be shorter or longer (in number of rows) than before.

Expected Behavior

The popover stays at the same place and doesn't change height so the above doesn't happen and users can seamlessly switch between months and years.

(One suggestion would be to have a consistent height, e.g. always 6 rows)

Reproduction Sample

https://developers.arcgis.com/calcite-design-system/components/input-date-picker/

Reproduction Steps

1. open input date picker sample in codepen
2. add <div style="height:350px;"></div> above picker
3. open picker and observe issues mentioned above.

Reproduction Version

2.8.0

Relevant Info

os and browser independent

Regression?

No response

Priority impact

p4 - not time sensitive

Impact

minor - just bad UX for people setting up a lot of dates for different layers. This becomes visible because SV (and MV) allow setting a visible time extent for any layer. Users will set up time ranges for multiple layers in a row and this UX makes it harder to quickly navigate to a given date.

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Scene Viewer