Merge branch 'next' of github.com:ionic-team/ionic-framework into FW-7137

Author: thetaPC

core/api.txt

@@ -2247,6 +2247,7 @@ ion-segment-view,prop,swipeGesture,boolean,true,false,false
 ion-segment-view,event,ionSegmentViewScroll,SegmentViewScrollEvent,true
 
 ion-select,shadow
+ion-select,prop,cancelIcon,boolean,false,false,false
 ion-select,prop,cancelText,string,'Cancel',false,false
 ion-select,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-select,prop,compareWith,((currentValue: any, compareValue: any) => boolean) | null | string | undefined,undefined,false,false
@@ -2360,6 +2361,7 @@ ion-select,part,text
 ion-select,part,wrapper
 
 ion-select-modal,scoped
+ion-select-modal,prop,cancelIcon,boolean,false,false,false
 ion-select-modal,prop,cancelText,string,'Close',false,false
 ion-select-modal,prop,header,string | undefined,undefined,false,false
 ion-select-modal,prop,multiple,boolean | undefined,undefined,false,false
@@ -2422,6 +2424,7 @@ ion-tab,method,setActive,setActive() => Promise<void>
 ion-tab-bar,shadow
 ion-tab-bar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-tab-bar,prop,expand,"compact" | "full",'full',false,false
+ion-tab-bar,prop,hideOnScroll,boolean,false,false,false
 ion-tab-bar,prop,mode,"ios" | "md",undefined,false,false
 ion-tab-bar,prop,selectedTab,string | undefined,undefined,false,false
 ion-tab-bar,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false

core/package-lock.json

@@ -68,7 +68,7 @@
     "fs-extra": "^9.0.1",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
-    "outsystems-design-tokens": "^1.3.7",
+    "outsystems-design-tokens": "^1.3.8",
     "playwright-core": "^1.58.2",
     "prettier": "^2.8.8",
     "rollup": "^2.26.4",

core/package.json

