v10.0.0

Hvis du skal opgradere fra version 9 til version 10, så læs vores migreringsguide for v10.0.0 på GitHub først. Version 10 indeholder mange breaking changes, man som designer og udvikler skal forholde sig til, da der både er ændringer i grundlæggende komponenter som header og mobilmenu, samt omstrukturering af designsystemets kodefiler.

Header

• Breaking change Headerens række 4 og række 5 er fjernet, mens de øvrige rækker i headeren har fået opdateret design og forbedret tilgængelighed. Se flere detaljer på headerkomponentens side.
• Breaking change Mobilmenuens design er opdateret.
• New Tilføjet mulighed for at placere sprogvælgeren i headeren og mobilmenuen udover footeren.
• New Hvis der ikke er plads til alle menupunkter, vil de overskydende menupunkter automatisk ryge ind i en ‘Mere’-menu.
• New Tilføjet eksempel på søgefelt i header.
• Løsningstitlen behøver ikke længere være et link.

Faneblade

• Breaking change Ny fanebladskomponent. Den tidligere fanebladskomponent understøttes ikke længere.
• New Faneblade kan nu også anvendes til sidenavigation.
• New Tilføjet mulighed for at indsætte ikoner i faneblade.

Tooltips

• Breaking change Tooltips er ændret grundlæggende i opførsel, design, anvendelse og implementering.
• Breaking change Rettet fejl, hvor tooltips kunne sætte sig forkert, hvis brugeren zoomede eller ændrede browservinduets størrelse.
• Breaking change Rettet fejl, hvor tooltips ikke kunne tilgås med tastatur samt visse skærmlæsere.
• Breaking change Ændret måden tooltips anvendes til forklaring af ord i tekstparagraffer grundet tilgængelighedsproblemer.
• Breaking change Tooltips på sprogvælgeren er opdateret som følge af tooltipkomponentens ændringer.

Venstremenu og trinindikator

• Breaking change Anchorlinks er fjernet fra venstremenuen.
• Breaking change HTML og styling er opdateret i både trinindikator og venstremenu som følge af ændringerne i header og anchorlinks.
• Change Opdateret eksempler for trinindikator og venstremenu med aria-label for nav-elementet.
• Change Tilpasset roller, opmærkning og aria-attributter.
• Breaking change Rettet fejl, hvor tekst eller ikon kunne ryge ud over komponentens kanter.
• Tilføjet understregning til klikbare trin for at adskille dem fra låste trin.
  For mere info, se issue #204 på GitHub

Radioknapper og tjekbokse

• Breaking change Fjernet muligheden for at vælge mellem store (32 pixels) og små (20 pixels) radioknapper og tjekbokse. Den nye standardstørrelse er 24 pixels. Bemærk at HTML’en for tabeller med valgbare rækker og tjekbokse skal opdateres.
• Rettet fejl, hvor udseendet af inaktive radioknapper og tjekbokse kunne variere.
• Rettet fejl, hvor skjult indhold i enten radioknapper eller tjekbokse kunne få forkert styling ved fejlbeskeder.

Accordions

• Ændret accordions border-radius (hjørner) fra 3px til 4px.
• Change Rettet fejl, hvor tekst ikke altid blev ombrudt korrekt i accordions.
• Fjernet forældet JavaScript fra accordions.

Overflowmenu og Sortering

• Rettet fejl, hvor fokusmarkeringen kunne mangle delvist i overflowmenuen.
• Rettet fejl, hvor links i overflowmenuen kunne sidde i den forkerte side.
• Indsat en tynd streg mellem de forskellige elementer i overflowmenuen.
• Change Opdateret HTML for overflowmenu og sortering som følge af header-ændringerne.
• Opdateret JavaScript for sortering, så kravene til HTML’en er mindre rigide. Fx er det nu tilladt at have et span-element inde i button-elementet.

Vedligehold

Nedenstående ændringer har primært betydning, hvis man selv bygger kodefiler ud fra designsystemets filer, hvis man har ændret i de oprindelige filer eller anvender designsystemet på en anden måde end specificeret på dokumentationssiden.

