merge release-6.2.7

Release 6.2.7

CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.2.7](https://github.com/ionic-team/ionic-framework/compare/v6.2.6...v6.2.7) (2022-09-14)
+
+
+### Bug Fixes
+
+* **angular:** nav controller can pop views after leaving tabs outlet ([#25690](https://github.com/ionic-team/ionic-framework/issues/25690)) ([725b13f](https://github.com/ionic-team/ionic-framework/commit/725b13fa60775dc9f9c3491cb545c70a5a9162eb)), closes [#18593](https://github.com/ionic-team/ionic-framework/issues/18593)
+* **datetime:** correct year is set in wheel picker ([#25896](https://github.com/ionic-team/ionic-framework/issues/25896)) ([fb653eb](https://github.com/ionic-team/ionic-framework/commit/fb653ebe67458a088adf0626741d190ceb2880a6)), closes [#25895](https://github.com/ionic-team/ionic-framework/issues/25895)
+* **footer:** padding is added correctly with tabs ([#25921](https://github.com/ionic-team/ionic-framework/issues/25921)) ([edbb64c](https://github.com/ionic-team/ionic-framework/commit/edbb64c4b6de7ace7043675a85fd503da18304d7)), closes [#25918](https://github.com/ionic-team/ionic-framework/issues/25918)
+* **input,textarea:** data-form-type attribute is assigned to inner input ([#25927](https://github.com/ionic-team/ionic-framework/issues/25927)) ([9451b28](https://github.com/ionic-team/ionic-framework/commit/9451b283e2cb30ac9087574461f6b9f4b6cc3e0f)), closes [#25908](https://github.com/ionic-team/ionic-framework/issues/25908)
+* **modal:** sheet is easier to dismiss with swipe ([#25883](https://github.com/ionic-team/ionic-framework/issues/25883)) ([fa169d2](https://github.com/ionic-team/ionic-framework/commit/fa169d2dca649107342fe365ef6c7da892ebb8fd)), closes [#24296](https://github.com/ionic-team/ionic-framework/issues/24296)
+* **react:** add correct type for CreateAnimation ([#25931](https://github.com/ionic-team/ionic-framework/issues/25931)) ([89d3e3c](https://github.com/ionic-team/ionic-framework/commit/89d3e3c819b282e4d7ce716b9099eaab82ab4de2))
+* **tab-bar:** use correct import path ([#25898](https://github.com/ionic-team/ionic-framework/issues/25898)) ([ad46045](https://github.com/ionic-team/ionic-framework/commit/ad46045bcc251c9719ecf6621792f1a5b3c6afce)), closes [#25897](https://github.com/ionic-team/ionic-framework/issues/25897)
+* **textarea:** auto grow textarea line wraps long contents ([#25928](https://github.com/ionic-team/ionic-framework/issues/25928)) ([777109a](https://github.com/ionic-team/ionic-framework/commit/777109a7e8625ed61a8cc09e52fc06e104b124ea)), closes [#25893](https://github.com/ionic-team/ionic-framework/issues/25893)
+
+
+
+
+
 ## [6.2.6](https://github.com/ionic-team/ionic-framework/compare/v6.2.5...v6.2.6) (2022-09-07)
 
 

angular/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.2.7](https://github.com/ionic-team/ionic/compare/v6.2.6...v6.2.7) (2022-09-14)
+
+
+### Bug Fixes
+
+* **angular:** nav controller can pop views after leaving tabs outlet ([#25690](https://github.com/ionic-team/ionic/issues/25690)) ([725b13f](https://github.com/ionic-team/ionic/commit/725b13fa60775dc9f9c3491cb545c70a5a9162eb)), closes [#18593](https://github.com/ionic-team/ionic/issues/18593)
+
+
+
+
+
 ## [6.2.6](https://github.com/ionic-team/ionic/compare/v6.2.5...v6.2.6) (2022-09-07)
 
 **Note:** Version bump only for package @ionic/angular

angular/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "6.2.6",
+  "version": "6.2.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "6.2.6",
+      "version": "6.2.7",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.2.6",
+        "@ionic/core": "^6.2.7",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.0.0"
       },
@@ -1023,9 +1023,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "6.2.6",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.6.tgz",
-      "integrity": "sha512-79VGvJ33YlCX/rhepfamL2YUQnqu3cruKMo0yFbrhyJWzoF3GTT/p371FHu1e+SdIZsMu/xcn+dkcTxQjEEcdA==",
+      "version": "6.2.7",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.7.tgz",
+      "integrity": "sha512-pQWcIqr5zfCX5De/MQ9kFs+nhaPCr8HIh5QjmydxvmlLv6WU4vlny/Mg0y1+JwLE0qxPD0T9sMykawWH9e3y5Q==",
       "dependencies": {
         "@stencil/core": "^2.17.4",
         "ionicons": "^6.0.3",
@@ -7951,9 +7951,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.2.6",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.6.tgz",
-      "integrity": "sha512-79VGvJ33YlCX/rhepfamL2YUQnqu3cruKMo0yFbrhyJWzoF3GTT/p371FHu1e+SdIZsMu/xcn+dkcTxQjEEcdA==",
+      "version": "6.2.7",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.7.tgz",
+      "integrity": "sha512-pQWcIqr5zfCX5De/MQ9kFs+nhaPCr8HIh5QjmydxvmlLv6WU4vlny/Mg0y1+JwLE0qxPD0T9sMykawWH9e3y5Q==",
       "requires": {
         "@stencil/core": "^2.17.4",
         "ionicons": "^6.0.3",

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "6.2.6",
+  "version": "6.2.7",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -44,7 +44,7 @@
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
   "dependencies": {
-    "@ionic/core": "^6.2.6",
+    "@ionic/core": "^6.2.7",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.0.0"
   },

angular/src/directives/navigation/ion-router-outlet.ts

@@ -308,8 +308,19 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
     }
 
     this.activatedView = enteringView;
+
+    /**
+     * The top outlet is set prior to the entering view's transition completing,
+     * so that when we have nested outlets (e.g. ion-tabs inside an ion-router-outlet),
+     * the tabs outlet will be assigned as the top outlet when a view inside tabs is
+     * activated.
+     *
+     * In this scenario, activeWith is called for both the tabs and the root router outlet.
+     * To avoid a race condition, we assign the top outlet synchronously.
+     */
+    this.navCtrl.setTopOutlet(this);
+
     this.stackCtrl.setActive(enteringView).then((data) => {
-      this.navCtrl.setTopOutlet(this);
       this.activateEvents.emit(cmpRef.instance);
       this.stackEvents.emit(data);
     });

angular/test/README.md

@@ -2,6 +2,26 @@
 
 Ionic Framework supports multiple versions of Angular. As a result, we need to verify that Ionic works correctly with each of these Angular versions.
 
+## Application Cache
+
+Angular CLI creates a cache of several files on disk by default in the `.angular` directory. This decreases the time taken to build the test application. When testing changes by directly modifying Ionic's source code in `node_modules`, you may need to manually clear the `.angular` cache and restart the local server every time you make a change. As a result, it may be desirable to disable the `.angular` cache while making changes to the code.
+
+See https://angular.io/cli/cache for more information.
+
+### Disable Cache
+
+```
+ng cache disable
+```
+
+> Note: You may need to manually remove the `.angular` directory once after running this command.
+
+### Enable Cache
+
+```
+ng cache enable
+```
+
 ## Test App Build Structure
 
 Unlike other test applications, these test apps are broken up into multiple directories. These directories are then combined to create a single application. This allows us to share common application code, tests, etc so that each app is being tested the same way. Below details the different pieces that help create a single test application.

angular/test/base/e2e/src/tabs.spec.ts

@@ -97,15 +97,27 @@ describe('Tabs', () => {
     it('should navigate deep then go home', () => {
       const tab = getSelectedTab();
       tab.find('#goto-tab1-page2').click();
+      cy.ionPageVisible('app-tabs-tab1-nested');
+      cy.ionPageHidden('app-tabs-tab1');
+
       testTabTitle('Tab 1 - Page 2 (1)');
 
       cy.get('#goto-next').click();
+      cy.ionPageVisible('app-tabs-tab1-nested:last-of-type');
+      cy.ionPageHidden('app-tabs-tab1-nested:first-of-type');
+
       testTabTitle('Tab 1 - Page 2 (2)');
 
       cy.get('#tab-button-contact').click();
+      cy.ionPageVisible('app-tabs-tab2');
+      cy.ionPageHidden('app-tabs-tab1-nested:last-of-type');
+
       testTabTitle('Tab 2 - Page 1');
 
       cy.get('#tab-button-account').click();
+      cy.ionPageVisible('app-tabs-tab1-nested:last-of-type');
+      cy.ionPageHidden('app-tabs-tab2');
+
       testTabTitle('Tab 1 - Page 2 (2)');
       cy.testStack('ion-tabs ion-router-outlet', [
         'app-tabs-tab1',
@@ -115,6 +127,16 @@ describe('Tabs', () => {
       ]);
 
       cy.get('#tab-button-account').click();
+
+      /**
+       * Wait for the leaving view to
+       * be unmounted otherwise testTabTitle
+       * may get the leaving view before it
+       * is unmounted.
+       */
+      cy.ionPageVisible('app-tabs-tab1');
+      cy.ionPageDoesNotExist('app-tabs-tab1-nested');
+
       testTabTitle('Tab 1 - Page 1');
       cy.testStack('ion-tabs ion-router-outlet', [
         'app-tabs-tab1',
@@ -225,24 +247,113 @@ describe('Tabs', () => {
     it('should navigate deep then go home and preserve navigation extras', () => {
       let tab = getSelectedTab();
       tab.find('#goto-tab1-page2').click();
+      cy.ionPageVisible('app-tabs-tab1-nested');
+      cy.ionPageHidden('app-tabs-tab1');
+
       tab = testTabTitle('Tab 1 - Page 2 (1)');
 
       tab.find('#goto-next').click();
+      cy.ionPageVisible('app-tabs-tab1-nested:last-of-type');
+      cy.ionPageHidden('app-tabs-tab1-nested:first-of-type');
+
       testTabTitle('Tab 1 - Page 2 (2)');
 
       cy.ionTabClick('Tab Two');
+      cy.ionPageVisible('app-tabs-tab2');
+      cy.ionPageHidden('app-tabs-tab1-nested:last-of-type');
+
       testTabTitle('Tab 2 - Page 1');
 
       cy.ionTabClick('Tab One');
+      cy.ionPageVisible('app-tabs-tab1-nested:last-of-type');
+      cy.ionPageHidden('app-tabs-tab2');
+
       testTabTitle('Tab 1 - Page 2 (2)');
 
       cy.ionTabClick('Tab One');
+      /**
+       * Wait for the leaving view to
+       * be unmounted otherwise testTabTitle
+       * may get the leaving view before it
+       * is unmounted.
+       */
+      cy.ionPageVisible('app-tabs-tab1');
+      cy.ionPageDoesNotExist('app-tabs-tab1-nested');
+
       testTabTitle('Tab 1 - Page 1');
 
       testUrlContains(rootUrl);
     });
   })
 
+  describe('entry url - /tabs/account', () => {
+    beforeEach(() => {
+      cy.visit('/tabs/account');
+    });
+    it('should pop to previous view when leaving tabs outlet', () => {
+
+      cy.get('ion-title').should('contain.text', 'Tab 1 - Page 1');
+
+      cy.get('#goto-tab1-page2').click();
+
+      cy.get('ion-title').should('contain.text', 'Tab 1 - Page 2 (1)');
+
+      cy.get('#goto-global').click();
+
+      cy.get('ion-title').should('contain.text', 'Global Page');
+
+      cy.get('#goto-prev-pop').click();
+
+      cy.get('ion-title').should('contain.text', 'Tab 1 - Page 2 (1)');
+
+      cy.get('#goto-prev').click();
+
+      cy.get('ion-title').should('contain.text', 'Tab 1 - Page 1');
+
+      /**
+       * Verifies that when entering the tabs outlet directly,
+       * the navController.pop() method does not pop the previous view,
+       * when you are at the root of the tabs outlet.
+       */
+      cy.get('#goto-previous-page').click();
+      cy.get('ion-title').should('contain.text', 'Tab 1 - Page 1');
+    });
+  });
+
+  describe('entry url - /', () => {
+    it('should pop to the root outlet from the tabs outlet', () => {
+      cy.visit('/');
+
+      cy.get('ion-title').should('contain.text', 'Test App');
+
+      cy.get('ion-item').contains('Tabs test').click();
+
+      cy.get('ion-title').should('contain.text', 'Tab 1 - Page 1');
+
+      cy.get('#goto-tab1-page2').click();
+
+      cy.get('ion-title').should('contain.text', 'Tab 1 - Page 2 (1)');
+
+      cy.get('#goto-global').click();
+
+      cy.get('ion-title').should('contain.text', 'Global Page');
+
+      cy.get('#goto-prev-pop').click();
+
+      cy.get('ion-title').should('contain.text', 'Tab 1 - Page 2 (1)');
+
+      cy.get('#goto-prev').click();
+
+      cy.get('ion-title').should('contain.text', 'Tab 1 - Page 1');
+
+      cy.get('#goto-previous-page').click();
+
+      cy.get('ion-title').should('contain.text', 'Test App');
+
+    });
+  });
+
+
   describe('entry url - /tabs/account/nested/1', () => {
     beforeEach(() => {
       cy.visit('/tabs/account/nested/1');

angular/test/base/src/app/app-routing.module.ts

@@ -55,6 +55,10 @@ const routes: Routes = [
     path: 'tabs',
     loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
   },
+  {
+    path: 'tabs-global',
+    loadChildren: () => import('./tabs-global/tabs-global.module').then(m => m.TabsGlobalModule)
+  },
   {
     path: 'nested-outlet',
     component: NestedOutletComponent,
@@ -68,7 +72,7 @@ const routes: Routes = [
         component: NestedOutletPage2Component
       }
     ]
-  }
+  },
 ];
 
 @NgModule({

angular/test/base/src/app/tabs-global/tabs-global-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { TabsGlobalComponent } from "./tabs-global.component";
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: '',
+        component: TabsGlobalComponent
+      }
+    ])
+  ],
+  exports: [RouterModule]
+})
+export class TabsGlobalRoutingModule { }

angular/test/base/src/app/tabs-global/tabs-global.component.html

@@ -0,0 +1,17 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+
+    <ion-title>
+      Global Page
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-content>
+    <ion-button id="goto-prev-pop" (click)="navCtrl.pop()">Go To Previous</ion-button>
+  </ion-content>
+</ion-content>

angular/test/base/src/app/tabs-global/tabs-global.component.ts

@@ -0,0 +1,17 @@
+import { Component } from "@angular/core";
+import { NavController } from "@ionic/angular";
+
+/**
+ * This component is used in conjunction with a tabs router-outlet,
+ * to validate the behavior of different routing APIs (e.g. NavController)
+ * when leaving and re-entering a router-outlet.
+ */
+@Component({
+  selector: 'app-tabs-global',
+  templateUrl: 'tabs-global.component.html'
+})
+export class TabsGlobalComponent {
+
+  constructor(public navCtrl: NavController) { }
+
+}

angular/test/base/src/app/tabs-global/tabs-global.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from "@angular/core";
+import { IonicModule } from "@ionic/angular";
+import { TabsGlobalRoutingModule } from "./tabs-global-routing.module";
+import { TabsGlobalComponent } from "./tabs-global.component";
+
+@NgModule({
+  imports: [
+    IonicModule,
+    TabsGlobalRoutingModule
+  ],
+  declarations: [TabsGlobalComponent]
+})
+export class TabsGlobalModule { }

angular/test/base/src/app/tabs-tab1-nested/tabs-tab1-nested.component.html

@@ -12,6 +12,9 @@
   <p>
     <ion-button routerLink="/tabs/account" id="goto-tab1-page1">Go to Tab 1 - Page 1</ion-button>
     <ion-button routerLink="/tabs/contact" id="goto-tab2-page1">Go to Tab 2 - Page 1</ion-button>
+    <ion-button routerLink="/tabs-global" id="goto-global">Go to Global Page</ion-button>
+    <ion-button routerLink="/tabs-global" id="goto-prev" (click)="navCtrl.pop()">Go to Previous Page (NavController).
+    </ion-button>
     <ion-button routerLink="/tabs/account/nested/{{next()}}" id="goto-next">Go to Next</ion-button>
   </p>
 </ion-content>

angular/test/base/src/app/tabs-tab1-nested/tabs-tab1-nested.component.ts

@@ -1,5 +1,6 @@
 import { ActivatedRoute } from '@angular/router';
 import { Component, OnInit } from '@angular/core';
+import { NavController } from '@ionic/angular';
 
 @Component({
   selector: 'app-tabs-tab1-nested',
@@ -9,7 +10,8 @@ export class TabsTab1NestedComponent implements OnInit {
   id = '';
   constructor(
     private route: ActivatedRoute,
-  ) {}
+    public navCtrl: NavController
+  ) { }
 
   ngOnInit() {
     this.id = this.route.snapshot.paramMap.get('id');
@@ -18,4 +20,5 @@ export class TabsTab1NestedComponent implements OnInit {
   next() {
     return parseInt(this.id, 10) + 1;
   }
+
 }

angular/test/base/src/app/tabs-tab1/tabs-tab1.component.html

@@ -19,5 +19,6 @@
       id="goto-nested-page1-with-query-params">Go to Page 2 with Query Params</ion-button>
     <ion-button routerLink="/tabs/lazy/nested" id="goto-tab3-page2">Go to Tab 3 - Page 2</ion-button>
     <ion-button routerLink="/nested-outlet/page" id="goto-nested-page1">Go to nested</ion-button>
+    <ion-button (click)="navCtrl.pop()" id="goto-previous-page">Go to Previous Page</ion-button>
   </p>
 </ion-content>

angular/test/base/src/app/tabs-tab1/tabs-tab1.component.ts

@@ -1,4 +1,5 @@
 import { Component, NgZone } from '@angular/core';
+import { NavController } from '@ionic/angular';
 
 @Component({
   selector: 'app-tabs-tab1',
@@ -9,6 +10,8 @@ export class TabsTab1Component {
   segment = 'one';
   changed = 'false';
 
+  constructor(public navCtrl: NavController) {}
+
   ionViewWillEnter() {
     NgZone.assertInAngularZone();
     setTimeout(() => {

core/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.2.7](https://github.com/ionic-team/ionic/compare/v6.2.6...v6.2.7) (2022-09-14)
+
+
+### Bug Fixes
+
+* **datetime:** correct year is set in wheel picker ([#25896](https://github.com/ionic-team/ionic/issues/25896)) ([fb653eb](https://github.com/ionic-team/ionic/commit/fb653ebe67458a088adf0626741d190ceb2880a6)), closes [#25895](https://github.com/ionic-team/ionic/issues/25895)
+* **footer:** padding is added correctly with tabs ([#25921](https://github.com/ionic-team/ionic/issues/25921)) ([edbb64c](https://github.com/ionic-team/ionic/commit/edbb64c4b6de7ace7043675a85fd503da18304d7)), closes [#25918](https://github.com/ionic-team/ionic/issues/25918)
+* **input,textarea:** data-form-type attribute is assigned to inner input ([#25927](https://github.com/ionic-team/ionic/issues/25927)) ([9451b28](https://github.com/ionic-team/ionic/commit/9451b283e2cb30ac9087574461f6b9f4b6cc3e0f)), closes [#25908](https://github.com/ionic-team/ionic/issues/25908)
+* **modal:** sheet is easier to dismiss with swipe ([#25883](https://github.com/ionic-team/ionic/issues/25883)) ([fa169d2](https://github.com/ionic-team/ionic/commit/fa169d2dca649107342fe365ef6c7da892ebb8fd)), closes [#24296](https://github.com/ionic-team/ionic/issues/24296)
+* **tab-bar:** use correct import path ([#25898](https://github.com/ionic-team/ionic/issues/25898)) ([ad46045](https://github.com/ionic-team/ionic/commit/ad46045bcc251c9719ecf6621792f1a5b3c6afce)), closes [#25897](https://github.com/ionic-team/ionic/issues/25897)
+* **textarea:** auto grow textarea line wraps long contents ([#25928](https://github.com/ionic-team/ionic/issues/25928)) ([777109a](https://github.com/ionic-team/ionic/commit/777109a7e8625ed61a8cc09e52fc06e104b124ea)), closes [#25893](https://github.com/ionic-team/ionic/issues/25893)
+
+
+
+
+
 ## [6.2.6](https://github.com/ionic-team/ionic/compare/v6.2.5...v6.2.6) (2022-09-07)
 
 

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "6.2.6",
+  "version": "6.2.7",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -40,7 +40,7 @@
     "@axe-core/puppeteer": "^4.3.2",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
-    "@jest/core": "^26.6.3",
+    "@jest/core": "^27.5.1",
     "@playwright/test": "^1.23.3",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
@@ -48,7 +48,7 @@
     "@stencil/react-output-target": "^0.2.1",
     "@stencil/sass": "^1.5.2",
     "@stencil/vue-output-target": "^0.6.2",
-    "@types/jest": "^26.0.20",
+    "@types/jest": "^27.5.2",
     "@types/node": "^14.6.0",
     "@types/swiper": "5.4.0",
     "@typescript-eslint/eslint-plugin": "^5.17.0",
@@ -67,8 +67,8 @@
     "puppeteer": "^10.4.0",
     "rollup": "^2.26.4",
     "sass": "^1.26.10",
-    "serve": "^13.0.2",
-    "stylelint": "^13.6.1",
+    "serve": "^14.0.1",
+    "stylelint": "^13.13.1",
     "stylelint-order": "^4.1.0",
     "swiper": "5.4.1",
     "typescript": "^4.0.5"

core/src/components/datetime/datetime.tsx

@@ -1415,7 +1415,6 @@ export class Datetime implements ComponentInterface {
 
     const result = getCombinedDateColumnData(
       locale,
-      workingParts,
       todayParts,
       min,
       max,

core/src/components/datetime/test/data.spec.ts

@@ -1,4 +1,4 @@
-import { generateMonths, getDaysOfWeek, generateTime, getToday } from '../utils/data';
+import { generateMonths, getDaysOfWeek, generateTime, getToday, getCombinedDateColumnData } from '../utils/data';
 
 describe('generateMonths()', () => {
   it('should generate correct month data', () => {
@@ -342,3 +342,25 @@ describe('getToday', () => {
     expect(res).toEqual('2022-02-21T18:30:00.000Z');
   });
 });
+
+describe('getCombinedDateColumnData', () => {
+  it('should return correct data with dates across years', () => {
+    const { parts, items } = getCombinedDateColumnData(
+      'en-US',
+      { day: 1, month: 1, year: 2021 },
+      { day: 31, month: 12, year: 2020 },
+      { day: 2, month: 1, year: 2021 }
+    );
+
+    expect(parts).toEqual([
+      { month: 12, year: 2020, day: 31 },
+      { month: 1, year: 2021, day: 1 },
+      { month: 1, year: 2021, day: 2 },
+    ]);
+    expect(items).toEqual([
+      { text: 'Thu, Dec 31', value: '2020-12-31' },
+      { text: 'Today', value: '2021-1-1' },
+      { text: 'Sat, Jan 2', value: '2021-1-2' },
+    ]);
+  });
+});

core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts

@@ -251,7 +251,7 @@ test.describe('datetime: prefer wheel', () => {
 
       const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
 
-      expect(await dateValues.count()).toBe(427);
+      expect(await dateValues.count()).toBe(397);
     });
   });
   test.describe('datetime: time-date wheel rendering', () => {
@@ -356,7 +356,7 @@ test.describe('datetime: prefer wheel', () => {
 
       const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
 
-      expect(await dateValues.count()).toBe(427);
+      expect(await dateValues.count()).toBe(397);
     });
   });
 });

core/src/components/datetime/utils/data.ts

@@ -441,7 +441,6 @@ const getAllMonthsInRange = (currentParts: DatetimeParts, maxParts: DatetimePart
  */
 export const getCombinedDateColumnData = (
   locale: string,
-  refParts: DatetimeParts,
   todayParts: DatetimeParts,
   minParts: DatetimeParts,
   maxParts: DatetimeParts,
@@ -473,7 +472,7 @@ export const getCombinedDateColumnData = (
    * of work as the text.
    */
   months.forEach((monthObject) => {
-    const referenceMonth = { month: monthObject.month, day: null, year: refParts.year };
+    const referenceMonth = { month: monthObject.month, day: null, year: monthObject.year };
     const monthDays = getDayColumnData(locale, referenceMonth, minParts, maxParts, dayValues, {
       month: 'short',
       day: 'numeric',
@@ -492,7 +491,7 @@ export const getCombinedDateColumnData = (
        */
       dateColumnItems.push({
         text: isToday ? getTodayLabel(locale) : dayObject.text,
-        value: `${refParts.year}-${monthObject.month}-${dayObject.value}`,
+        value: `${referenceMonth.year}-${referenceMonth.month}-${dayObject.value}`,
       });
 
       /**
@@ -506,8 +505,8 @@ export const getCombinedDateColumnData = (
        * updating the picker column value.
        */
       dateParts.push({
-        month: monthObject.month,
-        year: refParts.year,
+        month: referenceMonth.month,
+        year: referenceMonth.year,
         day: dayObject.value as number,
       });
     });

core/src/components/footer/footer.tsx

@@ -112,7 +112,7 @@ export class Footer implements ComponentInterface {
     const { translucent, collapse } = this;
     const mode = getIonMode(this);
     const tabs = this.el.closest('ion-tabs');
-    const tabBar = tabs?.querySelector('ion-tab-bar');
+    const tabBar = tabs?.querySelector(':scope > ion-tab-bar');
 
     return (
       <Host

core/src/components/input/input.tsx

@@ -260,7 +260,7 @@ export class Input implements ComponentInterface {
   componentWillLoad() {
     this.inheritedAttributes = {
       ...inheritAriaAttributes(this.el),
-      ...inheritAttributes(this.el, ['tabindex', 'title']),
+      ...inheritAttributes(this.el, ['tabindex', 'title', 'data-form-type']),
     };
   }
 

core/src/components/label/test/basic/label.e2e.ts

@@ -0,0 +1,49 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('label: rendering', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.setContent(`
+      <ion-label>My Label</ion-label>
+    `);
+
+    const labelEl = page.locator('ion-label');
+
+    expect(await labelEl.screenshot()).toMatchSnapshot(`label-basic-${page.getSnapshotSettings()}.png`);
+  });
+  test('should not have visual regressions with fixed label', async ({ page }) => {
+    await page.setContent(`
+      <ion-item>
+        <ion-label>My Label</ion-label>
+      </ion-item>
+    `);
+
+    const itemEl = page.locator('ion-item');
+
+    expect(await itemEl.screenshot()).toMatchSnapshot(`label-fixed-${page.getSnapshotSettings()}.png`);
+  });
+  test('should not have visual regressions with stacked label', async ({ page }) => {
+    await page.setContent(`
+      <ion-item>
+        <ion-label position="stacked">My Label</ion-label>
+        <ion-input></ion-input>
+      </ion-item>
+    `);
+
+    const itemEl = page.locator('ion-item');
+
+    expect(await itemEl.screenshot()).toMatchSnapshot(`label-stacked-${page.getSnapshotSettings()}.png`);
+  });
+  test('should not have visual regressions with floating label', async ({ page }) => {
+    await page.setContent(`
+      <ion-item>
+        <ion-label position="floating">My Label</ion-label>
+        <ion-input></ion-input>
+      </ion-item>
+    `);
+
+    const itemEl = page.locator('ion-item');
+
+    expect(await itemEl.screenshot()).toMatchSnapshot(`label-floating-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/label/test/color/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('label: color', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/label/test/color?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/label/test/color/label.e2e.ts

@@ -0,0 +1,46 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('label: rendering', () => {
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+  });
+  test('should not inherit color from content', async ({ page }) => {
+    await page.goto(`/src/components/label/test/color`);
+
+    const item = page.locator('ion-item');
+
+    expect(await item.screenshot()).toMatchSnapshot(`item-color-inherit-${page.getSnapshotSettings()}.png`);
+  });
+  test('should set color directly', async ({ page }) => {
+    await page.setContent(`
+      <ion-label color="danger">Label Text</ion-label>
+    `);
+
+    const labelEl = page.locator('ion-label');
+
+    expect(await labelEl.screenshot()).toMatchSnapshot(`label-color-${page.getSnapshotSettings()}.png`);
+  });
+  test('should use contrast color when color is set on item', async ({ page }) => {
+    await page.setContent(`
+      <ion-item color="danger">
+        <ion-label>Label Text</ion-label>
+      </ion-item>
+    `);
+
+    const labelEl = page.locator('ion-label');
+
+    expect(await labelEl.screenshot()).toMatchSnapshot(`label-color-contrast-${page.getSnapshotSettings()}.png`);
+  });
+  test('should override color even if color set on item', async ({ page }) => {
+    await page.setContent(`
+      <ion-item color="danger">
+        <ion-label color="dark">Label Text</ion-label>
+      </ion-item>
+    `);
+
+    const labelEl = page.locator('ion-label');
+
+    expect(await labelEl.screenshot()).toMatchSnapshot(`label-color-override-${page.getSnapshotSettings()}.png`);
+  });
+});