From 53a795d759c36c194f7aeda01801edfeb4ba055a Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Tue, 28 Oct 2025 15:13:29 -0400 Subject: [PATCH 1/2] feat(card): convert card-content to shadow DOM --- core/api.txt | 4 ++-- core/src/components/card-content/card-content.common.scss | 2 +- core/src/components/card-content/card-content.ionic.scss | 6 +----- core/src/components/card-content/card-content.ios.scss | 6 +----- core/src/components/card-content/card-content.md.scss | 6 +----- core/src/components/card-content/card-content.native.scss | 2 +- core/src/components/card-content/card-content.tsx | 8 ++++---- core/src/css/core.scss | 4 ++++ 8 files changed, 15 insertions(+), 23 deletions(-) diff --git a/core/api.txt b/core/api.txt index e4597ef5934..e5b8c739316 100644 --- a/core/api.txt +++ b/core/api.txt @@ -179,7 +179,7 @@ ion-alert,css-prop,--width,ionic ion-alert,css-prop,--width,ios ion-alert,css-prop,--width,md -ion-app,none +ion-app,shadow ion-app,prop,mode,"ios" | "md",undefined,false,false ion-app,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-app,method,setFocus,setFocus(elements: HTMLElement[]) => Promise @@ -504,7 +504,7 @@ ion-card,css-prop,--color,ios ion-card,css-prop,--color,md ion-card,part,native -ion-card-content,none +ion-card-content,shadow ion-card-content,prop,mode,"ios" | "md",undefined,false,false ion-card-content,prop,theme,"ios" | "md" | "ionic",undefined,false,false diff --git a/core/src/components/card-content/card-content.common.scss b/core/src/components/card-content/card-content.common.scss index 499a6b5a87b..81bf1f72690 100644 --- a/core/src/components/card-content/card-content.common.scss +++ b/core/src/components/card-content/card-content.common.scss @@ -1,6 +1,6 @@ // Card Content // -------------------------------------------------- -ion-card-content { +:host { position: relative; } diff --git a/core/src/components/card-content/card-content.ionic.scss b/core/src/components/card-content/card-content.ionic.scss index 83504d47a12..4e91504ec96 100644 --- a/core/src/components/card-content/card-content.ionic.scss +++ b/core/src/components/card-content/card-content.ionic.scss @@ -4,7 +4,7 @@ // Ionic Card Content // -------------------------------------------------- -.card-content-ionic { +:host { @include globals.padding(globals.$ion-space-400); @include globals.typography(globals.$ion-body-md-regular); @@ -18,7 +18,3 @@ @include globals.margin(globals.$ion-space-200, 0, globals.$ion-space-200, 0); } } - -ion-card-header + .card-content-ionic { - padding-top: 0; -} diff --git a/core/src/components/card-content/card-content.ios.scss b/core/src/components/card-content/card-content.ios.scss index 0b772b9d45c..d8cafc28c18 100644 --- a/core/src/components/card-content/card-content.ios.scss +++ b/core/src/components/card-content/card-content.ios.scss @@ -4,7 +4,7 @@ // iOS Card Header // -------------------------------------------------- -.card-content-ios { +:host { @include padding($card-ios-padding-top, $card-ios-padding-end, $card-ios-padding-bottom, $card-ios-padding-start); font-size: $card-ios-font-size; @@ -41,7 +41,3 @@ font-size: dynamic-font(14px); } } - -ion-card-header + .card-content-ios { - padding-top: 0; -} diff --git a/core/src/components/card-content/card-content.md.scss b/core/src/components/card-content/card-content.md.scss index ed780fb8e4c..2de1cae70cb 100644 --- a/core/src/components/card-content/card-content.md.scss +++ b/core/src/components/card-content/card-content.md.scss @@ -4,7 +4,7 @@ // Material Design Card Content // -------------------------------------------------- -.card-content-md { +:host { @include padding($card-md-padding-top, $card-md-padding-end, $card-md-padding-bottom, $card-md-padding-start); font-size: $card-md-font-size; @@ -44,7 +44,3 @@ line-height: 1.5; } } - -ion-card-header + .card-content-md { - padding-top: 0; -} diff --git a/core/src/components/card-content/card-content.native.scss b/core/src/components/card-content/card-content.native.scss index 4bb2efe89d2..8db97f01fd5 100644 --- a/core/src/components/card-content/card-content.native.scss +++ b/core/src/components/card-content/card-content.native.scss @@ -4,6 +4,6 @@ // Card Content // -------------------------------------------------- -ion-card-content { +:host { display: block; } diff --git a/core/src/components/card-content/card-content.tsx b/core/src/components/card-content/card-content.tsx index e39bead08ae..56e8acb3b1b 100644 --- a/core/src/components/card-content/card-content.tsx +++ b/core/src/components/card-content/card-content.tsx @@ -14,6 +14,7 @@ import { getIonTheme } from '../../global/ionic-global'; md: 'card-content.md.scss', ionic: 'card-content.ionic.scss', }, + shadow: true, }) export class CardContent implements ComponentInterface { render() { @@ -22,11 +23,10 @@ export class CardContent implements ComponentInterface { + > + + ); } } diff --git a/core/src/css/core.scss b/core/src/css/core.scss index 3d7a727592e..328598d703c 100644 --- a/core/src/css/core.scss +++ b/core/src/css/core.scss @@ -424,3 +424,7 @@ h1[tabindex="-1"]:focus, overflow: hidden; } } + +ion-card-header + ion-card-content { + padding-top: 0; +} From 11d8e67bd00b7619c6eaa4801989a21141389081 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Tue, 28 Oct 2025 15:40:56 -0400 Subject: [PATCH 2/2] chore: remove change to app done during testing --- core/api.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/api.txt b/core/api.txt index e5b8c739316..38c1f188fc6 100644 --- a/core/api.txt +++ b/core/api.txt @@ -179,7 +179,7 @@ ion-alert,css-prop,--width,ionic ion-alert,css-prop,--width,ios ion-alert,css-prop,--width,md -ion-app,shadow +ion-app,none ion-app,prop,mode,"ios" | "md",undefined,false,false ion-app,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-app,method,setFocus,setFocus(elements: HTMLElement[]) => Promise