Version 22.0.71

Förändringarna i komponenternas utseende har tagits fram i samarbete med kommunikationsenheten. Detta för att alla digitala tjänster som till exempel webbar och e-tjänster ska ha ett enhetligt utseende för användarna oberoende av vilket system eller vilken teknik som används.

Nytt och förändrat

Alla komponenter har blivit uppdaterat på något sätt, så vi har delat upp komponenterna i 3 kategorier:

• Brytande - Komponenter som har ändrats i sådan stor utsträckning att det kan krävas att man behöver uppdatera i sin applikation.
• Större förändring - Utseendet på kompontenterna har uppdaterats så att det kommer ha påverkan på hur det ser ut i webbläsaren, till exempel kan saker ha skiftat runt layoutmässigt.
• Mindre förändring - Utseendet har uppdaterats men kommer ha liten påverkan på hur det ser ut i webbläsaren.

Lägg till ny typografi i Angular

På grund av att den nya typografin är licensierad så har vi valt att inte lägga med den i styleguidens CSS utan har istället valt att lägga den i ett eget paket som du kan installera pch lägga till i ditt projekt genom:

Brytande

• Brödsmulor: Nu finns en ikon framför första elementet i brödsmulestigen. Tidigare kunde brödsmulorna på startsidan misstas för en länk Den nya toppnivålänken i brödsmulorna har nu därför en "hem"-ikon och ett snedstreck tillhöger. Det gör att brödsmulorna ser mer ut som ett brödsmulor även på startsidor. Komponenten finns nu som webbkomponent men du kan även använda den med CSS och HTML.
• Small varianter är borttagna för följande komponenter:
  
  • Flikar
  • Checkboxar
  • Datumfält
  • Multitextfält
  • Mulit-select
  • Radioknappar
  • Single-select
  • Textyta
  • Toggle
  • Sök
• Textfält: Small varianten är borttagen och formattext attributet är borttaget. Tanken är att man ska använda hjälptext numera för ange format.
• Länkar: HTML koden uppdaterad efter nya grafiska profilen. Finns nu även som webbkomponent.
• Objektlista: Ersatt med en ny komponent, länklista, eftersom objektlistan var tänkt att vara en version av en kryssrutegrupp eller en radioknappgrupp. Objektlistan används bara som en vertikal meny eller en lista med länkar.
• Sidhuvud: HTML koden är uppdaterad till den nya grafiska profilen. Dropdown med inloggand användare, sökfältet och hamburgermenyn är valfria. Du behöver bara ta med de element du behöver. Komponenten kommer att justera sig självt därefter.
• Sektionsmeddelande: Ikonen är nu en del av komponenten och man behöver inte ange en. Nu ser sektionsmeddelanden och informationsmeddelanden likadana ut.Det har varit mycket förvirring kring skillnaden mellan sektionsmeddelanden och informationsmeddelanden. Den ena skulle indikera meddelanden på global nivå, placerade som en banner under sidhuvudet, medan den andra skulle vara meddelanden på sektionsnivå, placerade precis efter den rubrik som meddelandet gällde. Båda komponenterna har använts omväxlande och inte enhetligt, vilket visade oss att det egentligen inte var någon skillnad mellan komponenterna eller deras placering. De ser nu alltså likadana ut nu och har samma alternativ.
• Navigeringskort: Komponenten är borttagen och du ska använda komponenten kort istället.
• Bekräftameddelande: Komponenten är borttagen och du ska istället använda komponenten Modalt fönster.
•  

Större förändringar

• Bifoga fil: Är betydligt mindre än föregående utseende men har kvar alla funktioner. Bifoga fil-komponenten var för stor jämfört med alla andra formulärelement. För att förbättra tillgängligheten och underlätta förvaltning av komponenten gjorde vi standardwebbläsarkomponenten synlig medan vi bara förbättrade den. Detta gör att vi kan få all inbyggd tillgänglighet från webbläsaren utan att behöva implementera den själva.
  
• Knappar: Alla varianter är nu något högre medan bredden är i princip samma för samma text. Finns nu som webbkomponenten.
  
• Sidpanel: Default tar upp större plats på skärmen när den fälls ut.
• Utfällbart stycke: Den nya varianten visar tydligare var innehållet börjar och slutar, och den fungerar med olika bakgrundsfärger.

Mindre förändringar

• Dropdown: Mindre justeringar och färgändringar.
• Hoppa till innehållet: Har ändrats en hel del men eftersom denna komponenten visas ovanför allt annat ses detta inte som en större förändring.
• Kort: Tog bort fast innehåll och vi förenklade komponenten till en containerkomponent utan någon obligatorisk typ av innehåll eller layout. Detta gör att komponenten kan vara mer flexibel för alla typer av innehåll och mikrolayouter.
• Fullsidig laddningindikator: Animationen har förenklats för att förbättra prestandan. Samma animation har använts för båda versionerna av komponenten för att hålla utseendet enhetligt.
• Vanlig laddningsindikator: Animationen har förenklats för att förbättra prestandan. Samma animation har använts för båda versionerna av komponenten för att hålla utseendet enhetligt.
• Felsummering: Något mindre med samma innehåll och uppdaterad med nya färger.
• Infromationsmeddelande: Nya färger annars den samma, finns som webbkomponent numera.
• Toastr: Nya färger annars densamma.
• Modalt fönster: Fast innehåll har tagits bort och ersatts med valfria innehållsområden. Detta möjliggör anpassning av rubrikområdet (lägga till ikoner eller andra visuella element) samt enkelt lägga till element i det interaktiva området.
• Namnvärdelistan: Något större och nya färger.
• Datatabell: Nya färger.
• Infromationstabell: Nya färger.

Nya komponenter och ikoner

• Callout: En Callout-komponent är som ett drop-quote eller ett blockquote. Det är ett sätt att tvinga fokus på en specifik del av statisk text eller bild. Dessa är mycket vanliga på jordbruksverket.se Länk till annan webbplats.. De bör endast användas inom eller i slutet av textblock. De är inte meddelandekomponenter.
• Panel: Används för att samla relaterade komponenter – kort, tabeller, namnvärdelistor och text som delar liknande innehåll. Detta gör att vi kan få en tydligare gruppering på vårt innehåll. (Kom ihåg: en panel kan ha flera kort som underordnade. Ett kort kan inte ha en panel som underordnad.)
• Sidfot: Fanns endast som färg innan nu som komponent!
• Taggar: Ny komponent används för taggar.
• Nya ikoner:
  • Asterisk
  • Minus ruta
  • Plus ruta