calcite-date-picker changes height depending on months

[janett-baresel]

Check existing issues

• [X] 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

• [X] @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

[geospatialem]

Design expertise sought for the following expertise 🧠 :

1. Can the component adopt a fixed height regardless of the number of week in a month?
2. If "yes" to #1 above, should we populate more dates from the previous month?

[ashetland]

@SkyeSeitz @macandcheese This is an example from Atlassian where both of @geospatialem's questions are answered "yes". There calendar always has 6 date rows we can see that the entire bottom row here is from the next month.

[SkyeSeitz]

I agree with moving forward with a fixed height shared between months. Open to displaying the next month's dates in additional space for shorter months - a better use of space imo than leaving a potentially awkward gap. Thanks, @geospatialem and @ashetland 🙌