Files
ionic-framework/packages/vue/scripts/copy-overlays.js
Liam DeBeasi 02678f3652 fix(react, vue): inline modals apply ion-page class (#27481)
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
2023-05-24 13:37:02 +00:00

86 lines
2.0 KiB
JavaScript

const DocsJson = require('@ionic/core/dist/docs.json');
const fs = require('fs');
function generateOverlays() {
const components = [
{
tag: 'ion-action-sheet',
name: 'IonActionSheet'
},
{
tag: 'ion-alert',
name: 'IonAlert'
},
{
tag: 'ion-loading',
name: 'IonLoading'
},
{
tag: 'ion-picker',
name: 'IonPicker'
},
{
tag: 'ion-toast',
name: 'IonToast'
},
{
tag: 'ion-modal',
name: 'IonModal',
hasDelegateHost: true
},
{
tag: 'ion-popover',
name: 'IonPopover'
}
]
let componentImports = [];
let componentDefinitions = [];
components.forEach(component => {
const docsBlock = getDocsBlock(component.tag);
const props = getPropsFromDocsBlock(docsBlock);
const defineCustomElementFn = `define${component.name}CustomElement`;
componentImports.push(`import { defineCustomElement as ${defineCustomElementFn} } from '@ionic/core/components/${component.tag}.js'`);
const delegateHostString = component.hasDelegateHost ? ', true' : '';
componentDefinitions.push(`
export const ${component.name} = /*@__PURE__*/ defineOverlayContainer<JSX.${component.name}>('${component.tag}', ${defineCustomElementFn}, [${props.join(', ')}]${delegateHostString});
`);
});
const template = `/**
* This is an autogenerated file created by 'scripts/copy-overlays.js'.
* Changes made to this file will be overwritten on build.
*/
import {
JSX,
} from '@ionic/core/components';
${componentImports.join('\n')}
import { defineOverlayContainer } from '../vue-component-lib/overlays';
${componentDefinitions.join('')}
`;
fs.writeFileSync('./src/components/Overlays.ts', template);
}
function getDocsBlock(tag) {
return DocsJson.components.find(block => block.tag === tag);
}
function getPropsFromDocsBlock(docsBlock) {
return docsBlock.props.map(prop => `'${prop.name}'`);
}
function main() {
generateOverlays();
}
main();