Nyheter
Ny release med brytande ändringar 🎉
Version: 6.0.0
2025-02-10
Releasen innehåller bland annat följande uppdateringar:
-
Vi har tagit bort stöd för containermanéret då det inte uppfyller krav på tillgänglighet. De relaterade komponenterna formulär (FForm), formulärsteg (FFormStep) har tagits bort.
-
Modal (FModal): Knappordningen är ändrad i modaler så att den sekundära knappen ligger före den primära knappen. Anledningen är att användare inte ska ändra något av misstag, till exempel ta bort något.
-
Kryssruta och radioknapp: De gamla grupperingskomponenterna för kryssruta och radioknapp har tagits bort, använd istället FFieldset.
-
Sidhuvud (FPageHeader): Komponenten innehåller inte längre länk eller logotyp som standard.
-
Ett antal andra funktioner, typer och komponenter är också borttagna.
-
Pageobject: Ett antal deprekerade metoder är borttagna (bland annat trimmedText()).
-
Valideringsservice: Den deprekerade validatorn personnummer är borttagen, använd istället validatorerna personnummerFormat och personnummerLuhn.
-
Tema och variabler: Designsystemet tillhandahåller nu endast ett tema. Som konsument finns det fortfarande möjlighet att själv tillhandahålla specifika tillämpningar.
-
Formatbeskrivning etikett: Klassnamnet för formatbeskrivning på etikett är ändrat.
Läs mer i migreringsguiden för version 6
Kombobox
Version: 5.44.0
2024-12-17
Komboboxen kombinerar ett textfält med en lista som har förbestämda alternativ. Listan filtreras för att matcha det som skrivs in i textfältet och presenterar förslag. För användaren innebär detta ett smidigare sätt att göra ett val bland ett stort antal alternativ i stället för att behöva skrolla i en lång dropplista. Komboboxen kan också användas i de fall då användaren både ska kunna skriva en godtycklig fritext eller välja i en lista med förbestämda förslag.
Densitet
Version: 5.26.0
2024-06-04
Densitet styr hur många komponenter och hur mycket information som får plats på skärmen utan att användaren behöver skrolla. Höjden är frikopplad från fontstorlek och rem. Densitet påverkar en komponents höjd samt avståndet mellan komponenter. Hög densitet ger en kompakt layout för applikationer som behöver presentera mycket information som användaren måste kunna överblicka. Till exempel handläggningsstöd.
Densitet är en viktig pusselbit i vår strävan att leverera ett designsystem med bara ett tema. Temat ska följa Försäkringskassans visuella identitet och ska kunna användas för alla typer av applikationer på Försäkringskassan. Oavsett om applikationen riktar sig till medborgare, arbetsgivare eller är ett internt IT-stöd. Vi vill kunna stödja allt från e-tjänster för självbetjäning till handläggningsstöd med samma tema.
Det ska tilläggas att webbapplikationer som körs i Hapo kommer att fortsätta följa Hapos färger. Därför behåller vi det temat i designsystemet, men har döpt om det till FK Hapo.
Inmatning i tabellceller
Version: 5.25.0
2024-05-29
Inmatningsfält kan placeras i en tabell för att direkt kunna redigera värdet i cellen. Fältens standardetikett är visuellt dolda och ersätts av tabellrubriken för en seende användare men läsas upp som vanligt av skärmläsare. Vid fältvalidering visas felmeddelande i en tooltip när fältet har fokus. Utöver inmatningsfält har datumväljare och dropplista stöd för att användas i tabell.
Internt tema byter namn
Version: 5.25.0
2024-05-29
Det interna temat byter i dokumentationen namn till FK Hapo. Detta är ett steg mot att framöver lägga till stöd för att kunna bygga desktopanpassade applikationer med samma tema för hela Försäkringskassan.
Deprekering av gruppkomponenter för radio och kryssruta
Version: 5.17.0
2024-03-22
FRadioGroup,FCheckboxGroupersätts med Fältgruppering (FFieldset)FRadioGroupFieldbyter namn tillFRadioFieldFCheckboxGroupFieldbyter namn tillFCheckboxField
Läs mer om hur du uppdaterar din användning av radio och kryssrutor
Expanderbara rader i tabeller
Version: 5.16.0
2024-03-11
Interaktiva tabeller kan ha expanderbara rader för att visa ytterligare rader eller valfritt innehåll.
Validering och visning av status
Version: 5.15.0
2024-02-09
Ett obligatoriskt inmatningsfält som lämnas tomt när användaren tabbar förbi fältet visas inte längre som felaktigt. Istället visas de som felaktiga först när användaren försöker skicka in formuläret. Det här underlättar främst för skärmläsaranvändare som ofta tabbar igenom formulär för att skapa sig en överblick innan de börjar fylla i information. De användarna slipper alltså att få fel presenterade för sig när de shift-tabbar tillbaka till första fältet igen. Det här är en ändring som följer Arbetsförmedlingens designmönster. Eftersom vi dessutom strävar efter att bara be om information som vi verkligen behöver och därmed bara använder frivilliga fält i undantagsfall känns ändringen än mer motiverad. Oberoende av om användaren har en skärmläsare eller inte. En användare som väljer att klicka sig igenom ett formulär och fylla i uppgifterna i en annan ordning än den de presenteras kommer inte heller att få en massa fel presenterade för sig.
Som ytterligare en del i att förenkla och linjera med vanliga mönster (bl.a. Arbetsförmedlingen) visar vi inte fält med grön markering. Vi vill inte belasta användaren med onödig information. Istället förblir ett ifyllt fält neutralt när det är ifyllt. Notera att det är så som dropplistor redan beter sig. Innan den här ändringen visades inmatningsfält som OK när uppgifterna som användaren matade in uppfyllde formatregler eller när ett fält utan formatregler helt enkelt bara blev ifyllt (t.ex. ett fält för att ange ett namn).
Förlåtande personnummer
Version: 5-10.0
2023-12-14
Det specialiserade inmatningsfältet för personnummer har uppdaterats med förlåtande inmatning. Användaren kan skriva in personnummer med både 10 siffror eller 12 siffror. Det inmatade värdet kommer efter godkänd validering att formateras enligt Skatteverkets regler för personnummer. Från och med det år en person fyller 100 år har personnumret plustecken istället för bindestreck.
Vue3
Version: 5.0.0
2023-09-22
FKUI har uppdaterats till Vue3.