mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-12-19 05:19:42 +08:00
3129565e4e
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>
89 lines
3.2 KiB
JavaScript
89 lines
3.2 KiB
JavaScript
/**
|
|
* 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) {
|
|
const style = document.createElement('style');
|
|
style.innerHTML = `
|
|
* {
|
|
caret-color: transparent !important;
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
}
|
|
|
|
/**
|
|
* 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.
|
|
*/
|
|
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;
|
|
const highContrastClass = document.body?.classList.contains('ion-palette-high-contrast') ? 'high-contrast' : null;
|
|
const highContrastDarkClass = darkClass && highContrastClass ? 'high-contrast-dark' : null;
|
|
|
|
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') {
|
|
const linkTag = document.createElement('link');
|
|
linkTag.setAttribute('rel', 'stylesheet');
|
|
linkTag.setAttribute('type', 'text/css');
|
|
linkTag.setAttribute('href', `/css/palettes/${paletteName}.always.css`);
|
|
document.head.appendChild(linkTag);
|
|
}
|
|
|
|
window.Ionic = window.Ionic || {};
|
|
window.Ionic.config = window.Ionic.config || {};
|
|
|
|
window.addEventListener('appload', () => {
|
|
window.testAppLoaded = true;
|
|
})
|
|
})();
|