chore: sync with main

chore: sync with main

Author: liamdebeasi

.github/workflows/stencil-nightly.yml

@@ -8,7 +8,12 @@ on:
     # at 6:00 UTC (6:00 am UTC)
     - cron: '00 06 * * 1-5'
   workflow_dispatch:
-    # allows for manual invocations in the GitHub UI
+    inputs:
+      npm_release_tag:
+        required: true
+        type: string
+        description: What version should be pulled from NPM?
+        default: nightly
 
 # When pushing a new commit we should
 # cancel the previous test run to not
@@ -24,7 +29,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: ./.github/workflows/actions/build-core-stencil-prerelease
         with:
-          stencil-version: nightly
+          stencil-version: ${{ inputs.npm_release_tag || 'nightly' }}
 
   test-core-clean-build:
     needs: [build-core-with-stencil-nightly]
@@ -47,7 +52,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: ./.github/workflows/actions/test-core-spec
         with:
-          stencil-version: nightly
+          stencil-version: ${{ inputs.npm_release_tag || 'nightly' }}
 
   test-core-screenshot:
     strategy:

CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.4.3](https://github.com/ionic-team/ionic-framework/compare/v7.4.2...v7.4.3) (2023-10-04)
+
+
+### Bug Fixes
+
+* **fab-button:** position is correct with custom sizes ([#28195](https://github.com/ionic-team/ionic-framework/issues/28195)) ([eb41b55](https://github.com/ionic-team/ionic-framework/commit/eb41b556b57c97139b9c36dc3e3be3711d8afaca)), closes [#22564](https://github.com/ionic-team/ionic-framework/issues/22564)
+* **range:** knob positions are correct on initial render with custom elements build ([#28257](https://github.com/ionic-team/ionic-framework/issues/28257)) ([ac2c8e6](https://github.com/ionic-team/ionic-framework/commit/ac2c8e6c22da4d0d8224def24ddef56ee9d26246)), closes [#25444](https://github.com/ionic-team/ionic-framework/issues/25444)
+
+
+
+
+
+## [7.4.2](https://github.com/ionic-team/ionic-framework/compare/v7.4.1...v7.4.2) (2023-09-27)
+
+
+### Bug Fixes
+
+* **react:** Nav unmounts component while invoking popTo or popToRoot ([#27821](https://github.com/ionic-team/ionic-framework/issues/27821)) ([0edcb2c](https://github.com/ionic-team/ionic-framework/commit/0edcb2cd85133ae8c304c53c37ca829e5fbad447)), closes [#27798](https://github.com/ionic-team/ionic-framework/issues/27798)
+* **title:** large title uses custom font on transition ([#28231](https://github.com/ionic-team/ionic-framework/issues/28231)) ([71a7af0](https://github.com/ionic-team/ionic-framework/commit/71a7af0f52fe62937b1dea1ca2739e78801a2a6d))
+
+
+
+
+
 ## [7.4.1](https://github.com/ionic-team/ionic-framework/compare/v7.4.0...v7.4.1) (2023-09-20)
 
 

core/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.4.3](https://github.com/ionic-team/ionic-framework/compare/v7.4.2...v7.4.3) (2023-10-04)
+
+
+### Bug Fixes
+
+* **fab-button:** position is correct with custom sizes ([#28195](https://github.com/ionic-team/ionic-framework/issues/28195)) ([eb41b55](https://github.com/ionic-team/ionic-framework/commit/eb41b556b57c97139b9c36dc3e3be3711d8afaca)), closes [#22564](https://github.com/ionic-team/ionic-framework/issues/22564)
+* **range:** knob positions are correct on initial render with custom elements build ([#28257](https://github.com/ionic-team/ionic-framework/issues/28257)) ([ac2c8e6](https://github.com/ionic-team/ionic-framework/commit/ac2c8e6c22da4d0d8224def24ddef56ee9d26246)), closes [#25444](https://github.com/ionic-team/ionic-framework/issues/25444)
+
+
+
+
+
+## [7.4.2](https://github.com/ionic-team/ionic-framework/compare/v7.4.1...v7.4.2) (2023-09-27)
+
+
+### Bug Fixes
+
+* **title:** large title uses custom font on transition ([#28231](https://github.com/ionic-team/ionic-framework/issues/28231)) ([71a7af0](https://github.com/ionic-team/ionic-framework/commit/71a7af0f52fe62937b1dea1ca2739e78801a2a6d))
+
+
+
+
+
 ## [7.4.1](https://github.com/ionic-team/ionic-framework/compare/v7.4.0...v7.4.1) (2023-09-20)
 
 

core/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.4.1",
+  "version": "7.4.3",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,13 +31,13 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^4.3.0",
+    "@stencil/core": "^4.4.0",
     "ionicons": "7.1.0",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.7.3",
-    "@capacitor/core": "^5.4.1",
+    "@capacitor/core": "^5.4.2",
     "@capacitor/haptics": "^5.0.6",
     "@capacitor/keyboard": "^5.0.6",
     "@capacitor/status-bar": "^5.0.6",
@@ -49,7 +49,7 @@
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.8.2",
     "@stencil/react-output-target": "^0.5.3",
-    "@stencil/sass": "^3.0.5",
+    "@stencil/sass": "^3.0.6",
     "@stencil/vue-output-target": "^0.8.6",
     "@types/jest": "^27.5.2",
     "@types/node": "^14.6.0",
@@ -94,6 +94,7 @@
     "test.spec": "stencil test --spec --max-workers=2",
     "test.spec.debug": "npx --node-arg=\"--inspect-brk\" stencil test --spec",
     "test.e2e": "npx playwright test",
+    "test.e2e.update-snapshots": "npm run test.e2e -- --update-snapshots",
     "test.watch": "jest --watch --no-cache",
     "test.treeshake": "node scripts/treeshaking.js dist/index.js",
     "validate": "npm run lint && npm run test && npm run build && npm run test.treeshake"

core/package.json

@@ -6980,6 +6980,7 @@ declare namespace LocalJSX {
          */
         "mode"?: "ios" | "md";
         "onIonTabBarChanged"?: (event: IonTabBarCustomEvent<TabBarChangedEventDetail>) => void;
+        "onIonTabBarLoaded"?: (event: IonTabBarCustomEvent<void>) => void;
         /**
           * The selected tab component
          */

core/src/components.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Host, Listen, Method, Prop, forceUpdate, h, readTask } from '@stencil/core';
-import { componentOnReady } from '@utils/helpers';
+import { componentOnReady, hasLazyBuild } from '@utils/helpers';
 import { isPlatform } from '@utils/platform';
 import { isRTL } from '@utils/rtl';
 import { createColorClasses, hostContext } from '@utils/theme';
@@ -34,6 +34,9 @@ export class Content implements ComponentInterface {
   private isMainContent = true;
   private resizeTimeout: ReturnType<typeof setTimeout> | null = null;
 
+  private tabsElement: HTMLElement | null = null;
+  private tabsLoadCallback?: () => void;
+
   // Detail is used in a hot loop in the scroll event, by allocating it here
   // V8 will be able to inline any read/write to it since it's a monomorphic class.
   // https://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html
@@ -115,15 +118,61 @@ export class Content implements ComponentInterface {
 
   connectedCallback() {
     this.isMainContent = this.el.closest('ion-menu, ion-popover, ion-modal') === null;
+
+    /**
+     * The fullscreen content offsets need to be
+     * computed after the tab bar has loaded. Since
+     * lazy evaluation means components are not hydrated
+     * at the same time, we need to wait for the ionTabBarLoaded
+     * event to fire. This does not impact dist-custom-elements
+     * because there is no hydration there.
+     */
+    if (hasLazyBuild(this.el)) {
+      /**
+       * We need to cache the reference to the tabs.
+       * If just the content is unmounted then we won't
+       * be able to query for the closest tabs on disconnectedCallback
+       * since the content has been removed from the DOM tree.
+       */
+      const closestTabs = (this.tabsElement = this.el.closest('ion-tabs'));
+      if (closestTabs !== null) {
+        /**
+         * When adding and removing the event listener
+         * we need to make sure we pass the same function reference
+         * otherwise the event listener will not be removed properly.
+         * We can't only pass `this.resize` because "this" in the function
+         * context becomes a reference to IonTabs instead of IonContent.
+         *
+         * Additionally, we listen for ionTabBarLoaded on the IonTabs
+         * instance rather than the IonTabBar instance. It's possible for
+         * a tab bar to be conditionally rendered/mounted. Since ionTabBarLoaded
+         * bubbles, we can catch any instances of child tab bars loading by listening
+         * on IonTabs.
+         */
+        this.tabsLoadCallback = () => this.resize();
+        closestTabs.addEventListener('ionTabBarLoaded', this.tabsLoadCallback);
+      }
+    }
   }
 
   disconnectedCallback() {
     this.onScrollEnd();
-  }
 
-  @Listen('appload', { target: 'window' })
-  onAppLoad() {
-    this.resize();
+    if (hasLazyBuild(this.el)) {
+      /**
+       * The event listener and tabs caches need to
+       * be cleared otherwise this will create a memory
+       * leak where the IonTabs instance can never be
+       * garbage collected.
+       */
+      const { tabsElement, tabsLoadCallback } = this;
+      if (tabsElement !== null && tabsLoadCallback !== undefined) {
+        tabsElement.removeEventListener('ionTabBarLoaded', tabsLoadCallback);
+      }
+
+      this.tabsElement = null;
+      this.tabsLoadCallback = undefined;
+    }
   }
 
   /**

core/src/components/content/content.tsx

@@ -199,7 +199,7 @@
 // --------------------------------------------------
 
 :host(.fab-button-small) {
-  @include margin(($fab-size - $fab-small-size) * 0.5);
+  @include margin($fab-button-small-margin);
 
   width: #{$fab-small-size};
   height: #{$fab-small-size};

core/src/components/fab-button/fab-button.scss

@@ -11,3 +11,6 @@ $fab-small-size:                         40px !default;
 
 /// @prop - Border radius of the FAB button
 $fab-border-radius:                     50% !default;
+
+/// @prop - Margin applied to the small FAB button
+$fab-button-small-margin: 8px !default;

core/src/components/fab-button/fab-button.vars.scss

@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 :host {
-  @include margin($fab-size + $fab-list-margin, 0);
+  @include margin(calc(100% + #{$fab-list-margin}), 0);
 
   display: none;
   position: absolute;
@@ -13,8 +13,15 @@
   flex-direction: column;
   align-items: center;
 
-  min-width: $fab-size;
-  min-height: $fab-size;
+  /**
+   * The list should be centered relative to the parent
+   * FAB button. We set minimum dimensions so the
+   * FAB list can be centered relative to the small FAB button.
+   * However, the small FAB button adds start/end margin, so we need
+   * to account for that in the FAB list dimensions.
+   */
+  min-width: $fab-small-size + ($fab-button-small-margin * 2);
+  min-height: $fab-small-size + ($fab-button-small-margin * 2);
 }
 
 :host(.fab-list-active) {
@@ -59,14 +66,14 @@
 }
 
 :host(.fab-list-side-start) {
-  @include margin(0, $fab-size + $fab-list-margin);
+  @include margin(0, calc(100% + #{$fab-list-margin}));
   @include position-horizontal(null, 0);
 
   flex-direction: row-reverse;
 }
 
 :host(.fab-list-side-end) {
-  @include margin(0, $fab-size + $fab-list-margin);
+  @include margin(0, calc(100% + #{$fab-list-margin}));
   @include position(null, null, null, 0);
 
   flex-direction: row;