refactor(frontend): own Toggle natively, detach from gix#13165
Open
AntonioVentilii wants to merge 24 commits into
Open
refactor(frontend): own Toggle natively, detach from gix#13165AntonioVentilii wants to merge 24 commits into
AntonioVentilii wants to merge 24 commits into
Conversation
…util First step of detaching OISY from @dfinity/gix-components: copy the cross-cutting primitives that are used across configs/constants and many unrelated wizards (owned by no single component) into OISY's own lib, and rewire their imports off gix. - types/wizard.ts (WizardStep, WizardSteps) - types/progress-step.ts (ProgressStep, ProgressStepState) - types/event-modifiers.ts + utils/event-modifiers.utils.ts (preventDefault, stopPropagation) No new npm dependencies, no behavior change (types are erased; the two utils are identical). gix dependency stays in place until all components are migrated.
Second cross-cutting step of detaching from @dfinity/gix-components: bring the iOS device-detection helper into OISY's own device.utils. - add isNode() to env.utils (gix internal helper, needed by the guards) - add userAgent/isIPad/isIOS to device.utils, reusing OISY's existing isMobile - rewire the 9 isIOS consumers off gix Stateful gix singletons (theme.store, toasts.store) are intentionally NOT moved here: they must migrate atomically with their components and all readers/writers, so they belong to their respective component PRs.
…nteraction/overlay) Shared-style gate for detaching from @dfinity/gix-components. These 5 mixins have no OISY equivalent and are used by multiple gix components being brought in-house; vendoring them once here keeps the upcoming per-component PRs from each re-adding the same files. OISY's existing _media/_text/_button mixins are API-compatible with gix's, so those are reused as-is. Stacked on #13162. Partials are unused until the component PRs @use them.
First component brought fully in-house from @dfinity/gix-components as a
native OISY component (pilot for the rest of the migration).
- New $lib/components/ui/Toggle.svelte, converted to Svelte 5 (runes + a
typed onToggle callback prop instead of the legacy createEventDispatcher
'nnsToggle' event)
- Fold the former gix.scss override layer (div.toggle sizing/colors/breakpoints
and --toggle-disabled-opacity) directly into the component's own styles, so
we no longer hand-patch a third-party component from afar
- Native test id ('toggle' instead of 'gix-cmp-toggle')
- Rewire all 11 consumers + update the 7 event handlers and the affected test
Stacked on #13163.
Address review: preventDefault/stopPropagation no longer force an async boundary. The modifier call already ran synchronously before the await, but the async wrapper turned synchronous callback throws into floating rejections. Now we call and return the callback result, preserving synchronous error semantics while still supporting async callbacks (their promise is returned).
…tils' into av/gix-vendor-foundation-infra
…into av/gix-vendor-shared-mixins
…o av/gix-own-toggle
Address review: add unit tests for the device-detection helpers introduced when detaching isIOS from gix. isIPad/isIOS guard on isNode() (true in the Node test runtime), so env.utils.isNode is mocked to false to exercise the UA branching (iOS 12 iPad, iPadOS 13+ Macintosh+mobile, desktop Mac, iPhone/ iPod, non-iOS). Also cover isNode itself (present vs absent process).
…into av/gix-vendor-foundation-infra
…o av/gix-own-toggle
…into av/gix-vendor-shared-mixins
…o av/gix-own-toggle
Address review on the vendored mixin partials: - Remove the unused h1-h5 heading mixins from _fonts (no vendored component uses them; they referenced undefined --line-height-h* vars). - Add fallbacks for the CSS variables the still-used mixins reference but that OISY doesn't yet define globally (only via the gix override layer): --font-size-standard, --input-background-contrast, --focus-background-contrast, --toast-inverted-background(-contrast). Fallbacks use OISY's own tokens so the mixins emit valid CSS; the consuming component PRs will finalise the wiring.
…o av/gix-vendor-shared-mixins
…o av/gix-own-toggle
Reverse course on vendoring gix's styling mixins wholesale. _form/_overlay/
_fonts encoded gix's CSS-variable contract (vars OISY doesn't own), which is
not native. Drop them from the shared gate; the Input/Checkbox/Modal/Toast PRs
will reproduce that styling natively with OISY design tokens.
Keep only the self-contained, token-free helpers actually shared across
component bundles: display.inset and interaction.{tappable,initial,none}.
OISY's existing _media/_text/_button mixins continue to be reused as-is.
…o av/gix-own-toggle
|
✅ No security or compliance issues detected. Reviewed everything up to ed76cc8. Security Overview
Detected Code Changes
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR migrates the Toggle UI primitive off @dfinity/gix-components into a native Svelte 5 $lib/components/ui/Toggle.svelte, and rewires existing consumers/tests to use the in-house component and API.
Changes:
- Added a native
Toggle.sveltecomponent (Svelte 5 runes) and moved prior gix override styling into the component. - Updated multiple toggle consumers to import the local Toggle and switch from
on:nnsToggleto anonToggle(checked)callback prop. - Updated test selectors and removed the Toggle-specific global overrides from
gix.scss.
Reviewed changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| src/frontend/src/lib/components/ui/Toggle.svelte | New native Toggle component + folded-in styling from prior global overrides. |
| src/frontend/src/lib/styles/global/gix.scss | Removes Toggle-specific global overrides (now owned by the native component). |
| src/frontend/src/lib/components/tokens/ManageTokenToggle.svelte | Switches to local Toggle and migrates event wiring to onToggle. |
| src/frontend/src/icp/components/tokens/IcManageTokenToggle.svelte | Switches to local Toggle and migrates event wiring to onToggle. |
| src/frontend/src/lib/components/tokens/TokensZeroBalanceToggle.svelte | Switches to local Toggle and migrates event wiring to onToggle. |
| src/frontend/src/lib/components/tokens/TokensCategoryFilterToggle.svelte | Switches to local Toggle and migrates event wiring to onToggle. |
| src/frontend/src/lib/components/settings/Settings.svelte | Switches settings toggle to local Toggle and onToggle. |
| src/frontend/src/lib/components/settings/SettingsExperimentalFeatures.svelte | Switches feature toggles to local Toggle and onToggle. |
| src/frontend/src/lib/components/networks/ManageNetworkToggle.svelte | Switches to local Toggle and passes onToggle through. |
| src/frontend/src/lib/components/nfts/NftsShowSpamToggle.svelte | Switches to local Toggle import. |
| src/frontend/src/lib/components/nfts/NftsShowHiddenToggle.svelte | Switches to local Toggle import. |
| src/frontend/src/btc/components/tokens/BtcManageTokenToggle.svelte | Switches to local Toggle import. |
| src/frontend/src/sol/components/tokens/SolManageTokenToggle.svelte | Switches to local Toggle import. |
| src/frontend/src/tests/lib/components/tokens/EnableTokenToggle.spec.ts | Updates test id from gix-cmp-toggle to toggle. |
Two fixes on the native Toggle:
- The input used bind:checked (two-way) while consumers' handlers still flip
checked themselves (checked = !checked) — a double-toggle. Revert to gix's
one-way model (checked={checked} + onToggle(newValue)); consumers' existing
handlers do the flip exactly as before. Restores behavioral parity.
- The folded responsive overrides used theme(--breakpoint-*), which Tailwind
only resolves in global styles, not in a component's scoped <style> (broke
vite/lightningcss build). Inline the literal Tailwind values (1024px / 640px).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Motivation
Bring the gix
Togglefully in-house as a native OISY component — the pilot for migrating every component we use off@dfinity/gix-components(so gix can go into maintenance mode). This PR shows the pattern the rest of the fleet will follow. Stacked on #13163.Changes
$lib/components/ui/Toggle.svelte, written natively in Svelte 5: runes + a typedonToggle(checked)callback prop, replacing the legacycreateEventDispatcher/on:nnsToggleevent.gix.scssoverride layer for this component (div.togglesizing/colors/responsive breakpoints,--toggle-disabled-opacity) now lives in the component's own<style>. We no longer hand-patch a third-party component from a global stylesheet.toggleinstead ofgix-cmp-toggle).on:nnsTogglehandlers toonToggle; update the affected test.Tests
lint --max-warnings 0clean;checkclean (only the pre-existing unrelatedsol-instructions-systemerror on main)EnableTokenToggle,TokensCategoryFilterToggle(18),Settings,SettingsExperimentalFeatures(3) passReview focus (pattern decisions for the fleet)
$lib/components/ui/Toggle.svelte.onTogglecallback vs keeping the legacy event — does this API feel right for OISY?