diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 5aa3a42383..67aa5d55c7 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -1488,7 +1488,7 @@ export namespace Components { */ "animated": boolean; /** - * A decimal value between 0 and 1 that indicates the point at which the backdrop will begin to fade in when using a sheet modal. Prior to this point, the backdrop will be hidden and the content underneath the sheet can be interacted with. This value must also be listed in the `breakpoints` array. + * A decimal value between 0 and 1 that indicates the point after which the backdrop will begin to fade in when using a sheet modal. Prior to this point, the backdrop will be hidden and the content underneath the sheet can be interacted with. This value is exclusive meaning the backdrop will become active after the value specified. */ "backdropBreakpoint": number; /** @@ -5136,7 +5136,7 @@ declare namespace LocalJSX { */ "animated"?: boolean; /** - * A decimal value between 0 and 1 that indicates the point at which the backdrop will begin to fade in when using a sheet modal. Prior to this point, the backdrop will be hidden and the content underneath the sheet can be interacted with. This value must also be listed in the `breakpoints` array. + * A decimal value between 0 and 1 that indicates the point after which the backdrop will begin to fade in when using a sheet modal. Prior to this point, the backdrop will be hidden and the content underneath the sheet can be interacted with. This value is exclusive meaning the backdrop will become active after the value specified. */ "backdropBreakpoint"?: number; /** diff --git a/core/src/components/modal/animations/sheet.ts b/core/src/components/modal/animations/sheet.ts index 111273fa61..79902483cf 100644 --- a/core/src/components/modal/animations/sheet.ts +++ b/core/src/components/modal/animations/sheet.ts @@ -11,7 +11,7 @@ export const createSheetEnterAnimation = (opts: ModalAnimationOptions) => { * current breakpoint, then the backdrop should be fading in. */ const shouldShowBackdrop = backdropBreakpoint === undefined || backdropBreakpoint < currentBreakpoint!; - const initialBackdrop = shouldShowBackdrop ? `calc(var(--backdrop-opacity) * ${currentBreakpoint!})` : '0.01'; + const initialBackdrop = shouldShowBackdrop ? `calc(var(--backdrop-opacity) * ${currentBreakpoint!})` : '0'; const backdropAnimation = createAnimation('backdropAnimation') .fromTo('opacity', 0, initialBackdrop); diff --git a/core/src/components/modal/gestures/sheet.ts b/core/src/components/modal/gestures/sheet.ts index acaf7cc99f..8ae61a6a82 100644 --- a/core/src/components/modal/gestures/sheet.ts +++ b/core/src/components/modal/gestures/sheet.ts @@ -55,7 +55,11 @@ export const createSheetGesture = ( backdropAnimation.keyframes([...SheetDefaults.BACKDROP_KEYFRAMES]); animation.progressStart(true, 1 - currentBreakpoint); - const backdropEnabled = currentBreakpoint >= backdropBreakpoint + /** + * Backdrop should become enabled + * after the backdropBreakpoint value + */ + const backdropEnabled = currentBreakpoint > backdropBreakpoint backdropEl.style.setProperty('pointer-events', backdropEnabled ? 'auto' : 'none'); } @@ -170,7 +174,11 @@ export const createSheetGesture = ( contentEl.scrollY = true; } - const backdropEnabled = currentBreakpoint >= backdropBreakpoint; + /** + * Backdrop should become enabled + * after the backdropBreakpoint value + */ + const backdropEnabled = currentBreakpoint > backdropBreakpoint; backdropEl.style.setProperty('pointer-events', backdropEnabled ? 'auto' : 'none'); gesture.enable(true); diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx index 8bf388d2ab..22fc85c8f1 100644 --- a/core/src/components/modal/modal.tsx +++ b/core/src/components/modal/modal.tsx @@ -101,11 +101,12 @@ export class Modal implements ComponentInterface, OverlayInterface { /** * A decimal value between 0 and 1 that indicates the - * point at which the backdrop will begin to fade in + * point after which the backdrop will begin to fade in * when using a sheet modal. Prior to this point, the * backdrop will be hidden and the content underneath - * the sheet can be interacted with. This value must - * also be listed in the `breakpoints` array. + * the sheet can be interacted with. This value is exclusive + * meaning the backdrop will become active after the value + * specified. */ @Prop() backdropBreakpoint = 0; diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md index d667a8de4a..33b1bc75e3 100644 --- a/core/src/components/modal/readme.md +++ b/core/src/components/modal/readme.md @@ -1117,7 +1117,7 @@ export default defineComponent({ | Property | Attribute | Description | Type | Default | | -------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- | | `animated` | `animated` | If `true`, the modal will animate. | `boolean` | `true` | -| `backdropBreakpoint` | `backdrop-breakpoint` | A decimal value between 0 and 1 that indicates the point at which the backdrop will begin to fade in when using a sheet modal. Prior to this point, the backdrop will be hidden and the content underneath the sheet can be interacted with. This value must also be listed in the `breakpoints` array. | `number` | `0` | +| `backdropBreakpoint` | `backdrop-breakpoint` | A decimal value between 0 and 1 that indicates the point after which the backdrop will begin to fade in when using a sheet modal. Prior to this point, the backdrop will be hidden and the content underneath the sheet can be interacted with. This value is exclusive meaning the backdrop will become active after the value specified. | `number` | `0` | | `backdropDismiss` | `backdrop-dismiss` | If `true`, the modal will be dismissed when the backdrop is clicked. | `boolean` | `true` | | `breakpoints` | -- | The breakpoints to use when creating a sheet modal. Each value in the array must be a decimal between 0 and 1 where 0 indicates the modal is fully closed and 1 indicates the modal is fully open. Values are relative to the height of the modal, not the height of the screen. One of the values in this array must be the value of the `initialBreakpoint` property. For example: [0, .25, .5, 1] | `number[] \| undefined` | `undefined` | | `enterAnimation` | -- | Animation to use when the modal is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | diff --git a/core/src/components/modal/test/sheet/index.html b/core/src/components/modal/test/sheet/index.html index ab490b35be..fe45f38cba 100644 --- a/core/src/components/modal/test/sheet/index.html +++ b/core/src/components/modal/test/sheet/index.html @@ -88,7 +88,7 @@ Present Sheet Modal Present Sheet Modal (Custom Breakpoints) Present Sheet Modal (Max breakpoint is not 1) - Present Sheet Modal (Custom Backdrop Breakpoint) + Present Sheet Modal (Custom Backdrop Breakpoint) Present Sheet Modal (Custom Height) Present Sheet Modal (Custom Handle) Present Sheet Modal (No Handle)