Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Grunnleggende

Endringslogg

År
Kategori
September 2025

  • Kode. 22. september 2025

    Versjon 7.31.0

    @navikt/ds-react

    • Table: Add 'onRowClick' callback-prop to allow for selecting rows by clicking the row itself. (#4107)
    • Combobox: Dropdown-element is now position='fixed', allowing for better placement on smaller screens and inside Modals. (#4106)
    • Darkside: Avoid empty aria-describedby in Radio and Checkbox (#4111)

    @navikt/ds-css

    • Combobox: Dropdown-element is now position='fixed', allowing for better placement on smaller screens and inside Modals. (#4106)
    • Darkside: Adjust visually-hidden typography css (#4103)
    • Darkside: Adjusted arrow on GuidePanel poster variant (#4101)

  • Kode. 12. september 2025

    Versjon 7.30.1

    @navikt/ds-react

    • Darkside: ExpansionCardContent now defaults to app-color defined in Theme, fixing a regression causing all content to be colored neutral. (#4075)
    • Darkside: Improved screen reader experience in Radio and Checkbox by moving description out of label (#4066)

    @navikt/ds-css

    • Darkside: Improved screen reader experience in Radio and Checkbox by moving description out of label (#4066)

  • Dokumentasjon. 10. september 2025

    FormSummary: EditLink flyttet

    <FormSummary.EditLink> skal nå være i bunnen, og plasseres i den nye subkomponenten <FormSummary.Footer>. Se eksemplene i dokumentasjonen eller diff.

    Dette er en mer naturlig plassering, siden man gjerne må lese igjennom svarene før man vet om de må endres.

  • Kode. 10. september 2025

    Versjon 7.30.0

    @navikt/ds-react

    • FormSummary: Changed FormSummary.Header-component to <div /> instead of <header />. (#4032)
    • FormSummary: Added new component <FormSummary.Footer />, we now require <FormSummary.EditLink /> to be placed in footer instead of header. (#4032)
    • Datepicker: Fix regression causing clickable weeknumber to have no applied styles in Darkside. (#4081)
    • Timeline: Adjusted type for onSelectPeriod() and fixed warning when using refs in React 19 (#4076)

    @navikt/ds-css

    • FormSummary: Changed FormSummary.Header-component to <div /> instead of <header />. (#4032)
    • FormSummary: Added new component <FormSummary.Footer />, we now require <FormSummary.EditLink /> to be placed in footer instead of header. (#4032)

  • Dokumentasjon. 5. september 2025

    Redaksjon som redaktør er kommet til Aksel

    Endelig slipper du å bli personlig nevnt når du skal skrive på Aksel! 🎉

    Men hvorfor gjorde vi dette da?

    • Folk flytter på seg! Dette er kanskje hovedgrunnen, noen bytter jo team, og noen slutter kanskje etc... hva skal da skje med eierskapet til disse artiklene? Jo, deler man eierskapet bør teamet/miljøet lett skjønne at det er deres ansvar!
    • Noen føler på stress med det å dele informasjon og kunnskap under eget navn. Dette skal ikke lenger hindre at god informasjon ikke blir delt!
    • Det er en terskel å redigere artikler andre har skrevet. Det er mye lettere å bidra når team og miljøer er avsendere.

    Har du tanker om noe du vil dele på Aksel? Bare ta kontakt! Aksel er ingenting uten deg! ❤️

  • Kode. 2. september 2025

    Versjon 7.29.1

    @navikt/ds-react

    • Checkbox, List: Updated SVG-usage to avoid using rem-values directly on width and height-attributes. (#4048)

    @navikt/ds-css

    • Checkbox, List: Updated SVG-usage to avoid using rem-values directly on width and height-attributes. (#4048)
    • Darkside: Fix styling for small readOnly checked Radio (#4051)
    • Checkbox: Fix styling for indeterminate state with description (#4051)
August 2025

  • Dokumentasjon. 26. august 2025

    Fremhevet

    Process - ny komponent 🎉

    En lenge etterlengtet komponent er endelig på plass i Aksel. Hils på Process 👋

    Denne komponenten skal hjelpe til med å visualisere prosesser. Både enkle og komplekse. Bruk den og utforsk hva som er mulig i kode og i Figma, eller les dokumentasjonen her. Som med alle nye komponenter setter vi veldig pris på testing og tilbakemelding. Lykke til!

  • Kode. 26. august 2025

    Versjon 7.29.0

    @navikt/aksel-icons

    • Icons: 🎉 New icons CheckmarkHeavy and PageBreak. (#4038)

    @navikt/ds-react

    • Stepper: Mark interactive-prop as deprecated. For completely static 'Steppers', consider using the new Process-component. (#4007)
    • LinkCard: Added new prop arrowPosition for centering the arrow if necessary. (#4021)
    • Process: 🎉 New component Process! The component consists of a vertical line of events where each event can contain information, actions, links or status indicators. You can find the documentation here 📝. (#3950)
    • ToggleGroup: Improved screen reader experience by using aria-labelledby instead of aria-describedby for the label (#4028)
    • Accordion: Mark headingSize as deprecated. (#3993)
    • Fieldset: Improved screen reader experience by using aria-labelledby for both legend and description (#4029)
    • Box: Fixed bug where darkside-css did not properly apply border-radius. (#4009)

    @navikt/ds-css

    • LinkCard: Added new prop arrowPosition for centering the arrow if necessary. (#4021)
    • Process: 🎉 New component Process! The component consists of a vertical line of events where each event can contain information, actions, links or status indicators. You can find the documentation here 📝. (#3950)
    • Darkside: Fix issue with focus outline on checkbox in expandable table row content (#3998)
    • Darkside: Fix arrow in Tooltip (#4018)

    @navikt/aksel

    • CLI: Codemods now only run on relevant files. This resolves cases where codemods for js/ts-files tried and failed to parse css/scss/less-files. (#4016)

  • Dokumentasjon. 20. august 2025

    ToggleGroup

    Vi har fjernet avsnittet "Egnet til skjemafilter" da vi ikke kan se at dette er et aktuelt brukstilfelle. Det betyr ikke at det ikke kan finnes unntak, men generelt er det RadioGroup som gjelder for skjemaer. Se den oppdaterte dokumentasjonen her.

  • Kode. 15. august 2025

    Versjon 7.28.1

    @navikt/ds-react

    • Form components: Improved a11y when using JSX in description (#3990)
    • Fieldset/CheckboxGroup/RadioGroup: Connect description to fieldset with aria-describedby (#3974)

  • Kode. 12. august 2025

    Versjon 7.28.0

    @navikt/ds-react

    • Types: Exported UseRangeDatepickerOptions and UseDatepickerOptions types from Datepicker hooks. (#3983)

    @navikt/aksel-icons

    • Icons: 🎉 New icons 'ArrowCirclepathReverse' and 'ArrowsAllDirections'. (#3979)

  • Kode. 11. august 2025

    Versjon 7.27.1

    @navikt/ds-css

    • Stepper: Increase size of circle from 28px to 32px to sync with new Process component. (#3968)

    @navikt/ds-react

    • Radio/Checkbox: 🐛 Fix issue where label was not announced by screen readers in Firefox (#3973)
    • Stepper: Increase size of circle from 28px to 32px to sync with new Process component. (#3968)

  • Kode. 8. august 2025

    Versjon 7.27.0

    @navikt/ds-tokens

    • Darkside: Using 'Theme' to set current color-theme now works when root-node does not set light or dark class. (#3961)

    @navikt/ds-css

    • Combobox: Focus styling did not check for :has selector-support correctly. (#3965)

    @navikt/ds-react

    • Darkside: Using 'Theme' to set current color-theme now works when root-node does not set light or dark class. (#3961)

    @navikt/aksel-icons

    • Icons: ChatAdd did not have 'currentColor' on parts of shape. (#3963)

  • Kode. 6. august 2025

    Versjon 7.26.0

    @navikt/aksel-icons

    • Icons: New icons 'ChatAdd' and 'Theme'. (#3958)

  • Kode. 5. august 2025

    Versjon 7.25.2

    @navikt/aksel

    • CLI: Codemods now respect filepath globs instead of ignoring some based on file-extension. (#3955)
Juli 2025

  • Kode. 4. juli 2025

    Versjon 7.25.1

    @navikt/ds-tokens

    • Darkside: Updated Meta-lime 300 and 400. (#3928)

    @navikt/ds-react

    • Modal: When open, now updates body with correct className. (#3922)
    • Search: Forward 'data-color' to SearchButton. (#3922)

  • Kode. 4. juli 2025

    Versjon 7.25.0

    @navikt/ds-css

    • FileUpload: Allow for custom buttons in FileUpload.Item. (#3906)
    • Table: Selected rows are now highlighted with outline. (#3898)
    • Chat: Removed ol > li semantics, replaced with 'div'. (#3904)

    @navikt/ds-react

    • FileUpload: Allow for custom buttons in FileUpload.Item. (#3906)
    • Chat: Removed ol > li semantics, replaced with 'div'. (#3904)

  • Dokumentasjon. 2. juli 2025

    Fremhevet

    Aksel-websiden er oppdatert til ny versjon

    Dette er nytt:

    • Nettsiden bruker 'Darkside' (siste versjon av Aksel). Darkside har nytt tokensystem og oppdaterte komponenter.
    • Nettsiden støtter nå light mode og dark mode.
    • Ny struktur for designsystemet. Alt er samlet under ett menypunkt.
    • Ny seksjon "Darkside" med dokumentasjon for siste versjon av Aksel.
    • Ny endringslogg

    Nettsiden bruker Darkside

    Aksel bruker nå siste versjon. Nytt tokensystem og farger er på plass. Samt oppdaterte og nye komponenter. Vi har samtidig oppdatert noe design som passer bedre med nye tokens.

    Dark mode

    Aksel har fått dark mode. Nå kan du trygt klikker rundt i Aksel på natta uten å forstyrre nabolaget med en lys webside 🤩

    Ny struktur for designsystemet

    Vi har gjort det letter å skjønne hva som er designsystem-delen av Aksel. Designsystem-innhold ligger nå under menypunktet Designsystemet. En oppdatert venstremeny gjør det enkelt å navigere innholdet.

    Ny seksjon "Darkside"

    Dokumentasjonen til ny versjon av Aksel er samlet under menygruppa "Darkside" i venstremenyen. Ta kontakt om det er dokumentasjon som mangler.

    Ny endringslogg

    Sist, men ikke minst. Vi har oppdatert endringsloggen! Den gamle endringsloggen viste kun oppdateringer fra Github. Nå vil vi også publisere oppdateringer fra design og dokumentasjon. Spesielt dokumentasjon er vi ganske gira på. Det er ikke så lett å få øye på endringer eller justeringer i dokumentasjonen. Når vi oppdaterer dokumentasjonen vil vi samtidig skrive hva som er endret i endringsloggen.

Juni 2025

  • Kode. 25. juni 2025

    Versjon 7.24.0

    @navikt/ds-css

    • LinkCard: 🎉 Added new component 'LinkCard'. (#3883)
    • Table: 🎉 Added prop 'stickyHeader', allowing header to remain sticky while scrolling in table. (#3893)
    • Forms: Added built-in scroll-margin to TextField, Textarea and Select. (#3897)
    • Switch: Size='small' are now visually comparable to radio and checkbox in the same size. (#3892)

    @navikt/ds-react

    • LinkCard: 🎉 Added new component 'LinkCard'. (#3883)
    • Table: 🎉 Added prop 'stickyHeader', allowing header to remain sticky while scrolling in table. (#3893)
    • Switch: Size='small' are now visually comparable to radio and checkbox in the same size. (#3892)

    @navikt/aksel-stylelint

    • Switch: Removed 'navds-switch__checkmark' css class. (#3892)

  • Kode. 23. juni 2025

    Versjon 7.23.2

    @navikt/ds-css

    • Darkside: Outline Tag in high-contrast mode had wrong text-color. (#3889)
    • Darkside: Update padding for all 'panel' type components. (#3864)
    • Form components: Fix edge case where description container would take up space when empty (#3866)

  • Kode. 17. juni 2025

    Versjon 7.23.1

    @navikt/ds-react

    • Darkside: Search now correctly respects 'clearButton'-prop when set to false. (#3854)

  • Kode. 16. juni 2025

    Versjon 7.23.0

    @navikt/ds-react

    • Datepicker: Upgraded 'react-day-picker' dependency to v9.7.0 from v9.6.1. (#3820)
    • Darkside: Renamed 'data-color-role' dynamic theme attribute to 'data-color'. (#3849)
    • Darkside: Using attribute 'data-color' with one of the built-in colors from 'AkselColorRole' now allows re-coloring most components. (#3849)
    • Darkside: Adding type '@navikt/ds-react/types/theme' to your local 'tsconfig.json' types-field allows autocomplete for all available color-palettes in attribute 'data-color'. You can extend 'CustomAkselColor'-type to use your own color-palettes. (#3849)
    • Darkside: All components has been updated to use 'data-color' attribute for coloring. As a side-effect, most component CSS is either updated or refactored. (#3849)
    • Timeline: Reverted regression that lead to 'aria-controls' being ignored when passed to Pin or Period. (#3828)
    • Timeline: Removed 'aria-haspopup' from pins and periods. (#3834)
    • ErrorSummary: Heading size is now 'xsmall' for non-medium sizes and remains 'small' when size='medium'. (#3806)

    @navikt/ds-css

    • Darkside: Renamed 'data-color-role' dynamic theme attribute to 'data-color'. (#3849)
    • Darkside: Using attribute 'data-color' with one of the built-in colors from 'AkselColorRole' now allows re-coloring most components. (#3849)
    • Darkside: All components has been updated to use 'data-color' attribute for coloring. As a side-effect, most component CSS is either updated or refactored. (#3849)
    • Tag: Outline-variant now uses bg-moderate, replacing bg-moderateA. (#3865)
    • Darkside: Fix icon size in small Tabs (#3850)
    • List: Fix issue with incorrect padding in Safari (#3850)

    @navikt/ds-tokens

    • Darkside: Renamed 'data-color-role' dynamic theme attribute to 'data-color'. (#3849)
    • Darkside: 'Accent' is now set as the default color palette in components when no other options are set. (#3849)

    @navikt/aksel-icons

    • Icons: 🎉 Added new icons 'SquareGrid' and 'SquareGridFill'. (#3851)
Mai 2025

  • Kode. 19. mai 2025

    Versjon 7.22.0

    @navikt/aksel

    • Darkside: Added migration-support for border-radius token update. (#3784)

    @navikt/ds-tailwind

    • Border-radius: Removed rounded-value based on aksel token-config. Use built-in values from tailwindcss as replacement Tailwindcss docs. (#3784)

    @navikt/ds-react

    • Box: Add support for new radius-tokens that will replace borderRadius-tokens when darkside is set as main. (#3784)
    • ConfirmationPanel: Now tagged as deprecated. See documentation for more information. (#3789)

    @navikt/ds-css

    • Darkside: Components now use new radius-tokens, replacing border-radius-tokens. (#3784)

    @navikt/ds-tokens

    • Border-radius: Add new radius-tokens that will replace border-radius-tokens. T-shirt sizing is replaced with numbers reflecting its value. --a-border-radius-medium is now --ax-radius-4. Until darkside-theming is mainlined, we will continue to support both new and legacy border-radius side by side. (#3784)

  • Kode. 6. mai 2025

    Versjon 7.21.1

    @navikt/ds-react

    • ExpansionCard: Omit onToggle from extending HTMLAttributes<HTMLDivElement> to avoid overlapping with popover api. (#3773)

    @navikt/ds-css

    • Timeline: Add focus-markings to Popover dialogs. (#3768)
April 2025

  • Kode. 30. april 2025

    Versjon 7.21.0

    @navikt/ds-react

    • Chat: Add 'toptextHeadingLevel'-prop to allow changing h-level based on semantics. (#3739)

    @navikt/ds-css

    • Darkside: Update Chips.Toggle hover-border. (#3738)

    @navikt/aksel-icons

    • Icons: New icon 'Cpu'. (#3740)

  • Kode. 11. april 2025

    Versjon 7.20.0

    @navikt/ds-react

    • Combobox: Use option-value as id instead of label. (#3735)
    • Timeline: Add placement-prop for periods for more fine-grained control over Popover-placement. (#3736)

    @navikt/ds-css

    • Combobox: Use option-value as id instead of label. (#3735)

  • Kode. 10. april 2025

    Versjon 7.19.1

    @navikt/ds-react

    • Darkside: Using Page-component would always give errors when using new Theme-component. (208adb8)

    @navikt/ds-css

    • Combobox: Singleselect selected value now uses the complete input-width when possible. (#3734)

  • Kode. 8. april 2025

    Versjon 7.19.0

    @navikt/ds-react

    • Darkside: <Theme />-component no longer defaults to light-theme className when no theme is provided. (#3720)

    @navikt/ds-css

    • Darkside: Togglegroup now has bg-input background. (#3715)
    • Combobox: Fix wrapping issue when ToggleListButton is hidden (#3727)

    @navikt/ds-tokens

    • Darkside: Update global 'meta-purple' color. (#3703)
Mars 2025

  • Kode. 28. mars 2025

    Versjon 7.18.0

    @navikt/ds-react

    • Darkside: Throw error if invalid Box-props are used with new Theme instead of warnings. (#3697)

    @navikt/ds-css

    • Table: Disabled expansion-rows now has same hover-effect as other rows. (#3702)

  • Kode. 19. mars 2025

    Versjon 7.17.4

    @navikt/ds-css

    • Modal: Updated animations for reduced movement. (#3671)

  • Kode. 13. mars 2025

    Versjon 7.17.3

    @navikt/ds-react

    • Datepicker: Fixed a bug where while ranged datepicker, setting from to undefined while to were defined did not allow selecting new dates. (#3655)

    @navikt/ds-css

    • Darkside: Synced padding with Figma. (#3651)

  • Kode. 11. mars 2025

    Versjon 7.17.2

    @navikt/ds-css

    • Darkside: Removed stacking backgrounds with transparency in Combobox. (e769eed)

  • Kode. 7. mars 2025

    Versjon 7.17.1

    @navikt/ds-css

    • ExpansionCard: Fixed bug where @media print would hide header content. (#3634)

  • Kode. 6. mars 2025

    Versjon 7.17.0

    @navikt/ds-react

    • List: aria-label and aria-labelledby is forwarded to list-element. (#3626)

  • Kode. 5. mars 2025

    Versjon 7.16.1

    @navikt/ds-react

    • React 19: Resolve unknown-type in Slot. (#3627)

  • Kode. 4. mars 2025

    Versjon 7.16.0

    @navikt/ds-css

    • Darkside: All classNames are now starts with .aksel instead of .navds. (#3586)

  • Kode. 3. mars 2025

    Versjon 7.15.0

    @navikt/aksel

    • CLI: Added primitives migration to new space-tokens. Run npx @navikt/aksel migration primitive-spacing to start migrating now. This update is supported for old and new (darkside) system. (#3597)
    • CLI: Added js/ts migration to new space-tokens. Run npx @navikt/aksel migration token-spacing-js to start migrating now. This update is supported for old and new (darkside) system. (#3597)
Februar 2025

  • Kode. 27. februar 2025

    Versjon 7.14.3

    @navikt/ds-css

    • Darkside: Changed outline-offset for tabpanel from -4px to -3px. (06fecf2)

  • Kode. 24. februar 2025

    Versjon 7.14.2

    @navikt/ds-tokens

    • Darkside: 💄 Bumped bg-raised token to neutral-200 in darkmode. (441d8b7)

  • Kode. 20. februar 2025

    Versjon 7.14.1

    @navikt/ds-react

    • Datepicker: Fixed regression where some fromDate/toDate instances lead to that date ending up as disabled. (#3602)

  • Kode. 19. februar 2025

    Versjon 7.14.0

    @navikt/ds-react

    • DatePicker: Refactored locally to support react-day-picker v9. No external API has been changed. (#3525)
    • MonthPicker: Refactored locally and no longer depends on react-day-picker v9. No external API has been changed. (#3525)
    • Dependencies: react-day-picker bumped to v9.5.0. (#3525)
    • Dependencies: date-fns bumped to ^4.0.0. (#3525)
    • Darkside: Added 'arrow' back to Tooltip. (#3589)

    @navikt/ds-css

    • DatePicker: Updated date.css to support react-day-picker v9. (#3525)
    • Darkside: Added 'arrow' back to Tooltip. (#3589)

    @navikt/aksel-icons

    • Icons: 🎉 New icons LineHeight, SpaceHorizontal and SpaceVertical. (#3587)

  • Kode. 14. februar 2025

    Versjon 7.13.0

    @navikt/ds-tailwind

    • Tailwind: Added darkside-support with import @navikt/ds-tailwind/darkside-tw3. (#3580)

    @navikt/ds-react

    • Darkside: Added support for ConfirmationpPanel, Linkpanel, Panel and Dropdown. Note that all of these will be deprecated in the future. (#3581)

    @navikt/ds-css

    • Darkside: Added support for ConfirmationpPanel, Linkpanel, Panel and Dropdown. Note that all of these will be deprecated in the future. (#3581)

    @navikt/aksel-icons

    • Icons: 🎉 New icons ExpandVertical and QuestionmarkCircle (#3583)

  • Kode. 6. februar 2025

    Versjon 7.12.2

    @navikt/ds-react

    • Box: Added export for BoxNew. (8576400)

  • Kode. 6. februar 2025

    Versjon 7.12.1

    @navikt/ds-react

    • Theme: Theme-prop is now optional. (f269311)

  • Kode. 6. februar 2025

    Versjon 7.12.0

    @navikt/ds-react

    • List: Marked title, headingTag and description properties as deprecated. These will not be supported in future versions and should be migrated from when possible. (#3537)
    • Table: Updated sorting icons for ascending and descending. (#3536)

  • Kode. 3. februar 2025

    Versjon 7.11.0

    @navikt/ds-css

    • ExpansionCard: Removed dynamic padding on button-element. (#3532)
    • Modal: Defaults to margin: auto for tailwind 4 support. (#3532)

    @navikt/aksel-icons

    • Icons: Added new icons 'SortUp' and 'SortDown' 🎉. (#3528)
Januar 2025

  • Kode. 23. januar 2025

    Versjon 7.10.0

    @navikt/ds-react

    • Table: New prop contentGutter added to ExpandableRow-component. This allows user more control for content layout inside expandable element. (#3507)
    • Combobox: Always render maxSelected message when isMultiSelect is set. (#3506)

    @navikt/ds-css

    • Table: New prop contentGutter added to ExpandableRow-component. This allows user more control for content layout inside expandable element. (#3507)
    • Button: Using <Loader /> within icon-prop now supported. (#3515)
    • Combobox: Always render maxSelected message when isMultiSelect is set. (#3506)

  • Kode. 17. januar 2025

    Versjon 7.9.2

    @navikt/ds-css

    • Table: Removed border-bottom for HeaderCell used in ExpandableRow. (#3503)

  • Kode. 7. januar 2025

    Versjon 7.9.1

    @navikt/ds-css

    • Link: 🐛 Use inside Alert got wrong text-color while focused or active. (#3489)