Skip to content

docs(nav): component playground for modal navigation #2463

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 12 commits into from
Aug 17, 2022

Conversation

sean-perkins
Copy link
Contributor

@sean-perkins sean-perkins commented Jul 26, 2022

This PR introduces an example for modal navigation on the ion-nav docs page.

https://ionic-docs-git-nav-playground-modal-navigation-ionic1.vercel.app/docs/api/nav#navigation-within-a-modal

@vercel
Copy link

vercel bot commented Jul 26, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
ionic-docs ✅ Ready (Inspect) Visit Preview Aug 17, 2022 at 2:46PM (UTC)


TODO: Playground Example
<ModalNavigationExample />
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm seeing some weird transition animations in iOS mode: https://user-images.githubusercontent.com/90629384/184921906-98e49071-f095-4424-b437-689e636d9adb.mp4

It doesn't happen in Stackblitz, so maybe this is related to the Playground component?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is a strange one... the style block that is causing this issue is:

ion-modal .ion-page:not(ion-nav.ion-page) {
    position: relative;
    contain: layout style;
    height: 100%;
}

somehow it's stripping the space within the :not tag, as ours is:

ion-modal .ion-page:not(ion-nav .ion-page) {
    position: relative;
    contain: layout style;
    height: 100%;
}

We can see that issue directly from the CDN: https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css.

I'll need to work with Liam to uncover why this is happening. I don't see this as a blocker though, as the Stackblitz examples work & when developers install the package they will not have this issue.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ok, this will be resolved once: ionic-team/ionic-framework#25767 is merged, we deploy the next patch & jsDelivr cache is purged.

Copy link
Contributor

Choose a reason for hiding this comment

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

Word 👍

</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
Copy link
Contributor

Choose a reason for hiding this comment

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

Can we add ion-padding? screen looks a bit cramped

@sean-perkins sean-perkins merged commit 847a21c into docs/nav-playground Aug 17, 2022
@sean-perkins sean-perkins deleted the nav-playground/modal-navigation branch August 17, 2022 15:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants