Skip to content
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

feat(modal): add ability to programmatically set current sheet breakpoint #24648

Merged
merged 54 commits into from
Mar 21, 2022
Merged

feat(modal): add ability to programmatically set current sheet breakpoint #24648

merged 54 commits into from
Mar 21, 2022

Conversation

EinfachHans
Copy link
Contributor

@EinfachHans EinfachHans commented Jan 25, 2022

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)
  • 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?

Developers cannot programmatically move a sheet modal breakpoint with an API.

Issue Number: #23917

What is the new behavior?

  • setCurrentBreakpoint(breakpoint: number) to programmatically change the breakpoint of a sheet modal.
  • getBreakpoint() to get the active breakpoint value for a sheet modal.
  • ionModalBreakpointWillChange/breakpointWillChange event when the breakpoint is about to change.
  • ionModalBreakpointDidChange/breakpointDidChange event when the breakpoint changes.
  • extract Code to animate the gesture to a specific breakpoint to be used for the new method and the existing usage of the gesture
  • after this is merged feat: sheet style modal should change breakpoint on handle click #24069 is easy as well, i can create a PR for this as well

Does this introduce a breaking change?

  • Yes
  • No

Other information

@EinfachHans EinfachHans requested a review from a team as a code owner January 25, 2022 11:31
@github-actions github-actions bot added package: angular @ionic/angular package package: core @ionic/core package labels Jan 25, 2022
# Conflicts:
#	core/src/components/modal/gestures/sheet.ts
Copy link
Contributor

@sean-perkins sean-perkins left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have one suggested change for the public API naming for setting the breakpoint value.

Reviewed most of the changes here and they align with our internal feature design document. I would like to introduce a set of e2e tests on this new behavior, mainly to verify correct event emission and a few screenshot tests. I'll clone your fork this week and experiment with your changes to verify everything works correctly and will suggest a few tests on the new behavior.

Thanks for the great work here!

core/src/components/modal/modal.tsx Outdated Show resolved Hide resolved
@sean-perkins sean-perkins self-assigned this Mar 8, 2022
@sean-perkins sean-perkins changed the base branch from main to feature-6.1 March 8, 2022 00:26
core/src/components/modal/modal.tsx Outdated Show resolved Hide resolved
core/src/components/modal/modal.tsx Outdated Show resolved Hide resolved
@EinfachHans
Copy link
Contributor Author

@sean-perkins Changes applied 😊

Copy link
Contributor

@sean-perkins sean-perkins left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are getting close! Had one question.

I need to sync with the team tomorrow, trying to figure out the best way to test/validate a breakpoint is transitioned to correctly. Currently added coverage for events emitting/breakpoint values being set correctly.

Also due to the way we overwrite the implementation of ion-modal in Angular, I need to add a small set of e2e tests to our Angular test app to validate event emissions. I should be able to finish this piece tonight.

core/src/components/modal/gestures/sheet.ts Outdated Show resolved Hide resolved
core/src/components/modal/gestures/sheet.ts Show resolved Hide resolved
core/src/components/modal/gestures/sheet.ts Outdated Show resolved Hide resolved
core/src/components/modal/modal.tsx Outdated Show resolved Hide resolved
Copy link
Contributor

@amandaejohnston amandaejohnston left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This LGTM once those two comments are addressed 👍

core/src/components/modal/modal.tsx Outdated Show resolved Hide resolved
core/src/components/modal/modal.tsx Outdated Show resolved Hide resolved
core/src/components/modal/modal.tsx Outdated Show resolved Hide resolved
core/src/components/modal/modal.tsx Outdated Show resolved Hide resolved
core/src/components/modal/test/sheet/e2e.ts Show resolved Hide resolved
core/src/components/modal/test/sheet/e2e.ts Show resolved Hide resolved
core/src/components/modal/test/sheet/e2e.ts Show resolved Hide resolved
@liamdebeasi liamdebeasi changed the title feat(modal): programmatically move to a breakpoint feat(modal): add ability to programmatically set current sheet breakpoint Mar 21, 2022
Copy link
Contributor

@liamdebeasi liamdebeasi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good to merge once my other two comments are addressed.

Great job @EinfachHans and @sean-perkins! This is a great feature addition to Ionic.

core/src/components/modal/modal.tsx Outdated Show resolved Hide resolved
core/src/components.d.ts Show resolved Hide resolved
@sean-perkins sean-perkins merged commit 3145c76 into ionic-team:feature-6.1 Mar 21, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: angular @ionic/angular package package: core @ionic/core package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

feat: sheet modal programmatically move to a breakpoint
5 participants