Skip to content

fix(datetime-button): handle preferWheel correctly #25621

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 20 commits into from
Jul 14, 2022
Merged

Conversation

liamdebeasi
Copy link
Contributor

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?

The datetime button feature currently renders separate date and time buttons for presentation="date-time" regardless of prefer-wheel. That is because this feature was built before prefer-wheel was even thought of.

As a result, given <ion-datetime presentation="date-time" prefer-wheel="true">, the datetime button will render:

  1. A date button that shows month, day, and year in a wheel picker.
  2. A time button that shows hour, minute, and (optionally) day period in a wheel picker.

While this technically works, it is likely not what users are expecting. When used inline, the datetime displays as a single wheel picker with both date and time in the same wheel picker.

Additionally, this UI lets users select an explicit year which is out of scope for the combined date+time picker.

What is the new behavior?

  • When using date-time/time-date with prefer wheel, only render a single date button. Both date and time text will be rendered in this button.
  • Clicking the button reveals the datetime component with the combined date + time picker.

Does this introduce a breaking change?

  • Yes
  • No

Other information

Note: You may encounter some weird date selections with the combined date+time picker. I believe this is related to the overlays not being sized correctly and will address in a separate PR.

@github-actions github-actions bot added the package: core @ionic/core package label Jul 12, 2022
@liamdebeasi liamdebeasi marked this pull request as ready for review July 12, 2022 20:21
@liamdebeasi liamdebeasi requested a review from a team July 12, 2022 20:21
Base automatically changed from 546-text to FW-546 July 14, 2022 14:55
@liamdebeasi liamdebeasi merged commit 270247d into FW-546 Jul 14, 2022
@liamdebeasi liamdebeasi deleted the 546-prefer-wheel branch July 14, 2022 15:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants