Version 19.0.53 samt inbjudan till utbildning

Den här versionen är brytande och innehåller flera förändrade och rättade komponenter samt ett helt nytt layoutsystem. Det finns ett script som underlättar uppgraderingen. Du kan också anmäla dig till en utbildning i att använda layoutsystemet. Varmt välkommen!

Utbildning i att använda det nya layoutsystemet

Den 2 maj klockan 13-15 är du välkommen att delta i en utbilding i att använda layousystemet. Passa på att lära dig mer så att startsträckan till att använda det blir kortare. Utbildningen passar dig som jobbar med frontendutveckling eller design.

Anmälan till utbildningen

Nytt och förändrat

Nya varianter av komponenter

• Radioknappar: Nu finns en variant av radioknappar med större klickyta. Har du utrymme att använda den så är den här varianten bättre för användaren. Varianten heter "Bullet radioknapp".

• Knappar: Nu finns varianter av knappar som är anpassade för att användas mot en mörk bakgrund.

Förändrade komponenter och ny funktionalitet

• Knappar: Alla knappar har fått en ny design, bland annat för att få en bättre kontrast och därmed förbättra för användarna.
• Länkar: Stilen på hover och fokus har förändrats, bland annat för att att det ska bli mer enhetligt med andra komponenter.
• Multi-select: Den expanderbara ytan, det vill säga den ytan som öppnas upp när man klickar på komponenten, har ändrats så att höjden på ytan anpassas utifrån innehållet. Tidigare var det en fast höjd.
• Klasser: Styleguiden har vissa CSS-regler som slår på html-element. De var tidigare svåra att överskrida. Nu har vi lagt till nya regler så att du kan överskrida dem men en egen CSS-klass.

Brytande förändringar

• Sidhuvud: Komponenten har anpassats till det nya layoutsystemet.
• Checkboxar: Ikonen för markeringen är uppdaterad. Det här är enbart en brytande förändring för dig som använder html-komponenten och inte webbkomponenten
• Single-select: Nu är single-select en egen webbkomponent. Tidigare var det en webbkomponent ihop med textyta och textfält.
  
• Modalt fönster och bekräftameddelande: Du behöver ersätta klassen modal-close-btn till mb-0. Detta gäller dig som använder html-komponent och inte webbkomponenten.
• Informationsmeddelande: Du behöver lägga in css-klassen c-banner-p i alla paragrafer för att det ska bli samma utseende som tidigare.
• CSS-klasser som har ändrats i tabeller:
  • Från c-responsive-table-container till c-table--responsive-container
  • Från inline-header till c-table__header--col
  • Från full-width-header till c-table__header--fullwidth

Layoutsystem

Layoutsystemet är ersatt med ett nytt system där vi utgår från små skärmar, det vill säga "mobile first". I det nya systemet kombinerar vi tekniker som flexbox och grid-css för att göra det flexibelt och lättare att använda. Till alla klasser i det nya layoutsystemet så finns prefix för att kunna justera hur klasserna ska användas på olika skärmstorlekar. Prefixen är:

• utan prefix: från små skärmar och uppåt, det vill säga det slår på alla skärmstorlekar
• md: slår på surfplattor och större skärmstorlekar
• lg: slår bara på stora skärmar.

Anmäl dig till utbildning i att använda layoutsystemet

Felrättningar

• Styleguidens webbkomponenter fungerade inte i Angular 15. Det är tillrättat nu.
• Multi-select: Har man ett förvalt värde i multi-selecten så blev den dirty, det vill säga det såg ut som om en användare ändrat något trots att de inte gjort det. Det är nu tillrättat.

Uppgraderingsskript

Med denna driftsättning finns ett uppgraderingsskript för att underlätta uppgraderingen till version 19.0.53 . Viktigt att veta innan man kör skriptet är att du uppgraderat till version 19.0.53 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 19.0.53 i ditt projekt (kolla under rubrik "Installera npm paket" nedan)
• Ladda ner uppgradersingsskriptet Zip, 2.4 kB.
• unzippa filen och lägg i rotmappen av ditt projekt
• För att köra skriptet skriv följande i en terminal:

Installera npm paket

Hämta CSS

Hämta JavaScript