Skip to content

Commit 4aaece0

Browse files
brandyscarneybrandyscarney
authored
feat(card): convert card-content to shadow DOM (#30759)
Issue number: internal --------- ## What is the current behavior? Card content has no encapsulation. ## What is the new behavior? Converted `ion-card-content` to Shadow DOM which improves consistency among components & CSP compatibility. ## Does this introduce a breaking change? - [x] Yes - [ ] No BREAKING CHANGE: The `ion-card-content` component has been updated to Shadow DOM. With this update, all card-related components now use Shadow DOM for style encapsulation. There should not be any breaking changes related to targeting inner elements since `ion-card-content` does not have any internal elements of its own. However, some user styles may break due to the removal of the `card-content-{mode}` class or changes in selector specificity. The default styles for heading elements inside `ion-card-content` have been removed. If you need custom styling for headings, you can add your own CSS targeting these elements. For example: ```css ion-card-content h1 { margin-top: 0; margin-bottom: 2px; font-size: 1.5rem; } ion-card-content h2 { margin-top: 2px; margin-bottom: 2px; font-size: 1rem; } ion-card-content h3, ion-card-content h4, ion-card-content h5, ion-card-content h6 { margin-top: 2px; margin-bottom: 2px; font-size: 0.875rem; } ``` --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
1 parent 17b8468 commit 4aaece0

17 files changed

+74
-105
lines changed

‎BREAKING.md‎

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,35 @@ This is a comprehensive list of the breaking changes introduced in the major ver
2828

2929
<h4 id="version-9x-card">Card</h4>
3030

31-
- The `border-radius` of the `ios` and `md` card now defaults to `14px` and `12px` instead of `8px` and `4px`, respectively, in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"soft"`, or override the `--border-radius` CSS variable to specify a different value.
31+
- **ion-card**: The `border-radius` of the `ios` and `md` card now defaults to `14px` and `12px` instead of `8px` and `4px`, respectively, in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"soft"`, or override the `--border-radius` CSS variable to specify a different value.
32+
33+
- **ion-card-content**: The `ion-card-content` component has been updated to Shadow DOM. With this update, all card-related components now use Shadow DOM for style encapsulation. The default styles for heading elements inside `ion-card-content` have been removed. If you need custom styling for headings, you can add your own CSS targeting these elements. For example:
34+
35+
```css
36+
ion-card-content h1 {
37+
margin-top: 0;
38+
margin-bottom: 2px;
39+
40+
font-size: 1.5rem;
41+
}
42+
43+
ion-card-content h2 {
44+
margin-top: 2px;
45+
margin-bottom: 2px;
46+
47+
font-size: 1rem;
48+
}
49+
50+
ion-card-content h3,
51+
ion-card-content h4,
52+
ion-card-content h5,
53+
ion-card-content h6 {
54+
margin-top: 2px;
55+
margin-bottom: 2px;
56+
57+
font-size: 0.875rem;
58+
}
59+
```
3260

3361
<h4 id="version-9x-chip">Chip</h4>
3462

@@ -47,6 +75,7 @@ Additionally, the `radio-group-wrapper` div element has been removed, causing sl
4775
<h5>Example 1: Swap two columns</h5>
4876

4977
**Version up to 8.x**
78+
5079
```html
5180
<ion-grid>
5281
<ion-row>
@@ -56,7 +85,9 @@ Additionally, the `radio-group-wrapper` div element has been removed, causing sl
5685
</ion-row>
5786
</ion-grid>
5887
```
88+
5989
**Version 9.x+**
90+
6091
```html
6192
<ion-grid>
6293
<ion-row>
@@ -68,9 +99,11 @@ Additionally, the `radio-group-wrapper` div element has been removed, causing sl
6899
```
69100

70101
<h5>Example 2: Reorder columns with specific sizes</h5>
102+
71103
To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `size="3" pull="9"`:
72104

73105
**Version up to 8.x**
106+
74107
```html
75108
<ion-grid>
76109
<ion-row>
@@ -79,7 +112,9 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
79112
</ion-row>
80113
</ion-grid>
81114
```
115+
82116
**Version 9.x+**
117+
83118
```html
84119
<ion-grid>
85120
<ion-row>
@@ -88,7 +123,9 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
88123
</ion-row>
89124
</ion-grid>
90125
```
126+
91127
<h5>Example 3: Push</h5>
128+
92129
```html
93130
<ion-grid>
94131
<ion-row>
@@ -101,7 +138,9 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
101138
</ion-row>
102139
</ion-grid>
103140
```
141+
104142
**Version 9.x+**
143+
105144
```html
106145
<ion-grid>
107146
<ion-row>
@@ -116,6 +155,7 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
116155
```
117156

118157
<h5>Example 4: Push and Pull</h5>
158+
119159
```html
120160
<ion-grid>
121161
<ion-row>
@@ -128,7 +168,9 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
128168
</ion-row>
129169
</ion-grid>
130170
```
171+
131172
**Version 9.x+**
173+
132174
```html
133175
<ion-grid>
134176
<ion-row>
@@ -140,4 +182,4 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
140182
</ion-col>
141183
</ion-row>
142184
</ion-grid>
143-
```
185+
```

‎core/api.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -504,7 +504,7 @@ ion-card,css-prop,--color,ios
504504
ion-card,css-prop,--color,md
505505
ion-card,part,native
506506

507-
ion-card-content,none
507+
ion-card-content,shadow
508508
ion-card-content,prop,mode,"ios" | "md",undefined,false,false
509509
ion-card-content,prop,theme,"ios" | "md" | "ionic",undefined,false,false
510510

‎core/src/components/card-content/card-content.common.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Card Content
22
// --------------------------------------------------
33

4-
ion-card-content {
4+
:host {
55
position: relative;
66
}

‎core/src/components/card-content/card-content.ionic.scss‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
// Ionic Card Content
55
// --------------------------------------------------
66

7-
.card-content-ionic {
7+
:host {
88
@include globals.padding(globals.$ion-space-400);
99
@include globals.typography(globals.$ion-body-md-regular);
1010

@@ -13,12 +13,8 @@
1313
flex-direction: column;
1414

1515
gap: globals.$ion-space-400;
16-
17-
img {
18-
@include globals.margin(globals.$ion-space-200, 0, globals.$ion-space-200, 0);
19-
}
2016
}
2117

22-
ion-card-header + .card-content-ionic {
23-
padding-top: 0;
18+
::slotted(img) {
19+
@include globals.margin(globals.$ion-space-200, 0, globals.$ion-space-200, 0);
2420
}

‎core/src/components/card-content/card-content.ios.scss‎

Lines changed: 5 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -4,44 +4,16 @@
44
// iOS Card Header
55
// --------------------------------------------------
66

7-
.card-content-ios {
7+
:host {
88
@include padding($card-ios-padding-top, $card-ios-padding-end, $card-ios-padding-bottom, $card-ios-padding-start);
99

1010
font-size: $card-ios-font-size;
1111

1212
line-height: 1.4;
13-
14-
h1 {
15-
@include margin(0, 0, 2px);
16-
17-
font-size: dynamic-font(24px);
18-
font-weight: normal;
19-
}
20-
21-
h2 {
22-
@include margin(2px, 0);
23-
24-
font-size: dynamic-font(16px);
25-
font-weight: normal;
26-
}
27-
28-
h3,
29-
h4,
30-
h5,
31-
h6 {
32-
@include margin(2px, 0);
33-
34-
font-size: dynamic-font(14px);
35-
font-weight: normal;
36-
}
37-
38-
p {
39-
@include margin(0, 0, 2px);
40-
41-
font-size: dynamic-font(14px);
42-
}
4313
}
4414

45-
ion-card-header + .card-content-ios {
46-
padding-top: 0;
15+
::slotted(p) {
16+
@include margin(0, 0, 2px);
17+
18+
font-size: dynamic-font(14px);
4719
}

‎core/src/components/card-content/card-content.md.scss‎

Lines changed: 7 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -4,47 +4,19 @@
44
// Material Design Card Content
55
// --------------------------------------------------
66

7-
.card-content-md {
7+
:host {
88
@include padding($card-md-padding-top, $card-md-padding-end, $card-md-padding-bottom, $card-md-padding-start);
99

1010
font-size: $card-md-font-size;
1111

1212
line-height: $card-md-line-height;
13+
}
1314

14-
h1 {
15-
@include margin(0, 0, 2px);
16-
17-
font-size: dynamic-font(24px);
18-
font-weight: normal;
19-
}
20-
21-
h2 {
22-
@include margin(2px, 0);
23-
24-
font-size: dynamic-font(16px);
25-
font-weight: normal;
26-
}
27-
28-
h3,
29-
h4,
30-
h5,
31-
h6 {
32-
@include margin(2px, 0);
33-
34-
font-size: dynamic-font(14px);
35-
font-weight: normal;
36-
}
37-
38-
p {
39-
@include margin(0, 0, 2px);
40-
41-
font-size: dynamic-font(14px);
42-
font-weight: normal;
15+
::slotted(p) {
16+
@include margin(0, 0, 2px);
4317

44-
line-height: 1.5;
45-
}
46-
}
18+
font-size: dynamic-font(14px);
19+
font-weight: normal;
4720

48-
ion-card-header + .card-content-md {
49-
padding-top: 0;
21+
line-height: 1.5;
5022
}

‎core/src/components/card-content/card-content.native.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@
44
// Card Content
55
// --------------------------------------------------
66

7-
ion-card-content {
7+
:host {
88
display: block;
99
}

‎core/src/components/card-content/card-content.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { getIonTheme } from '../../global/ionic-global';
1414
md: 'card-content.md.scss',
1515
ionic: 'card-content.ionic.scss',
1616
},
17+
shadow: true,
1718
})
1819
export class CardContent implements ComponentInterface {
1920
render() {
@@ -22,11 +23,10 @@ export class CardContent implements ComponentInterface {
2223
<Host
2324
class={{
2425
[theme]: true,
25-
26-
// Used internally for styling
27-
[`card-content-${theme}`]: true,
2826
}}
29-
></Host>
27+
>
28+
<slot></slot>
29+
</Host>
3030
);
3131
}
3232
}

‎core/src/components/card/test/basic/card.e2e.ts‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -91,27 +91,6 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
9191
const card = page.locator('ion-card');
9292
await expect(card).toHaveScreenshot(screenshot(`card-color`));
9393
});
94-
test('headings should have correct size in card', async ({ page }) => {
95-
await page.setContent(
96-
`
97-
<ion-card>
98-
<ion-card-content>
99-
<h1>Heading 1</h1>
100-
<h2>Heading 2</h2>
101-
<h3>Heading 3</h3>
102-
<h4>Heading 4</h4>
103-
<h5>Heading 5</h5>
104-
<h6>Heading 6</h6>
105-
<p>Paragraph</p>
106-
</ion-card-content>
107-
</ion-card>
108-
`,
109-
config
110-
);
111-
112-
const card = page.locator('ion-card');
113-
await expect(card).toHaveScreenshot(screenshot(`card-headings`));
114-
});
11594
test('should render even without header or content elements', async ({ page }) => {
11695
await page.setContent(
11796
`

‎core/src/components/card/test/basic/card.e2e.ts-snapshots/card-headings-ios-ltr-Mobile-Chrome-linux.png‎

-7.17 KB
Binary file not shown.

0 commit comments

Comments
 (0)