Merge remote-tracking branch 'origin/main' into feature-7.6

core/src/components/item-option/item-option.scss

@@ -17,18 +17,6 @@
   font-family: $font-family-base;
 }
 
-:host(.in-list.item-options-end:last-child) {
-  @include padding-horizontal(
-    null, calc(.7em + var(--ion-safe-area-right))
-  );
-}
-
-:host(.in-list.item-options-start:first-child) {
-  @include padding-horizontal(
-    calc(.7em + var(--ion-safe-area-left)), null
-  );
-}
-
 :host(.ion-color) {
   background: current-color(base);
   color: current-color(contrast);

core/src/components/item-sliding/test/basic/item-sliding.e2e.ts

@@ -99,3 +99,94 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
     });
   });
 });
+
+/**
+ * This behavior needs to be tested in both modes and directions to
+ * make sure the safe area padding is applied only to that side
+ * regardless of direction
+ */
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('item-sliding: basic'), () => {
+    test.describe('safe area left', () => {
+      test('should have padding on the left only', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            :root {
+              --ion-safe-area-left: 40px;
+            }
+          </style>
+
+          <ion-item-sliding>
+            <ion-item-options side="start">
+              <ion-item-option color="primary">
+                Archive
+              </ion-item-option>
+              <ion-item-option color="danger">
+                Delete
+              </ion-item-option>
+            </ion-item-options>
+
+            <ion-item>
+              <ion-label>
+                Sliding Item
+              </ion-label>
+            </ion-item>
+          </ion-item-sliding>
+        `,
+          config
+        );
+
+        const direction = config.direction;
+        const item = page.locator('ion-item-sliding');
+
+        const dragByX = direction == 'rtl' ? -150 : 150;
+        await dragElementBy(item, page, dragByX);
+        await page.waitForChanges();
+
+        await expect(item).toHaveScreenshot(screenshot(`item-sliding-safe-area-left`));
+      });
+    });
+
+    test.describe('safe area right', () => {
+      test('should have padding on the right only', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            :root {
+              --ion-safe-area-right: 40px;
+            }
+          </style>
+
+          <ion-item-sliding>
+            <ion-item>
+              <ion-label>
+                Sliding Item
+              </ion-label>
+            </ion-item>
+
+            <ion-item-options side="end">
+              <ion-item-option color="primary">
+                Archive
+              </ion-item-option>
+              <ion-item-option color="danger">
+                Delete
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+        `,
+          config
+        );
+
+        const direction = config.direction;
+        const item = page.locator('ion-item-sliding');
+
+        const dragByX = direction == 'rtl' ? 150 : -150;
+        await dragElementBy(item, page, dragByX);
+        await page.waitForChanges();
+
+        await expect(item).toHaveScreenshot(screenshot(`item-sliding-safe-area-right`));
+      });
+    });
+  });
+});

core/src/components/menu/menu-interface.ts

@@ -1,4 +1,4 @@
-import type { Animation } from '../../interface';
+import type { Animation, AnimationBuilder } from '@utils/animation/animation-interface';
 
 export type Side = 'start' | 'end';
 
@@ -26,13 +26,23 @@ export interface MenuI {
 }
 
 export interface MenuControllerI {
+  registerAnimation(name: string, animation: AnimationBuilder): void;
+  get(menu?: string | null, logOnMultipleSideMenus?: boolean): Promise<HTMLIonMenuElement | undefined>;
+  getMenus(): Promise<HTMLIonMenuElement[]>;
+  getOpen(): Promise<HTMLIonMenuElement | undefined>;
+  isEnabled(menu?: string | null): Promise<boolean>;
+  swipeGesture(shouldEnable: boolean, menu?: string | null): Promise<HTMLIonMenuElement | undefined>;
+  isAnimating(): Promise<boolean>;
+  isOpen(menu?: string | null): Promise<boolean>;
+  enable(shouldEnable: boolean, menu?: string | null): Promise<HTMLIonMenuElement | undefined>;
+  toggle(menu?: string | null): Promise<boolean>;
+  close(menu?: string | null): Promise<boolean>;
+  open(menu?: string | null): Promise<boolean>;
+  _getOpenSync(): HTMLIonMenuElement | undefined;
   _createAnimation(type: string, menuCmp: MenuI): Promise<Animation>;
-  _setOpen(menu: MenuI, shouldOpen: boolean, animated: boolean): Promise<boolean>;
   _register(menu: MenuI): void;
   _unregister(menu: MenuI): void;
-
-  getMenus(): Promise<HTMLIonMenuElement[]>;
-  getOpenSync(): HTMLIonMenuElement | undefined;
+  _setOpen(menu: MenuI, shouldOpen: boolean, animated: boolean): Promise<boolean>;
 }
 
 export interface MenuChangeEventDetail {

core/src/components/title/title.ios.scss

@@ -67,4 +67,14 @@
 
 :host(.title-large) .toolbar-title {
   @include transform-origin(inherit);
+
+  /**
+   * During a page transition
+   * if the large title and the back button
+   * texts match up, the back button should be
+   * scaled to roughly match the dimensions of
+   * the large title text. The following line
+   * ensures that the scale values are accurate.
+   */
+  width: auto;
 }