feat(datetime-button): add support for opening datetimes in overlays with button

[liamdebeasi]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Issue URL: Internal ticket

What is the new behavior?

• This feature adds support for ensuring that overlays are correctly sized when opening modal/popover from a datetime button.

Does this introduce a breaking change?

• Yes
• No

Other information

Note: The modal + datetime tests will not work until #25648 is merged in

[liamdebeasi]

When using the mutation observer I needed three rafs in order for it to work on my Mac. However, when throttling the CPU I sometimes needed more. There's probably a better way to solve this, but I can't quite think of it at the moment.

[sean-perkins]

I'm good with the internal event pattern then 👍

For the width changes in the grid, I would recommend we set a min width/styles to make the month/year selection match the same width as the date picker. Having the layout not shift when toggling between would be ideal here.

[averyjohnston]

I'm also okay with the ionRender event pattern for now; my immediate thought was also to use a raf in the mutation observer callback, but if that wasn't enough, what we've got now should be okay.

[liamdebeasi]

I found a better way to fix the sizing of the datetime in a less intrusive way. (See latest commits)

[sean-perkins]

Observing that the lower bounds for the min-width is causing clipping in the overlay test (with popover):

Also, likely unrelated to any of these changes, but there is some odd rendering happening at the bottom of the picker columns in iOS emulation:

It looks like the top few pixels of text of the columns are rendering above the border that separates the picker column and the actions.

[liamdebeasi]

Good catch. The usage in one of the tests was incorrect, resulting in the size/positioning being wrong.

---

It looks like the top few pixels of text of the columns are rendering above the border that separates the picker column and the actions.

I can repro in main using the popover example in http://localhost:3333/src/components/datetime/test/basic?ionic:mode=ios. Oddly enough I can only reproduce that on desktop Safari -- mobile Safari is fine.