Hopp til innhold
Aksel

Grunnleggende

Endringslogg

År
Kategori
Januar 2026

  • Kode. 15. januar 2026

    Versjon 7.40.0

    @navikt/aksel-icons

    • Icons: New icon MagnifyingGlassCheckmark (#4489)

    @navikt/ds-react

    • DatePicker/MonthPicker: Remove role=dialog from popover (#4463)

  • Kode. 14. januar 2026

    Versjon 7.39.1

    @navikt/ds-react

    • Dialog: Removed 'aria-expanded' from Dialog.Trigger. (#4478)

    @navikt/ds-css

    • Modal, Dialog: Handle scroll for extreme zoom-levels better. (#4488)

  • Kode. 12. januar 2026

    Versjon 7.39.0

    @navikt/ds-react

    • LocalAlert, InfoCard: Reduced default header height. (91f3f8a)
    • GlobalAlert: Reduced default header height and added centered content prop. (#4476)
    • ReadMore: Removed tabIndex 0 from content. (#4464)

    @navikt/ds-css

    • LocalAlert, InfoCard: Reduced default header height. (91f3f8a)
    • GlobalAlert: Reduced default header height and added centered content prop. (#4476)
    • Dialog: Handle SR-only elements inside Dialog.Body better. Moved elements in Footer to flex-end. (#4457)
    • Darkside: ExpansionCardContent typography is no longer affected by 'app-color'. (#4460)
    • ReadMore: Removed focus styling for content, reverting #4116. (#4464)

  • Kode. 8. januar 2026

    Versjon 7.38.0

    @navikt/ds-react

    • Dialog: Now interacts better with Modal and Datepicker. (#4455)
    • ActionMenu: Trigger handles click while inside web-component better. (#4428)
    • Internal: Updated mergedRef-utility. (#4434)

    @navikt/ds-css

    • Dialog: Fixed z-index issue with backdrop. (#4455)
    • Dialog: Now has border in light-mode. (#4452)

    @navikt/aksel

    • CLI: Now has interactive codemod-selection for all major-versions. (#4427)
    • CLI: Updated codemod 'v8-primitive-spacing' to migrate HGrid-component. (d631eef)

  • Dokumentasjon. 5. januar 2026

    Dialog er lansert!

    Fra versjon 7.37.0 er den nye Dialog-komponenten tilgjengelig 🎉

    Dokumentasjon

    Hva er Dialog?

    Dialog er et midlertidig vindu som åpnes på siden. Dialogen fanger brukerens oppmerksomhet og fokus, samtidig som konteksten til nettsiden beholdes. Den er nyttig når brukeren må ta stilling til informasjon eller fokusere på en spesifikk oppgave.

    I praksis er dette en oppdatert og forbedret versjon av dagens Modal.

    Dialog versus Modal

    Dialog er ment som en ny og forbedret versjon av dagens Modal, og skal erstatte Modal 100% på sikt.

    • Fleksibel plassering: center, left, right, bottom og fullscreen.
    • Innebygd navngiving av Dialog ved bruk av Dialog.Title
    • Bedre fokushåndtering ved åpning/lukking.
    • Innebygd state-håndtering med Dialog.Trigger og Dialog.CloseTrigger.
    • Entry- og exit-animasjon.

    Dialog garanterer også open/close state, noe dagens Modal ikke gjør da nettlesere håndterer html-elementet <dialog /> ulikt.

    Bedre API

    Dialog kommer med et enklere API å forholde seg til, da komponenten er basert mer på komposisjon. Du trenger ikke selv håndtere open/close-state eller en ref.

    Modal
    <div>
      <Button onClick={() => ref.current?.showModal()}>Åpne modal</Button>
      <Modal ref={ref} header={{ heading: "Overskrift" }}>
        <Modal.Body>
          <BodyLong>>Body</BodyLong>
        </Modal.Body>
        <Modal.Footer>
          <Button type="button" onClick={() => ref.current?.close()}>
            Primær
          </Button>
          <Button
            type="button"
            variant="secondary"
            onClick={() => ref.current?.close()}
          >
            Sekundær
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
    Dialog
    <Dialog>
      <Dialog.Trigger>
        <Button>Åpne dialog</Button>
      </Dialog.Trigger>
      <Dialog.Popup>
        <Dialog.Header>
          <Dialog.Title>Overskrift</Dialog.Title>
          <Dialog.Description>En kort beskrivelse av dialogen.</Dialog.Description>
        </Dialog.Header>
        <Dialog.Body>
          <BodyLong>Body</BodyLong>
        </Dialog.Body>
        <Dialog.Footer>
          <Dialog.CloseTrigger>
            <Button>Primær</Button>
          </Dialog.CloseTrigger>
          <Dialog.CloseTrigger>
            <Button variant="secondary">Sekundær</Button>
          </Dialog.CloseTrigger>
        </Dialog.Footer>
      </Dialog.Popup>
    </Dialog>

  • Kode. 5. januar 2026

    Versjon 7.37.0

    @navikt/ds-react

    • Dialog: 🎉 New component Dialog. (#4262)
    • Internals: Update internal utilities. (#4432)
    • Internal: Updated internal createContext utility. (#4433)

    @navikt/ds-tokens

    • Tokens: Updated --ax-bg-overlay token. (#4262)

    @navikt/ds-css

    • Dialog: 🎉 New component Dialog. (#4262)