🚨Breaking: ny forenklet useId - #6337
Open
lmfaole wants to merge 1 commit into
Open
Conversation
Collaborator
|
Hei, @lmfaole! Takk for at du bidrar til Jøkul! 🙌
Hvis du lurer på hvordan du kommer i gang med noe av dette, er det bare å spørre oss i Jøkul-teamet om hjelp! Tagg oss i en kommentar her, eller spør oss på Teams. |
Collaborator
|
✅ Forhåndsvisning: https://fremtind.github.io/jokul/preview/breaking/update-useid/ Forhåndsvisningen blir tilgjengelig innen et par minutter. Den fjernes automatisk når pull requesten lukkes. |
fremtind-bot
added a commit
that referenced
this pull request
Jul 31, 2026
Contributor
There was a problem hiding this comment.
Pull request overview
Denne PR-en oppdaterer Jøkul sin useId-hook til en ny, forenklet og ikke-deprecated signatur som bygger direkte på React sin useId, med mål om mer forutsigbar bruk (prefiks vs. “ferdig id”) og tryggere SSR/hydrering.
Changes:
- Endrer
useId-signatur tiluseId(prefix?: string, id?: string | null)og fjernergenerateSuffix. - Migrerer berørte komponenter til ny signatur og legger til tester for hooken.
- Legger til codemod-transform for migrering + changeset for major release.
Reviewed changes
Copilot reviewed 19 out of 20 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/jokul/src/hooks/useId/useId.ts | Ny useId(prefix?, id?)-implementasjon basert på React useId + oppdatert JSDoc. |
| packages/jokul/src/hooks/useId/useId.test.ts | Ny testdekning for useId-oppførsel (prefiks/id/unikhet/stabilitet). |
| packages/jokul/src/components/toggle-switch/ToggleSwitch.tsx | Migrert til ny useId("jkl-toggle-switch", id)-signatur. |
| packages/jokul/src/components/table/TablePagination.tsx | Migrert til ny useId("jkl-table-pagination", idProp)-signatur. |
| packages/jokul/src/components/system-message/SystemMessage.tsx | Migrert til ny useId("jkl-system-message", id)-signatur (begge callsites). |
| packages/jokul/src/components/select/Select.tsx | Migrert til ny useId("jkl-select", id)-signatur. |
| packages/jokul/src/components/radio-button/BaseRadioButton.tsx | Migrert til ny useId("jkl-radio-button", id)-signatur. |
| packages/jokul/src/components/number-input/styles/number-input.scss | Liten formatterings-/braces-endring. |
| packages/jokul/src/components/modal/useModal.ts | Migrert til ny useId("jkl-modal", idProp)-signatur. |
| packages/jokul/src/components/message/Message.tsx | Migrert til ny useId("jkl-message", id)-signatur (begge callsites). |
| packages/jokul/src/components/logo/LogoStamp.tsx | Migrert til ny useId("jkl-logo-stamp", id)-signatur. |
| packages/jokul/src/components/logo/Logo.tsx | Migrert til ny useId("jkl-logo", id)-signatur. |
| packages/jokul/src/components/input-group/InputGroup.tsx | Migrert hoved-id til ny signatur. |
| packages/jokul/src/components/input-group/FieldGroup.tsx | Migrert til ny useId("jkl-field-group", id)-signatur. |
| packages/jokul/src/components/combobox/Combobox.tsx | Migrert til ny useId("jkl-combobox", id)-signatur. |
| packages/jokul/src/components/checkbox/Checkbox.tsx | Migrert til ny useId("jkl-checkbox", id)-signatur. |
| packages/jokul/src/components/autosuggest/BaseAutosuggest.tsx | Migrert til ny signatur for både input- og label-id. |
| packages/jokul/codemods/transforms/use-id.mjs | Ny transform som migrerer gammel useId(..., { generateSuffix }) til ny signatur. |
| packages/jokul/codemods/import-paths.mjs | Kobler inn ny useId-transform (og ny register-with-mask-step) i codemod-pipelinen. |
| .changeset/long-maps-make.md | Changeset for major bump og migrerings-/SSR-notater. |
Comment on lines
+16
to
+17
| import { applyRegisterWithMaskTransforms } from "./transforms/register-with-mask.mjs"; | ||
| import { applyUseIdTransforms } from "./transforms/use-id.mjs"; |
Comment on lines
108
to
+116
| replacements: | ||
| direct.replacements + | ||
| beta.replacements + | ||
| webfontsRemoval.count + | ||
| fontFamily.count + | ||
| cssTokens.count + | ||
| tailwindColors.count + | ||
| expandablePanel.count, | ||
| useId.count, |
Comment on lines
+19
to
22
| // 1. Konsumentens egen id har alltid forrang. | ||
| if (id != null) { | ||
| return id; | ||
| } |
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.
useIdhar fått ny, forenklet signatur og er ikke lenger deprecated.Før:
useId(id?: string, options?: { generateSuffix?: boolean })Nå:
useId(prefix?: string, id?: string)Den nye signaturen speiler hvordan hooken faktisk brukes: du oppgir et lesbart
prefix, og eventuelt en fastidfra konsumenten som overstyrer den genererte verdien.useId()useId()(uendret)useId("jkl-prefix")useId("jkl-prefix")(uendret)useId(id || "jkl-prefix", { generateSuffix: !id })useId("jkl-prefix", id)useId(myId, { generateSuffix: false })useId(undefined, myId)generateSuffix-opsjonen er fjernet – skillet mellom «prefiks» og «ferdig id» uttrykkes nå via argumentposisjon i stedet for et flagg.Server-side rendering: Hooken bygger på Reacts innebygde
useId, som gir like ID-er på server og klient. Komponenter som bruker denne hooken – og Jøkul-komponenter som bygger på den (id,htmlFor,aria-describedby,aria-labelledbyosv.) – hydrerer nå uten «hydration mismatch»-advarsler i Next.js, Remix o.l. Tidligere kunne ulikt genererte ID-er føre til at koblingen mellom label/hjelpetekst og felt brøt ved hydrering, samt konsollvarsler.Merk: Formatet på de genererte ID-ene har endret seg (React bruker
«r0»-lignende verdier). Snapshot-tester eller CSS/selektorer som er avhengige av det gamle ID-formatet må oppdateres.Endringen dekkes av codemoden:
pnpm exec jokul codemod.