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.
• The Date Picker always maintains space for 6 week rows. See image below.

Calcite Design Figma file available for reference.

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

[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 🙌

[ashetland]

Expected Behavior updated with final design specs.

[github-actions]

cc @geospatialem, @brittneytewks

[eriklharper]

Not sure if its possible since input-date-picker doesn't use calcite-popover internally, but the Floating UI API under the hood does allow direct control for where the popover displays. You can force it to always display below or above if you want depending on the use case with the placement property https://floating-ui.com/docs/computePosition#placement