Merge remote-tracking branch 'origin/feature-6.2' into FW-225

Author: liamdebeasi

CHANGELOG.md

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

angular/CHANGELOG.md

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

angular/package-lock.json

@@ -851,6 +851,10 @@ export namespace Components {
           * Where to align the fab horizontally in the viewport.
          */
         "horizontal"?: 'start' | 'end' | 'center';
+        /**
+          * Opens/Closes the FAB list container.
+         */
+        "toggle": () => Promise<void>;
         /**
           * Where to align the fab vertically in the viewport.
          */

angular/package.json

@@ -22,6 +22,8 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
   shadow: true,
 })
 export class FabButton implements ComponentInterface, AnchorInterface, ButtonInterface {
+  private fab: HTMLIonFabElement | null = null;
+
   @Element() el!: HTMLElement;
 
   /**
@@ -119,6 +121,10 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
    */
   @Event() ionBlur!: EventEmitter<void>;
 
+  connectedCallback() {
+    this.fab = this.el.closest('ion-fab');
+  }
+
   private onFocus = () => {
     this.ionFocus.emit();
   };
@@ -127,6 +133,15 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
     this.ionBlur.emit();
   };
 
+  private onClick = () => {
+    const { fab } = this;
+    if (!fab) {
+      return;
+    }
+
+    fab.toggle();
+  };
+
   render() {
     const { el, disabled, color, href, activated, show, translucent, size } = this;
     const inList = hostContext('ion-fab-list', el);
@@ -144,6 +159,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
 
     return (
       <Host
+        onClick={this.onClick}
         aria-disabled={disabled ? 'true' : null}
         class={createColorClasses(color, {
           [mode]: true,

core/CHANGELOG.md

@@ -62,22 +62,23 @@ export class Fab implements ComponentInterface {
     return this.el.querySelector('ion-fab-button');
   }
 
-  private onClick = () => {
+  /**
+   * Opens/Closes the FAB list container.
+   * @internal
+   */
+  @Method()
+  async toggle() {
     const hasList = !!this.el.querySelector('ion-fab-list');
-    const getButton = this.getFab();
-    const isButtonDisabled = getButton?.disabled;
-
-    if (hasList && !isButtonDisabled) {
+    if (hasList) {
       this.activated = !this.activated;
     }
-  };
+  }
 
   render() {
     const { horizontal, vertical, edge } = this;
     const mode = getIonMode(this);
     return (
       <Host
-        onClick={this.onClick}
         class={{
           [mode]: true,
           [`fab-horizontal-${horizontal}`]: horizontal !== undefined,

core/package-lock.json

@@ -10,15 +10,15 @@ test.describe('range: basic', () => {
     expect(await page.screenshot()).toMatchSnapshot(`range-diff-${page.getSnapshotSettings()}.png`);
   });
 
-  test('should emit start/end events', async ({ page }) => {
+  test('should emit start/end events', async ({ page }, testInfo) => {
     await page.setContent(`<ion-range value="20"></ion-range>`);
 
     const rangeStart = await page.spyOnEvent('ionKnobMoveStart');
     const rangeEnd = await page.spyOnEvent('ionKnobMoveEnd');
 
     const rangeEl = page.locator('ion-range');
 
-    await dragElementBy(rangeEl, page, 300, 0);
+    await dragElementBy(rangeEl, page, testInfo.project.metadata.rtl ? -300 : 300, 0);
     await page.waitForChanges();
 
     /**

core/package.json

@@ -1,4 +1,4 @@
-import type { Page } from '@playwright/test';
+import type { Page, TestInfo } from '@playwright/test';
 
 /**
  * Overwrites the default Playwright page.setContent method.
@@ -8,8 +8,9 @@ import type { Page } from '@playwright/test';
  *
  * @param page The Playwright page object.
  * @param html The HTML content to set on the page.
+ * @param testInfo The TestInfo associated with the current test run.
  */
-export const setContent = async (page: Page, html: string) => {
+export const setContent = async (page: Page, html: string, testInfo: TestInfo) => {
   if (page.isClosed()) {
     throw new Error('setContent unavailable: page is already closed');
   }
@@ -18,15 +19,21 @@ export const setContent = async (page: Page, html: string) => {
 
   const output = `
     <!DOCTYPE html>
-    <html>
+    <html dir="${testInfo.project.metadata.rtl ? 'rtl' : 'ltr'}">
       <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
         <link href="${baseUrl}/css/ionic.bundle.css" rel="stylesheet" />
         <link href="${baseUrl}/scripts/testing/styles.css" rel="stylesheet" />
         <script src="${baseUrl}/scripts/testing/scripts.js"></script>
         <script type="module" src="${baseUrl}/dist/ionic/ionic.esm.js"></script>
-
+        <script>
+          window.Ionic = {
+            config: {
+              mode: '${testInfo.project.metadata.mode}'
+            }
+          }
+        </script>
       </head>
       <body>
         ${html}

core/src/components.d.ts

@@ -43,7 +43,7 @@ export async function extendPageFixture(page: E2EPage, testInfo: TestInfo) {
 
   // Overridden Playwright methods
   page.goto = (url: string, options) => goToPage(page, url, options, testInfo, originalGoto);
-  page.setContent = (html: string) => setContent(page, html);
+  page.setContent = (html: string) => setContent(page, html, testInfo);
   page.locator = (selector: string, options?: LocatorOptions) => locator(page, originalLocator, selector, options);
 
   // Custom Ionic methods

core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Chrome-linux.png

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/docs",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "description": "Pre-packaged API documentation for the Ionic docs.",
   "main": "core.json",
   "types": "core.d.ts",

core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Firefox-linux.png

@@ -5,5 +5,5 @@
     "angular",
     "packages/*"
   ],
-  "version": "6.1.8"
+  "version": "6.1.9"
 }