merge release-6.5.3

Release 6.5.3

.github/workflows/build.yml

@@ -44,10 +44,6 @@ jobs:
 
   test-core-screenshot:
     strategy:
-      # This ensures that all screenshot shard
-      # failures are reported so the dev can
-      # review everything at once.
-      fail-fast: false
       matrix:
         # Divide the tests into n buckets
         # and run those buckets in parallel.

CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.5.3](https://github.com/ionic-team/ionic-framework/compare/v6.5.2...v6.5.3) (2023-02-08)
+
+
+### Bug Fixes
+
+* **button:** size and strong are respected in ion-buttons ([#26726](https://github.com/ionic-team/ionic-framework/issues/26726)) ([3759125](https://github.com/ionic-team/ionic-framework/commit/37591255b4ab3dde5ece6950024a3b66e7224364))
+* **chip:** descenders are not clipped in label ([#26729](https://github.com/ionic-team/ionic-framework/issues/26729)) ([a9e000b](https://github.com/ionic-team/ionic-framework/commit/a9e000b4338f75c27e9284dbe9a6501ba3b213bc)), closes [#18313](https://github.com/ionic-team/ionic-framework/issues/18313)
+* **refresher:** prevent clearing virtual scroll overflow styling ([#26613](https://github.com/ionic-team/ionic-framework/issues/26613)) ([9d6ec29](https://github.com/ionic-team/ionic-framework/commit/9d6ec2925cb2314d5379b864aef467b34afbb318)), closes [#26553](https://github.com/ionic-team/ionic-framework/issues/26553)
+
+
+
+
+
 ## [6.5.2](https://github.com/ionic-team/ionic-framework/compare/v6.5.1...v6.5.2) (2023-02-01)
 
 

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.5.3](https://github.com/ionic-team/ionic/compare/v6.5.2...v6.5.3) (2023-02-08)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
 ## [6.5.2](https://github.com/ionic-team/ionic/compare/v6.5.1...v6.5.2) (2023-02-01)
 
 

angular/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "6.5.2",
+  "version": "6.5.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "6.5.2",
+      "version": "6.5.3",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.5.2",
+        "@ionic/core": "^6.5.3",
         "ionicons": "^6.1.1",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.0.0"
@@ -1006,9 +1006,9 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/@ionic/core": {
-      "version": "6.5.2",
+      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.5.3.tgz",
-      "integrity": "sha512-9SQedXM0Hohy6ydgJVA22Ls6DeDgVJdlUHgaxQUNhtqIZuCqbaYZMEoanflMc852qkIyQtF25Zh7Q2wIVZveWw==",
+      "integrity": "sha512-z4slJZEw0PLet2htICKmCh76sN6kY28GSaYLDV1b4O/ya6qgu4QDwPkKbg22E8fiXBALlilce2zJQ55Tx5C6Aw==",
       "dependencies": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.1.1",
@@ -7334,9 +7334,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.5.2",
+      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.5.3.tgz",
-      "integrity": "sha512-9SQedXM0Hohy6ydgJVA22Ls6DeDgVJdlUHgaxQUNhtqIZuCqbaYZMEoanflMc852qkIyQtF25Zh7Q2wIVZveWw==",
+      "integrity": "sha512-z4slJZEw0PLet2htICKmCh76sN6kY28GSaYLDV1b4O/ya6qgu4QDwPkKbg22E8fiXBALlilce2zJQ55Tx5C6Aw==",
       "requires": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.1.1",

angular/package.json

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

core/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.5.3](https://github.com/ionic-team/ionic/compare/v6.5.2...v6.5.3) (2023-02-08)
+
+
+### Bug Fixes
+
+* **button:** size and strong are respected in ion-buttons ([#26726](https://github.com/ionic-team/ionic/issues/26726)) ([3759125](https://github.com/ionic-team/ionic/commit/37591255b4ab3dde5ece6950024a3b66e7224364))
+* **chip:** descenders are not clipped in label ([#26729](https://github.com/ionic-team/ionic/issues/26729)) ([a9e000b](https://github.com/ionic-team/ionic/commit/a9e000b4338f75c27e9284dbe9a6501ba3b213bc)), closes [#18313](https://github.com/ionic-team/ionic/issues/18313)
+* **refresher:** prevent clearing virtual scroll overflow styling ([#26613](https://github.com/ionic-team/ionic/issues/26613)) ([9d6ec29](https://github.com/ionic-team/ionic/commit/9d6ec2925cb2314d5379b864aef467b34afbb318)), closes [#26553](https://github.com/ionic-team/ionic/issues/26553)
+
+
+
+
+
 ## [6.5.2](https://github.com/ionic-team/ionic/compare/v6.5.1...v6.5.2) (2023-02-01)
 
 

core/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@ionic/core",
-  "version": "6.5.2",
+  "version": "6.5.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "6.5.2",
+      "version": "6.5.3",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "^2.18.0",

core/package.json

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

core/src/components/button/button.ios.scss

@@ -1,5 +1,6 @@
 @import "./button";
 @import "./button.ios.vars";
+@import "../toolbar/toolbar.ios.vars";
 
 
 // iOS Button
@@ -23,6 +24,20 @@
   letter-spacing: #{$button-ios-letter-spacing};
 }
 
+/**
+ * The default buttons in a toolbar
+ * have a different font size/weight
+ * than buttons outside of a toolbar on iOS.
+ * However, we still want the "size"/"strong"
+ * properties to be usable in a toolbar, so we add
+ * the .in-buttons selector such that we
+ * can add the different font size/weight in a toolbar
+ * but still let "size"/"strong" override it.
+ */
+:host(.in-buttons) {
+  font-size: #{$toolbar-ios-button-font-size};
+  font-weight: 400;
+}
 
 // iOS Solid Button
 // --------------------------------------------------

core/src/components/button/button.tsx

@@ -293,6 +293,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
           [`${buttonType}-strong`]: strong,
           'in-toolbar': hostContext('ion-toolbar', this.el),
           'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
+          'in-buttons': hostContext('ion-buttons', this.el),
           'button-has-icon-only': hasIconOnly,
           'button-disabled': disabled,
           'ion-activatable': true,

core/src/components/button/test/size/button.e2e.ts

@@ -2,11 +2,53 @@ import { expect } from '@playwright/test';
 import { test } from '@utils/test/playwright';
 
 test.describe('button: size', () => {
-  test('should not have visual regressions', async ({ page }) => {
+  test.beforeEach(({ skip }) => {
-    await page.goto(`/src/components/button/test/size`);
+    skip.rtl();
+  });
+  test('should render small buttons', async ({ page }) => {
+    await page.setContent(`
+      <ion-button size="small" fill="solid">Small Button</ion-button>
+    `);
 
-    await page.setIonViewport();
+    const wrapper = page.locator('ion-button');
 
-    expect(await page.screenshot()).toMatchSnapshot(`button-size-${page.getSnapshotSettings()}.png`);
+    expect(await wrapper.screenshot()).toMatchSnapshot(`button-size-small-${page.getSnapshotSettings()}.png`);
+  });
+  test('should render large buttons', async ({ page }) => {
+    await page.setContent(`
+      <ion-button size="large" fill="solid">Large Button</ion-button>
+    `);
+
+    const wrapper = page.locator('ion-button');
+
+    expect(await wrapper.screenshot()).toMatchSnapshot(`button-size-large-${page.getSnapshotSettings()}.png`);
+  });
+  test.describe('in ion-buttons', () => {
+    test('should render small button', async ({ page }) => {
+      await page.setContent(`
+        <ion-buttons>
+          <ion-button size="small" fill="solid">Small Button</ion-button>
+        </ion-buttons>
+      `);
+
+      const wrapper = page.locator('ion-button');
+
+      expect(await wrapper.screenshot()).toMatchSnapshot(
+        `button-size-small-in-buttons-${page.getSnapshotSettings()}.png`
+      );
+    });
+    test('should render large button', async ({ page }) => {
+      await page.setContent(`
+        <ion-buttons>
+          <ion-button size="large" fill="solid">Large Button</ion-button>
+        </ion-buttons>
+      `);
+
+      const wrapper = page.locator('ion-button');
+
+      expect(await wrapper.screenshot()).toMatchSnapshot(
+        `button-size-large-in-buttons-${page.getSnapshotSettings()}.png`
+      );
+    });
   });
 });

core/src/components/button/test/size/index.html

@@ -18,6 +18,11 @@
     <ion-app>
       <ion-header>
         <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-button fill="solid">Default Button</ion-button>
+            <ion-button fill="solid" size="small">Small Button</ion-button>
+            <ion-button fill="solid" size="large">Large Button</ion-button>
+          </ion-buttons>
           <ion-title>Button - Size</ion-title>
         </ion-toolbar>
       </ion-header>

core/src/components/button/test/strong/button.e2e.ts

@@ -1,12 +1,57 @@
 import { expect } from '@playwright/test';
 import { test } from '@utils/test/playwright';
 
+/**
+ * Clear buttons have special font-weight
+ * styles which is why we make sure
+ * to capture the clear button here.
+ */
 test.describe('button: strong', () => {
-  test('should not have visual regressions', async ({ page }) => {
+  test.beforeEach(({ skip }) => {
-    await page.goto(`/src/components/button/test/strong`);
+    skip.rtl();
+  });
+  test('should render strong button', async ({ page }) => {
+    await page.setContent(`
+      <ion-button fill="solid" strong="true">Button</ion-button>
+    `);
 
-    await page.setIonViewport();
+    const wrapper = page.locator('ion-button');
 
-    expect(await page.screenshot()).toMatchSnapshot(`button-strong-${page.getSnapshotSettings()}.png`);
+    expect(await wrapper.screenshot()).toMatchSnapshot(`button-strong-${page.getSnapshotSettings()}.png`);
+  });
+  test('should render strong clear button', async ({ page }) => {
+    await page.setContent(`
+      <ion-button fill="clear" strong="true">Button</ion-button>
+    `);
+
+    const wrapper = page.locator('ion-button');
+
+    expect(await wrapper.screenshot()).toMatchSnapshot(`button-clear-strong-${page.getSnapshotSettings()}.png`);
+  });
+  test.describe('in ion-buttons', () => {
+    test('should render strong button', async ({ page }) => {
+      await page.setContent(`
+        <ion-buttons>
+          <ion-button strong="true" fill="solid">Button</ion-button>
+        </ion-buttons>
+      `);
+
+      const wrapper = page.locator('ion-button');
+
+      expect(await wrapper.screenshot()).toMatchSnapshot(`button-strong-in-buttons-${page.getSnapshotSettings()}.png`);
+    });
+    test('should render strong clear button', async ({ page }) => {
+      await page.setContent(`
+        <ion-buttons>
+          <ion-button strong="true" fill="clear">Button</ion-button>
+        </ion-buttons>
+      `);
+
+      const wrapper = page.locator('ion-button');
+
+      expect(await wrapper.screenshot()).toMatchSnapshot(
+        `button-clear-strong-in-buttons-${page.getSnapshotSettings()}.png`
+      );
+    });
   });
 });

core/src/components/button/test/strong/index.html

@@ -18,6 +18,11 @@
     <ion-app>
       <ion-header>
         <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-button fill="solid" strong="true">Solid Button</ion-button>
+            <ion-button fill="outline" strong="true">Outline Button</ion-button>
+            <ion-button fill="clear" strong="true">Clear Button</ion-button>
+          </ion-buttons>
           <ion-title>Button - Strong</ion-title>
         </ion-toolbar>
       </ion-header>

core/src/components/buttons/buttons.ios.scss

@@ -12,9 +12,6 @@
   @include margin-horizontal(2px, 2px);
 
   height: 32px;
-
-  font-size: #{$toolbar-ios-button-font-size};
-  font-weight: 400;
 }
 
 ::slotted(*) ion-button:not(.button-round) {

core/src/components/buttons/buttons.md.scss

@@ -14,9 +14,6 @@
   @include margin-horizontal(2px, 2px);
 
   height: 32px;
-
-  font-size: #{$toolbar-md-button-font-size};
-  font-weight: 500;
 }
 
 ::slotted(*) ion-button:not(.button-round) {

core/src/components/chip/chip.scss

@@ -27,8 +27,6 @@
   font-family: $font-family-base;
   font-size: 14px;
 
-  line-height: 1;
-
   cursor: pointer;
 
   overflow: hidden;

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

@@ -9,4 +9,28 @@ test.describe('chip: rendering', () => {
 
     expect(await page.screenshot()).toMatchSnapshot(`chip-basic-${page.getSnapshotSettings()}.png`);
   });
+
+  test('should not clip descenders in item', async ({ page, skip }) => {
+    skip.rtl();
+    skip.mode('md');
+
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/ionic-team/ionic-framework/issues/18313',
+    });
+
+    await page.setContent(`
+      <ion-list>
+        <ion-item>
+          <ion-chip>
+            <ion-label>Agreements</ion-label>
+          </ion-chip>
+        </ion-item>
+      </ion-list>
+    `);
+
+    const chip = page.locator('ion-chip');
+
+    expect(await chip.screenshot()).toMatchSnapshot(`chip-descender-${page.getSnapshotSettings()}.png`);
+  });
 });

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

@@ -27,23 +27,6 @@ test.describe('datetime: locale', () => {
     });
   });
 
-  test.describe('ta-IN', () => {
-    test('should not have visual regressions', async () => {
-      await datetimeFixture.goto('ta-IN', 'date');
-      await datetimeFixture.expectLocalizedDatePicker();
-    });
-
-    test('month/year picker should not have visual regressions', async () => {
-      await datetimeFixture.goto('ta-IN', 'month-year');
-      await datetimeFixture.expectLocalizedMonthYearPicker();
-    });
-
-    test('time picker should not have visual regressions', async () => {
-      await datetimeFixture.goto('ta-IN', 'time');
-      await datetimeFixture.expectLocalizedTimePicker();
-    });
-  });
-
   test.describe('ja-JP', () => {
     test('should not have visual regressions', async () => {
       await datetimeFixture.goto('ja-JP', 'date');