Merge branch 'main' into FW-634

Author: averyjohnston

.github/workflows/actions/build-core/action.yml

@@ -4,6 +4,9 @@ runs:
   using: 'composite'
   steps:
     - uses: actions/checkout@v2
+      with:
+        # Checkout the latest commit in this branch
+        ref: ${{ github.event.pull_request.head.sha }}
     - uses: actions/setup-node@v1
       with:
         node-version: 15.x

.github/workflows/build.yml

@@ -9,6 +9,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
+        - uses: actions/checkout@v2
+          with:
+            # Checkout the latest commit in this branch
+            ref: ${{ github.event.pull_request.head.sha }}
       - uses: ./.github/workflows/actions/build-core
 
   test-core-clean-build:

angular/src/directives/control-value-accessors/value-accessor.ts

@@ -110,13 +110,17 @@ export class ValueAccessor implements ControlValueAccessor, AfterViewInit, OnDes
 
 export const setIonicClasses = (element: ElementRef): void => {
   raf(() => {
-    const input = element.nativeElement as HTMLElement;
+    const input = element.nativeElement as HTMLInputElement;
+    const hasValue = input.value != null && input.value.toString().length > 0;
     const classes = getClasses(input);
     setClasses(input, classes);
-
     const item = input.closest('ion-item');
     if (item) {
-      setClasses(item, classes);
+      if (hasValue) {
+        setClasses(item, [...classes, 'item-has-value']);
+      } else {
+        setClasses(item, classes);
+      }
     }
   });
 };
@@ -127,21 +131,18 @@ const getClasses = (element: HTMLElement) => {
   for (let i = 0; i < classList.length; i++) {
     const item = classList.item(i);
     if (item !== null && startsWith(item, 'ng-')) {
-      classes.push(`ion-${item.substr(3)}`);
+      classes.push(`ion-${item.substring(3)}`);
     }
   }
   return classes;
 };
 
 const setClasses = (element: HTMLElement, classes: string[]) => {
   const classList = element.classList;
-  ['ion-valid', 'ion-invalid', 'ion-touched', 'ion-untouched', 'ion-dirty', 'ion-pristine'].forEach((c) =>
-    classList.remove(c)
-  );
-
-  classes.forEach((c) => classList.add(c));
+  classList.remove('ion-valid', 'ion-invalid', 'ion-touched', 'ion-untouched', 'ion-dirty', 'ion-pristine');
+  classList.add(...classes);
 };
 
 const startsWith = (input: string, search: string): boolean => {
-  return input.substr(0, search.length) === search;
+  return input.substring(0, search.length) === search;
 };

angular/test/test-app/e2e/src/modal.spec.ts

@@ -43,7 +43,6 @@ describe('Modals', () => {
 
 });
 
-
 describe('Modals: Inline', () => {
   beforeEach(() => {
     cy.visit('/modal-inline');
@@ -77,3 +76,29 @@ describe('Modals: Inline', () => {
     cy.get('ion-modal').children('.ion-page').should('not.exist');
   })
 });
+
+describe('when in a modal', () => {
+
+  beforeEach(() => {
+    cy.visit('/modals');
+    cy.get('#action-button').click();
+    cy.get('#close-modal').click();
+    cy.get('#action-button').click();
+  });
+
+  it('should render ion-item item-has-value class when control value is set', () => {
+    cy.get('[formControlName="select"]').invoke('attr', 'value', 0);
+    cy.get('#inputWithFloatingLabel').should('have.class', 'item-has-value');
+  });
+
+  it('should not render ion-item item-has-value class when control value is undefined', () => {
+    cy.get('[formControlName="select"]').invoke('attr', 'value', undefined);
+    cy.get('#inputWithFloatingLabel').should('not.have.class', 'item-has-value');
+  });
+
+  it('should not render ion-item item-has-value class when control value is null', () => {
+    cy.get('[formControlName="select"]').invoke('attr', 'value', null);
+    cy.get('#inputWithFloatingLabel').should('not.have.class', 'item-has-value');
+  });
+
+});

angular/test/test-app/src/app/modal-example/modal-example.component.html

@@ -22,4 +22,14 @@ <h3>{{valueFromParams}}</h3>
     <ion-button (click)="push()" class="push-page">Push page</ion-button>
     <ion-button (click)="pop()" class="pop-page">Pop page</ion-button>
   </p>
+
+  <form [formGroup]="form">
+    <ion-item id="inputWithFloatingLabel">
+      <ion-label color="primary" position="floating">Floating Label</ion-label>
+      <ion-select multiple="false" formControlName="select">
+        <ion-select-option [value]="0">Option 0</ion-select-option>
+        <ion-select-option [value]="1">Option 1</ion-select-option>
+      </ion-select>
+    </ion-item>
+  </form>
 </ion-content>

angular/test/test-app/src/app/modal-example/modal-example.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input, NgZone, OnInit, Optional } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
 import { ModalController, NavParams, IonNav, ViewWillLeave, ViewDidEnter, ViewDidLeave } from '@ionic/angular';
 
 @Component({
@@ -9,6 +10,10 @@ export class ModalExampleComponent implements OnInit, ViewWillLeave, ViewDidEnte
 
   @Input() value: string;
 
+  form = new FormGroup({
+    select: new FormControl([])
+  });
+
   valueFromParams: string;
   onInit = 0;
   willEnter = 0;

core/src/components/datetime/datetime.tsx

@@ -1,5 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h, writeTask } from '@stencil/core';
+import { printIonWarning } from '@utils/logging';
 import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward } from 'ionicons/icons';
 
 import { getIonMode } from '../../global/ionic-global';
@@ -298,15 +299,20 @@ export class Datetime implements ComponentInterface {
        * This allows us to update the current value's date/time display without
        * refocusing or shifting the user's display (leaves the user in place).
        */
-      const { month, day, year, hour, minute } = parseDate(this.value);
-      this.activePartsClone = {
-        ...this.activeParts,
-        month,
-        day,
-        year,
-        hour,
-        minute,
-      };
+      const valueDateParts = parseDate(this.value);
+      if (valueDateParts) {
+        const { month, day, year, hour, minute } = valueDateParts;
+        this.activePartsClone = {
+          ...this.activeParts,
+          month,
+          day,
+          year,
+          hour,
+          minute,
+        };
+      } else {
+        printIonWarning(`Unable to parse date string: ${this.value}. Please provide a valid ISO 8601 datetime string.`);
+      }
     }
 
     this.emitStyle();

core/src/utils/logging/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Logs a warning to the console with an Ionic prefix
+ * to indicate the library that is warning the developer.
+ *
+ * @param message - The string message to be logged to the console.
+ */
+export const printIonWarning = (message: string) => {
+  return console.warn(`[Ionic Warning]: ${message}`);
+};