diff --git a/core/api.txt b/core/api.txt index a8217994eef..640b16cfa69 100644 --- a/core/api.txt +++ b/core/api.txt @@ -749,7 +749,6 @@ ion-content,prop,mode,"ios" | "md",undefined,false,false ion-content,prop,scrollEvents,boolean,false,false,false ion-content,prop,scrollX,boolean,false,false,false ion-content,prop,scrollY,boolean,true,false,false -ion-content,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-content,method,getScrollElement,getScrollElement() => Promise ion-content,method,scrollByPoint,scrollByPoint(x: number, y: number, duration: number) => Promise ion-content,method,scrollToBottom,scrollToBottom(duration?: number) => Promise @@ -758,15 +757,14 @@ ion-content,method,scrollToTop,scrollToTop(duration?: number) => Promise ion-content,event,ionScroll,ScrollDetail,true ion-content,event,ionScrollEnd,ScrollBaseDetail,true ion-content,event,ionScrollStart,ScrollBaseDetail,true -ion-content,css-prop,--background -ion-content,css-prop,--color -ion-content,css-prop,--keyboard-offset -ion-content,css-prop,--offset-bottom -ion-content,css-prop,--offset-top -ion-content,css-prop,--padding-bottom -ion-content,css-prop,--padding-end -ion-content,css-prop,--padding-start -ion-content,css-prop,--padding-top +ion-content,css-prop,--ion-content-background +ion-content,css-prop,--ion-content-color +ion-content,css-prop,--ion-content-font-family +ion-content,css-prop,--ion-content-overflow +ion-content,css-prop,--ion-content-padding-bottom +ion-content,css-prop,--ion-content-padding-end +ion-content,css-prop,--ion-content-padding-start +ion-content,css-prop,--ion-content-padding-top ion-content,part,background ion-content,part,scroll diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 5d1eff6638c..3b7f07e4dde 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -15,7 +15,7 @@ import { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo import { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface"; import { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface"; import { IonChipFill, IonChipHue, IonChipShape, IonChipSize } from "./components/chip/chip.interfaces"; -import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface"; +import { ScrollBaseDetail, ScrollDetail } from "./components/content/content.interfaces"; import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface"; import { SpinnerTypes } from "./components/spinner/spinner-configs"; import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface"; @@ -55,7 +55,7 @@ export { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo export { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface"; export { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface"; export { IonChipFill, IonChipHue, IonChipShape, IonChipSize } from "./components/chip/chip.interfaces"; -export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface"; +export { ScrollBaseDetail, ScrollDetail } from "./components/content/content.interfaces"; export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface"; export { SpinnerTypes } from "./components/spinner/spinner-configs"; export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface"; @@ -1118,10 +1118,6 @@ export namespace Components { * @default true */ "scrollY": boolean; - /** - * The theme determines the visual appearance of the component. - */ - "theme"?: "ios" | "md" | "ionic"; } interface IonDatetime { /** @@ -7060,10 +7056,6 @@ declare namespace LocalJSX { * @default true */ "scrollY"?: boolean; - /** - * The theme determines the visual appearance of the component. - */ - "theme"?: "ios" | "md" | "ionic"; } interface IonDatetime { /** diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss index 2a2f85bb456..495e8421015 100644 --- a/core/src/components/action-sheet/action-sheet.scss +++ b/core/src/components/action-sheet/action-sheet.scss @@ -143,7 +143,6 @@ flex-shrink: 2; overscroll-behavior-y: contain; overflow-y: auto; - -webkit-overflow-scrolling: touch; pointer-events: all; background: var(--background); diff --git a/core/src/components/action-sheet/test/basic/index.html b/core/src/components/action-sheet/test/basic/index.html index b95d43b42c7..6a989269b8a 100644 --- a/core/src/components/action-sheet/test/basic/index.html +++ b/core/src/components/action-sheet/test/basic/index.html @@ -9,6 +9,24 @@ /> + @@ -26,7 +44,7 @@ - + diff --git a/core/src/components/action-sheet/test/is-open/index.html b/core/src/components/action-sheet/test/is-open/index.html index c606b6f96aa..ee16303ac36 100644 --- a/core/src/components/action-sheet/test/is-open/index.html +++ b/core/src/components/action-sheet/test/is-open/index.html @@ -9,6 +9,24 @@ /> + diff --git a/core/src/components/breadcrumbs/test/color/index.html b/core/src/components/breadcrumbs/test/color/index.html index a1f9e5a1aef..5de16e04162 100644 --- a/core/src/components/breadcrumbs/test/color/index.html +++ b/core/src/components/breadcrumbs/test/color/index.html @@ -9,6 +9,24 @@ /> + @@ -56,7 +74,7 @@ - +

Breadcrumbs Color: Primary

diff --git a/core/src/components/breadcrumbs/test/reactive/index.html b/core/src/components/breadcrumbs/test/reactive/index.html index d865180448c..7173b8d47bd 100644 --- a/core/src/components/breadcrumbs/test/reactive/index.html +++ b/core/src/components/breadcrumbs/test/reactive/index.html @@ -9,6 +9,24 @@ /> + @@ -22,7 +40,7 @@ - + Home Trips diff --git a/core/src/components/button/test/anchor/index.html b/core/src/components/button/test/anchor/index.html index 2a027932573..367b31a8c20 100644 --- a/core/src/components/button/test/anchor/index.html +++ b/core/src/components/button/test/anchor/index.html @@ -9,6 +9,24 @@ /> + @@ -22,7 +40,7 @@ - +

Default Default.activated diff --git a/core/src/components/button/test/basic/index.html b/core/src/components/button/test/basic/index.html index 19efe474cea..fa3db4d9528 100644 --- a/core/src/components/button/test/basic/index.html +++ b/core/src/components/button/test/basic/index.html @@ -9,6 +9,24 @@ /> + @@ -22,7 +40,7 @@ - +

Default Default.focused diff --git a/core/src/components/button/test/clear/index.html b/core/src/components/button/test/clear/index.html index 18ebe50cc97..a3725ed37dc 100644 --- a/core/src/components/button/test/clear/index.html +++ b/core/src/components/button/test/clear/index.html @@ -9,6 +9,24 @@ /> + @@ -22,7 +40,7 @@ - +

Default Default.activated diff --git a/core/src/components/button/test/expand/index.html b/core/src/components/button/test/expand/index.html index fc1cc6380c3..784c0416d13 100644 --- a/core/src/components/button/test/expand/index.html +++ b/core/src/components/button/test/expand/index.html @@ -9,6 +9,24 @@ /> + @@ -22,7 +40,7 @@ - +

Block Full diff --git a/core/src/components/button/test/form-reference/index.html b/core/src/components/button/test/form-reference/index.html index 5cfdf1aea62..56753fc5adb 100644 --- a/core/src/components/button/test/form-reference/index.html +++ b/core/src/components/button/test/form-reference/index.html @@ -9,6 +9,24 @@ /> + @@ -22,7 +40,7 @@ - +

diff --git a/core/src/components/button/test/form/index.html b/core/src/components/button/test/form/index.html index 26e8dbe4074..23339f28d0e 100644 --- a/core/src/components/button/test/form/index.html +++ b/core/src/components/button/test/form/index.html @@ -9,6 +9,24 @@ /> + @@ -22,7 +40,7 @@ - +
diff --git a/core/src/components/button/test/icon/index.html b/core/src/components/button/test/icon/index.html index 9a59f44fc13..f8a0ca3bb03 100644 --- a/core/src/components/button/test/icon/index.html +++ b/core/src/components/button/test/icon/index.html @@ -9,6 +9,24 @@ /> + @@ -30,7 +48,7 @@ - +

diff --git a/core/src/components/button/test/outline/index.html b/core/src/components/button/test/outline/index.html index 5f76d08c12f..b884d8e952a 100644 --- a/core/src/components/button/test/outline/index.html +++ b/core/src/components/button/test/outline/index.html @@ -9,6 +9,24 @@ /> + @@ -22,7 +40,7 @@ - +

Default Default.activated diff --git a/core/src/components/button/test/shape/index.html b/core/src/components/button/test/shape/index.html index e6f32cd5422..8f5796ae920 100644 --- a/core/src/components/button/test/shape/index.html +++ b/core/src/components/button/test/shape/index.html @@ -9,6 +9,24 @@ /> + @@ -34,7 +52,7 @@ - +

Default

diff --git a/core/src/components/button/test/size/index.html b/core/src/components/button/test/size/index.html index 88ed73095a3..8b231183bd4 100644 --- a/core/src/components/button/test/size/index.html +++ b/core/src/components/button/test/size/index.html @@ -9,6 +9,24 @@ /> + @@ -27,7 +45,7 @@ - +

Default Default diff --git a/core/src/components/button/test/spinner/index.html b/core/src/components/button/test/spinner/index.html index ede2080bab3..b56b3c449e6 100644 --- a/core/src/components/button/test/spinner/index.html +++ b/core/src/components/button/test/spinner/index.html @@ -9,6 +9,24 @@ /> + @@ -22,7 +40,7 @@ - +

diff --git a/core/src/components/button/test/strong/index.html b/core/src/components/button/test/strong/index.html index 66c1fa02ad1..c79e16c18c8 100644 --- a/core/src/components/button/test/strong/index.html +++ b/core/src/components/button/test/strong/index.html @@ -9,6 +9,24 @@ /> + @@ -27,7 +45,7 @@ - +

Default

diff --git a/core/src/components/button/test/theme-ionic/index.html b/core/src/components/button/test/theme-ionic/index.html index 2449b482053..d8fbb84e218 100644 --- a/core/src/components/button/test/theme-ionic/index.html +++ b/core/src/components/button/test/theme-ionic/index.html @@ -10,6 +10,24 @@ /> + @@ -29,7 +47,7 @@ - +

Preview options

diff --git a/core/src/components/button/test/wrap/index.html b/core/src/components/button/test/wrap/index.html index 13cd523088a..5907815a58e 100644 --- a/core/src/components/button/test/wrap/index.html +++ b/core/src/components/button/test/wrap/index.html @@ -9,6 +9,24 @@ /> + @@ -27,7 +45,7 @@ - +

Item

diff --git a/core/src/components/buttons/test/icon/index.html b/core/src/components/buttons/test/icon/index.html index 2a7f5a49c5c..64e0d33729c 100644 --- a/core/src/components/buttons/test/icon/index.html +++ b/core/src/components/buttons/test/icon/index.html @@ -9,6 +9,24 @@ /> + @@ -29,7 +47,7 @@ - Content + Content diff --git a/core/src/components/card/test/basic/index.html b/core/src/components/card/test/basic/index.html index 58c780a49bc..027a4c54b89 100644 --- a/core/src/components/card/test/basic/index.html +++ b/core/src/components/card/test/basic/index.html @@ -9,6 +9,24 @@ /> + @@ -22,7 +40,7 @@ - + Card Subtitle diff --git a/core/src/components/card/test/shape/index.html b/core/src/components/card/test/shape/index.html index 77eaf9301ab..db1175edd6d 100644 --- a/core/src/components/card/test/shape/index.html +++ b/core/src/components/card/test/shape/index.html @@ -9,6 +9,24 @@ /> + @@ -33,7 +51,7 @@ - +

Default

diff --git a/core/src/components/card/test/theme-ionic/index.html b/core/src/components/card/test/theme-ionic/index.html index 1525cdaba70..aeb53f86a39 100644 --- a/core/src/components/card/test/theme-ionic/index.html +++ b/core/src/components/card/test/theme-ionic/index.html @@ -32,7 +32,7 @@ - +

Preview options

diff --git a/core/src/components/checkbox/test/basic/index.html b/core/src/components/checkbox/test/basic/index.html index d78fa19d31f..6ef5f9372b4 100644 --- a/core/src/components/checkbox/test/basic/index.html +++ b/core/src/components/checkbox/test/basic/index.html @@ -9,6 +9,24 @@ /> + @@ -44,7 +62,7 @@ - + Unchecked
Checked
Disabled
diff --git a/core/src/components/checkbox/test/bottom-content/index.html b/core/src/components/checkbox/test/bottom-content/index.html index 9ae90f5ef83..fd6c8658ef6 100644 --- a/core/src/components/checkbox/test/bottom-content/index.html +++ b/core/src/components/checkbox/test/bottom-content/index.html @@ -9,6 +9,24 @@ /> + @@ -41,7 +59,7 @@ - +

No Hint

diff --git a/core/src/components/checkbox/test/indeterminate/index.html b/core/src/components/checkbox/test/indeterminate/index.html index 7a568bcff68..5883e95604e 100644 --- a/core/src/components/checkbox/test/indeterminate/index.html +++ b/core/src/components/checkbox/test/indeterminate/index.html @@ -9,6 +9,24 @@ /> + @@ -22,7 +40,7 @@ - +
Indeterminate
Checked / Indeterminate diff --git a/core/src/components/checkbox/test/item/index.html b/core/src/components/checkbox/test/item/index.html index 2548cbfaad0..e84e41056fe 100644 --- a/core/src/components/checkbox/test/item/index.html +++ b/core/src/components/checkbox/test/item/index.html @@ -9,6 +9,24 @@ /> + @@ -46,7 +64,7 @@ - +

Placement Start

diff --git a/core/src/components/checkbox/test/label/index.html b/core/src/components/checkbox/test/label/index.html index 213c7289f32..6cb5b144bbb 100644 --- a/core/src/components/checkbox/test/label/index.html +++ b/core/src/components/checkbox/test/label/index.html @@ -9,6 +9,24 @@ /> + @@ -46,7 +64,7 @@ - +

Placement Start

diff --git a/core/src/components/checkbox/test/states/index.html b/core/src/components/checkbox/test/states/index.html index c26f9d90ec5..1adb323f67e 100644 --- a/core/src/components/checkbox/test/states/index.html +++ b/core/src/components/checkbox/test/states/index.html @@ -9,6 +9,24 @@ /> + @@ -50,7 +68,7 @@ - +

Unchecked

diff --git a/core/src/components/checkbox/test/validation/index.html b/core/src/components/checkbox/test/validation/index.html index 930ca862753..acb45167f91 100644 --- a/core/src/components/checkbox/test/validation/index.html +++ b/core/src/components/checkbox/test/validation/index.html @@ -9,6 +9,24 @@ /> + @@ -47,7 +65,7 @@ - +

Screen Reader Testing Instructions:

    diff --git a/core/src/components/chip/test/basic/index.html b/core/src/components/chip/test/basic/index.html index d0a2e26a81a..feb6cba9f39 100644 --- a/core/src/components/chip/test/basic/index.html +++ b/core/src/components/chip/test/basic/index.html @@ -9,6 +9,24 @@ /> + @@ -22,7 +40,7 @@ - +

    Solid Chips

    Default diff --git a/core/src/components/chip/test/hue/index.html b/core/src/components/chip/test/hue/index.html index e936a1713dc..b9dbf0dac08 100644 --- a/core/src/components/chip/test/hue/index.html +++ b/core/src/components/chip/test/hue/index.html @@ -9,6 +9,24 @@ /> + @@ -28,7 +46,7 @@ - +

    Chip Hue: Subtle

    diff --git a/core/src/components/chip/test/shape/index.html b/core/src/components/chip/test/shape/index.html index 165d2a9feaa..39b5d70f2bc 100644 --- a/core/src/components/chip/test/shape/index.html +++ b/core/src/components/chip/test/shape/index.html @@ -9,6 +9,24 @@ /> + @@ -16,7 +34,7 @@ - +

    Chip - Shape

    Shapes

    diff --git a/core/src/components/chip/test/size/index.html b/core/src/components/chip/test/size/index.html index e797f365a40..482cd18a3bb 100644 --- a/core/src/components/chip/test/size/index.html +++ b/core/src/components/chip/test/size/index.html @@ -9,6 +9,24 @@ /> + @@ -30,7 +48,7 @@ - +

    Default Size

    diff --git a/core/src/components/content/content-interface.ts b/core/src/components/content/content.interfaces.ts similarity index 69% rename from core/src/components/content/content-interface.ts rename to core/src/components/content/content.interfaces.ts index c4e04431c2e..7fae09017f4 100644 --- a/core/src/components/content/content-interface.ts +++ b/core/src/components/content/content.interfaces.ts @@ -1,4 +1,17 @@ import type { GestureDetail } from '../../interface'; +import type { IonPadding } from '../../themes/themes.interfaces'; + +export interface IonContentRecipe { + background?: string; + color?: string; + + font?: { + family?: string; + }; + + overflow?: string; + padding?: IonPadding; +} export interface ScrollBaseDetail { isScrolling: boolean; diff --git a/core/src/components/content/content.scss b/core/src/components/content/content.scss index de81ebc89b4..a10716d90ed 100644 --- a/core/src/components/content/content.scss +++ b/core/src/components/content/content.scss @@ -1,34 +1,27 @@ -@import "../../themes/native/native.globals"; +@use "../../themes/mixins" as mixins; +@use "../../themes/functions.color" as color; // Content // -------------------------------------------------- :host { /** - * @prop --background: Background of the content + * @prop --ion-content-background: Background of the content * - * @prop --color: Color of the content + * @prop --ion-content-color: Color of the content * - * @prop --padding-top: Top padding of the content - * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content - * @prop --padding-bottom: Bottom padding of the content - * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content + * @prop --ion-content-font-family: Font family of the content * - * @prop --keyboard-offset: Keyboard offset of the content + * @prop --ion-content-overflow: Overflow behavior of the scrollable area * - * @prop --offset-top: Offset top of the content - * @prop --offset-bottom: Offset bottom of the content + * @prop --ion-content-padding-top: Top padding of the content + * @prop --ion-content-padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content + * @prop --ion-content-padding-bottom: Bottom padding of the content + * @prop --ion-content-padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content */ - --background: #{$background-color}; - --color: #{$text-color}; - --padding-top: 0px; - --padding-bottom: 0px; - --padding-start: 0px; - --padding-end: 0px; - --keyboard-offset: 0px; - --offset-top: 0px; - --offset-bottom: 0px; - --overflow: auto; + --internal-keyboard-offset: 0px; + --internal-offset-top: 0px; + --internal-offset-bottom: 0px; display: block; position: relative; @@ -44,36 +37,26 @@ padding: 0 !important; /* stylelint-enable */ - font-family: $font-family-base; + font-family: var(--ion-content-font-family); contain: size style; } -:host(.ion-color) .inner-scroll { - background: current-color(base); - color: current-color(contrast); -} - -#background-content { - @include position(calc(var(--offset-top) * -1), 0px, calc(var(--offset-bottom) * -1), 0px); - - position: absolute; - - background: var(--background); -} +// Content Inner Scroll +// --------------------------------------------- .inner-scroll { - @include position(calc(var(--offset-top) * -1), 0px, calc(var(--offset-bottom) * -1), 0px); - @include padding( - calc(var(--padding-top) + var(--offset-top)), - var(--padding-end), - calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom)), - var(--padding-start) + @include mixins.position(calc(var(--internal-offset-top) * -1), 0px, calc(var(--internal-offset-bottom) * -1), 0px); + @include mixins.padding( + calc(var(--ion-content-padding-top) + var(--internal-offset-top)), + var(--ion-content-padding-end), + calc(var(--ion-content-padding-bottom) + var(--internal-keyboard-offset) + var(--internal-offset-bottom)), + var(--ion-content-padding-start) ); position: absolute; - color: var(--color); + color: var(--ion-content-color); box-sizing: border-box; @@ -89,10 +72,16 @@ touch-action: pan-x pan-y pinch-zoom; } +:host(.ion-color) .inner-scroll { + background: color.current-color(base); + color: color.current-color(contrast); +} + +// Content Scroll +// --------------------------------------------- + .scroll-y, .scroll-x { - -webkit-overflow-scrolling: touch; - /** * This adds `.inner-scroll` as part of the * stacking context in WebKit. Without it, @@ -115,15 +104,29 @@ } .scroll-y { - overflow-y: var(--overflow); + overflow-y: var(--ion-content-overflow); overscroll-behavior-y: contain; } .scroll-x { - overflow-x: var(--overflow); + overflow-x: var(--ion-content-overflow); overscroll-behavior-x: contain; } +// Content Background +// --------------------------------------------- + +#background-content { + @include mixins.position(calc(var(--internal-offset-top) * -1), 0px, calc(var(--internal-offset-bottom) * -1), 0px); + + position: absolute; + + background: var(--ion-content-background); +} + +// Content Overscroll +// --------------------------------------------- + .overscroll::before, .overscroll::after { position: absolute; @@ -142,6 +145,9 @@ top: -1px; } +// Content Sizing +// --------------------------------------------- + :host(.content-sizing) { display: flex; @@ -159,6 +165,7 @@ contain: none; } + :host(.content-sizing) .inner-scroll { position: relative; @@ -172,11 +179,37 @@ top: 0; bottom: 0; - margin-top: calc(var(--offset-top) * -1); - margin-bottom: calc(var(--offset-bottom) * -1); + margin-top: calc(var(--internal-offset-top) * -1); + margin-bottom: calc(var(--internal-offset-bottom) * -1); } +// Content Slotted Elements +// --------------------------------------------- + +// Elements with the "fixed" slot +::slotted([slot="fixed"]) { + position: absolute; + + /** + * When presenting ion-content inside of an ion-modal, the .inner-scroll + * element is composited. In WebKit, the fixed content is not composited + * causing it to appear under the main scrollable content as a result. + * The fixed content is correctly composited in other browsers. Adding + * the translateZ forces the fixed content to be composited so it correctly + * shows on top of the scrollable content. Setting a negative z-index will + * still allow the fixed content to appear under the scroll content if specified. + */ + transform: translateZ(0); +} + +// Content: iOS Mode Transition +// The transition shadow effect is only animated by the iOS transition +// builder, so these styles are only rendered in iOS mode. +// --------------------------------------------- + .transition-effect { + @include mixins.position-horizontal(-100%); + display: none; position: absolute; @@ -188,18 +221,6 @@ pointer-events: none; } -:host(.content-ltr) .transition-effect { - /* stylelint-disable property-disallowed-list */ - left: -100%; - /* stylelint-enable property-disallowed-list */ -} - -:host(.content-rtl) .transition-effect { - /* stylelint-disable property-disallowed-list */ - right: -100%; - /* stylelint-enable property-disallowed-list */ -} - .transition-cover { position: absolute; @@ -216,6 +237,8 @@ } .transition-shadow { + @include mixins.position-horizontal(null, 0); + display: block; position: absolute; @@ -225,34 +248,6 @@ box-shadow: inset -9px 0 9px 0 rgba(0, 0, 100, 0.03); } -:host(.content-ltr) .transition-shadow { - /* stylelint-disable property-disallowed-list */ - right: 0; - /* stylelint-enable property-disallowed-list */ -} - :host(.content-rtl) .transition-shadow { - /* stylelint-disable property-disallowed-list */ - left: 0; - /* stylelint-enable property-disallowed-list */ - transform: scaleX(-1); } - -// Content: Fixed -// -------------------------------------------------- - -::slotted([slot="fixed"]) { - position: absolute; - - /** - * When presenting ion-content inside of an ion-modal, the .inner-scroll - * element is composited. In WebKit, the fixed content is not composited - * causing it to appear under the main scrollable content as a result. - * The fixed content is correctly composited in other browsers. Adding - * the translateZ forces the fixed content to be composited so it correctly - * shows on top of the scrollable content. Setting a negative z-index will - * still allow the fixed content to appear under the scroll content if specified. - */ - transform: translateZ(0); -} diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx index 0c09660b9aa..fc84f4432e7 100644 --- a/core/src/components/content/content.tsx +++ b/core/src/components/content/content.tsx @@ -1,20 +1,19 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core'; import { Build, Component, Element, Event, Host, Listen, Method, Prop, forceUpdate, h, readTask } from '@stencil/core'; -import { componentOnReady, hasLazyBuild, inheritAriaAttributes } from '@utils/helpers'; +import { hasLazyBuild, inheritAriaAttributes, waitForComponent } from '@utils/helpers'; import type { Attributes } from '@utils/helpers'; import { isPlatform } from '@utils/platform'; import { isRTL } from '@utils/rtl'; import { createColorClasses, hostContext } from '@utils/theme'; import { config } from '../../global/config'; -import { getIonMode, getIonTheme } from '../../global/ionic-global'; +import { getIonMode } from '../../global/ionic-global'; import type { Color, Mode } from '../../interface'; -import type { ScrollBaseDetail, ScrollDetail } from './content-interface'; +import type { ScrollBaseDetail, ScrollDetail } from './content.interfaces'; /** * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component. - * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component. * * @slot - Content is placed in the scrollable area if provided without a slot. * @slot fixed - Should be used for fixed content that should not scroll. @@ -245,7 +244,7 @@ export class Content implements ComponentInterface { * The `hydrateDocument` function in `@stencil/core` will render the `ion-content`, but * `forceUpdate` will trigger another render, locking up the server. * - * TODO: Remove if STENCIL-834 determines Stencil will account for this. + * TODO(STENCIL-834): Remove if Stencil will account for this. */ if (Build.isBrowser) { if (this.fullscreen) { @@ -313,10 +312,9 @@ export class Content implements ComponentInterface { * scrollEl won't be defined yet with the custom elements build, so wait for it to load in. */ if (!this.scrollEl) { - await new Promise((resolve) => componentOnReady(this.el, resolve)); + await waitForComponent(this.el); } - - return Promise.resolve(this.scrollEl!); + return this.scrollEl!; } /** @@ -326,9 +324,9 @@ export class Content implements ComponentInterface { @Method() async getBackgroundElement(): Promise { if (!this.backgroundContentEl) { - await new Promise((resolve) => componentOnReady(this.el, resolve)); + await waitForComponent(this.el); } - return Promise.resolve(this.backgroundContentEl!); + return this.backgroundContentEl!; } /** @@ -349,7 +347,7 @@ export class Content implements ComponentInterface { @Method() async scrollToBottom(duration = 0): Promise { const scrollEl = await this.getScrollElement(); - const y = scrollEl!.scrollHeight - scrollEl!.clientHeight; + const y = scrollEl.scrollHeight - scrollEl.clientHeight; return this.scrollToPoint(undefined, y, duration); } @@ -454,10 +452,13 @@ export class Content implements ComponentInterface { render() { const { fixedSlotPlacement, inheritedAttributes, isMainContent, scrollX, scrollY, el } = this; const rtl = isRTL(el) ? 'rtl' : 'ltr'; - const theme = getIonTheme(this); const mode = getIonMode(this); const forceOverscroll = this.shouldForceOverscroll(mode); - const transitionShadow = theme === 'ios'; + /** + * The transition shadow effect is only animated by the iOS transition + * builder, so these elements are only rendered in iOS mode. + */ + const transitionShadow = mode === 'ios'; this.resize(); @@ -465,14 +466,13 @@ export class Content implements ComponentInterface { diff --git a/core/src/components/content/test/basic/index.html b/core/src/components/content/test/basic/index.html index 8c65e3b82e7..bcbfef3538e 100644 --- a/core/src/components/content/test/basic/index.html +++ b/core/src/components/content/test/basic/index.html @@ -26,7 +26,7 @@
    - +

    @@ -46,7 +46,7 @@ -

    -