Skip to content

Commit 0967a3e

Browse files
thetaPCthetaPC
committed
Merge branch 'ionic-modular' of github.com:ionic-team/ionic-framework into FW-6833
2 parents 85989fc + 52779dd commit 0967a3e

28 files changed

+931
-15
lines changed

‎core/scripts/testing/scripts.js‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
*/
2222

2323
const DEFAULT_THEME = 'md';
24+
const DEFAULT_PALETTE = 'light';
2425

2526
(function() {
2627

@@ -88,17 +89,33 @@ const DEFAULT_THEME = 'md';
8889
* or `high-contrast-dark`. Default to `light` for tests.
8990
*/
9091
const validPalettes = ['light', 'dark', 'high-contrast', 'high-contrast-dark'];
92+
93+
const configDarkMode = window.Ionic?.config?.customTheme?.palette?.dark?.enabled === 'always' ? 'dark' : null;
94+
const configHighContrastMode = window.Ionic?.config?.customTheme?.palette?.highContrast?.enabled === 'always' ? 'high-contrast' : null;
95+
const configHighContrastDarkMode = window.Ionic?.config?.customTheme?.palette?.highContrastDark?.enabled === 'always' ? 'high-contrast-dark' : null;
96+
/**
97+
* Ensure window.Ionic.config is defined before importing 'testing/scripts'
98+
* in the test HTML to properly initialize the palette configuration below.
99+
*
100+
* Example:
101+
* <script>
102+
* window.Ionic = { config: { customTheme: { palette: { ... } } } };
103+
* </script>
104+
* <script src="testing/scripts.js"></script>
105+
*/
106+
const configPalette = configDarkMode || configHighContrastMode || configHighContrastDarkMode;
91107
const paletteQuery = window.location.search.match(/palette=([a-z-]+)/);
92108
const paletteHash = window.location.hash.match(/palette=([a-z-]+)/);
93109
const darkClass = document.body?.classList.contains('ion-palette-dark') ? 'dark' : null;
94110
const highContrastClass = document.body?.classList.contains('ion-palette-high-contrast') ? 'high-contrast' : null;
95111
const highContrastDarkClass = darkClass && highContrastClass ? 'high-contrast-dark' : null;
112+
const paletteClass = highContrastDarkClass || highContrastClass || darkClass;
96113

97-
let paletteName = paletteQuery?.[1] || paletteHash?.[1] || highContrastDarkClass || darkClass || highContrastClass || 'light';
114+
let paletteName = configPalette || paletteQuery?.[1] || paletteHash?.[1] || paletteClass || DEFAULT_PALETTE;
98115

99116
if (!validPalettes.includes(paletteName)) {
100117
console.warn(`Invalid palette name: '${paletteName}'. Falling back to 'light' palette.`);
101-
paletteName = 'light';
118+
paletteName = DEFAULT_PALETTE;
102119
}
103120

104121
// Load theme tokens if the theme is valid
@@ -119,8 +136,15 @@ const DEFAULT_THEME = 'md';
119136

120137
// If a specific palette is requested, modify the palette structure
121138
// to set the enabled property to 'always'
139+
// TODO(FW-4004): Implement dark palette
122140
if (paletteName === 'dark' && theme.palette?.dark) {
123141
theme.palette.dark.enabled = 'always';
142+
// TODO(FW-4005): Implement high contrast palette
143+
} else if (paletteName === 'high-contrast' && theme.palette?.highContrast) {
144+
theme.palette.highContrast.enabled = 'always';
145+
// TODO(FW-4005): Implement high contrast dark palette
146+
} else if (paletteName === 'high-contrast-dark' && theme.palette?.highContrastDark) {
147+
theme.palette.highContrastDark.enabled = 'always';
124148
}
125149

126150
// Apply the theme tokens to Ionic config

‎core/src/components/modal/test/dark-mode/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
<!-- TODO(FW-4004): Remove page and test it through the basic page tests -->
2+
13
<!DOCTYPE html>
24
<html lang="en" dir="ltr">
35
<head>
@@ -10,6 +12,21 @@
1012
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
1113
<link href="../../../../../css/palettes/dark.always.css" rel="stylesheet" />
1214
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
15+
<script>
16+
// Need to be called before loading Ionic else
17+
// the scripts.js logic runs too early.
18+
window.Ionic = {
19+
config: {
20+
customTheme: {
21+
palette: {
22+
dark: {
23+
enabled: 'always',
24+
},
25+
},
26+
},
27+
},
28+
};
29+
</script>
1330
<script src="../../../../../scripts/testing/scripts.js"></script>
1431
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
1532
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>

‎core/src/components/toast/test/a11y/toast.e2e.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -236,7 +236,8 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
236236
*/
237237
configs({ directions: ['ltr'], palettes: ['high-contrast-dark', 'high-contrast'] }).forEach(
238238
({ title, config, screenshot }) => {
239-
test.describe(title('toast: high contrast: buttons'), () => {
239+
// TODO(FW-4005): Once high contrast themes are fully implemented in ionic modular, remove the skips from these tests
240+
test.describe.skip(title('toast: high contrast: buttons'), () => {
240241
test.beforeEach(async ({ page }) => {
241242
await page.setContent(
242243
`

‎core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-dark-Mobile-Chrome-linux.png‎

-34 Bytes
Loading

‎core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-dark-Mobile-Firefox-linux.png‎

11 Bytes
Loading

‎core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-dark-Mobile-Safari-linux.png‎

-12 Bytes
Loading

‎core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-dark-Mobile-Chrome-linux.png‎

-28 Bytes
Loading

‎core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-dark-Mobile-Firefox-linux.png‎

0 Bytes
Loading

‎core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-dark-Mobile-Safari-linux.png‎

-10 Bytes
Loading

‎core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-dark-Mobile-Chrome-linux.png‎

-17 Bytes
Loading

0 commit comments

Comments
 (0)