merge release-6.1.2

Release 6.1.2

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -21,6 +21,7 @@ body:
         - label: v4.x
         - label: v5.x
         - label: v6.x
+        - label: Nightly
   - type: textarea
     attributes:
       label: Current Behavior

.github/workflows/nightly.yml

@@ -0,0 +1,60 @@
+name: 'Ionic Nightly Build'
+
+on:
+  schedule:
+    # Run every Monday-Friday
+    # at 6:00 UTC (6:00 am UTC)
+    - cron: '00 06 * * 1-5'
+
+jobs:
+  nightly-build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 16
+      - name: Install Dependencies
+        run: npm ci --no-package-lock && lerna bootstrap --ignore-scripts -- --legacy-peer-deps
+        shell: bash
+      - name: Prepare NPM Token
+        run: echo //registry.npmjs.org/:_authToken=${NPM_TOKEN} > .npmrc
+        shell: bash
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - name: Configure Identity
+        run: |
+          git config user.name github-actions
+          git config user.email github-actions@github.com
+      # A 1 is required before the timestamp
+      # as lerna will fail when there is a leading 0
+      # See https://github.com/lerna/lerna/issues/2840
+      - name: Create Nightly Hash
+        # The date should output YYYYMMDD
+        # so that it is human readable
+        run: |
+          echo "DATE=$(date +%Y%m%d)" >> $GITHUB_ENV
+          echo "CURRENT_VERSION=$(node ./.scripts/bump-version.js)" >> $GITHUB_ENV
+        shell: bash
+      - name: Checkout Nightly Branch
+        run: |
+          git checkout -b nightly-$(echo "${{ env.DATE }}")
+          git push origin nightly-$(echo "${{ env.DATE }}")
+        shell: bash
+      - name: Create Nightly Build
+        run: |
+          HUSKY_SKIP_HOOKS=1 lerna publish $(echo "${{ env.CURRENT_VERSION }}")-nightly.$(echo "${{ env.DATE }}") --no-verify-access --yes --force-publish='*' --dist-tag nightly --conventional-commits --conventional-prerelease --exact --create-release github
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        shell: bash
+      # We need to push the commit changes in order for the tags
+      # to get updated, but we don't need to keep the changelog
+      # changes around.
+      - name: Delete Nightly Branch
+        run: |
+          git checkout main
+          git branch -D nightly-$(echo "${{ env.DATE }}")
+          git push origin --delete nightly-$(echo "${{ env.DATE }}")
+        shell: bash

CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.2](https://github.com/ionic-team/ionic-framework/compare/v6.1.1...v6.1.2) (2022-04-20)
+
+
+### Bug Fixes
+
+* **datetime:** time picker display matches dynamically set value ([#25010](https://github.com/ionic-team/ionic-framework/issues/25010)) ([11493a0](https://github.com/ionic-team/ionic-framework/commit/11493a086a4e3f2a4e9d3acdf5a9d49e810a5ef0)), closes [#24967](https://github.com/ionic-team/ionic-framework/issues/24967)
+* **modal:** add canDismiss option to modal options ([#25144](https://github.com/ionic-team/ionic-framework/issues/25144)) ([2984ddf](https://github.com/ionic-team/ionic-framework/commit/2984ddf111b6acbd9e47ed90830b6522179b6cee)), closes [#25143](https://github.com/ionic-team/ionic-framework/issues/25143)
+
+
+
+
+
 ## [6.1.1](https://github.com/ionic-team/ionic-framework/compare/v6.1.0...v6.1.1) (2022-04-15)
 
 

angular/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.2](https://github.com/ionic-team/ionic/compare/v6.1.1...v6.1.2) (2022-04-20)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
 ## [6.1.1](https://github.com/ionic-team/ionic/compare/v6.1.0...v6.1.1) (2022-04-15)
 
 **Note:** Version bump only for package @ionic/angular

angular/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "6.1.1",
+  "version": "6.1.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "6.1.1",
+  "version": "6.1.2",
   "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.1.1",
+    "@ionic/core": "^6.1.2",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.0.0"
   },

core/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.2](https://github.com/ionic-team/ionic/compare/v6.1.1...v6.1.2) (2022-04-20)
+
+
+### Bug Fixes
+
+* **datetime:** time picker display matches dynamically set value ([#25010](https://github.com/ionic-team/ionic/issues/25010)) ([11493a0](https://github.com/ionic-team/ionic/commit/11493a086a4e3f2a4e9d3acdf5a9d49e810a5ef0)), closes [#24967](https://github.com/ionic-team/ionic/issues/24967)
+* **modal:** add canDismiss option to modal options ([#25144](https://github.com/ionic-team/ionic/issues/25144)) ([2984ddf](https://github.com/ionic-team/ionic/commit/2984ddf111b6acbd9e47ed90830b6522179b6cee)), closes [#25143](https://github.com/ionic-team/ionic/issues/25143)
+
+
+
+
+
 ## [6.1.1](https://github.com/ionic-team/ionic/compare/v6.1.0...v6.1.1) (2022-04-15)
 
 

core/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "6.1.1",
+  "version": "6.1.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "6.1.1",
+  "version": "6.1.2",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",

core/src/components/datetime/datetime.tsx

@@ -317,6 +317,8 @@ export class Datetime implements ComponentInterface {
       const valueDateParts = parseDate(this.value);
       if (valueDateParts) {
         const { month, day, year, hour, minute } = valueDateParts;
+        const ampm = hour >= 12 ? 'pm' : 'am';
+
         this.activePartsClone = {
           ...this.activeParts,
           month,
@@ -324,7 +326,17 @@ export class Datetime implements ComponentInterface {
           year,
           hour,
           minute,
+          ampm,
         };
+
+        /**
+         * The working parts am/pm value must be updated when the value changes, to
+         * ensure the time picker hour column values are generated correctly.
+         */
+        this.setWorkingParts({
+          ...this.workingParts,
+          ampm,
+        });
       } else {
         printIonWarning(`Unable to parse date string: ${this.value}. Please provide a valid ISO 8601 datetime string.`);
       }
@@ -1049,7 +1061,7 @@ export class Datetime implements ComponentInterface {
     const valueToProcess = value || getToday();
     const { month, day, year, hour, minute, tzOffset } = parseDate(valueToProcess);
 
-    this.workingParts = {
+    this.setWorkingParts({
       month,
       day,
       year,
@@ -1057,7 +1069,7 @@ export class Datetime implements ComponentInterface {
       minute,
       tzOffset,
       ampm: hour >= 12 ? 'pm' : 'am',
-    };
+    });
 
     this.activeParts = {
       month,
@@ -1628,7 +1640,7 @@ export class Datetime implements ComponentInterface {
     const timeOnlyPresentation = presentation === 'time';
     const use24Hour = is24Hour(this.locale, this.hourCycle);
     const { hours, minutes, am, pm } = generateTime(
-      this.workingParts,
+      workingParts,
       use24Hour ? 'h23' : 'h12',
       this.minParts,
       this.maxParts,

core/src/components/datetime/test/presentation/datetime.e2e.ts

@@ -0,0 +1,112 @@
+import type { Locator } from '@playwright/test';
+import { expect } from '@playwright/test';
+import type { E2EPage } from '@utils/test/playwright';
+import { test } from '@utils/test/playwright';
+
+test.describe('datetime: presentation', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/datetime/test/presentation`);
+
+    await page.setIonViewport();
+
+    const compares = [];
+    const presentations = ['date-time', 'time-date', 'time', 'date', 'month-year', 'month', 'year'];
+
+    for (const presentation of presentations) {
+      await page.locator('select').selectOption(presentation);
+      await page.waitForChanges();
+      compares.push({
+        presentation,
+        screenshot: await page.screenshot({ fullPage: true }),
+      });
+    }
+
+    for (const compare of compares) {
+      expect(compare.screenshot).toMatchSnapshot(
+        `datetime-presentation-${compare.presentation}-diff-${page.getSnapshotSettings()}.png`
+      );
+    }
+  });
+});
+
+test.describe('datetime: presentation: time', () => {
+  let timePickerFixture: TimePickerFixture;
+
+  test.beforeEach(async ({ page }) => {
+    timePickerFixture = new TimePickerFixture(page);
+    await timePickerFixture.goto();
+  });
+
+  test('changing value from AM to AM should update the text', async () => {
+    await timePickerFixture.setValue('04:20:00');
+    await timePickerFixture.expectTime('4', '20', 'AM');
+
+    await timePickerFixture.setValue('11:03:00');
+    await timePickerFixture.expectTime('11', '03', 'AM');
+  });
+
+  test('changing value from AM to PM should update the text', async () => {
+    await timePickerFixture.setValue('05:30:00');
+    await timePickerFixture.expectTime('5', '30', 'AM');
+
+    await timePickerFixture.setValue('16:40:00');
+    await timePickerFixture.expectTime('4', '40', 'PM');
+  });
+
+  test('changing the value from PM to AM should update the text', async () => {
+    await timePickerFixture.setValue('16:40:00');
+    await timePickerFixture.expectTime('4', '40', 'PM');
+
+    await timePickerFixture.setValue('04:20:00');
+    await timePickerFixture.expectTime('4', '20', 'AM');
+  });
+
+  test('changing the value from PM to PM should update the text', async () => {
+    await timePickerFixture.setValue('16:40:00');
+    await timePickerFixture.expectTime('4', '40', 'PM');
+
+    await timePickerFixture.setValue('19:32:00');
+    await timePickerFixture.expectTime('7', '32', 'PM');
+  });
+});
+
+class TimePickerFixture {
+  readonly page: E2EPage;
+
+  private timePicker!: Locator;
+
+  constructor(page: E2EPage) {
+    this.page = page;
+  }
+
+  async goto() {
+    await this.page.goto(`/src/components/datetime/test/presentation`);
+    await this.page.locator('select').selectOption('time');
+    await this.page.waitForSelector('.datetime-presentation-time');
+    this.timePicker = this.page.locator('ion-datetime');
+  }
+
+  async setValue(value: string) {
+    const ionChange = await this.page.spyOnEvent('ionChange');
+    await this.timePicker.evaluate((el: HTMLIonDatetimeElement, newValue: string) => {
+      el.value = newValue;
+    }, value);
+
+    await ionChange.next();
+
+    // Changing the value can take longer than the default 100ms to repaint
+    await this.page.waitForChanges(300);
+  }
+
+  async expectTime(hour: string, minute: string, ampm: string) {
+    expect(
+      await this.timePicker.locator('ion-picker-column-internal:nth-child(1) .picker-item-active').textContent()
+    ).toBe(hour);
+    expect(
+      await this.timePicker.locator('ion-picker-column-internal:nth-child(2) .picker-item-active').textContent()
+    ).toBe(minute);
+    expect(
+      await this.timePicker.locator('ion-picker-column-internal:nth-child(3) .picker-item-active').textContent()
+    ).toBe(ampm);
+  }
+}