Version 16.0.20 är driftsatt

Version 16.0.20 innehåller brytande förändringar. Versionen innehåller också nya komponenter för navigeringskort och sök. För att förenkla för dig kan du nu använda ett färdigt skript för att införa de brytande förändringarna i ditt projekt. 

Nytt och förändrat

Ny komponent

Navigeringskort: Du kan använda navigeringskort när du vill underlätta navigeringen för användaren genom att visa mycket information om vart navigeringen leder. 

Sök: Det finns nu en ny sökkomponent som ersätter de tidigare komponenterna "dynamisk sök", "sökknapp" och "töjbar sök". Anledningen till den nya söken är att det inte har funnits behov av flera varianter av sök.

Brytande förändringar

Du kan använda dig av ett uppgraderingsskript för att applicera de brytande förändringarna i ditt projekt. Läs mer om uppgraderingsskriptet längre ner på sidan. Vi har förstått att det kan vara tidskrävande med brytande förändringar och vi har därför tagit fram skriptet för att underlätta uppgraderingen med brytande förändringar.

jv-form-group har bytt namn och heter nu jv-fieldset. Komponenten används för att gruppera inmatningsfält, till exempel i en checkboxgrupp eller radioknappar. Namnet är bytt eftersom det nya namnet bättre förklarar vad det är för något.

Alla inmatningsfält samt det utfällbara stycket (accordion) har fått sina storleksnamn justerade. Large heter nu medium och medium heter nu small. Anledningen är att vi ska ha en konsekvent namnsättning. Den storlek som nu heter medium är den mest använda i våra system och tjänster.

Dynamisk sök: Borttagen och ersatt med komponenten sök.

Sökknapp: Borttagen och ersatt med komponenten sök.

Töjbar sök: Borttagen och ersatt med komponenten sök.

Felrättningar

Dynamisk hjälptext: Knappen för hjälptext, , det vill säga det lilla frågetecknet, är förändrad så att även det ser inaktivt ut när inmatningsfältet är inaktivt. Det är också justerat så att fokus hamnar på knappen när hjälptexten stängs. Hjälptexten fungerar nu också bättre på apple-enheter. Hjälptexten läses nu även upp bättre med skärmläsarverktyget NVDA.

Typografin: Marginalerna i H1, H2, H3, H4, H5, H6. lead (ingress) och p (stycke) är justerade. I vissa fall har marginalen ökat och i vissa fall minskat för att förbättra läsbarheten för användarna.

Textyta: När textytan inte är redigeringsbar syntes tidigare en ram runt textytan. De ramen är nu borttagen.

Sök, datumfält, multiselect, multitext, singleselect, textyta och textfält: I smallvarianter är teckenstorleken minskad något så att alla smallvarianter har samma teckenstorlek.

Nya funktioner i komponenter

Flikar: Varje gång en användare har valt en flik så skickas ett event med information om vilken kan flik användaren har valt.

Textfält och textyta: Det är nu möjligt att dölja den inbyggda teckenräknaren ifall du inte har behov av den i komponenten.

Uppgraderingsskript

Nytt för denna driftsättning är att vi har skapat ett uppgraderingsskript för att underlätta uppgraderingen till version 16.0.20. Viktigt att veta innan man kör skriptet är att du uppgraderat till version 15.4.11 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 16.0.20 i ditt projekt (kolla under rubrik "Installera npm paket" nedan)
  • Ladda ner uppgradersingsskriptet Zip, 2.1 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@16.0.20

Hämta CSS

<link rel="stylesheet" href="https://cdn.jordbruksverket.se/designsystem/16.0.20/package/dist/release/sjv-komponentbibliotek.css" integrity="sha256-3T5KiZnaSfXE0V/P7tQM5PIHTPEgCWbEUbn+uiE4inQ=" crossorigin="anonymous">

Hämta JavaScript

<script src="https://cdn.jordbruksverket.se/designsystem/16.0.20/package/dist/release/sjv-komponentbibliotek.js" integrity="sha256-XFpioY6h8JHLEmIzIbYm4VQriM9ya1Bqx2HhgdlanVQ=" crossorigin="anonymous"></script>

Har du frågor?

Kontakta oss i styleguideteamet om du har frågor. Vi hjälper dig gärna.

Publicerad