Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Fællesskab
Release notes
Nedenfor vises release notes — en opsummering af bug fixes, nye features og andre opdateringer.
Har du et nyt forslag til en feature eller et bug fix? Så må du meget gerne oprette et issue på Github
Versionering
Designsystemets måde at versionere på er inspireret af semantisk versionering. Versionsnummeret indikerer, hvilken type rettelse, der er tale om.
Versionsnummeret skrives altid x.y.z (fx 2.1.3) og skal læses MAJOR (x), MINOR (y), PATCH (z)
- MAJOR: Ændringer i kode og/eller design, der ikke er bagud-kompatible - som fx erstatning eller sletning af komponenter eller ændringer i kode og/eller design, der medfører bagudrettede tilpasninger ved opdatering til den pågældende version.
- MINOR: Tilføjelser, ændringer og ny funktionalitet, der er bagud-kompatible.
- PATCH: bagud-kompatible fejlrettelser (bug fixes).
Release proces
Designsystemet er “levende” og skal holdes á jour, hvorfor langt de fleste bagud-kompatible ændringer og tilføjelser vil ske løbende. Fejlrettelser vil ske hurtigst muligt. Ikke bagud-kompatible ændringer vil samles op og blive releaset med lavere frekvens.
Tidligere versioner af dokumentationen
Har du brug for at se en version af dokumentationen på designsystem.dk, som stemmer overens med en tidligere release, så er du velkommen til at oprette en sag på Github eller skrive til FDS teamet på FDS@erst.dk.
Version 7.5.3
03-12-2021
- Fjernet text-transform:uppercase på subheading, så skærmlæsere læser teksten frem for at stave
Version 7.5.2
25-11-2021
- Gjort det muligt at markere tekst i knapper for support af hjælpeværktøjer som Adgang for alle.
Version 7.5.1
18-11-2021
- Fikset fejl med placering af årstal i datovælger i mobilvisning.
- Rettet fejl i datovælgeren der gjorde, at den første dag i måneden ikke blev vist, når den var en søndag.
- Tillader nu dato i datovælgeren fra start.
Version 7.5.0
29-09-2021
- Valgbare rækker i tabel
- Prefix og suffix på felter
- Småtilpasninger i designet på modalvinduer
- Opdateret design på datovælger
- Tilføjet 72px i bunden af footer
- Tilføjet styling og retningslinjer for sortering i tabeller
- Tilføjet eksempel og retningslinjer på søgning i tabeller
- Tilføjet en tykkere border i bunden af knapper
- Opdateret retningslinjer for obligatoriske og frivillige felter
- Tilføjet ikoner til sortering i tabel
- Tilføjet variant til overflow menu til brug ved sortering
- Ændret ikon i detalje komponent
Version 7.4.0
02-06-2021
- Ændringer i tooltip komponenten - der er tilføjet delay og pil på tooltip
- Links får nu automatisk sort farve i beskeder
- Ny komponent: Toggle switch komponent
- Tilføjet status tekst i forbindelse med spinner komponenten
Version 7.3.0
23-04-2021
- Ikontaksonomi
- Ny komponent: Notifikation (Toast) komponent
- Fjernet unødvendige kald til fontfiler
- Timing issue på datovælger - sæt ikke knappen, hvis den allerede eksisterer
- Generel oprydning i dependencies For mere info, se issue #130 på Github.
- Håndtering af situation: Escape funktion på overflow menu og modalvinduer kolliderer og lukker begge, når en overflow er inde i en modal For mere info, se issue #125 på Github.
- Facit streger
- Udvidelse af breakpoint for responsiv tabel For mere info, se issue #45 på Github.
Version 7.2.0
11-02-2021
- Ændret font i drop down for at fikse bug i firefox For mere info, se issue #102 på Github.
- Ny komponent: Datovælger
- Fiks fejl, hvor ol liste bliver vist med bullets i accordions For mere info, se issue #120 på Github.
- Tilføjet brugervenlige JS fejl, når en komponent ikke er tilføjet korrekt
- Opdateret typografi
- Tilføjet styling af billedtekst (figcaption)
- Åbn/luk alle accordions function
- Accordion knapper kan nu være i en overskrift For mere info, se issue #88 på Github.
- Padding fikset på extracompact tabeller For mere info, se issue #113 på Github.
Version 7.1.1
28-10-2020
- Fikset fejl, hvor border ved aktivt menupunkt i header hopper ved hover. For mere info, se issue #118 på Github.
- Fikset fejl i Internet Explorer, hvor feltbredde i tekstfelter er defineret ved antal karakterer bliver ignoreret.
- Luk overflow menu i header ved klik uden for menuen.
- Tilføjet ARIA attributter i trinindikator for bedre tilgængelighed
Version 7.1.0
15-09-2020
- Ny komponent: Sprogvælger
Version 7.0.0
18-08-2020
- Opdateret fonten IBM Plex Sans til version 5.0.0 Hvis man preloader fonten - hvilket anbefales - så bør man tjekke om stien til fonten skal ændres, da mappestrukturen under fonts er ændret i dkfds
- Ændret attributter på tjekboks med collapse funktion, så HTML nu er valid.
- Tilføjet ny modal komponent
- Fikset fejl med fokus i header i Firefox
- Tilføjet maks. bredde på tooltip
- Fjernet dokumentation for brug af dkfds-plugins, da det fremover ikke vil blive vedligeholdt Se mere under Plugins i Kode sektionen
- Fikset fejl, hvor valgt radioknap ikke blev vist ved print i Internet Explorer og Edge For mere info, se issue #112 på Github.
Version 6.1.1
19-05-2020
- Ændret lille knap til normal knap i standard header grundet usability issues i mobilvisning
Version 6.1.0
14-05-2020
- Ny komponent: Brødkrumme
- Mulighed for en mere kompakt header med brug af en lille knap
- Linjehøjden for lille brødtekst er ændret til 20px
- Tilføjet dokumentation og eksempler på fejlmeddelelser og fejlopsummeringer.
- Tilpasset alignment på sidenavigation
Version 6.0.1
19-03-2020
- Fjernet inkludering af IBM Plex Sans definitionen i dkfds-tippy-theme.standalone.css. For mere info, se issue #104 på Github.
- Understøttelse af Tippy.js v6.1.0 For mere info, se issue #105 på Github.
- Tilpasset CSS til faneblad, så der ikke længere kommer fejl ved import af dkfds scss i angular.
Version 6.0.0
10-03-2020
- Detalje komponent tilføjet.
- Skjul/vis indhold med knap er fjernet.
- Cookiemeddelelse opdateret i udseende og HTML.
- Rettet fejl med border i tabel. For mere info, se issue #96 på Github.
- Tilføjet mulighed for styling af links i overskrifter.
- Fanebladskomponenten er ændret i HTML og JavaScript.
- Ændret aktive farve på undermenupunkt i sidenavigation
- Tilføjet retningslinjer for funktionslink, tilbage-link og cookiemeddelelse.
- Tilføjet korrekte ARIA attributer på sidenavigationen, mobilmenu og headermenuen.
- Fikset fejl på responsiv trinindikator. For mere info, se issue #94 på Github.
Version 5.3.0
16-12-2019
- Tilbage link har fået større linje højde.
- Mere padding i toppen af navbar indeholdende funktionslink og overflow menu i header.
- Ændret udseende af cookiemeddelelse komponenten.
- Lister har fået nyt udtryk.
- Ændret farve og tykkelse på aktivt menupunkt i header samt sidenavigationen.
- Tilføjet mulighed for hjælpetekst på radioknap.
- Tilpasset fokusramme om funktions link.
- Tilpasset retningslinjer for Skjul/vis med radiobuttons.
- Opdateret SVG filer, samt tilføjet link til Figma komponent bibliotek.
Version 5.2.0
27-11-2019
- Ændret accordion aria-multiselectable så man i stedet kan bruge klassen accordion-multiselectable Ændringen er fortsat bagudkompatibel, men den tidligere implementering anbefales ikke, da det ikke var valid HTML.
- Teksten i cards med samme højde placeres nu korrekt
- Tilføjet mere afstand mellem links i footer
- Overskriftstørrelser på mobil er blevet opdateret
- Tilpasset farve på informationstekst på komponenterne sidenavigation med ekstra information og trinindikator med ekstra information
- Tilføjet eksempel på tabel i Datatable Efterspurgt i Github issue #55
- Opdateret Eksempel på implementering i Angular
Version 5.1.0
12-11-2019
- Cookiemeddelelse komponent er tilføjet i kernen.
- Tilbage link er tilføjet i kernen. Bemærk, at Tilbage link anbefales frem for Tilbage knap.
- Fokuskant tilføjet på #main-content ved fokus fra Skip link.
- Statusbadges er tilføjet i kernen.
- Fejl i overflow menu brugt i header fikset. Se mere om fejlen på Github issue #75.
- Fikset print af modal fra iPhone. Se mere om fejlen på Github issue #67.
- Opdateret beskrivelse af implementering af DKFDS under Til udviklere. Bemærk, at neutralt tema kun bør benyttes som skabelon til et nyt tema, og ikke som et enkeltstående tema. Læs mere om temahåndtering.
Version 5.0.0
22-10-2019
- JavaScript i kernen er skrevet om. Man skal initiere javascript med funktionen
DKFDS.init()
på hver side. For mere info, se issue #74 på Github eller vores afsnit om implementering af DKFDS til udviklere. - JavaScript i DKFDS kernen bliver nu udstillet til brug i projekter. For mere info, se issue #74 på Github.
- Sidenavigationen har fået nyt design. HTML er ændret - se korrekt struktur under sidenavigations-komponenten.
- Faneblads-komponenten er blevet redefineret. Hele komponenten er blevet redefineret - se den nye komponent under faneblads-komponenten.
- Den gamle tooltip (tippy) komponent er blevet flyttet til plugins. Bemærk, at komponenten ikke længere er en del af kernen, men at der er kommet en erstatning i kernen.
- Modalvinduer-komponenten er blevet flyttet til plugins. Bemærk, at komponenten ikke længere er en del af kernen.
- Ny og simpel tooltip komponent er tilføjet til kernen - Komponenten er ikke længere baseret på tredjeparts bibliotek.
- Der er tilføjet events til komponenter. Man sætte eventlisteners på bestemte events - Fx når en accordion åbner og lukker. For mere info, se implementeringsafsnittet under hver komponent.
- Information om krav til selvbetjeningsløsninger er nu tilføjet til designsystem.dk.
- Tabellerne følger nu 8point grid
Version 4.4.0
20-08-2019
- Tilpasset CSS til print
- Farven på valgt menupunkt i sidenavigationen er ændret til #1A1A1A
- Ændret udseende på tjekboks og radioknap ved print
- Fikset fejl med border på den sidste række i en tabel
- Fikset fejl med modal ved print
- Tilpasset retningslinjer for ikoner i forhold til tilgængelighed
Version 4.3.0
04-07-2019
- Fjernet farve på small-text mixin.
- Tilpasset positionering af ikon på knapper.
- Fikset fejl i input felter, hvor specialtegn (Å, Ö, Ä etc.) ikke blev vist korrekt.
- Tilføjet eksempel på luk knap i Beskeder.
- Tilføjet mulighed for at positionere action knapper i cards i bunden.
- Fikset fejl ved print af eksempelløsninger i Firefox - tilføjet yderligere print CSS.
Version 4.2.0
20-06-2019
- Fjernet margin-top på h1.
- Fjernet form-group div fra li i radioknap og tjekboks liste (Løser udfordringen med at JAWS skærmlæseren læser skrivebeskyttet ved hver tjekboks eller radioknap).
- Fikset styling i niveau 4 i sidemenuen på mobil.
- Fikset tilgængelighed på responsiv tringuide - aria-hidden opdateres nu automatisk alt efter status på komponenten.
- Responsiv tabel er nu sat til display:block på små skærme således at skærmlæsere ikke tror det er en tom tabel.
Version 4.1.1
24-05-2019
- Fjernet primærfarven på tekst i aktivt menupunkt i header.
- Tilføjet klassen
inline-svg
, som kan bruges på ikoner, der skal fremgå i tekst, således at de matcher teksthøjden. - Ændret afstand fra label til read-only felt.
- Ændret JavaScript, der håndterer regex maske på dato felt, således at man nu kan bruge copy/paste igen.
- Fejlhåndtering omkring ikke gyldige karakterer indsat i feltet med copy/paste bør håndteres i projektet selv.
- Tilføjet sektion omkring formularstruktur.
Version 4.1.0
26-04-2019
- Fjernet fast højde på tekstområde (textarea) - man kan/bør nu sætte højden med rows attributten.
- Fjernet tekstmarkøren på et read only felt i Internet Explorer.
- Tilføjet eksempler på advarsel, når man forlader siden i eksempelløsningerne.
- Tilføjet afstand af tags, når de fylder flere linjer.
- Fjernet primærfarve på teksten i faneblad ved hover.
- Fikset fokusramme på faneblad.
- Fikset fejl i modalvindue, hvor overskriften blev overlappet af luk knappen.
- Log ud skal nu hedde Log af.
Version 4.0.1
08-04-2019
- Opdateret skip link udseende
- Ændret styling, så a-element i solution-header nu kan være et h1-element
- Fikset readonly fejl i Internet Explorer
- Tilpasset footer margin og padding
- Tilføjet print display css klasser (Fx d-print-none)
- Tilføjet logo definition
- Tooltip skriftstørrelse ændret fra 13 til 16px
- Fikset hover farve på icon knap (button-unstyled)
Version 4.0.0
01-04-2019
- Fjernet højde på cards
- Tilføjet klassen card-align-height, så cards kan have ens højde på samme række.
- Fikset fokus border på faneblad
Semantisk versionering
Fra denne release 4.0.0 og fremover vil FDS gøre brug af semantisk versionering.
Version 3.0.3
27-03-2019
- Fjernet eksempler fra projekt
- Ændret macros, så de er mere dynamiske, så flere projekter kan gøre brug af dem
- Fikset fejl med fokus på overflow menu i Firefox
- Fikset fejl med ol liste i flere niveauer
- Fjernet gammel JavaScript, som var årsag til fejl ved loading af javascript filen
- Ændret HR kant farve
- Ændret kant farve på tertiær knap
- Tilføjet afstand på tags og knapper på lille skærm
- Opdateret footers
- Tilføjet JavaScript der håndterer lukning af overflow menuer, når man åbner en ny
Version 3.0.2
19-02-2019
- Tilføjet info om fiks af Microsoft Edge bug i navigation, hvor bullets blev vist trods styling
- Defineret tilbage-knap
- Tilføjet readonly eksempel i input felter
- Ændret Skjul/Vis eksempel ved brug af radio knap for at løse tilgængelighedsproblemer
- Fikset fejl på dropdown-menu i Internet Explorer, hvor pilen blev vist to gange
- Nederste border i header ændret til
$outer-border
- Tilføjet klassen .nobullet-list, som kan bruges ved liste af links
- Flyttet Pikaday datovælger plugin til Plugins-projektet
- Tilføjet .break-word klasse til brug i tabeller, hvor man bruger lange filnavne i kolonnerne
- Ændret disabled link farve
- Fjernet $color-link-active farven, da den ikke længere bliver brugt
- Opdateret styling og definition af eksterne links
- Ændret skrifttype tykkelse på søgefelts knappen
Version 3.0.1
18-01-2019
Smårettelser til CSS og ikoner
small-text
ogsmall-tag
klasserne fik ændret font-size fra 13px til 14px- Ændrede level 2 og 3 i sidenavigation på mobil
- Rettede ikonerne help og
close-circle
Smårettelser til eksempler
- Typesetting blev delt i to: Linjeafstand og Linjelængde.
- Fejl i Popover-eksemplet blev rettet.
- Neutralt logo til header-eksempler blev opdateret.
Version 3.0.0
14-01-2019
- Refaktoreret fra ‘dkwds’ til ‘dkfds’ Alt kode er blevet refaktoreret så den nu benytter forkortelsen ‘dkfds’ i stedet for ‘dkwds’.
- Bourbon er fjernet Biblioteket ‘Bourbon’ er ikke længere en del af designsystemet. Det vil derfor ikke længere være muligt at benytte sig af deres hjælpeklasser og funktioner.
- Nyt gridsystem USDW’s gamle float-grid (NEAT) og Bootstraps grid er fjernet. I stedet for er USWDs nye grid inkluderet. Der er lavet tilpasninger af dette grid så det køre på de samme variable og klassenavne som i den forrige version af FDS. Der skal derfor ikke laves nogen tilpasninger for at få dette grid inkluderet.
- Plugins project Datatables og SelectWoo er ikke længere en del af komponent-biblioteket. Der er derimod oprettet et nyt projekt (dkfds-plugins) hvor disse nu lever.
- Nye klasser
De følgende klasser er blev omdøbt:
input-success
er omdøbt tilform-success
input-error-message
er omdøbt tilform-error-message
- Accordion Accordions plus og minus ikon er flyttet til starten af accordion-knappen
- Fokus farve
Fokus farven er ændret fra den gule farve (#febb30) til en grå farve (#747474). Farven er blevet ændret fordi den gule farve ikke overholder WCAG 2.1. Hvis man ønsker en anden fokus farve kan variablen
$color-focus
overskrives. - Radioknapper og checkbokse
- Styling af radio knapper kræver nu denne klasse på selve
input[type=radio]
: “form-radio”. - Styling af tjekbokse kræver nu denne klasse på selve
input[type=checkbox]
: “form-check”.
- Styling af radio knapper kræver nu denne klasse på selve
Version 2.1.2
16-10-2018
-
Nye skriftstørrelser til H1-H6
- H1 går fra 36px til 40px.
- H2 går fra 27px til 30px.
- H3 er stadig 24px.
- H4 går fra 22px til 20px;
- H5 går fra 20px til 16px;
- H6 går fra 16px til 13px;
- Display-1 går fra 120px til 80px
- Display-2 går fra 60px til 32px;
Hvis du ønsker at beholde det samme visuelle udtryk skal man gå fra h5 til h4.
-
Ny max-width styling
Klassen '.content' er fjernet. Max-width style er nu kodet direkte til p, font-lead etc.
-
Sidenavigation i bunden af eksempelsiderne:
"Breadcrumb" er omdøbt til "page-navigation". HTML ser nu således ud:
<nav class="page-navigation">
<a href="#" class="button button-primary">Næste</a>
<a href="#" class="button button-ghost">Tilbage</a>
</nav>