🚀 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.

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.

En tid har gått sedan vår senaste release och vi är glada att få dela med oss av lite nya funktioner och buggfixar.

Vårt fokus har den senaste tiden legat kring våra designtokens och dess struktur, vi kommer att behöva stöka lite till innan vi är helt nöjda. Vi ber om ursäkt för röran men vi hoppas kunna leverera ett mer förutsägbart, konsekvent och anpassningsbart komponentbibliotek.

🚀 Nya funktioner​

Tokens​

Under huven hanterar Midas designtokens med ett nytt verktyg vilket har medfört vissa ändringar i namngivningen av våra variabler. Vi påbörjar en utfasning av variablen semantic och theme.css och hänvisar er istället att använda variablen variables och variables.css.

Läs mer under artikeln för Tokens, och notera att artikeln för Färger är utdaterad.

ComboBox​

ComboBox stödjer numer asynkron laddning, se dokumentationen för ComboBox för detaljer hur du implementerar detta.

Menu​

Menu är en ny komponent med ett deklarativt API för kompletterande menyer/kontextmenyer. Vi påbörjar en utfasning av Dropdown som ersätts av Menu.

🩹 Fixar​

Vi arbetar kontinuerligt med buggfixar, här är några nämnvärda fixar:

• Accordion har fått extra marginal för att tydligare visa sin fokusram vid tangentbordsinteraktion (#780)
• Badge har fått en ny bakgrundsfärg i mörkt läge för att klara krav på färgkontraster (f40f2dad67)
• Layout visar aktivt menyval för appar som använder en annan basepath än / (4dec0a45ef)
• ListBox och relaterade komponenter/typer ingår igen i komponentbiblioteket (1f06b98610)
• TextAreas storlek är nu justerbar (6d04e25308)
• TextField kallar inte längre på events så som onBlur fler gånger än nödvändigt (#769)

Den här releasen innehåller en del större förändringar under huven. Vi har separerat vårt tema/css från komponenterna för att göra det mer flexibelt och för att kunna erbjuda fler anpassningsmöjligheter i framtiden.

💥 Breaking Changes​

CSS/Styles är nu tillgängliga från import '@midas-ds/components/default.css' eller via @midas-ds/theme-paketet. Läs mer på instruktioner för att komma igång.

⬆️ Migrationsguide​

För att uppgradera från version 12 till 13 behöver du uppdatera hur du importerar CSS-filerna.

Tidigare importerades CSS direkt från komponentpaketet. Nu måste du istället importera en global stilmall.

Gör så här:

1. Ta bort alla CSS-importer från @midas-ds/components som du har i din applikation.
2. Lägg till en ny import i din huvudsakliga App komponent eller motsvarande:

import '@midas-ds/components/default.css'

Denna import innehåller allt du behöver för att komma igång. Om du istället vill importera olika delar av Midas stilar kan du använda @midas-ds/theme:

npm install @midas-ds/theme

import '@midas-ds/theme/fonts.css'
import '@midas-ds/theme/variables.css'
import '@midas-ds/theme/color-scheme.css'

🚀 Nya funktioner​

• components: Ikonfärgen för feedback-status har ändrats till --midas-icon-primary.
• theme: Signal-färgerna har uppdaterats.

🩹 Fixar​

• textfield: Inbyggda (native) attribut har lagts till för textfield och textarea.
• table: Korrekt bakgrundsfärg används nu för rader i tabellen.
• layout: Hash har tagits bort från main role querySelector.

🏭 Refactoring​

• Temat har helt separerats från komponentprojektet och ligger nu i ett eget paket.
• Style dictionary build-skriptet har refaktorerats till en nx executor.

🐣 Support för Tanstack Table​

Vi introducerar ett nytt paket @midas-ds/table-styles för att hjälpa till med styling för utvecklare som använder Tanstack Table. Läs mer på instruktioner för Tanstack Table. Det är en css-fil i tidig version som vi hoppas kunna bygga mer på som ett stöd för de utvecklare som vill komma åt mer avancerade tabellfunktioner än vad som ingår i Midas-table.

Den här releasen innehåller mestadels mindre justeringar och buggfixar. Vi har även passat på att introducera ett nytt paket för styling av datumväljare.

💅 Nytt CSS-paket för react-datepicker​

Vi introducerar ett nytt paket, @midas-ds/datepicker-styles, för att hjälpa till med styling av react-datepicker. Detta är ett renodlat CSS-paket och är i ett tidigt beta-stadie. Vi uppmuntrar er att testa det och ge oss feedback.

♿️ Tillgänglighet​

Vi har gjort en större genomgång av hur våra komponenter presenteras i Windows högkontrastläge (CSS forced-colors). Detta innebär att komponenterna nu ska ha ett betydligt bättre utseende och vara mer användbara för personer som använder detta läge.

💥 Breaking Changes​

• theme: Vår token för transition har bytt namn från transitions till transition för att vara mer konsekvent.

🚀 Nya funktioner​

• theme: Vi har uppdaterat vårt tema för att följa den nya Design Token Community Group (DTCG) standarden, vilket gör det enklare att återanvända våra design tokens.
• button: Knappar har fått ett utökat :not-condition för att bättre hantera pressed state.
• button: Vi har förhindrat att bakgrunden på en knapp ändras när den är nedtryckt och har aria-expanded, vilket ger en mer konsekvent användarupplevelse.
• heading: Nu kan du använda en flagga för att styra om en rubrik ska ha inbyggda marginaler eller inte.
• theme: Vi har lagt till nya variabler för spacing för att ge mer flexibilitet i layouten.
• modal: Det är nu möjligt att dölja stängningsknappen i en modal.
• modal: Du kan nu skicka med en egen className till en modal för att anpassa stilen.
• datepicker-styles: Vi har skapat ett nytt paket, @midas-ds/datepicker-styles, för att enkelt kunna styla react-datepicker.

🩹 Fixar​

• core: Vi har förbättrat hur våra komponenter ser ut i forced-colors-mode för bättre tillgänglighet.
• info-banner: Vi har åtgärdat en bugg som gjorde att useEffect kördes två gånger i strict mode.
• theme: Vi har justerat storleken på line-height-100 och font-size-70 för att vara mer konsekventa.
• storybook: Vi har fixat ett stavfel i en bakgrundsväljare i Storybook.
• core: Vi har lagt till en clsx-wrapper för att bättre hantera klassnamn från React Aria.
• modal: En modal kan nu hantera open-state som en kontrollerad komponent.
• progress-bar: Skärmläsare kan nu läsa av valueLabels för en progress-bar.
• accordion-item: Vi har löst en bugg som påverkade tangentbordsfokus, animeringar och hover-effekter i accordion-item.
• accordion: Vi har ökat specificiteten i CSS för knappar i ett accordion för att undvika stilkonflikter.
• menu: Vi har exporterat MenuTrigger så att den kan användas direkt.
• list-box: Rubriken i en list-box-sektion har nu rätt färg.
• popover: Vi har justerat storleken på popovers för att de ska se bättre ut.
• theme: README- och CHANGELOG-filerna inkluderas nu korrekt i vårt tema-paket.
• popover: Vi har förhindrat att texten i en popover bryts för tidigt.
• table-styles: Vi har tagit bort onödiga release-inställningar för table-styles.
• table-styles: Vi har uppdaterat Vite-konfigurationen för table-styles för att inkludera readme och tspaths.

🏭 Refactoring​

• theme: Vi har brutit ut knapp-specifika design tokens från object-values.json till en egen fil för bättre struktur.

Den här releasen innehåller en helt ny select-komponent, baserad på React Aria Components. Vi har även passat på att göra en hel del mindre justeringar och buggfixar. Vi har släppt ett par mindre versioner sedan senaste major-versionen, men dessa release notes reflekterar allt som har hänt sedan dess.

🚀 Ny select-komponent​

Vi har ersatt vår gamla select-komponent med en helt ny, baserad på React Aria Components (RAC). Detta ger oss en mer robust och tillgänglig komponent, med bättre prestanda och fler funktioner. Den nya komponenten har stöd för sektioner, sökning, och multi-select med taggar.

💥 Breaking Changes​

• select: Vår select-komponent är helt omskriven och baserad på React Aria Components. Detta innebär ett helt nytt API. Se dokumentationen för mer information om hur du använder den nya komponenten.

🔄 Migrering​

Om du använder vår Select-komponent i ditt projekt, finns det två vägar att gå vid uppgradering till v15.0.0:

1. Uppdatera till den nya komponenten (rekommenderas): Vi rekommenderar att du uppdaterar din implementation för att använda den nya, React Aria Components-baserade Select-komponenten. Detta ger dig tillgång till den senaste funktionaliteten, bättre prestanda och förbättrad tillgänglighet. Se dokumentationen för mer information om hur du använder den nya komponenten.

2. Använd den gamla komponenten: Om du inte har möjlighet att uppdatera din implementation just nu, kan du fortsätta använda den gamla komponenten genom att byta importen från Select till LegacySelect. Din befintliga kod kommer då att fungera som tidigare.

   import { LegacySelect } from '@midas-ds/components'
   

✨ Select-komponenten​

Den nya select-komponenten, baserad på React Aria Components, har nu stöd för samma funktioner som den tidigare versionen. Detta inkluderar:

• Stöd för sektioner med rubriker.
• Förbättrad styling för multi-select med taggar.
• Möjlighet att visa valda värden som taggar.
• Bättre hantering av fokus och tangentbordsnavigering.
• Stöd för att visa en popover med mer information om ett val.

🚀 Nya funktioner​

• spinner: Färgen på en spinner är nu som standard icon-tertiary. Property isOnColor är deprecated.
• accordion: Förbättrat stöd för animationer i samtliga webbläsare.
• datepicker-styles: Förbättrad styling av pilar för att byta månad.
• date-picker: En rad förbättringar av vår datepicker:
  • Stöd för "forced colors" i Windows.
  • Medium-storlek.
  • Dagar utanför aktuell månad är nu dolda.
  • Hover-effekter.

🩹 Fixar​

• tabs: Visningen av horisontella och vertikala tabbar är korrigerad.
• list-box: Justeringar av styling för sektionsrubriker.
• tag: Synligt tangentbordsfokus för alla taggar.
• field-error: Marginaler för ARIA-dolda syskon är borttagna.
• theme: Enheter har lagts till för panel-övergångar, vilket löser en bugg med trasiga animationer.
• calendar: Korrekt styling för dagar utanför aktuell månad.
• textfield: Dubletter av prop-definitioner har tagits bort.
• select: Justering av styling för "select all".

📖 Dokumentation​

• select: Dokumentationen för select-komponenten är helt omskriven för att matcha den nya komponenten.
• spinner: Dokumentationen för spinner är uppdaterad med nya props.
• date-picker: En rad förbättringar av dokumentationen för datepicker.
• generellt: En rad mindre justeringar och förbättringar av dokumentationen.

Den här releasen innehåller stöd för read-only state i ett stort antal komponenter. Detta gör det lättare att visa formulärfält som är synliga men inte redigerbara, med tydlig visuell indikation.

🚀 Nya funktioner​

• theme: Nya färgtokens för read-only state har lagts till i temat.
• read-only state: Stöd för read-only state med anpassad styling har lagts till i följande komponenter: textfield, combobox, radio, checkbox, date-field, date-picker, calendar, text och label.

🩹 Fixar​

• checkbox: Korrekt ikon för indeterminate state och refaktorerad styling.

🔧 Refactor​

• textfield: Data-attribut har flyttats från template till CSS.
• date-field: Data-attribut har flyttats från template till CSS.
• theme: Read-only border color token har justerats.

🚀 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