chore(#3844): Add runtime V1/V2 token toggle to PR playgrounds#3845
Conversation
❌ Deploy Preview for benji-docs-previews failed.
|
willcodeforcoffee
left a comment
There was a problem hiding this comment.
@twjeffery it doesn't seem to be working in Angular for me! 😭
daaffb4 to
9efc03e
Compare
@willcodeforcoffee Good catch. V2 was loading, but Angular's V1 styles were coming in after and overriding it. Should be fixed now so V2 loads properly. Can you check again? |
9efc03e to
1fe604a
Compare
willcodeforcoffee
left a comment
There was a problem hiding this comment.
This works great now!
|
@twjeffery Can you rebase this before I test? There's discrepancies around routing that are different here than they are in dev, and I'm not sure how this will work in that code. |
1fe604a to
0049200
Compare
|
Preview removedAll preview folders cleaned from gh-pages branch. |
|
@twjeffery bug3625.tsx still loads a constant v2 token, so it would overwrite it if v1 tokens were selected. |
0049200 to
474bbc9
Compare
|
@ArakTaiRoth I removed the per-page V2 from bug3625.tsx. Should be under the toggle's control now. |
474bbc9 to
d655173
Compare
Replaces the comment-out-the-import workflow with a "Switch to V1/V2 tokens" item in the side menu of both the React and Angular playgrounds. Default is V2. Mode persists per-tab via sessionStorage, and ?tokens=v1 in the URL overrides by link. Also removes the per-page useEffect / ngOnInit token injections on the six React pages and three Angular pages that were using them, along with the :root stylesheet-rule-removal hack on feat3229. All redundant under the runtime toggle. No library code touched. Playground infrastructure only.
d655173 to
c2c76cf
Compare
|
🎉 This PR is included in version 2.2.0-dev.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
|
🎉 This PR is included in version 7.2.0-dev.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
|
🎉 This PR is included in version 5.2.0-dev.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Before (the change)
Testing a PR in both V1 and V2 tokens meant commenting out the V2 import in
app.tsxor dropping auseEffectinjection on the page you're testing. Easy to forget which mode you were in, and no way to compare side by side without restarting.After (the change)
A "Switch to V1 tokens" / "Switch to V2 tokens" item in the side menu of the React and Angular playgrounds flips tokens on click. Mode persists per-tab via
sessionStorage, and?tokens=v1in the URL overrides if you want a specific mode by link. Default is V2, unchanged from the current global default ondev.Also cleaned up the per-page
useEffect/ngOnInittoken injections (6 React pages, 3 Angular) since the toggle makes them redundant. The:rootstylesheet-rule-removal hack onfeat3229is gone too, replaced by a "V2 link always last in<head>" invariant in the new helper module.No library code touched. Playground infrastructure only.
Fixes #3844.
Steps needed to test
npm run serve:prs:react. Side menu shows "Switch to V1 tokens" as a secondary item (V2 is the default)./features/3344. Click the toggle. Styles flip to V1 immediately, no refresh needed. Click again to return to V2./features/3229. Verify MenuButton renders correctly in both V1 and V2. This page used to carry a:root-rule-removal hack that has been removed.sessionStoragekeeps your choice. Open a second tab to confirm it defaults to V2 independently.?tokens=v1to any URL. Page loads in V1 regardless of sessionStorage.npm run serve:prs:angular).