Skip to content

Commit 3129565

Browse files
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 <[email protected]>
1 parent 39a0be8 commit 3129565

File tree

1 file changed

+11
-3
lines changed

1 file changed

+11
-3
lines changed

core/scripts/testing/scripts.js

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,11 +57,19 @@
5757
* Values can be `light`, `dark`, `high-contrast`,
5858
* or `high-contrast-dark`. Default to `light` for tests.
5959
*/
60-
const paletteQuery = window.location.search.match(/palette=([a-z]+)/);
61-
const paletteHash = window.location.hash.match(/palette=([a-z]+)/);
60+
const validPalettes = ['light', 'dark', 'high-contrast', 'high-contrast-dark'];
61+
const paletteQuery = window.location.search.match(/palette=([a-z-]+)/);
62+
const paletteHash = window.location.hash.match(/palette=([a-z-]+)/);
6263
const darkClass = document.body?.classList.contains('ion-palette-dark') ? 'dark' : null;
64+
const highContrastClass = document.body?.classList.contains('ion-palette-high-contrast') ? 'high-contrast' : null;
65+
const highContrastDarkClass = darkClass && highContrastClass ? 'high-contrast-dark' : null;
6366

64-
const paletteName = paletteQuery?.[1] || paletteHash?.[1] || darkClass || 'light';
67+
let paletteName = paletteQuery?.[1] || paletteHash?.[1] || highContrastDarkClass || darkClass || highContrastClass || 'light';
68+
69+
if (!validPalettes.includes(paletteName)) {
70+
console.warn(`Invalid palette name: '${paletteName}'. Falling back to 'light' palette.`);
71+
paletteName = 'light';
72+
}
6573

6674
if (paletteName !== 'light') {
6775
const linkTag = document.createElement('link');

0 commit comments

Comments
 (0)