I den här releasen har vi fokuserat på att förbättra den övergripande upplevelsen av vårt komponentbibliotek. Vi har infört nya funktioner, fixat buggar och gjort några viktiga ändringar som kommer att påverka hur du använder våra komponenter. Läs vidare för att få veta mer om vad som är nytt i version 12.0.0.

🚀 Nya funktioner och förbättringar​

Vi har lagt till flera nya funktioner för att göra våra komponenter mer flexibla och kraftfulla. Du kan nu:

• Använda fler statusar i Accordion: Vi har lagt till möjligheten att visa fler statusar i vår Accordion-komponent, vilket ger dig mer flexibilitet att kommunicera olika tillstånd till dina användare.
• Anpassa ikoner i Dropdown: Du kan nu lägga till anpassade ikoner i vår Dropdown-komponent, vilket gör det enklare att skapa ett konsekvent och visuellt tilltalande gränssnitt.
• Kontrollera tillståndet i InfoBanner: Vi har infört ett kontrollerat tillstånd för vår InfoBanner-komponent, vilket ger dig mer kontroll över när och hur den visas.
• Virtualiserad tabell: Vi har lagt till ett recept för en virtualiserad tabell, vilket gör det möjligt att visa större datamängder utan att kompromissa med prestandan.
• Exportera tokens som CS: Vi har implementerat export av våra tokens som CSS vilket gör det enklare att anpassa utseendet på dina komponenter och säkerställa att din CSS är giltig.
• Titel i Modal: Vi har flyttat titeln i vår Modal-komponent till sidhuvudet och ändrat den till en h2-rubrik. Vi har också tagit bort marginalen och centrerat den vertikalt för att skapa en mer balanserad och visuellt tilltalande design.

⚠️ Breaking Changes​

Den här versionen innehåller några viktiga ändringar som kan kräva att du uppdaterar din kod. Vi har gjort dessa ändringar för att förbättra den övergripande kvaliteten och konsekvensen i vårt komponentbibliotek.

• Borttagning av funktioner som varit deprecated: Vi har tagit bort ett antal funktioner, props och typer som tidigare har varit markerade som deprecated. Detta är en del av vårt kontinuerliga arbete med att hålla vårt API rent och konsekvent. De borttagna funktionerna är:
  • BreadcrumbProps (använd BreadcrumbsProps istället)
  • ComboBoxSelection (använd ComboBoxSection istället)
  • Item och Section från combobox/types.ts (använd ListBoxItemElement och ListBoxSectionElement istället)
  • Flex från grid (använd Grid istället)
  • fluid från GridProps (använd isContained istället)
  • FlexItem från grid (använd GridItem istället)
  • col från GridItemProps (använd size istället)
  • dismissable från InfoBannerProps (använd isDismissable istället)
  • narrow från TableProps (använd size istället)
  • tabs och label från TabsProps (använd det deklarativa API:et med TabList och TabPanel istället)
  • Option, OptionItem, OptionSection från select/types.ts (använd ListBoxOption, ListBoxItemElement, ListBoxSectionElement istället)
  • fieldSkeleton och buttonBackgroundSkeleton från theme/tokens.ts (använd skeleton01 istället)
• Ändrade ikoner för FeedbackStatus: Vi har ändrat ikonerna för FeedbackStatus i våra komponenter för att skapa ett mer konsekvent mönster. Om du använder type ('success'|'info'|'warning'|'important') kommer strängen default inte längre att vara tillgänglig.

Vi förstår att dessa ändringar kan orsaka visst besvär, men vi är övertygade om att de kommer att leda till en bättre och mer konsekvent upplevelse för alla som använder vårt komponentbibliotek.

Se alla förändringar i detalj på changelog.

🚀 Features​

• file-upload: Komponenten FileUpload är borttagen och ersatt av FileTrigger från React Aria. Detta innebär att API:et för komponenten nu är i linje med React Aria. Se dokumentationen för mer information om hur du använder den nya komponenten.
• theme: Nya tokens för badge-background har lagts till.

🩹 Fixes​

• link: En bugg har fixats som gjorde att länkar med target='_blank' inte öppnades i ett nytt fönster.
• popover: En bugg har fixats som gjorde att långa strängar kunde flöda över i en popover.
• theme: Färger för "danger button" i dark mode har justerats.

📖 Documentation changes​

• Ett felaktigt tsx-exempel har korrigerats.

🔧 Maintenance​

• Beroenden har uppdaterats.

