chore(): add updated snapshots

fix(header&content): lint-fix
feat(modal): Adding same modal variable values to header and content when inside modal
2026-03-13 10:22:08 +08:00 · 2025-06-16 23:55:26 +00:00 · 2025-06-17 00:36:20 +01:00 · 2025-06-16 17:21:34 +01:00 · 2025-06-16 10:59:35 +01:00
7 changed files with 46 additions and 674 deletions
--- a/core/api.txt
+++ b/core/api.txt
@@ -667,15 +667,33 @@ ion-content,method,scrollToTop,scrollToTop(duration?: number) => Promise<void>
 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,--background,ionic
+ion-content,css-prop,--background,ios
+ion-content,css-prop,--background,md
+ion-content,css-prop,--color,ionic
+ion-content,css-prop,--color,ios
+ion-content,css-prop,--color,md
+ion-content,css-prop,--keyboard-offset,ionic
+ion-content,css-prop,--keyboard-offset,ios
+ion-content,css-prop,--keyboard-offset,md
+ion-content,css-prop,--offset-bottom,ionic
+ion-content,css-prop,--offset-bottom,ios
+ion-content,css-prop,--offset-bottom,md
+ion-content,css-prop,--offset-top,ionic
+ion-content,css-prop,--offset-top,ios
+ion-content,css-prop,--offset-top,md
+ion-content,css-prop,--padding-bottom,ionic
+ion-content,css-prop,--padding-bottom,ios
+ion-content,css-prop,--padding-bottom,md
+ion-content,css-prop,--padding-end,ionic
+ion-content,css-prop,--padding-end,ios
+ion-content,css-prop,--padding-end,md
+ion-content,css-prop,--padding-start,ionic
+ion-content,css-prop,--padding-start,ios
+ion-content,css-prop,--padding-start,md
+ion-content,css-prop,--padding-top,ionic
+ion-content,css-prop,--padding-top,ios
+ion-content,css-prop,--padding-top,md
 ion-content,part,background
 ion-content,part,scroll

--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
--- a/core/src/components/content/content.ionic.scss
+++ b/core/src/components/content/content.ionic.scss
@@ -0,0 +1,8 @@
+@import "./content.scss";
+
+// Ionic Content
+// --------------------------------------------------
+
+:host(.in-modal) {
+  --background: var(--ion-bg-surface-default, var(--ion-primitives-base-white));
+}
--- a/core/src/components/content/content.tsx
+++ b/core/src/components/content/content.tsx
@@ -24,8 +24,12 @@ import type { ScrollBaseDetail, ScrollDetail } from './content-interface';
 */
@Component({
  tag: 'ion-content',
-  styleUrl: 'content.scss',
  shadow: true,
+  styleUrls: {
+    ios: 'content.scss',
+    md: 'content.scss',
+    ionic: 'content.ionic.scss',
+  },
 })
 export class Content implements ComponentInterface {
  private watchDog: ReturnType<typeof setInterval> | null = null;
@@ -458,6 +462,7 @@ export class Content implements ComponentInterface {
          'content-sizing': hostContext('ion-popover', this.el),
          overscroll: forceOverscroll,
          [`content-${rtl}`]: true,
+          'in-modal': hostContext('ion-modal', this.el),
        })}
        style={{
          '--offset-top': `${this.cTop}px`,
--- a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/header/header.ionic.scss
+++ b/core/src/components/header/header.ionic.scss
@@ -11,6 +11,10 @@ ion-header {
  &.header-divider {
    border-bottom: globals.$ion-border-size-025 globals.$ion-border-style-solid globals.$ion-primitives-neutral-300;
  }
+
+  &.in-modal {
+    --background: var(--ion-bg-surface-default, var(--ion-primitives-base-white));
+  }
 }

 ion-toolbar + ion-toolbar {
--- a/core/src/components/header/header.tsx
+++ b/core/src/components/header/header.tsx
@@ -232,6 +232,7 @@ export class Header implements ComponentInterface {
          // Used internally for styling
          [`header-${theme}`]: true,

+          'in-modal': hostContext('ion-modal', this.el),
          [`header-translucent`]: this.translucent,
          [`header-collapse-${collapse}`]: true,
          [`header-translucent-${theme}`]: this.translucent,
Author	SHA1	Message	Date
ionitron	415facb24b	chore(): add updated snapshots	2025-06-16 23:55:26 +00:00
José Rio	4a2708f10a	fix(header&content): lint-fix	2025-06-17 00:36:20 +01:00
José Rio	239142f0f2	feat(modal): Adding same modal variable values to header and content when inside modal	2025-06-16 17:21:34 +01:00
José Rio	407f726e1b	feat(modal): ensure header and content background color is inherit from modal	2025-06-16 10:59:35 +01:00