Version 20.0.45

Version 20.0.45 innehåller många brytande förändringar, bland annat för knappar, sidpanelen och bifoga fil. Flera gamla javascript-komponenter är också borttagna. Versionen innehåller ett nytt mörkt sidhuvud för interna system samt några felrättningar. För den här versionen finns ett uppgraderingsscript som underlättar din uppgradering.

Nytt och förändrat

Nya varianter av komponenter

• Sidhuvud: Sidhuvudet för interna system finns nu i en mörk variant. Det är den mörka varianten som vi ska använda för interna system så den tidigare variantern kommer på sikt att tas bort från styleguiden.

Felrättningar

• Single-select: Tidigare kunde man få flera felmeddelanden i Angular och det gick inte att lägga till ett förvalt värde. Det är rättat nu.
  
• Flikar: Tidigare gick det inte alltid att lägga till eller ta bort en flik i Angular. Det är rättat nu.

Brytande förändringar

• Knappar:
  • Textknappen är borttagen.
  • Knappstorleken large är borttagen, ersatt av medium varianten.
  • Knapptorleken kompakt är tillagd. Det är en variant av medium men med mindre padding.
  • Utseenden på knapparna är också något förändrat. Skillnaderna märks främst när man hovrar eller fokuserar knapparna.
  • Tidigare tog knapparna hela skärmbredden på små skärmar. Nu behåller knapparna sin bredd, men du kan ändra så att knappen tar hela skärmbredden ifall designern har valt det mönstret, lägg till klass "c-btn--maxwidth" för att knappar ska ta fullbredd i små skärmstorlekar.
  • Knappar på mörkbakgrund behöver du lägga till klassen "c-btn--dark".
• Sidpanel:
  • Sidpanelen har blivit något mindre
  • Sidtiteln är förändrat så att den ska vara tydligare att läsa.
  • Tidigare ändrades utseendet på mindre skärmstorlekar men nu är utseendet samma oberoende av skärmstorlek.
• Utfällbart stycke (Accordion): Version jv-accordion-v1 är borttagen. Nu finns enbart version jv-accordion.
• Bifoga fil: Tidigare var det ibland problem att använda komponenten i Angular. Det är rättat nu..
• Layoutsystemet: Namnet på vissa klasser är förändrade. Följande CSS klasser är ändrade:
  • l-flex-wrap -> l-flex--wrap
  • l-flex-nowrap -> l-flex--nowrap
  • l-align--top -> l-align-top
  • l-align--middle -> l-align-middle
  • l-align--bottom -> l-align-bottom
  • l-align--baseline -> l-align-baseline
  • l-align--stretch -> l-align-stretch
  • l-align-self--top -> l-align-self-top
  • l-align-self--bottom -> l-align-self-bottom
  • l-align-self--middle -> l-align-self-middle
  • l-align-self--baseline -> l-align-self-baseline
  • l-align-self--stretch -> l-align-self-stretch
  • l-align--left -> l-align-left
  • l-align--right -> l-align-right
  • l-align--center -> l-align-center
  • l-align--space-between -> l-align-space-between
  • l-align--space-around -> l-align-space-around
  • l-align--space-evenly -> l-align-space-evenly
  • l-align-self--left -> l-align-self-left
  • l-align-self--right -> l-align-self-right
  • l-align-self--center -> l-align-self-center
  • l-align-self--stretch -> l-align-self-stretch
• Vertikal meny: Det finns nu en obligatorisk CSS-klass på UL-elementet och en på LI-elementet som ska göra det enklare att skriva över styleguidens CSS.
  • c-vertical-menu__list - på UL-elementet
  • c-vertical-menu__list-item - på alla LI-element
• Objektlistan: Det finns nu en obligatorisk CSS-klass på UL-elementet och en på LI-elementet som ska göra det enklare att skriva över styleguidens CSS.
  • c-objectlist__list - på UL-elementet
  • c-objectlist__list-item - på alla LI-element
• Checkboxar: Designen är justerad så att den ska bli tydligare för användaren.

Gamla javascript-komponenterär borttagna

Alla gamla javascriptkomponenter, som inte är webbkomponenter, är borttagna. Här kan du se vilka de gamla komponenterna är och hur du kan söka efter dem i din kod:

• Flikar, sök efter rel="c-tabs-js"
• Modal, sök efter rel="c-modal-js"
• Multi-select, sök efter rel="c-multiselect-js"
• Multitext, sök efter rel="c-multitext-js"
• Sökknapp, sök efter rel="c-search-button-js"
• Sök, sök efter rel="c-stretched-search-js" i din kod
• Sidpanel, sök efter rel="c-left-sidpanel-js" och rel="c-right-sidpanel-js"
• Texträknare, sök efter rel="c-text-counter-js"

Uppgraderingsskript

Med denna driftsättning finns ett uppgraderingsskript för att underlätta uppgraderingen till version 20.0.45 . Viktigt att veta innan man kör skriptet är att du uppgraderat till version 19.8.6 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 20.0.45 i ditt projekt (kolla under rubrik "Installera npm paket" nedan)
• Ladda ner uppgradersingsskriptet Zip, 2.8 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

Npm paket med rättning av multi-select

Finns en visuell bug på multi-select komponenten i 20.0.45 versionen, en rättning finns i versionen 20.0.47 men finns endast som npm paket.

Hämta CSS

Hämta JavaScript