javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 01:52:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(react, vue): inline modals apply ion-page class (#27481)

Browse Source 
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
This commit is contained in:
Liam DeBeasi
2023-05-24 09:37:02 -04:00
committed by GitHub
parent e114fe40d0
commit 02678f3652
11 changed files with 107 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/vue/src/vue-component-lib/overlays.ts
View File

@ -9,7 +9,7 @@ export interface OverlayProps {
const EMPTY_PROP = Symbol();
const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
export const defineOverlayContainer = <Props extends object>(name: string, defineCustomElement: () => void, componentProps: string[] = [], controller?: any) => {
export const defineOverlayContainer = <Props extends object>(name: string, defineCustomElement: () => void, componentProps: string[] = [], hasDelegateHost?: boolean, controller?: any) => {
const createControllerComponent = () => {
return defineComponent<Props & OverlayProps>((props, { slots, emit }) => {
@ -162,10 +162,22 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
}
}
/**
* Some overlays need a wrapper element so content
* takes up the full size of the parent overlay.
*/
const renderChildren = () => {
if (hasDelegateHost) {
return h('div', { className: 'ion-delegate-host ion-page' }, slots);
}
return slots;
}
return h(
name,
{ ...restOfProps, ref: elementRef },
(isOpen.value || restOfProps.keepContentsMounted) ? slots : undefined
(isOpen.value || restOfProps.keepContentsMounted) ? renderChildren() : undefined
)
}
});