diff --git a/.changeset/old-months-grow.md b/.changeset/old-months-grow.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ b/.changeset/old-months-grow.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/.changeset/public-parts-jog.md b/.changeset/public-parts-jog.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ b/.changeset/public-parts-jog.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/.changeset/sandbox-sidebar-refresh.md b/.changeset/sandbox-sidebar-refresh.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ b/.changeset/sandbox-sidebar-refresh.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/clerk-js/sandbox/app.ts b/packages/clerk-js/sandbox/app.ts index a17147343c4..3a94d2a6c2d 100644 --- a/packages/clerk-js/sandbox/app.ts +++ b/packages/clerk-js/sandbox/app.ts @@ -186,7 +186,7 @@ function assertClerkIsLoaded(c: ClerkType | undefined): asserts c is ClerkType { function mountIndex(element: HTMLDivElement) { assertClerkIsLoaded(Clerk); const user = Clerk.user; - element.innerHTML = `
${JSON.stringify({ user }, null, 2)}
`; + element.innerHTML = `
${JSON.stringify({ user }, null, 2)}
`; } function mountOpenButton(element: HTMLDivElement, label: string, openFn: (props: any) => void, props: any) { @@ -301,8 +301,17 @@ async function initControls() { varFolder.addBinding(PARAMS, 'borderRadius').on('change', applyVariables); varFolder.addButton({ title: 'Reset' }).on('click', () => { Object.assign(PARAMS, VARIABLE_DEFAULTS); + for (const key of Object.keys(VARIABLE_DEFAULTS)) { + sessionStorage.removeItem(key); + } pane.refresh(); - applyVariables(); + const currentAppearance = Clerk.__internal_getOption('appearance') ?? {}; + void Clerk.__internal_updateProps({ + appearance: { + ...currentAppearance, + variables: undefined, + }, + }); }); // Options folder @@ -467,8 +476,11 @@ void (async () => { } const initialVariables: Record = {}; - for (const [key, def] of Object.entries(VARIABLE_DEFAULTS)) { - initialVariables[key] = sessionStorage.getItem(key) ?? def; + for (const key of Object.keys(VARIABLE_DEFAULTS)) { + const stored = sessionStorage.getItem(key); + if (stored !== null) { + initialVariables[key] = stored; + } } const initialLocale = sessionStorage.getItem('localization') ?? 'enUS'; @@ -479,7 +491,11 @@ void (async () => { signUpUrl: '/sign-up', ui: { ClerkUI: window.__internal_ClerkUICtor }, appearance: { - ...(initialTheme ? { theme: initialTheme } : { variables: initialVariables }), + ...(initialTheme + ? { theme: initialTheme } + : Object.keys(initialVariables).length > 0 + ? { variables: initialVariables } + : {}), ...(Object.keys(initialAppearanceOptions).length ? { options: initialAppearanceOptions } : {}), }, localization: l[initialLocale as keyof typeof l], diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html index 7e4f449be2b..4a26ca93991 100644 --- a/packages/clerk-js/sandbox/template.html +++ b/packages/clerk-js/sandbox/template.html @@ -1,5 +1,5 @@ - + clerk-js Sandbox @@ -7,14 +7,35 @@ name="viewport" content="width=device-width,initial-scale=1" /> + + + + +
-
+
- Sandbox + UI Component Sandbox
+
-
+ + + +