diff --git a/.github/workflows/actions/test-vue-e2e/action.yml b/.github/workflows/actions/test-vue-e2e/action.yml
index d4673e8af3..ba6826e2a4 100644
--- a/.github/workflows/actions/test-vue-e2e/action.yml
+++ b/.github/workflows/actions/test-vue-e2e/action.yml
@@ -41,7 +41,7 @@ runs:
run: npm run test:unit
shell: bash
working-directory: ./packages/vue/test-app
- - name: Run E2E ests
+ - name: Run E2E Tests
run: npm run test:e2e
shell: bash
working-directory: ./packages/vue/test-app
diff --git a/CHANGELOG.md b/CHANGELOG.md
index dd4047e640..ccb5a100b7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,20 @@
+## [5.9.2](https://github.com/ionic-team/ionic/compare/v5.9.1...v5.9.2) (2021-12-07)
+
+
+### Bug Fixes
+
+* **angular:** improve typing when compiling with legacy View Engine ([#24221](https://github.com/ionic-team/ionic/issues/24221)) ([816096f](https://github.com/ionic-team/ionic/commit/816096f89747e943a4a273175d384189f25e4628))
+* **content:** ensure fixed slot renders on top of content in iOS ([#24300](https://github.com/ionic-team/ionic/issues/24300)) ([e41b0e0](https://github.com/ionic-team/ionic/commit/e41b0e0cf2a794972d7f4d8943a0bec3d1e08016)), closes [#24286](https://github.com/ionic-team/ionic-framework/issues/24286)
+* **popover:** improve scrolling in popover when using header and footer ([#24294](https://github.com/ionic-team/ionic/issues/24294)) ([f6a00ea](https://github.com/ionic-team/ionic/commit/f6a00ea9544aa70620b5f8f65a7702fa3bedd974))
+* **react:** present and dismiss hooks return promises ([#24299](https://github.com/ionic-team/ionic/issues/24299)) ([4b26fea](https://github.com/ionic-team/ionic/commit/4b26feaa47efed4806aba565a52554db232b99e2)), closes [#24293](https://github.com/ionic-team/ionic-framework/issues/24293)
+* **react:** properly check for custom elements to avoid errors in unit tests ([#24156](https://github.com/ionic-team/ionic/issues/24156)) ([8f188ea](https://github.com/ionic-team/ionic/commit/8f188eaae7422c9e81053868b9dd93b4ac738e98)), closes [#24149](https://github.com/ionic-team/ionic/issues/24149)
+* **router:** popping route now accounts for route params ([#24315](https://github.com/ionic-team/ionic/issues/24315)) ([5e5054d](https://github.com/ionic-team/ionic/commit/5e5054d369ad68c9ac43e12439d71fb42d6ca26b)), closes [#24223](https://github.com/ionic-team/ionic-framework/issues/24223)
+* **slides:** update swiper instance after initialization ([#24257](https://github.com/ionic-team/ionic/issues/24257)) ([89e4bc5](https://github.com/ionic-team/ionic/commit/89e4bc56a1c3cd4fb26fc5514f38c6a01f047297)), closes [#19638](https://github.com/ionic-team/ionic-framework/issues/19638)
+* **vue:** ionic lifecycle hooks now run when using vue 3.2 setup syntax ([#24253](https://github.com/ionic-team/ionic/issues/24253)) ([fb96ab5](https://github.com/ionic-team/ionic/commit/fb96ab5a26d87818a8b64ee82df0020355054183)), closes [#23824](https://github.com/ionic-team/ionic/issues/23824)
+* **vue:** switching between tabs preserves query string ([#24297](https://github.com/ionic-team/ionic/issues/24297)) ([047d3c7](https://github.com/ionic-team/ionic/commit/047d3c77729db08e4fd84f426f6c5c2af0eacc52)), closes [#23699](https://github.com/ionic-team/ionic/issues/23699)
+
+
+
# [6.0.0-rc.3](https://github.com/ionic-team/ionic/compare/v6.0.0-rc.2...v6.0.0-rc.3) (2021-11-17)
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 3fce14fd10..fa3c05f3e6 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -238,7 +238,7 @@ export namespace Components {
*/
"disabled": boolean;
/**
- * The icon name to use for the back button.
+ * The built-in named SVG icon name or the exact `src` of an SVG file to use for the back button.
*/
"icon"?: string | null;
/**
@@ -3891,7 +3891,7 @@ declare namespace LocalJSX {
*/
"disabled"?: boolean;
/**
- * The icon name to use for the back button.
+ * The built-in named SVG icon name or the exact `src` of an SVG file to use for the back button.
*/
"icon"?: string | null;
/**
diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx
index ea66e2736c..3942241b2c 100644
--- a/core/src/components/back-button/back-button.tsx
+++ b/core/src/components/back-button/back-button.tsx
@@ -45,7 +45,8 @@ export class BackButton implements ComponentInterface, ButtonInterface {
@Prop({ reflect: true }) disabled = false;
/**
- * The icon name to use for the back button.
+ * The built-in named SVG icon name or the exact `src` of an SVG file
+ * to use for the back button.
*/
@Prop() icon?: string | null;
diff --git a/core/src/components/back-button/readme.md b/core/src/components/back-button/readme.md
index ba55f5174b..9c2433d675 100644
--- a/core/src/components/back-button/readme.md
+++ b/core/src/components/back-button/readme.md
@@ -315,7 +315,7 @@ export default defineComponent({
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `defaultHref` | `default-href` | The url to navigate back to by default when there is no history. | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the button. | `boolean` | `false` |
-| `icon` | `icon` | The icon name to use for the back button. | `null \| string \| undefined` | `undefined` |
+| `icon` | `icon` | The built-in named SVG icon name or the exact `src` of an SVG file to use for the back button. | `null \| string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `routerAnimation` | -- | When using a router, it specifies the transition animation when navigating to another page. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `text` | `text` | The text to display in the back button. | `null \| string \| undefined` | `undefined` |
diff --git a/core/src/components/content/content.scss b/core/src/components/content/content.scss
index 62c7865506..7dc20b0b4b 100644
--- a/core/src/components/content/content.scss
+++ b/core/src/components/content/content.scss
@@ -136,10 +136,37 @@
}
:host(.content-sizing) {
+ display: flex;
+
+ flex-direction: column;
+
+ /**
+ * This resolves a sizing issue in popovers where extra long content
+ * would overflow the popover's height, preventing scrolling. It's a
+ * quirk of flexbox that forces the content to shrink to fit.
+ *
+ * overflow: hidden can't be used here because it prevents the visual
+ * effect from showing on translucent headers.
+ */
+ min-height: 0;
+
contain: none;
}
:host(.content-sizing) .inner-scroll {
position: relative;
+
+ /**
+ * Because the outer content has display: flex here (to help enable
+ * scrolling in a popover), offsetting via `top` (such as when using
+ * a translucent header) creates white space under the content. Use
+ * a negative margin instead to keep the bottom in place. (A similar
+ * thing happens with `bottom` and footers.)
+ */
+ top: 0;
+ bottom: 0;
+
+ margin-top: calc(var(--offset-top) * -1);
+ margin-bottom: calc(var(--offset-bottom) * -1);
}
.transition-effect {
@@ -195,4 +222,15 @@
::slotted([slot="fixed"]) {
position: absolute;
+
+ /**
+ * When presenting ion-content inside of an ion-modal, the .inner-scroll
+ * element is composited. In WebKit, the fixed content is not composited
+ * causing it to appear under the main scrollable content as a result.
+ * The fixed content is correctly composited in other browsers. Adding
+ * the translateZ forces the fixed content to be composited so it correctly
+ * shows on top of the scrollable content. Setting a negative z-index will
+ * still allow the fixed content to appear under the scroll content if specified.
+ */
+ transform: translateZ(0);
}
diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx
index 7696b0d692..a5e3cbd118 100644
--- a/core/src/components/content/content.tsx
+++ b/core/src/components/content/content.tsx
@@ -384,10 +384,17 @@ const getPageElement = (el: HTMLElement) => {
if (tabs) {
return tabs;
}
- const page = el.closest('ion-app,ion-page,.ion-page,page-inner');
+
+ /**
+ * If we're in a popover, we need to use its wrapper so we can account for space
+ * between the popover and the edges of the screen. But if the popover contains
+ * its own page element, we should use that instead.
+ */
+ const page = el.closest('ion-app, ion-page, .ion-page, page-inner, .popover-content');
if (page) {
return page;
}
+
return getParentElement(el);
};
diff --git a/core/src/components/popover/popover.scss b/core/src/components/popover/popover.scss
index c58235bcfc..eff12f2c50 100644
--- a/core/src/components/popover/popover.scss
+++ b/core/src/components/popover/popover.scss
@@ -87,6 +87,11 @@
--ion-safe-area-right: 0px;
--ion-safe-area-bottom: 0px;
--ion-safe-area-left: 0px;
+ display: flex;
+
+ flex-direction: column;
+
+ overflow: hidden;
}
// Nested Popovers
@@ -114,4 +119,3 @@
--offset-x: 5px;
}
}
-
diff --git a/core/src/components/popover/test/basic/e2e.ts b/core/src/components/popover/test/basic/e2e.ts
index 528b39bc69..5ab2c50166 100644
--- a/core/src/components/popover/test/basic/e2e.ts
+++ b/core/src/components/popover/test/basic/e2e.ts
@@ -73,6 +73,14 @@ test('popover: custom class', async () => {
await testPopover(DIRECTORY, '#custom-class-popover');
});
+test('popover: header', async () => {
+ await testPopover(DIRECTORY, '#header-popover');
+});
+
+test('popover: translucent header', async () => {
+ await testPopover(DIRECTORY, '#translucent-header-popover');
+});
+
/**
* RTL Tests
*/
@@ -97,6 +105,14 @@ test('popover:rtl: custom class', async () => {
await testPopover(DIRECTORY, '#custom-class-popover', true, true);
});
+test('popover:rtl: header', async () => {
+ await testPopover(DIRECTORY, '#header-popover', true);
+});
+
+test('popover:rtl: translucent header', async () => {
+ await testPopover(DIRECTORY, '#translucent-header-popover', true);
+});
+
test('popover: htmlAttributes', async () => {
const page = await newE2EPage({ url: '/src/components/popover/test/basic?ionic:_testing=true' });
diff --git a/core/src/components/popover/test/basic/index.html b/core/src/components/popover/test/basic/index.html
index bfc989a273..50136ca5b0 100644
--- a/core/src/components/popover/test/basic/index.html
+++ b/core/src/components/popover/test/basic/index.html
@@ -34,6 +34,8 @@
Show Long List Popover
No Event Popover
Custom Class Popover
+
+
@@ -126,6 +128,56 @@
}
customElements.define('translucent-page', TranslucentPage);
+
+ class HeaderPage extends HTMLElement {
+ constructor() {
+ super();
+ }
+
+ connectedCallback() {
+ this.innerHTML = `
+
+
+ Header
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.In rutrum tortor lacus, ac interdum ipsum bibendum vel.Aenean non nibh gravida, ullamcorper mi at, tempor nulla.Proin malesuada tellus ut ullamcorper accumsan.Donec semper justo vulputate neque tempus ultricies.Proin non aliquet ipsum.Praesent mauris sem, facilisis eu justo nec, euismod imperdiet tellus.Duis eget justo congue, lacinia orci sed, fermentum urna.Quisque sed massa faucibus, interdum dolor rhoncus, molestie erat.Proin suscipit ante non mauris volutpat egestas.Donec a ultrices ligula.Mauris in felis vel dui consectetur viverra.Nam vitae quam in arcu aliquam aliquam.Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Cras non velit nisl.Donec viverra, magna quis vestibulum volutpat, metus ante tincidunt augue, non porta nisi mi sit amet neque.Proin dapibus eros vitae nibh tincidunt, blandit rhoncus est porttitor.
+
+ `;
+ }
+ }
+
+ customElements.define('header-page', HeaderPage);
+
+ class TranslucentHeaderPage extends HTMLElement {
+ constructor() {
+ super();
+ }
+
+ connectedCallback() {
+ this.innerHTML = `
+
+
+ Header
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.In rutrum tortor lacus, ac interdum ipsum bibendum vel.Aenean non nibh gravida, ullamcorper mi at, tempor nulla.Proin malesuada tellus ut ullamcorper accumsan.Donec semper justo vulputate neque tempus ultricies.Proin non aliquet ipsum.Praesent mauris sem, facilisis eu justo nec, euismod imperdiet tellus.Duis eget justo congue, lacinia orci sed, fermentum urna.Quisque sed massa faucibus, interdum dolor rhoncus, molestie erat.Proin suscipit ante non mauris volutpat egestas.Donec a ultrices ligula.Mauris in felis vel dui consectetur viverra.Nam vitae quam in arcu aliquam aliquam.Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Cras non velit nisl.Donec viverra, magna quis vestibulum volutpat, metus ante tincidunt augue, non porta nisi mi sit amet neque.Proin dapibus eros vitae nibh tincidunt, blandit rhoncus est porttitor.
+
+
+
+
+ Footer
+
+
+ `;
+ }
+ }
+
+ customElements.define('translucent-header-page', TranslucentHeaderPage);