Issue number: N/A
---------
## What is the current behavior?
Ionic Framework Vue components using `router-link` do not apply an
`href` property which causes components to render `div` or `button`
elements when they should render an `a`. This is inconsistent with the
way Angular and Vue handle router link.
## What is the new behavior?
Updates `@stencil/vue-output-target` to latest which adds the code from
the following PR:
https://github.com/ionic-team/stencil-ds-output-targets/pull/446
The update in vue output target checks if `router-link` and `navManager`
are defined so this fix only applies to Ionic Framework components. If
both are defined then it adds the `href` property to the element with
the value of `router-link`.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
Dev build: `8.2.7-dev.11722629362.1ac136c4`
Issue number: resolves#28611
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
It's not possible to pass props that are not camelCase to the `IonNav`
component.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- It is now possible to set a props with kebab-case instead of camelCase
(for example, `root-params` instead of `rootParams`)
## Does this introduce a breaking change?
- [ ] Yes
- [X] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
⚠️ This is my first PR for ionic so I hope I didn't miss important steps
into the process. I also checked on my project that the fix is working
well. Thank you! 🙂
---------
Co-authored-by: Sean Perkins <sean@ionic.io>
Issue number: resolves#28165
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The overlay implementation in Vue only checks for truthy
`keepContentsMounted` values. When setting this prop as an attribute,
the value of it is `''` which is falsy. As a result, content does not
get mounted.
One of Vue's ESLint rules states that this should be supported:
https://eslint.vuejs.org/rules/prefer-true-attribute-shorthand.html
Part of the issue may also be that Vue does not know the type of this
property and so it assume "any":
> The shorthand form is not always equivalent! If a prop accepts
multiple types, but Boolean is not the first one, a shorthand prop won't
pass true.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The overlay wrapper now checks for `''` values. If
`keepContentsMounted === ''` then the inner contents will be mounted
because this means the prop is being set using the attribute shorthand.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev build: `7.3.5-dev.11694621267.1e5f63c2`
Issue number: resolves#27470
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Passing multiple elements in to an inline modal causes `.ion-page` to
not get set. This causes content to get pushed off the bottom of the
modal equal to the height of the header. React has some special CSS that
prevents this:
eb2772c0ce/packages/react/src/components/createInlineOverlayComponent.tsx (L137-L140)
However, I think this should be delegated to `.ion-page` instead so the
behavior is consistent across frameworks. For example, Angular uses
`.ion-page`:
eb2772c0ce/angular/src/directives/overlays/modal.ts (L82)
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Inline overlays in Ionic React and Ionic Vue wrap child content in
`.ion-delegate-host.ion-page`.
- Removed the custom flex styles from Ionic React as `.ion-page` has its
own styles.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Revised Design Doc:
https://github.com/ionic-team/ionic-framework-design-documents/pull/84
