Version 17.0.44 är driftsatt

Den här versionen innehåller flera brytande förändringar. Den innehåller också en ny komponent för så kallade sektionsmeddelande samt en ny variant av flikar. Utöver det är det flera felrättningar och många nya funktioner i befintliga komponenter.

Nytt och förändrat

Nya komponenter

  • Sektionsmeddelande: Komponenten kompletterar övriga övriga komponenter för meddelanden. Till skillnad från våra tidigare komponenter för meddelanden som alltid ska riktas till alla besökare på en sida så kan du använda komponenten för sektionsmeddelande när du enbart vill framhäva en text på en del av en sida och som inte alltid berör alla användare.

Nya varianter av komponenter

  • Flikar: Det finns nu en mindre variant av flikar.

Nya funktioner eller uppdaterad design

  • Textfält: Det går nu att lägga in formathjälp som en slot.
  • Modalt fönster: Det går nu att lägga in rubriken som en slot. Designen är också justerad så att det mer hänger ihop med designen på bekräftameddelandet.
  • Bekräftameddelande: Det går nu att lägga in rubriken som en slot. Designen är också justerad så att det mer hänger ihop med designen på modalt fönster.
  • Navigeringskort: Korten innehåller inte längre några knappar. Vi har också justerat designen så att det är tydligare när man hovrar eller fokuserar på kortet.

Nya ikoner

Felrättningar

  • Sidhuvudet: Det är justerat så att texten följer med när man zoomar. Tidigare blev det ingen radbrytning när en tjänst hade ett långt namn.
  • Alla inmatningsfält: Utrymmet mellan hjälptextknappen och inmatningsfältet är utökat.
  • Datumfält: Den lilla varianten, det vill säga small, är justerad så att den behåller sin höjd på en liten skärm.
  • Typografin: Ingressen är nu normal. Tidigare var den bold, det vill säga fetmarkerad.
  • Modalt fönster: Nu går det att tabba runt i komponenten även när man har lagt in till exempel knappar efter renderingen.
  • Bekräftameddelande: Nu går det att tabba runt i komponenten även när man har lagt in till exempel knappar efter renderingen.
  • Textfält: Rättat "broken aria reference" så att fältet är mer tillgängligt nu.
  • Horisontella och vertikala menyerna: Vi har tagit bort role attributet på list-elementen eftersom de inte behövdes för att fälten ska vara tillgängliga.
  • Bifoga fil: Tidigare var det problem att ladda upp flera filer på grund av att vi inte skickade ut ett change/inputevent vilket gjorde att angular inte uppfattade att det skett en förändring. Nu har vi rättat det.
  • Checkbox: Tidigare blev det problem med placeringen av * när etiketten blev för lång. Det är justerat nu så att * placeras på rätt ställe oberoende av hur lång etiketten är.

Brytande förändringar

  • Bootstrap grid: Vi har tagit bort Bootstrap grid från styleguidens CSS. Anledningen till att vi tagit bort det är att vi vill inte tvinga användare av styleguiden att använda bootstrap grid. Det går bra att fortarande använda Bootstrap grid men du behöver själv lägga in det.
    Hur du använder Bootstrap grid
  • Utfällbart stycke: Attributet componentSize har bytt namn till size.
  • Modalt fönster: Attributet autofocus har bytt namn till data-autofocus.
  • Bekräftameddelande: Attributet autofocus har bytt namn till data-autofocus.
  • Checkbox: Det finns nu ett klassnamn på kryssrutan, det vill säga det som blir ifyllt när man gjort ett val. Namnet är c-checkbox__checkbox
  • Brödsmulor: Vi har lagt in en aria label. Den behövs för att göra brödsmulorna tillgängliga.

Uppgraderingsskript

I denna driftsättning är att vi har skapat ett uppgraderingsskript för att underlätta uppgraderingen till version 17.0.44. Viktigt att veta innan man kör skriptet är att du uppgraderat till version 16.2.1 innan du kör skriptet, annars kan vi inte garantera att det fungerar.

  • Vi rekommenderar att du kör skriptet i en privat git branch utan ocommitade ändringar.
  • Skriptet går endast igenom och uppdaterar html filerna i ditt projekt. Har du eventuell annan styleguide-relaterad kod i andra filer får du justera dem manuellt.
  • Installera styleguide 17.0.44 i ditt projekt (kolla under rubrik "Installera npm paket" nedan)
  • Ladda ner uppgradersingsskriptet Zip, 1.5 kB.
  • unzippa filen och lägg i rotmappen av ditt projekt
  • För att köra skriptet skriv följande i en terminal:
node upgrade.js

Installera npm paket

npm install --save --save-exact @sjv/component-library@17.0.44

Hämta CSS

<link rel="stylesheet" href="https://cdn.jordbruksverket.se/designsystem/17.0.44/package/dist/release/sjv-komponentbibliotek.css" integrity="sha256-JBkCdb0Ye/nmdPC/f/qC+BoLZOQzkQNYkBbA1Lo824Y=" crossorigin="anonymous">

Hämta JavaScript

<script type="module" src="https://cdn.jordbruksverket.se/designsystem/17.0.44/package/dist/designsystem/designsystem.esm.js" integrity="sha256-Y9JtxFTJftyqXT/oGtcyOo3MVNE3AbHoQM2uBa0Td3U=" crossorigin="anonymous"></script>

<script src="https://cdn.jordbruksverket.se/designsystem/17.0.44/package/dist/designsystem/designsystem.js" integrity="sha256-uNV1Sx3OB8mNVM0emE+BoNerTlKotgpfB7a0lLyFf7c=" crossorigin="anonymous"></script>

Publicerad