Version 23.0.20
Version 23.0.20 innehåller en del brytande förändringar tillföljd av de prestanda förbättringar vi gjort.
Nytt och förändrat
Uppdaterat dokumentationen för varje komponent som har ikoner att man behöver lägga in ikon biblioteket för att komponenterna ska fungera korrekt.
Brytande
Vi har struktuerat om den globala CSS:en och flyttat CSS för komponenterna till respektive komponent detta för att den snabbare ska gå att läsa in och för att slippa läsa in all CSS för komponenterna. Istället laddas CSS:en in för varje komponent endast om den används. Konsekvensen är att alla komponenter förutom knappar och länkar är numera webbkomponenter och går inte att använda som bara CSS och HTML.
Detta är alla komponenter som numera endast fungerar som webbkomponenter och behöver bytas ut:
- Sidhuvud (header) Länk till annan webbplats.
- Datatabell (data table) Länk till annan webbplats.
- Informationstabell (table) Länk till annan webbplats.
- Toaster Länk till annan webbplats.
Övriga brytande förändringar
- Nytt namn på klassen e-html-no-classes använd istället e-html
- klassen e-html--no-margin är borttagen.
- Single-select: Länk till annan webbplats. Vi har tagit bort propertyn selected-value på komponenten för den fungerade inte alltid för att sätta förvalt värde i Angular, vi rekommenderar att sätta selected på option elementet istället för att sätta förvalt värde.
Felrättningar
- Sidhuvud: Länk till annan webbplats. Det var tidigare felaktig html kod i alla exempel på sidhuvud för externa tjänster, detta är nu åtgärdat.
- Multi-select: Länk till annan webbplats.
- Tidigare fanns det en padding runt listan med valda alternativ även om inget var valt, detta är nu fixat.
- Om man använde komponenten med ngModel och Signals i Angular så funkade välja alternativ, detta är nu åtgärdat.
- Datatabell: Länk till annan webbplats. Om man har knappar eller länkar inut i komponenten så hamnade inte alltid på samma nivå som resten av innehållet, detta är nu fixat.
- Single-select: Länk till annan webbplats. Hade man ett valt alternativ med långt namn hamnde ikonen framför texten vilket nu är åtgärdat.
På gång i styleguiden
Vi kollar på en ny komponent för att visa statusar, med färger och symboler som ska kunna gå att kombinera beroende på behov.
Uppgraderingsskript
Med denna driftsättning finns ett uppgraderingsskript för att underlätta uppgraderingen till version 23.0.20 . Viktigt att veta innan man kör skriptet är att du uppgraderat till version 22.9.10 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 23.0.20 i ditt projekt (kolla under rubrik "Installera npm paket" nedan)
- Ladda ner uppgradersingsskriptet zip, 2 kB.
- unzippa filen och lägg i rotmappen av ditt projekt
- Behöver installera fs-readdir-recursive för att köra uppgraderingsskriptet om du inte redan har det installerat:
npm install --save-dev fs-readdir-recursive - För att köra skriptet skriv följande i en terminal:
node upgrade.jsInstallera npm paket
npm install -save --save-exact @sjv/komponentbibliotek@23.0.20Hämta CSS
<link rel="stylesheet" href="https://cdn.jordbruksverket.se/designsystem/23.0.20/package/dist/designsystem/designsystem.css" integrity="sha512-yEyBvffifP+0ARs2mpk4KE2OOGTWmA5Qwdpcrh77MKOF2y3DO4+7mCzjGoCO79LZfoRAdHR/r/Afg8cH6pEboQ==" crossorigin="anonymous">Hämta JavaScript
<script src="https://cdn.jordbruksverket.se/designsystem/23.0.20/package/dist/designsystem/designsystem.esm.js" integrity="sha512-KQnJNLUQ3XJbZJmDNeL8/oxQKxXzGN78qWv+S8IXRC3OWLmsRrUVka77EsdMXiKyS1RXQhoGcT3xLy50lH3B0Q==" crossorigin="anonymous"></script>Publicerad