mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 05:21:52 +08:00
02678f3652
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
13 lines
403 B
JavaScript
13 lines
403 B
JavaScript
describe('modal - multiple children', () => {
|
|
it('should render a root .ion-page when passed multiple children', () => {
|
|
cy.visit('/modal-multiple-children');
|
|
|
|
cy.get('ion-button#show-modal').click();
|
|
|
|
cy.get('ion-modal').should('be.visible');
|
|
|
|
cy.get('ion-modal .ion-page').should('have.length', 1);
|
|
cy.get('ion-modal .ion-page .child-content').should('have.length', 2);
|
|
});
|
|
})
|