Skip to content

Commit d74b11b

Browse files
feat(content): add content-fullscreen class when fullscreen is true (#30926)
## What is the current behavior? Content does not reflect the `fullscreen` property or add a class when it is enabled, making it harder to style. ## What is the new behavior? - Adds `content-fullscreen` class to content when `fullscreen` is true - Adds an e2e test verifying the class is applied --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
1 parent fac1a66 commit d74b11b

File tree

2 files changed

+34
-0
lines changed

2 files changed

+34
-0
lines changed

core/src/components/content/content.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -462,6 +462,7 @@ export class Content implements ComponentInterface {
462462
role={isMainContent ? 'main' : undefined}
463463
class={createColorClasses(this.color, {
464464
[mode]: true,
465+
'content-fullscreen': this.fullscreen,
465466
'content-sizing': hostContext('ion-popover', this.el),
466467
overscroll: forceOverscroll,
467468
[`content-${rtl}`]: true,

core/src/components/content/test/fullscreen/content.e2e.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,38 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
1313

1414
await expect(page).toHaveScreenshot(screenshot(`content-fullscreen`));
1515
});
16+
17+
/**
18+
* The content-fullscreen class is added when fullscreen is true. The
19+
* fullscreen attribute is not reflected in Angular, Vue, or React, so
20+
* the class is needed for users to create custom themes.
21+
*/
22+
test('should have content-fullscreen class when fullscreen is true', async ({ page }) => {
23+
await page.setContent(
24+
`
25+
<ion-content fullscreen>
26+
<p>Hello</p>
27+
</ion-content>
28+
`,
29+
config
30+
);
31+
32+
const content = page.locator('ion-content');
33+
await expect(content).toHaveClass(/content-fullscreen/);
34+
});
35+
36+
test('should not have content-fullscreen class when fullscreen is false', async ({ page }) => {
37+
await page.setContent(
38+
`
39+
<ion-content>
40+
<p>Hello</p>
41+
</ion-content>
42+
`,
43+
config
44+
);
45+
46+
const content = page.locator('ion-content');
47+
await expect(content).not.toHaveClass(/content-fullscreen/);
48+
});
1649
});
1750
});

0 commit comments

Comments
 (0)