• Designsystemet anvender nu webpack i stedet for gulp til at bygge filer.
• Breaking change Ændret devDependencies og scripts i package.json.
• Breaking change Fjernet flere polyfills til ikke-supporterede browsere. Hvis man i sit projekt har et krav om at supportere ældre browsere, skal man derfor selv sikre, at man anvender den nødvendige transpiling og polyfills. Se eventuelt browserunderstøttelse.
• Breaking change Erstattet @import i alle SASS-filer med @use og @forward. Dette har medført en generel restruktur i alle SASS-filer og tilhørende mapper, hvor flere funktioner og mixins er blevet slettet eller flyttet.
  For mere info, se issue #199 på GitHub
• Breaking change Flere SASS-variable er blevet slettet, flyttet eller erstattet, da de gjorde det muligt at tilpasse styling, det ikke var tiltænkt, man skulle ændre.
• Erstattet ‘normalize.css’ med styling i ‘_base.scss’.
• Flere macroer har fået mindre rettelser og tilføjelser, så der blandt andet kan sættes klasser og attributter.
• Mindre koderettelser som følge af et linter-tjek.
• Breaking change Fjernet forældede klasser, heriblandt icon-svg-large, collapse-transition-collapse, collapse-transition-expand, button-small, sidebar-col og flere ubrugte klasser for accordion’s åbn/luk alle-knap.
• Opdateret README-fil.
• Breaking change Ensrettet stistrukturen til hhv. fonte, ikoner og billeder.
• Rettet fejl, hvor klassen sr-only risikerede at blive unødvendigt gentaget flere gange i ens stylesheet, hvis man anvendte SCSS-filerne.

Ændringer på designsystem.dk

• Dokumentationssiden har fået en større omstrukturering, hvor flere sider er flyttet rundt.
• Flere sider er blevet opdelt i to faner kaldet ‘Retningslinjer’ og ‘Kode’. Man skal derfor ikke længere ind på to forskellige hovedmenupunkter for at finde hhv. kode og design.
• Nyt hovedmenupunkt “Kom i gang”, som indeholder overordnet information om bl.a. krav, tilgængelighed og ressourcer for kode og design.
• ‘Design’ er omdøbt til ‘Styleguide’.
• Det er ikke længere muligt at hente designsystemets komponenter som svg-filer. Se designressourcer for øvrige muligheder.
• Ny side om justering af tema og stylesheets.

Øvrige

• Breaking change Fjernet klasser, der visuelt kunne få links til at fremstå inaktive.
• New Anchorlinks har fået sin egen komponent.
• Rettet ikonet file-upload, der kunne smide en fejl i konsollen, når man anvendte visse browser extensions.
• Breaking change Fjernet ikonet ‘Log af (åben hængelås)’ (lock-open). Ikonet lock skal i stedet bruges til ‘log af’.
• Breaking change Fjernet JavaScript fra datofelter og ændret inputtypen fra tel til number. Man skal derfor sikre sig, at ens løsning har en passende validering af de indtastede værdier.
• Change Ændret fontstørrelse og linjehøjde for typografi inklusiv overskrifter, billedtekst, subheading og manchet - vær opmærksom på, at disse tekster kan fylde mere end tidligere.
• Breaking change Toggle switch har fået ny HTML, ny styling og opdaterede retningslinjer med det formål at øge tilgængeligheden, samt gøre det muligt at anvende komponenten på andre sprog end dansk.
• Breaking change Rettet fejl, hvor fokus kunne ryge ud af modaler til indholdet bagved. Rettelsen kræver, at alle modaler lægges i et container-element. Se kode for modaler for mere info.
• Breaking change For tabeller med sortering er hele headeren gjort klikbar.
• Change Fejlopsummering anvender nu en nav som udgangspunkt.
• Ændret font-smoothing for flere elementer.
• Rettet fejl, hvor tilbage til toppen-knappen nogle gange var vist, selvom den skulle være skjult.
• Tilføjet klassen no-max-width, der forhindrer max-width på en paragraf eller liste.
• Breaking change Fjernet varianten af beskeder uden ikon. Klassen alert--show-icon bruges ikke længere og ikonet skal indsættes manuelt.
• Rettet fejl, hvor responsive tabeller med sortering indeholdt sorteringsknappernes tekst på mindre skærme.
  For mere info, se issue #229 på GitHub
• Change Justeret ikonets placering i funktionslink og eksterne links samt line-height på knapper for bedre centrering.