⚠️ Breaking Changes​

• file-upload: Komponenten FileUpload är borttagen och ersatt av FileTrigger. Detta är en "breaking change" och kräver att du uppdaterar din kod. Se dokumentationen för file-upload för mer information.

🚀 Nya funktioner​

Tabs exporterar nu samtliga Tab-komponenter från React Aria så att komponenten enklare kan anpassas och stämmer bättre med ursprungligt API,

• tabs: refactor tabs to support declarative children structure (#678)

🩹 Fixar​

Inga hårdkodade strängar för enbart svenska, komponenter går att anpassa efter olika språk. Samtliga komponenter accepterar nu className för att applicera egen css.

• add translations for all text strings (#689)
• breadcrumbs: 💄 accept custom className (#683)
• calendar: in range states (3b7bcd03da)
• calendar: change text color token for dates in range (1656d6d7a1)
• checkbox: 💄 accept custom className (#684)
• checkbox: add margin-bottom to checkboxgroup-items [run-chromatic] (0637fd9a5d)
• color-scheme-switch: 💄 accept custom className (#685)
• file-upload: 💄 accept custom className (#686)
• layout: 💄 accept custom className (#687)
• radio: 💄 accept custom className (#688)
• search-field: 💄 accept custom className (#690)
• spinner: 💄 accept custom className (#691)
• theme: new tokens for calendar date states (0f819928d0)
• theme: change dark mode color on calendarBackgroundInRange (d745cb2adf)
• toast: 💄 accept custom className (#692)

Nya funktioner ✨​

• Popover: Ny komponent, se dokumentation för Popover

Fixar 💉​

• Combobox: Markerar föregående värde vid musklick
• Storybook: Felaktiga tillgänglighetsbrister rapporteras inte längre i dark mode

Nya funktioner ✨​

• Skeleton: har en ny prop isOnLayer01 för användning på alternativ bakgrund.
  • Vi påbörjar utfasning av tokens fieldSkeleton och buttonBackgroundSkeleton, vad god använd skeleton01 istället.
• Grid: Grid har ett nytt API med bland annat responsiva brytpunkter, läs mer under dokumentation för Grid.
  • Vi påbörjar utfasning av fluid, vad god använd isContained istället.
  • Vi påbörjar utfasning av Flex, vad god använd Grid istället.
  • Vi påbörjar utfasning av col propen för GridItem, vad god använd size istället.
  • Vi påbörjar utfasning av FlexItem, vad god använd GridItem istället.
• Table: har en ny prop size
  • Vi påbörjar utfasning av narrow, vad god använd size istället.
• Calendar: har nu stöd för disabled state
• bundle: Vi delar nu upp vår bundle i mindre "chunks" för att reducera storleken på appar som använder enstaka Midaskomponenter.

Fixar 💉​

• Radio, Calendar Vi hanterar nu css syntax errors for media queries
• Calendar Felaktig färg för dag-knapp åtgärdad
• TextField: Radera height:100%

Kosmetika 🎨​

• LinkButton: Byter ut Chevron-ikon till Arrow-ikon
• Table: Uppdaterar marginaler och utfyllnad

Fixar 💉​

• Felaktig token som orsakade fel vid hover av Button är ersatt.
• Prestandaproblem vid stora datamängder i ComboBox är åtgärdat.
• Tillgänglighetsproblem vid användning av sektioner i ComboBox och Select är åtgärdat.
• Visuell bugg åtgärdad i DatePicker.
• Link visar nu ikoner vid användning av target="_blank" och download
• LinkButton har nu stöd för size="medium".

Nya funktioner ✨​

• Accordion har en ny prop hasBackground
• Select använder Virtualizer för förbättrad prestanda när det finns många val. Select tillåter numera att id är Key alltså string | number. Delvis ny style eftersom select nu använder checkbox från Midas.
• Tag exporteras som en separat komponent

Fixar 💉​

• RadioGroup tillåter nu bara klick på label, inte utanför.
• Skeleton tillåter att className skrivs över.
• LinkButton har nu korrekt styles för isDisabled.

Nya funktioner​

I och med version 10.0 introducerar vi en ny storlek på en rad komponenter, medium. Komponenter som berörs och numera kan användas i både size='large' och size='medium' är:

• Button
• TextField
• SearchField
• ComboBox
• DatePicker
• DateField
• Select

Default size är 'large' i samtliga fall. large innebär att inputfältet är 48px högt medan medium är 40px, för ett mer kompakt utseende.