@@ -3684,6 +3684,11 @@ export namespace Components {
         "swipeGesture": boolean;
     }
     interface IonSelect {
+        /**
+          * If `true`, the cancel button will display an icon instead of the `cancelText`. Only applies when `interface` is set to `"modal"`. Has no effect on `"action-sheet"`, `"alert"`, or `"popover"` interfaces. When `cancelIcon` is `true`, the `cancelText` property is ignored for display but is used as the accessible label for the icon button.
+          * @default false
+         */
+        "cancelIcon": boolean;
         /**
           * The text to display on the cancel button.
           * @default 'Cancel'
@@ -3800,6 +3805,11 @@ export namespace Components {
         "value"?: any | null;
     }
     interface IonSelectModal {
+        /**
+          * If `true`, the cancel button will display a close icon instead of the `cancelText`. When `cancelIcon` is `true`, `cancelText` is not displayed visually but is still used as the accessible label (`aria-label`) for the button.
+          * @default false
+         */
+        "cancelIcon": boolean;
         /**
           * The text to display on the cancel button.
           * @default 'Close'
@@ -3974,6 +3984,11 @@ export namespace Components {
           * @default 'full'
          */
         "expand": 'compact' | 'full';
+        /**
+          * If `true`, the tab bar will be hidden when the user scrolls down and shown when the user scrolls up. Only applies when the theme is `"ionic"` and `expand` is `"compact"`.
+          * @default false
+         */
+        "hideOnScroll": boolean;
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -9753,6 +9768,11 @@ declare namespace LocalJSX {
         "swipeGesture"?: boolean;
     }
     interface IonSelect {
+        /**
+          * If `true`, the cancel button will display an icon instead of the `cancelText`. Only applies when `interface` is set to `"modal"`. Has no effect on `"action-sheet"`, `"alert"`, or `"popover"` interfaces. When `cancelIcon` is `true`, the `cancelText` property is ignored for display but is used as the accessible label for the icon button.
+          * @default false
+         */
+        "cancelIcon"?: boolean;
         /**
           * The text to display on the cancel button.
           * @default 'Cancel'
@@ -9888,6 +9908,11 @@ declare namespace LocalJSX {
         "value"?: any | null;
     }
     interface IonSelectModal {
+        /**
+          * If `true`, the cancel button will display a close icon instead of the `cancelText`. When `cancelIcon` is `true`, `cancelText` is not displayed visually but is still used as the accessible label (`aria-label`) for the button.
+          * @default false
+         */
+        "cancelIcon"?: boolean;
         /**
           * The text to display on the cancel button.
           * @default 'Close'
@@ -10065,6 +10090,11 @@ declare namespace LocalJSX {
           * @default 'full'
          */
         "expand"?: 'compact' | 'full';
+        /**
+          * If `true`, the tab bar will be hidden when the user scrolls down and shown when the user scrolls up. Only applies when the theme is `"ionic"` and `expand` is `"compact"`.
+          * @default false
+         */
+        "hideOnScroll"?: boolean;
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -11245,6 +11275,7 @@ declare namespace LocalJSX {
     }
     interface IonSelectAttributes {
         "cancelText": string;
+        "cancelIcon": boolean;
         "color": Color;
         "compareWith": string | SelectCompareFn | null;
         "disabled": boolean;
@@ -11271,6 +11302,7 @@ declare namespace LocalJSX {
     interface IonSelectModalAttributes {
         "header": string;
         "cancelText": string;
+        "cancelIcon": boolean;
         "multiple": boolean;
     }
     interface IonSelectOptionAttributes {
@@ -11307,6 +11339,7 @@ declare namespace LocalJSX {
     interface IonTabBarAttributes {
         "color": Color;
         "selectedTab": string;
+        "hideOnScroll": boolean;
         "translucent": boolean;
         "expand": 'compact' | 'full';
         "shape": 'soft' | 'round' | 'rectangular';

core/src/components.d.ts

@@ -0,0 +1,53 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
+import type { Animation } from '../../../interface';
+import type { ModalAnimationOptions } from '../modal-interface';
+
+import { createSheetEnterAnimation } from './sheet';
+
+const createEnterAnimation = () => {
+  const backdropAnimation = createAnimation()
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+    .beforeStyles({
+      'pointer-events': 'none',
+    })
+    .afterClearStyles(['pointer-events']);
+
+  const wrapperAnimation = createAnimation().keyframes([
+    { offset: 0, opacity: 0.01, transform: 'translateY(40px)' },
+    { offset: 1, opacity: 1, transform: `translateY(0px)` },
+  ]);
+
+  return { backdropAnimation, wrapperAnimation, contentAnimation: undefined };
+};
+
+/**
+ * Ionic Modal Enter Animation
+ */
+export const ionicEnterAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptions): Animation => {
+  const { currentBreakpoint, expandToScroll } = opts;
+  const root = getElementRoot(baseEl);
+  const { wrapperAnimation, backdropAnimation, contentAnimation } =
+    currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation();
+
+  backdropAnimation.addElement(root.querySelector('ion-backdrop')!);
+
+  wrapperAnimation.addElement(root.querySelector('.modal-wrapper')!);
+
+  // The content animation is only added if scrolling is enabled for
+  // all the breakpoints.
+  !expandToScroll && contentAnimation?.addElement(baseEl.querySelector('.ion-page')!);
+
+  backdropAnimation.duration(300).easing('ease-out');
+  wrapperAnimation.duration(400).easing('cubic-bezier(0.32, 0.68, 0, 1)');
+  contentAnimation?.duration(400).easing('cubic-bezier(0.32, 0.68, 0, 1)');
+
+  const baseAnimation = createAnimation().addElement(baseEl).addAnimation([backdropAnimation, wrapperAnimation]);
+
+  if (contentAnimation) {
+    baseAnimation.addAnimation(contentAnimation);
+  }
+
+  return baseAnimation;
+};

core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Safari-linux.png

@@ -0,0 +1,38 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
+import type { Animation } from '../../../interface';
+import type { ModalAnimationOptions } from '../modal-interface';
+
+import { createSheetLeaveAnimation } from './sheet';
+
+const createLeaveAnimation = () => {
+  const backdropAnimation = createAnimation().fromTo('opacity', 'var(--backdrop-opacity)', 0);
+
+  const wrapperAnimation = createAnimation().keyframes([
+    { offset: 0, opacity: 0.99, transform: `translateY(0px)` },
+    { offset: 1, opacity: 0, transform: 'translateY(40px)' },
+  ]);
+
+  return { backdropAnimation, wrapperAnimation };
+};
+
+/**
+ * Md Modal Leave Animation
+ */
+export const ionicLeaveAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptions): Animation => {
+  const { currentBreakpoint } = opts;
+  const root = getElementRoot(baseEl);
+  const { wrapperAnimation, backdropAnimation } =
+    currentBreakpoint !== undefined ? createSheetLeaveAnimation(opts) : createLeaveAnimation();
+
+  backdropAnimation.addElement(root.querySelector('ion-backdrop')!);
+  wrapperAnimation.addElement(root.querySelector('.modal-wrapper')!);
+
+  backdropAnimation.duration(250).easing('ease-in');
+  wrapperAnimation.duration(400).easing('cubic-bezier(0.4, 0, 1, 1)');
+
+  const baseAnimation = createAnimation().addElement(baseEl).addAnimation([backdropAnimation, wrapperAnimation]);
+
+  return baseAnimation;
+};