mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
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>
This commit is contained in:
@@ -462,6 +462,7 @@ export class Content implements ComponentInterface {
|
||||
role={isMainContent ? 'main' : undefined}
|
||||
class={createColorClasses(this.color, {
|
||||
[mode]: true,
|
||||
'content-fullscreen': this.fullscreen,
|
||||
'content-sizing': hostContext('ion-popover', this.el),
|
||||
overscroll: forceOverscroll,
|
||||
[`content-${rtl}`]: true,
|
||||
|
||||
@@ -13,5 +13,38 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
|
||||
|
||||
await expect(page).toHaveScreenshot(screenshot(`content-fullscreen`));
|
||||
});
|
||||
|
||||
/**
|
||||
* The content-fullscreen class is added when fullscreen is true. The
|
||||
* fullscreen attribute is not reflected in Angular, Vue, or React, so
|
||||
* the class is needed for users to create custom themes.
|
||||
*/
|
||||
test('should have content-fullscreen class when fullscreen is true', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-content fullscreen>
|
||||
<p>Hello</p>
|
||||
</ion-content>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const content = page.locator('ion-content');
|
||||
await expect(content).toHaveClass(/content-fullscreen/);
|
||||
});
|
||||
|
||||
test('should not have content-fullscreen class when fullscreen is false', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-content>
|
||||
<p>Hello</p>
|
||||
</ion-content>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const content = page.locator('ion-content');
|
||||
await expect(content).not.toHaveClass(/content-fullscreen/);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user