SIGN IN SIGN UP

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.

52433 0 1 TypeScript
/**
* This script is loaded in testing environments to set up the
* document based on URL parameters.
*
* Test pages (e.g., `chip/test/basic/index.html`) are set to use
* URL query parameters.
*
* Playwright test environments (e.g., `chip/test/basic/chip.e2e.ts`)
* are set based on whether `setContent` or `goto` has been used:
* - `setContent` uses URL hash parameters. Tests will break if
* query parameters are used.
* - `goto` uses URL query parameters.
*
* The following URL parameters are supported:
* - `rtl`: Set to `true` to enable right-to-left directionality.
* - `ionic:_testing`: Set to `true` to identify testing environments.
* - `ionic:mode`: Set to `ios` or `md` to load a specific mode.
* Defaults to `md`.
* - `palette`: Set to `light`, `dark`, `high-contrast`, or
* `high-contrast-dark` to load a specific palette. Defaults to `light`.
*/
(function() {
/**
* The `rtl` param is used to set the directionality of the
* document. This can be `true` or `false`.
*/
const isRTL = window.location.search.indexOf('rtl=true') > -1 || window.location.hash.indexOf('rtl=true') > -1;
if (isRTL) {
document.documentElement.setAttribute('dir', 'rtl');
}
/**
* The `ionic:_testing` param is used to identify testing
* environments.
*/
const isTestEnv = window.location.search.indexOf('ionic:_testing=true') > -1 || window.location.hash.indexOf('ionic:_testing=true') > -1;
if (isTestEnv) {
2019-09-25 18:12:57 +02:00
const style = document.createElement('style');
style.innerHTML = `
* {
caret-color: transparent !important;
}
`;
2019-09-25 18:12:57 +02:00
document.head.appendChild(style);
}
refactor(dark): use palettes through url queries in test pages (#29238) Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> If a dev wants to view a test page in dark mode, they have to manually add the styles. This can lead to a slowdown. Plus they can't use Playwright's `goto` to test both light and dark. In order to test dark mode with Playwright, the dev would need to use `setContent` instead of `goto`. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Dark mode can be added to any page by appending `palette=dark` to the URL. - The param will be used to add a link tag with the correct palette file. - Playwright will load the correct palette file when a dev uses `goto` and `{ themes: ['dark'] }` ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> I recommend using badge to try this out. It already has a `goto` in the basic tests.
2024-04-19 11:48:29 -07:00
/**
* The `palette` param is used to load a specific palette
* for the theme.
* The dark class will load the dark palette automatically
* if no palette is specified through the URL.
*
* Values can be `light`, `dark`, `high-contrast`,
* or `high-contrast-dark`. Default to `light` for tests.
refactor(dark): use palettes through url queries in test pages (#29238) Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> If a dev wants to view a test page in dark mode, they have to manually add the styles. This can lead to a slowdown. Plus they can't use Playwright's `goto` to test both light and dark. In order to test dark mode with Playwright, the dev would need to use `setContent` instead of `goto`. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Dark mode can be added to any page by appending `palette=dark` to the URL. - The param will be used to add a link tag with the correct palette file. - Playwright will load the correct palette file when a dev uses `goto` and `{ themes: ['dark'] }` ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> I recommend using badge to try this out. It already has a `goto` in the basic tests.
2024-04-19 11:48:29 -07:00
*/
test(scripts): update palette query (#30842) Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> `high-contrast` and `high-contrast-dark` palettes were not working when requested through a URL query or hash for a test page. This was due to the `match` not accepting hyphens so it would only save `high` which is not a valid palette. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updated `match` to accept hyphens - Added an error if an invalid palette is provided - Added a palette fallback if an invalid palette is provided - Added a class check for high contrast and high contrast dark ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> How to test: 1. Verify that `?palette=high-contrast`, `?palette=high-contrast-dark`, `#palette=high-contrast`, and `#palette=high-contrast-dark` render correctly (I recommend using [button basic page](https://ionic-framework-git-scripts-ionic1.vercel.app/src/components/button/test/basic/)) --------- Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
2025-12-08 12:23:53 -08:00
const validPalettes = ['light', 'dark', 'high-contrast', 'high-contrast-dark'];
const paletteQuery = window.location.search.match(/palette=([a-z-]+)/);
const paletteHash = window.location.hash.match(/palette=([a-z-]+)/);
const darkClass = document.body?.classList.contains('ion-palette-dark') ? 'dark' : null;
test(scripts): update palette query (#30842) Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> `high-contrast` and `high-contrast-dark` palettes were not working when requested through a URL query or hash for a test page. This was due to the `match` not accepting hyphens so it would only save `high` which is not a valid palette. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updated `match` to accept hyphens - Added an error if an invalid palette is provided - Added a palette fallback if an invalid palette is provided - Added a class check for high contrast and high contrast dark ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> How to test: 1. Verify that `?palette=high-contrast`, `?palette=high-contrast-dark`, `#palette=high-contrast`, and `#palette=high-contrast-dark` render correctly (I recommend using [button basic page](https://ionic-framework-git-scripts-ionic1.vercel.app/src/components/button/test/basic/)) --------- Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
2025-12-08 12:23:53 -08:00
const highContrastClass = document.body?.classList.contains('ion-palette-high-contrast') ? 'high-contrast' : null;
const highContrastDarkClass = darkClass && highContrastClass ? 'high-contrast-dark' : null;
test(scripts): update palette query (#30842) Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> `high-contrast` and `high-contrast-dark` palettes were not working when requested through a URL query or hash for a test page. This was due to the `match` not accepting hyphens so it would only save `high` which is not a valid palette. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updated `match` to accept hyphens - Added an error if an invalid palette is provided - Added a palette fallback if an invalid palette is provided - Added a class check for high contrast and high contrast dark ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> How to test: 1. Verify that `?palette=high-contrast`, `?palette=high-contrast-dark`, `#palette=high-contrast`, and `#palette=high-contrast-dark` render correctly (I recommend using [button basic page](https://ionic-framework-git-scripts-ionic1.vercel.app/src/components/button/test/basic/)) --------- Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
2025-12-08 12:23:53 -08:00
let paletteName = paletteQuery?.[1] || paletteHash?.[1] || highContrastDarkClass || darkClass || highContrastClass || 'light';
if (!validPalettes.includes(paletteName)) {
console.warn(`Invalid palette name: '${paletteName}'. Falling back to 'light' palette.`);
paletteName = 'light';
}
if (paletteName !== 'light') {
refactor(dark): use palettes through url queries in test pages (#29238) Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> If a dev wants to view a test page in dark mode, they have to manually add the styles. This can lead to a slowdown. Plus they can't use Playwright's `goto` to test both light and dark. In order to test dark mode with Playwright, the dev would need to use `setContent` instead of `goto`. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Dark mode can be added to any page by appending `palette=dark` to the URL. - The param will be used to add a link tag with the correct palette file. - Playwright will load the correct palette file when a dev uses `goto` and `{ themes: ['dark'] }` ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> I recommend using badge to try this out. It already has a `goto` in the basic tests.
2024-04-19 11:48:29 -07:00
const linkTag = document.createElement('link');
linkTag.setAttribute('rel', 'stylesheet');
linkTag.setAttribute('type', 'text/css');
linkTag.setAttribute('href', `/css/palettes/${paletteName}.always.css`);
refactor(dark): use palettes through url queries in test pages (#29238) Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> If a dev wants to view a test page in dark mode, they have to manually add the styles. This can lead to a slowdown. Plus they can't use Playwright's `goto` to test both light and dark. In order to test dark mode with Playwright, the dev would need to use `setContent` instead of `goto`. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Dark mode can be added to any page by appending `palette=dark` to the URL. - The param will be used to add a link tag with the correct palette file. - Playwright will load the correct palette file when a dev uses `goto` and `{ themes: ['dark'] }` ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> I recommend using badge to try this out. It already has a `goto` in the basic tests.
2024-04-19 11:48:29 -07:00
document.head.appendChild(linkTag);
}
window.Ionic = window.Ionic || {};
window.Ionic.config = window.Ionic.config || {};
window.addEventListener('appload', () => {
window.testAppLoaded = true;
})
})();